Installation

NPM

This page describes installation and compiler settings, and other details.

shell

npm install typedcssx

Compiler Command Setting

Add the compile command to the package.json build command `npx typedcssx --compile`

package.json

  "scripts": {
    "build": "npx typedcssx --compile && next build",
  },

Server Component Preview

If the anchorEnabled argument is false, you will not be able to see the server component styles unless you manually reload the page once, but if it is true, you can collect the server component styles by mimicking the behavior of the a tag and reloading the page when transitioning via Link.
This true behavior remembers the page you clicked once and will not reload it thereafter.

layout.tsx

import { PreviewServerCSS } from 'typedcssx'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <PreviewServerCSS anchorEnabled={true} />
      </head>
      <body>{children}</body>
    </html>
  )
}

Global Style Sheet

If there is a src folder in the root of the app or in the root, the typedcssx-global.css file will be generated there during compilation, load typedcssx-global.css in layout.tsx, which is the root directory of the app.

layout.tsx

import 'styles/typedcssx-global.css'

Supported Node.js

This project has been tested and is confirmed to work with Node.js versions from 18 ~ ^20.
Please you are using one of these versions for optimal compatibility and performance.
@types/node version is ^22.5.4. and typescript version is ^5.4.5.