CSS Minimizer Plugin#

The Rsbuild by default uses the SWC built-in by Rspack to minify CSS code. You can customize the CSS minimizer by using the CSS Minimizer plugin and switch to cssnano or other tools for CSS minification.

The CSS Minimizer plugin internally integrates css-minimizer-webpack-plugin.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-css-minimizer -D

Register Plugin#

You can register the plugin in the rsbuild.config.ts file:

import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';

export default {
  plugins: [pluginCssMinimizer()],
};

Options#

pluginOptions#

Used to customize the options of css-minimizer-webpack-plugin.

The value of pluginOptions will be merged with the default options inside the plugin using Object.assign and then passed to the css-minimizer-webpack-plugin. You can refer to the README documentation of css-minimizer-webpack-plugin to explore all available options.

• Type: Object | Function | undefined
• Default:

const defaultOptions = {
  minify: CssMinimizerWebpackPlugin.cssnanoMinify,
  minimizerOptions: {
    preset: [
      'default',
      {
        mergeLonghand: false,
      },
    ],
  },
};

• Example 1: modify the preset configuration of cssnano.

pluginCssMinimizer({
  pluginOptions: {
    minimizerOptions: {
      preset: require.resolve('cssnano-preset-simple'),
    },
  },
});

• Example 2: pass a function to modify the default options.

pluginCssMinimizer({
  pluginOptions: (options) => {
    options.minimizerOptions = {
      preset: require.resolve('cssnano-preset-simple'),
    };
  },
});

• Example 3: Switch to other tools for CSS minification

import {
  pluginCssMinimizer,
  CssMinimizerWebpackPlugin,
} from '@rsbuild/plugin-css-minimizer';

pluginCssMinimizer({
  pluginOptions: {
    minify: CssMinimizerWebpackPlugin.cleanCssMinify,
    minimizerOptions: {
      level: {
        1: {
          roundingPrecision: "all=3,px=5",
        },
      },
    },
  },
}),