GUIDES
Rollup
Add Plumeria to a Rollup project, with one command or by hand.
examples/rollup shows how to use @plumeria/unplugin in Rollup.
The plugin compiles Plumeria styles into the CSS asset Rollup produces.
npx @plumeria/init detects Rollup 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/unpluginyarn add -D @plumeria/unpluginpnpm i -D @plumeria/unpluginUsage
import plumeria from '@plumeria/unplugin';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import esbuild from 'rollup-plugin-esbuild';
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.tsx',
output: {
dir: 'dist',
format: 'esm',
},
plugins: [
plumeria.rollup(),
postcss({ extract: true }),
resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('development'),
preventAssignment: true,
}),
esbuild({
include: /\.[jt]sx?$/,
sourceMap: false,
minify: false,
target: 'es2022',
jsx: 'automatic',
}),
],
};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.