rsbuild-plugin-stylelint

An Rsbuild plugin to run Stylelint checks during the compilation.

The plugin uses stylelint-webpack-plugin internally because it's compatible with Rsbuild as a webpack plugin.

[!IMPORTANT] We do not recommend using the rsbuild-plugin-stylelint plugin, as running Stylelint during the build process will significantly increase the build time. Instead, we recommend using a separate lint command to run Stylelint checks.

Usage

Install:

npm add rsbuild-plugin-stylelint -D

[!NOTE] Stylelint must be installed separately for this plugin to work.

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginStylelint } from "rsbuild-plugin-stylelint";

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

Options

enable

Whether to enable Stylelint checking.

• Type: boolean
• Default: true
• Example:

Disable Stylelint checking:

pluginStylelint({
  enable: false,
});

Enable Stylelint checking only during production builds:

pluginStylelint({
  enable: process.env.NODE_ENV === "production",
});

Enable Stylelint checking only during development builds:

pluginStylelint({
  enable: process.env.NODE_ENV === "development",
});

stylelintPluginOptions

[!CAUTION] Stylelint will check all files in the context folder (by default, the root folder) that match the configured extensions, not just the files imported in your bundle.

To modify the options of stylelint-webpack-plugin, please refer to stylelint-webpack-plugin - README to learn about available options.

• Type: Options
• Default:

const defaultOptions = {
  extensions: ["css", "scss", "sass"],
  exclude: [
    "node_modules",
    "dist", // -> rsbuildConfig.output.distPath.root
  ],
};

The stylelintPluginOptions object will be shallowly merged with the default configuration object.

• For example, enable auto-fix:

pluginStylelint({
  stylelintPluginOptions: {
    fix: true,
  },
});

• For example, exclude some files using exclude:

pluginStylelint({
  stylelintPluginOptions: {
    exclude: ["node_modules", "dist", "./src/legacy.css"],
  },
});

• Configure custom formatter:

pluginStylelint({
  stylelintPluginOptions: {
    formatter: "string",
  },
});

License

MIT.