Installation

Runtime

Terminal

npm i @plumeria/core

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

Compiler

Terminal

npm i -D @plumeria/compiler

npx css
compiles without type checking.
argument --type-check
The will include compilation check.
arugment --view
See the CSS log that is output during compilation.
argument --paths
See the compile target paths list is output during compilation.

Integration with build

Next.js recommends generating SSR CSS by compiling with next dev.
In Vite, only the client is referenced, so there is no need to compile at the same time as dev.

package.json

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

Static Stylesheet

Applying a Style Sheet: import @plumeria/core/stylesheet in your application entry point.

import "@plumeria/core/stylesheet"

Integration

Plumeira can be integrated with Vite and Next.js.

Terminal

npm i -D @plumeria/next
# Add <ServerCSS /> for layout.tsx

Next.js

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'
// const { ServerCSS } = require('@plumeria/next'); // next dev --turbo
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <ServerCSS />
      </head> 
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}

Vite

It will display warnings and errors when it is possible to execute the command, but by installing a plugin you can externalize Node.js smartly.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import plumeria from '@plumeria/vite';
 
export default defineConfig({
  plugins: [react(), plumeria()],
});

Installation

Runtime

Compiler

Integration with build

Static Stylesheet

Integration

Next.js

Vite

See more about @plumeria/vite package

See more about @plumeria/next package

On this page