Vite

examples/vite-react shows how to use @plumeria/unplugin in Vite.
The plugin compiles Plumeria styles into CSS, with HMR in development.

npx @plumeria/init detects Vite and writes this setup for you; see @plumeria/init. The rest of this page is the same setup by hand.

Installation

npm i -D @plumeria/unplugin

yarn add -D @plumeria/unplugin

pnpm i -D @plumeria/unplugin

Usage

import { defineConfig } from 'vite';
import plumeria from '@plumeria/unplugin';

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

plumeria.vite() accepts an options object:

export default defineConfig({
  plugins: [
    plumeria.vite({
      include: ['./src/**/*.{ts,tsx}'],
      exclude: ['**/node_modules/**'],
      styleProp: 'sx',
    }),
  ],
});

• include — The path to the file to be converted.
• exclude — The path to the file to be excluded from conversion.
• styleProp — The JSX prop that carries styles. The default is 'classStyle'.

These are the options a project usually sets. devEmitToDisk writes the stylesheet to disk in development, and withoutLogicalProperties / withoutPhysicalProperties reject one spelling of a property that carries both names, so the pair cannot be written; see @plumeria/unplugin for every option and its type.

plumeria.d.ts

@plumeria/core ships no prop declaration of its own, so name the styling prop your project compiles with.

For the default name (classStyle), reference the declaration that ships with the package:

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

If you set a custom styleProp (such as 'sx'), declare that name instead, and keep it the same as the one in vite.config.ts; see Declaring the styling prop.