-
-
Notifications
You must be signed in to change notification settings - Fork 237
feat: apply CSS transformation for inlined CSS in Node bundles #6553
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
✅ Deploy Preview for rsbuild ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enables CSS transformation (postcss-loader and lightningcss-loader) for .css?inline imports in Node bundles. Previously, these transformations only applied to web bundles, but inline CSS is also used in SSR scenarios where consistent transformation between client and server is critical for hydration.
- Modified the
updateRuleshelper to conditionally skip normal CSS rules whenemitCssis disabled - Applied lightningcss-loader and postcss-loader to inline CSS rules regardless of target environment
- Updated
importLoaderscount for css-loader configuration
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/core/src/plugins/css.ts | Added skipNormal option to updateRules helper and applied lightningcss/postcss loaders to inline CSS rules even when emitCss is false |
| packages/core/tests/snapshots/*.snap | Updated test snapshots to reflect new loader configuration with increased importLoaders count and lightningcss-loader added to inline CSS rules |
| e2e/cases/css/inline-query-node-target/* | Added new e2e test to verify CSS transformation for inline imports with Node target in both dev and build modes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| api.context.bundlerType === 'rspack' && | ||
| config.tools.lightningcssLoader !== false | ||
| ) { | ||
| importLoaders++; |
Copilot
AI
Nov 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The importLoaders count is incremented unconditionally but the loader is only added to the inline rule when emitCss is false (via skipNormal: !emitCss). This results in the normal CSS rule having an incorrect importLoaders count. While this doesn't cause issues since the CSS is ignored via ignoreCssLoader, consider tracking separate counts for normal and inline rules or only incrementing when the loader applies to both rules for better code clarity.

Summary
This change enables
postcss-loaderandlightningcss-loaderfor.css?inlinefiles when building Node bundles.Previously, CSS transformations only applied to web bundles, but
.css?inlineis also valid in SSR builds. Applying CSS transformation on the server side ensures that inline CSS content is processed consistently between Web and Node bundles, preventing mismatches during SSR hydration.Checklist