Vite

examples/vite-react shows how to use @plumeria/unplugin in Vite.
It compiles styles into CSS via AST parsing, with HMR support.

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 the same name for TypeScript instead:

import type { Style } from '@plumeria/core';

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      sx?: Style;
    }
    interface SVGAttributes<T> {
      sx?: Style;
    }
  }
}

The styleProp in next.config.ts and the property name in plumeria.d.ts must match. If they disagree, the prop type-checks but is never compiled away.