fix(bundling): prevent treeshaking of CSS modules in extract mode#34830
Open
FrozenPandaz wants to merge 1 commit intomasterfrom
Open
fix(bundling): prevent treeshaking of CSS modules in extract mode#34830FrozenPandaz wants to merge 1 commit intomasterfrom
FrozenPandaz wants to merge 1 commit intomasterfrom
Conversation
The postcss plugin's transform hook returns an empty export for CSS files in extract mode, which Rollup treeshakes away. This causes the generateBundle hook to miss the CSS content entirely, resulting in no CSS files in the dist output. Adding moduleSideEffects: true to the transform return tells Rollup to keep CSS modules in the bundle regardless of whether their exports are used, since CSS imports are inherently side-effectful. Fixes #34776
✅ Deploy Preview for nx-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for nx-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
View your CI Pipeline Execution ↗ for commit 2e05f0d
☁️ Nx Cloud last updated this comment at |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Current Behavior
When using
@nx/rollupwith CSS extraction (the default), CSS files imported from JavaScript are silently dropped from the build output. The postcss plugin'stransformhook replaces CSS imports withexport default {}— a side-effect-free module that Rollup treeshakes away. When thegenerateBundlehook later scans chunk modules for extracted CSS, the treeshaken modules are gone, so no CSS is emitted.This is a regression introduced in #34110 which replaced the external
rollup-plugin-postcsswith an inlined version.Expected Behavior
CSS files imported from JavaScript should be extracted and emitted in the dist folder, regardless of Rollup's treeshaking behavior. The fix adds
moduleSideEffects: trueto the transform return value for CSS files, which tells Rollup to keep these modules in the bundle since CSS imports are inherently side-effectful.Related Issue(s)
Fixes #34776