GUIDES
Rspack
Add Plumeria to an Rspack project, with one command or by hand.
examples/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
npm i -D @plumeria/unpluginyarn add -D @plumeria/unpluginpnpm 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:
/// <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.