[Bug]: Unable to exclude CSS files from LightningCssMinimizerRspackPlugin or to silence warnings

[alex-vukov]

System Info

System: OS: Windows 11 10.0.22631 CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H Memory: 21.27 GB / 31.70 GB Binaries: Node: 20.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527

Details

I have external CSS files in my application which come from other bundles and I don't want LightningCssMinimizerRspackPlugin to minimize them or to show warnings about them but I am unable to exclude them no matter what I try.

Reproduce link

https://github.com/alex-vukov/rspack-css-issue

Reproduce Steps

1. Checkout the repo from the link.
2. Run npm install.
3. Run npm build and see this warning in the console: warn Compile Warning: ⚠ Invalid token in pseudo element: Dimension { has_sign: false, value: 2.0, int_value: Some(2), unit: "px" } at static\external-css\test.css:0:3274

The warning should not be there because the static\external-css folder is not included in the LightningCssMinimizerRspackPlugin's options in rsbuild.config.mjs. I tried to exclude the folder explixcitly and it still doesn't work and I see the same warning.

[inottn]

Rspack uses LightningCssMinimizerRspackPlugin as the default minimizer. When you use '...', it effectively registers LightningCssMinimizerRspackPlugin twice.

[alex-vukov]

Then how can I pass any options to it? If I don't use '...' my Javascript doesn't get minified

[inottn]

I see you're using rsbuild. You might want to try this configuration, as it can override existing plugin configurations. https://rsbuild.dev/config/output/minify#css-minify-options

[alex-vukov]

I am using rsbuild for the reproduction repo but the real issue is in production code and there I use pure rspack. Can it be done in rspack in a similar way?

[inottn]

You can do it this way:

optimization: {
  minimizer: [
    new rspack.SwcJsMinimizerRspackPlugin(),
    new rspack.LightningCssMinimizerRspackPlugin({/* your config */})
  ]
}

Indeed, it does seem a bit cumbersome. Unlike webpack, rspack has two default minimizers. In such a scenario, what would be a better solution? @chenjiahan cc

[alex-vukov]

In my opinion the correct solution would be to make it work the same way it does in Webpack. '...' will add the default plugins but if you add a plugin after it which already exists the default instance of the same plugin should be replaced by the new plugin instance instead of having two instances. For some plugins such as the file copy plugin it might be OK to have more than one instance but for the minimizers it doesn't make sense.

[inottn]

This behavior is consistent with webpack, but webpack does not include a CSS minimizer by default. This is one of the reasons why Rsbuild was created, as it reduces the learning curve for configuring Rspack.

[chenjiahan]

if you add a plugin after it which already exists the default instance of the same plugin should be replaced by the new plugin

When you add a new minimizer, Rspack does not know whether it is used to minify JS, CSS, or other assets, nor does it know which modules the newly added minimizer matches. Therefore, Rspack cannot accurately replace the built-in plugins automatically.

[chenjiahan]

Indeed, it does seem a bit cumbersome. Unlike webpack, rspack has two default minimizers. In such a scenario, what would be a better solution?

I recommend keeping the current behavior, as changing the behavior here will introduce breaking changes and we haven't found a better solution yet.