@plumeria/unplugin

@plumeria/unplugin is a general-purpose bundler plugin for Plumeria.

Installation

npm i -D @plumeria/unplugin

yarn add -D @plumeria/unplugin

pnpm i -D @plumeria/unplugin

Configuration

import plumeria from '@plumeria/unplugin';
export default {
  plugins: [
    plumeria.vite({
      include: ['**/*.{ts,tsx}'],
      exclude: ['**/node_modules/**'],
      devEmitToDisk: false,
      styleProp: 'sx',
    }),
  ],
};

Options

• include: The path to the file to be converted.
• exclude: The path to the file to be excluded from conversion.
• devEmitToDisk: Whether to write styles as actual files (zero-virtual.css) instead of virtual modules in development mode. The default is false.
• styleProp: The JSX prop that carries styles. The default is 'classStyle'.

interface PluginOptions {
  include?: string | RegExp | Array<string | RegExp>;
  exclude?: string | RegExp | Array<string | RegExp>;
  devEmitToDisk?: boolean;
  styleProp?: string;
}

styleProp

Renaming the prop takes two steps, and they have to agree. Tell the plugin:

plumeria.vite({ styleProp: 'sx' });

and declare the same name for TypeScript. @plumeria/core ships no prop declaration of its own, so add one file to your project:

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

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

For the default name, reference the declaration that ships with the package instead:

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

If the two disagree, the prop type-checks but is never compiled away. @plumeria/eslint-plugin reads the same name from settings.plumeria.styleProp.