@rsbuild/plugin-css-minimizer

An Rsbuild to customize the CSS minimizer, switch to cssnano or other tools for CSS compression.

@rsbuild/plugin-css-minimizer internally integrates css-minimizer-webpack-plugin.

Install:

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

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginCssMinimizer } from "@rsbuild/plugin-css-minimizer";

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

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",
        },
      },
    },
  },
}),

MIT.