Rspack | StyleX

Rspack

examples/example-rspack integrates StyleX into Rspack via @stylexjs/unplugin. The plugin compiles StyleX modules and appends the aggregated CSS to the stylesheet emitted by CssExtractRspackPlugin.

Install

npm install --save-dev @stylexjs/unplugin

pnpm add -D @stylexjs/unplugin

yarn add -D @stylexjs/unplugin

bun add -D @stylexjs/unplugin

Rspack configuration

// rspack.config.js
const path = require('path');
const rspack = require('@rspack/core');
const stylex = require('@stylexjs/unplugin').default;

module.exports = {
  entry: { app: path.resolve(__dirname, 'src/main.jsx') },
  plugins: [
    stylex.rspack({
      useCSSLayers: true,
      // ... StyleX configuration
    }),
    new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
  ],
  module: {
    rules: [
      { test: /\.[jt]sx?$/, loader: 'builtin:swc-loader' },
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
      },
    ],
  },
};

CSS entrypoint

Ensure that there is one CSS file that is imported from your root layout component or JS entry point.