GUIDES
Rspack
Add Plumeria to an Rspack project, with one command or by hand.
examples/example-rspack shows how to use @plumeria/unplugin in Rspack.
The plugin compiles Plumeria styles into CSS, with HMR in development.
npx @plumeria/init detects Rspack and writes this setup for you; see @plumeria/init. The rest of this page is the same setup by hand.
Installation
pnpm i -D @plumeria/unpluginUsage
import { rspack } from '@rspack/core';
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
import plumeria from '@plumeria/unplugin';
const isDev = process.env.NODE_ENV === 'development';
export default {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
clean: true,
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: { syntax: 'typescript', tsx: true },
transform: {
react: {
runtime: 'automatic',
development: isDev,
refresh: isDev,
},
},
},
},
},
},
],
},
plugins: [
plumeria.rspack(),
new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
isDev && new ReactRefreshRspackPlugin(),
].filter(Boolean),
devServer: {
hot: true,
port: 3000,
},
};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, in src/ when the project has one or at the application root otherwise:
/// <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.