Installation

One command

npx @plumeria/init reads the project, asks what it cannot read, and writes the rest: the packages, the bundler plugin, plumeria.d.ts and the ESLint config.

npx @plumeria/init

It shows the plan before it writes anything, and --dry-run stops at the plan. See @plumeria/init for every question it asks and every file it touches. The rest of this page shows the setup by hand.

Installing core

The core package is type definitions only. No bundle or runtime is included.

pnpm i -D @plumeria/core

plumeria.d.ts

@plumeria/core ships no prop declaration of its own. In src/ when the project has one, or at the application root otherwise, reference the one for the default classStyle prop:

/// <reference types="@plumeria/core/class-style" />

To use another name, see Declaring the styling prop.

ESLint is optional. Skip to your bundler: Next.js / Vite

ESLint Setup

Install the plugin:

pnpm i -D @plumeria/eslint-plugin

@plumeria/eslint-plugin sorts and formats style properties and reports invalid values and selectors. The plugin reference lists every rule.

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
import plumeria from '@plumeria/eslint-plugin';

export default defineConfig(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  plumeria.configs.recommended,
);

The bundler plugins lint the build with these rules by default, so a style error or warning stops it with no setup. On esbuild and Bun, put plumeria-lint -- in front of the build command instead. If you renamed the styling prop to sx, use plumeria-lint --style-prop sx -- before the build command.

Integration

Add the plugin for your bundler.

Next.js

pnpm i -D @plumeria/next-plugin

It works with both Turbopack and Webpack.

The plugin updates the stylesheet when your source files change, including when Next.js reuses its build cache. There is no need to install rimraf or delete .next before running dev or build.

import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin";

const nextConfig: NextConfig = {
  /* config options here */
};

export default withPlumeria(nextConfig);

Vite

pnpm i -D @plumeria/unplugin

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import plumeria from '@plumeria/unplugin';

export default defineConfig({
  plugins: [react(), plumeria.vite()],
});