Installation

Runtime

npm i @plumeria/core

If you are using Next.js, you need to configure next-plugin, and if you are using Vite, you need to configure vite-plugin. You can install the compiler in stages.

Compiler

npm i -D @plumeria/compiler

• npx css
  use swc compile without type-check.

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

• arugment --view
  Display the CSS log that is output during compilation.

• argument --paths
  Display the compile target paths list is output during compilation.

Integration with build

Like Vite and Next, there is no need to compile at the same time as dev.

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

Static Stylesheet

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

import "@plumeria/core/stylesheet.css";

Integration

Plumeira can be integrated with Vite and Next.js.

npm i -D @plumeria/next-plugin

Next.js

Plugin is compiling Server components style and Inject virtual CSS imports for HMR.

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

Vite

Vite is a client-based bundler, so it externalizes fs with plugins.

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