fix(css): name CSS sources in source maps by their resource path - #21536
Conversation
🦋 Changeset detectedLatest commit: 7c505af The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This PR is packaged and the instant preview is available (ff07bdc). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@ff07bdc
yarn add -D webpack@https://pkg.pr.new/webpack@ff07bdc
pnpm add -D webpack@https://pkg.pr.new/webpack@ff07bdc |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21536 +/- ##
==========================================
+ Coverage 93.78% 93.81% +0.03%
==========================================
Files 620 620
Lines 73330 73591 +261
Branches 21203 21269 +66
==========================================
+ Hits 68771 69038 +267
+ Misses 4559 4553 -6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Merging this PR will degrade performance by 11.21%
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ❌ | Memory | benchmark "many-chunks-esm", scenario '{"name":"mode-production","mode":"production"}' |
7.5 MB | 10.3 MB | -27.3% |
| ❌ | Memory | benchmark "future-defaults", scenario '{"name":"mode-production","mode":"production"}' |
7.3 MB | 9.5 MB | -23.27% |
| ❌ | Memory | benchmark "many-modules-esm", scenario '{"name":"mode-production","mode":"production"}' |
7.4 MB | 9.6 MB | -22.26% |
| ⚡ | Memory | benchmark "asset-modules-resource", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' |
1,209.8 KB | 844 KB | +43.34% |
Tip
Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix/css-source-map-source-names (7c505af) with main (d56d82d)
|
There is a potential problem with overlapping loaders and internal types handling, need to verify how other bundlers make it |
`[loaders]` was derived from the readable identifier, so a CSS module with inline loaders rendered as `css ./loader.js` — same leak `[resource]` had. Also cover the duplicate-resource case (one file imported under two layers), where the second module now falls back to the `?hash` name.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 5c0ab17. Configure here.
Summary
With
experiments.css+devtool: "source-map", CSS sources were named after the module's readable identifier (webpack:///css ./style.css, sometimes with a stray query) instead of their resource path like JS sources, so DevTools cannot correlate them with on-disk files; the[resource]placeholder now derives from the module's request, and the JS wrapper of a CSS module names its source by the context-relative identifier (via a sharedcontextifySourceUrlhelper) soSourceMapDevToolPluginrewrites it through the regular filename template. Refs #14893.What kind of change does this PR introduce?
fix
Did you add tests for your changes?
Yes,
test/configCases/css/source-map-source-names/(CSS asset map and JS wrapper map source names), and updatedtest/configCases/source-map/devtools-default/which pinned the old names.Does this PR introduce a breaking change?
No — only the
sourcesstrings of source maps change, from a broken display name to the resource path; tooling that parsed the oldcss-prefixed names should switch to the plain path.If relevant, what needs to be documented once your changes are merged or what have you already documented?
n/a
Use of AI
Claude Code was used to investigate the naming chain, draft the fix and tests, and run the test suites; all changes were reviewed, directed and verified by the author.
Note
Low Risk
Behavior change is limited to source map
sourcesstrings and devtool template placeholders; no runtime bundle output changes, though tools that parsed the oldcss-prefixed names need to follow the new paths.Overview
With
experiments.cssanddevtool: "source-map", source mapsourcesentries no longer use CssModule’s display-onlycss …readable identifier. They align with JS modules as context-relativewebpack:///./file.csspaths so DevTools can match on-disk files.ModuleFilenameHelpersnow drives[resource],[loaders], and related placeholders from the module request (userRequestonNormalModule) instead ofreadableIdentifier, so devtool filename templates are not polluted by thecssprefix or layer/supports suffixes.CssGeneratornames the JS wrapper’s source map source via sharedcontextifySourceUrl(moved fromNormalModuleintoutil/identifier), matchingNormalModule.createSourcesoSourceMapDevToolPlugincan rewrite names through the normal template.Tests cover CSS/JS map source names,
[loaders]placeholders, and update expectations indevtools-default.Reviewed by Cursor Bugbot for commit 7c505af. Bugbot is set up for automated code reviews on this repo. Configure here.