How to use cssnano as the final CSS minifier with injectStyles: true while keeping Lightning CSS prefixing/transforms?

[zalishchuk]

I am using Rsbuild and I have a case where I must keep output.injectStyles: true (so CSS is injected into JS, not emitted as separate .css files).

Trying to understand the best/supported way to do this:

• keep Lightning CSS for prefixing / CSS transforms
• but use cssnano as the final CSS minifier

@rsbuild/plugin-css-minimizer seems to work at the CSS asset minimizer stage.

With output.injectStyles: true, there are no emitted CSS assets, so this plugin does not appear to be the right tool for this case.

I tried using cssnano in PostCSS, while keeping lightningcss-loader enabled and disabling its minification (minify: false).

In that setup, Lightning CSS still runs after PostCSS (loader order), and it reserializes the CSS. In practice, this reintroduces formatting/newlines/whitespace and cancels out cssnano's minified formatting.

I tested this on my codebase and saw:

• postcss (autoprefixer + cssnano) with Lightning disabled: compact/minified embedded CSS strings
• postcss (autoprefixer + cssnano) + Lightning loader (minify: false): multiline formatted CSS strings added back into the JS bundle, and bundle size increased

So cssnano is not the final serializer if Lightning loader is still enabled afterward.

---

Is there a supported way in Rsbuild to keep Lightning CSS prefixing/transforms but still make cssnano the final CSS minifier/serializer when output.injectStyles: true?

I am investigating this because I want predictable final minification behavior, and I am cautious about optimizer rewrites in some CSS cases.

In particular, Lightning CSS can rewrite translate3d(0, 0, 0) to translate(0, 0), which is a bit off for my use case because it can affect compositing behavior (for example in Safari).

One reason I am cautious about Lightning CSS minification right now is this issue/PR context:

• fix(minify): preserve 3d transform semantics during minification parcel-bundler/lightningcss#1157

I do not like that (at least from what I can see in Lightning CSS right now), I cannot easily configure Lightning CSS minifier behavior in a granular way to disable specific optimizations/rewrites that I consider risky for my project.

Thanks.

[ghost]

🧠 The "Internal Pipeline" Fix: Move Lightning CSS into PostCSS

The reason your CSS is being "un-minified" is that Rsbuild's default Lightning CSS loader runs after PostCSS. Even if cssnano minifies the string, the subsequent Lightning CSS loader receives that string, parses it, applies transforms, and then re-serializes (pretty-prints) it into the JS bundle.

To fix this and ensure cssnano is the final serializer, you should move Lightning CSS into the PostCSS chain.

1. Install the PostCSS bridge

npm install postcss-lightningcss cssnano -D

[ghost]

the issue isn't just cssnano-it's the Rspack loader execution order

[zalishchuk]

@x11kitty Thank you for your response! My goal is to avoid bloating the rsbuild configuration by moving or duplicating loaders. After further examining the Lightning CSS source code, I’m hesitant to use it in production due to concerns about the optimizations and normalizations it applies, its limited configurability, and questions about maintainability. For now, I’m willing to trade build speed for stability by using autoprefixer and cssnano. Although much slower than Lightning CSS, these tools produce even smaller output in some cases, and they do so without unsafe optimizations like losing 2D/3D context in transforms.

[ghost]

Please Mark my Answer which helping me get the galaxy brain badge

[ghost]

Also I am happy to solve your question Welcome please follow me btw for linux and bashscript

[zalishchuk]

Please Mark my Answer which helping me get the galaxy brain badge

I'm not sure if this fully answers my original question, but before Lightning CSS introduces API changes to separate whitespace minification and other optimizations, the only way to get the desired behavior is to juggle and swap loaders. This approach conflicts with rsbuild's philosophy and will bloat the configuration. Nonetheless, I'll mark this as the answer just for the achievement

[ghost]

Thank You So Much ♥️