📗 Quick Start

Installation

shell

npm install --save @plumeria/core

At this point you can start writing your styles.
If you like plumeria's dev:runtime, such as hot reloading, You can set up the compiler in stages.

Compiler

shell

npm install --save-dev @plumeria/compiler

npx css compiles without type checking. Adding the argument --type-check will include compilation checking using TypeScript. You can also add the --log argument to see the CSS log that is output during compilation. It is recommended to generating server-side static CSS with a faster compile In parallel next dev.

package.json

  "scripts": {
    "dev": "css & next dev",
    "build": "css --type-check && next build",
  }

Integration

you need to configure it in your configuration file.

npm install --save @plumeria/next
# Add <ServerCSS /> for layout.tsx

Server component

You can statically preview a Next.js's ServerComponent using <ServerCSS \>.
This ServerCSS is a headless component and is not included in the production environment.

layout.tsx

import { ServerCSS } from '@plumeria/next'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <ServerCSS />
      </head> 
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}

See more about ServerCSS

Linting

Uses the community-made eslint-plugin-object-css.

shell

npm install --save-dev eslint-plugin-object-css

eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import objectCss from 'eslint-plugin-object-css';
 
const eslintConfig = tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strict,
  objectCss.flatConfigs.recommended,
 
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
  }
);
 
export default eslintConfig;

📗 Quick Start

Installation

Compiler

Integration

Server component

More

See more about ServerCSS

Linting

On this page