Set up Master CSS in Webpack, Rspack and Rsbuild

Build Master CSS into a Webpack, Rspack or Rsbuild application. All three use @master/css-webpack: the CSS entry supplies definitions, the plugin generates utility rules, and the HTML plugin links the output to the page. Start from a working application with an entry and an HTML template.

#Installation

1. #Add Master CSS

   In an existing Webpack, Rspack or Rsbuild project, run the installer from the project root with --framework webpack, rspack or rsbuild. Static is the default: it registers the plugin and creates src/index.css.

   npm create @master/css@2.0.0 -- --framework webpack --yes

2. #Import the CSS entry

   The installer creates src/index.css with @import '@master/css';. Import it from the application's JavaScript or TypeScript entry, keeping the existing mount code. Use a global entry so every page that needs these utilities loads it.

   src/index.js

   import './index.css'

3. #Include the HTML template

   If you put the paragraph in a standalone index.html template, include it with @source. The path is relative to src/index.css; adjust it if your HTML plugin uses a different template. Classes in framework components are detected from the module graph.

   src/index.css

   @import '@master/css';@source '../index.html';

4. #Start using Master CSS

   Place the paragraph in your HTML template or framework component, then start the dev server. After editing a standalone template, reload the page once the dev server has rebuilt it.

index.html

<!doctype html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Master CSS with Webpack</title>  </head>  <body>    <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">      Hello World    </p>  </body></html>

A neutral surface, a fine border, small corners and 1rem of padding on every side.

#Bundler configuration

The installer writes the Master CSS part of the configuration. Merge it with the existing configuration, preserving framework plugins, entry points and HTML generation, and register the plugin only once.

#Webpack

The plugin needs native CSS handling and HtmlWebpackPlugin to deliver the generated stylesheet:

import HtmlWebpackPlugin from 'html-webpack-plugin'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  experiments: { css: true },  module: {    rules: [{ test: /\.css$/i, type: 'css/auto' }]  },  plugins: [    new HtmlWebpackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rspack

Rspack uses the same Webpack-compatible plugin with its built-in CSS support and HtmlRspackPlugin:

import { HtmlRspackPlugin } from '@rspack/core'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  module: {    rules: [      {        test: /\.css$/i,        type: 'css/auto'      }    ]  },  plugins: [    new HtmlRspackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rsbuild

Rsbuild registers the plugin through its tools.rspack hook. Keep the framework plugin and the entry that mounts the application; the hook only adds Master CSS processing.

import { defineConfig } from '@rsbuild/core'import MasterCSSPlugin from '@master/css-webpack'export default defineConfig({  tools: {    rspack(config) {      config.plugins ||= []      config.plugins.push(new MasterCSSPlugin({ mode: 'static' }))      return config    }  }})

In a React starter, put the paragraph in src/App.tsx:

export default function App() {  return (    <p id="master-check" className="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">      Hello World    </p>  )}

#Check the setup

First change p-md to p-lg in the source while the dev server is running. The paragraph's padding should grow from 1rem to 1.5rem; then restore it.

Build with the command for your bundler:

Serve the emitted directory with an HTTP server. The paragraph should have 1rem padding, a raised surface and rounded corners. In static mode, its utilities come from linked CSS without a Master CSS runtime. HTML-template content stays styled with JavaScript disabled; a client-rendered framework still needs JavaScript to create its content.

The HTML plugin emits the stylesheet links and any runtime script. A file served directly from a development server's static directory does not receive them. If the CSS request is missing, check HTML generation first. If it loads but has no utilities, check the CSS entry, native CSS handling and plugin registration.

#Choose another rendering mode

Static mode is the default. The plugin's mode option selects another delivery, and the HTML plugin carries its runtime script:

npm create @master/css@2.0.0 -- --framework webpack --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')