feat: minimize css when css experiment is enabled

[burhanuday]

Part of #14893

css minimizer

Maybe we could start with using the existing webpack plugin rather than building another one from scratch?

Summary

🤖 Generated by Copilot at d3ad1ac

This pull request adds support for CSS minification as an experimental feature in webpack 5. It introduces a new dev dependency, css-minimizer-webpack-plugin, and modifies the default configuration, the test framework, and the test cases to enable and verify the feature.

Details

🤖 Generated by Copilot at d3ad1ac

• Add CSS minification as an experimental feature in webpack 5 (link, link)
• Modify describeCases function in test/ConfigTestCases.template.js to append css-minimizer-webpack-plugin to the minimizer array if css experiment is enabled (link)
• Add a new test case for CSS minification in test/configCases/optimization/css-minimize (link, link, link, link)

[webpack-bot]

For maintainers only:

• This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
• This needs to be backported to webpack 4 (issue will be created when merged)

[alexander-akait]

I think we should postpone it for webpack v6, cssnano is big and slow and we need to think about it deeply, perhaps we can collaborate with the rspack team

[burhanuday]

I think we should postpone it for webpack v6, cssnano is big and slow and we need to think about it deeply, perhaps we can collaborate with the rspack team

If speed is the concern then we could try out LightningCSS. css-minimizer-webpack-plugin has support for LightningCSS - https://lightningcss.dev/docs.html#with-webpack

Though a different problem with css-minimizer-webpack-plugin is Node v10 support.

[TheLarkInn]

@hardfist We should collaborate here, maybe not this exact implementation but have a common goal for CSS minification for native CSS support?

[hardfist]

@hardfist We should collaborate here, maybe not this exact implementation but have a common goal for CSS minification for native CSS support?

we are using swc-css to minify css because we are also using swc-css to support native css，but swc-css might have bigger size than lightning css，which may be a concern for webpack
if we use lightning-css or swc-css in webpack，should we use the wasm version or napi version？since webpack 5 still sipports node10 then it may have some compatible in old node version

[alexander-akait]

@hardfist Node.js 10 is not our radar, so we can say - if you want the latest feature - do not use node.js 10, you the latest LTS, but yeah wasm solution will be fine (still need check perf)

[hardfist]

since webpack already implemented a css parser for native css support, it seems webpack could reimplement the css minification using the same parser(same parser for parse & minification seems ideal, but it maybe out of scope)

[hardfist]

I think we should postpone it for webpack v6, cssnano is big and slow and we need to think about it deeply, perhaps we can collaborate with the rspack team

I agree with that, webpack's default css minifier should be small & fast otherwise people may blame webpack for speed, and it seems vite5 may plan to choose lightning css as css minifier vitejs/vite#12466.

[alexander-akait]

@hardfist yeah, but there is a performance bottleneck between js and rust - serialization (you know 😄 ), I honestly don't know what would be better for us:

• on the one hand, implement another minifier is a bad idea, I already implemened swc css minification (there are still a lot of improvement, but it is out of this dicussion) and there is a cssnano, which is also under my responsibility
• on the other side - cssnano built on PostCSS, it is slow and have a big size, using swc minificator will cost perfomance for us due serialization

[alexander-akait]

Perhaps we should really look at wasm and focus our efforts on swc minificator

[hardfist]

serialization maybe not a problem for minify but a problem for parse，if size is not a concern for webpack i think swc minification or lightingcss is a better option for css minify

[alexander-akait]

Yeah, I will think about it more

[burhanuday]

vite has added support for lightningcss vitejs/vite#12807

[alexander-akait]

@burhanuday We've been supporting this for a long time (minimizers), even more - we support all known CSS minimizer