esbuild

examples/esbuild shows how to use @plumeria/unplugin in esbuild.
The plugin compiles Plumeria styles into the CSS asset esbuild produces.

npx @plumeria/init detects esbuild 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 esbuild from 'esbuild';
import plumeria from '@plumeria/unplugin';

esbuild
  .build({
    entryPoints: ['src/index.tsx'],
    bundle: true,
    outfile: 'dist/bundle.js',
    plugins: [
      plumeria.esbuild({
        include: /\.[jt]sx?$/,
      }),
    ],
    loader: {
      '.tsx': 'tsx',
      '.ts': 'ts',
    },
    format: 'esm',
    minify: false,
  })
  .catch(() => process.exit(1));

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 passed to the plugin; see Declaring the styling prop.