Plumeria logoPlumeria
Getting started

Installation

Installing core

Terminal
npm i -D @plumeria/core

Compiler

Terminal
npm i -D @plumeria/compiler

  • npx css pnpm exec css
    Compile without type-check.

  • arugment --view
    Display the output css log.

  • argument --paths
    Display the project styling paths list.

  • argument --stats
    Display the plumeria css bundle stats info.

  • argument --type-check
    The will include compilation type-check.

Setup

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

Stylesheet

  • Applying a Stylesheet: import @plumeria/core/stylesheet.css in your application entry point.
import "@plumeria/core/stylesheet.css";

Integration

Next.js

Terminal
npm i -D @plumeria/next-plugin

Server components style Inject virtual CSS imports for HMR.

next.config.ts
import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin";
 
const nextConfig: NextConfig = {
  /* config options here */
};
 
export default withPlumeria(nextConfig);

If you are using next@16 or higher, continue using next dev --webpack.

const nextConfig: NextConfig = {
  turbopack: {}
};
 
export default withPlumeria(nextConfig);
"dev": "css & next dev --webpack",

Vite

Terminal
npm i -D @plumeria/vite-plugin

Externalizes fs with plugins.

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()],
});

See more about @plumeria/vite-plugin package

See more about @plumeria/next-plugin package

Edit on GitHub

Previous

Getting started

Next

Recipes

On this page