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 is the same setup by hand.

Installing core

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

npm i -D @plumeria/core

yarn add -D @plumeria/core

pnpm i -D @plumeria/core

plumeria.d.ts

@plumeria/core ships no prop declaration of its own. At the application root, 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

@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 stops it with no setup. On esbuild and Bun, put plumeria-lint -- in front of the build command instead, and add --style-prop if the styling prop was renamed.

Install the plugin, plus rimraf for Next.js:

npm i -D @plumeria/eslint-plugin rimraf

yarn add -D @plumeria/eslint-plugin rimraf

pnpm i -D @plumeria/eslint-plugin rimraf

On Next.js, clearing the build cache before dev and build keeps a version change from being read as a compile error:

  "scripts": {
    "predev": "rimraf .next",
    "prebuild": "rimraf .next",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
  },

Integration

Add the plugin for your bundler.

Next.js

npm i -D @plumeria/next-plugin

yarn add -D @plumeria/next-plugin

pnpm add -D @plumeria/next-plugin

It works with both Turbopack and Webpack.

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

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

export default withPlumeria(nextConfig);

Vite

npm i -D @plumeria/unplugin

yarn add -D @plumeria/unplugin

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