fix(css): include chunk groups in conflicting order warning by aryanraj45 · Pull Request #20660 · webpack/webpack

aryanraj45 · 2026-03-17T15:05:35Z

Summary

This pull request resolves an explicit TODO: print better warning inside CssModulesPlugin.js.

Previously, when two CSS modules imported each other in conflicting orders across different chunk groups, the console warning only printed the names of the two conflicting modules. This left developers guessing which chunk groups were causing the loop.

This change taps into the existing modulesByChunkGroup collection to filter and append the exact chunk groups causing the conflict directly to the WebpackError.

What kind of change does this PR introduce?

fix / developer experience (DX)

Did you add tests for your changes?

Yes. I updated the existing snapshot regex in test/configCases/css/conflicting-order/warnings.js to strictly assert that the new caused by chunk groups ... message is being correctly generated during the failure loop.

Does this PR introduce a breaking change?

No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?

No documentation changes needed.

Use of AI

No AI ,Only used in formatting and writing the PR description

Resolves a TODO in CssModulesPlugin to print a better warning when CSS module imports conflict. It now surfaces the specific chunk groups causing the conflict instead of only printing the conflicting module files. Updates the related diagnostic test to assert this new console output.

changeset-bot · 2026-03-17T15:05:40Z

🦋 Changeset detected

Latest commit: b9b212a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
webpack	Patch

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

Copilot

Pull request overview

This PR improves the developer-facing warning emitted by CssModulesPlugin when CSS modules end up in an unresolvable conflicting order across chunk groups, by appending the chunk group(s) involved to the warning text.

Changes:

Track the originating chunkGroup alongside each per-chunk-group module ordering list.
Extend the “Conflicting order…” warning message to include caused by chunk groups ....
Update the config-case warning expectation regex to assert the new message suffix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
lib/css/CssModulesPlugin.js	Attaches chunk group identifiers to the conflicting-order warning by plumbing `chunkGroup` through `modulesByChunkGroup`.
test/configCases/css/conflicting-order/warnings.js	Updates the expected warning pattern to include the new `caused by chunk groups ...` line.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

aryanraj45 · 2026-03-18T10:55:36Z

Hii @alexander-akait can u please take a view on this thanks!

alexander-akait · 2026-03-18T11:00:13Z

 module.exports = [
-	[/Conflicting order between css \.\/b\.css and css \.\/c\.css/]
+	[
+		/Conflicting order between css \.\/b\.css and css \.\/c\.css\ncaused by chunk groups css, css/


Please test full message, it doesn't look better

alexander-akait · 2026-03-18T11:25:40Z

 module.exports = [
 	[
-		/Conflicting order between css \.\/b\.css and css \.\/c\.css\ncaused by chunk groups css, css/
+		/Conflicting order between css \.\/b\.css and css \.\/c\.css\nConflict is caused by the following chunk groups: css/


So we have only one group here? Still looking is unreadable

alexander-akait · 2026-03-18T11:41:21Z

-						)}\nConflict is caused by the following chunk groups: ${[...conflictingGroups].join(", ")}`
+						)}\ncaused by chunk group${
+							groups.length > 1 ? "s" : ""
+						} ${groups.join(", ")}`


Sorry, adding s or , is not fixing the unreadable problem, we should improve it by writing understandable error message, what is chunk group css? I know, you may know, but developers will not know, better error message is when you understand where and which modules are conflict

aryanraj45 · 2026-03-18T13:35:08Z

@alexander-akait can u please take a view again I have Updated the warning to show the actual files that imported the conflicting CSS instead of chunk group names.

Now outputs would be something like this
Conflicting order between css ./b.css
and css ./c.css
CSS modules are imported in:

css ./lazy1.css
css ./lazy2.css

Let me know if this looks good.Thanks!

alexander-akait · 2026-03-18T13:37:12Z

+						}
+					}
+					return [...issuers];
+				};


I feel like it is AI generated code, because we don't use such patterns to make the same things, we have getIncomingConnectionsByOriginModule and more

aryanraj45 · 2026-03-19T14:59:38Z

@alexander-akait can u please re-review it again i have used the same getincomingconnectionbyoriginmodule for modulegraph extraction

codspeed-hq · 2026-03-21T11:05:52Z

Merging this PR will degrade performance by 33.97%

⚠️

Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 3 improved benchmarks
❌ 2 regressed benchmarks
✅ 121 untouched benchmarks
⏩ 18 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Mode	Benchmark	`BASE`	`HEAD`	Efficiency
❌	Simulation	`benchmark "context-commonjs", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}'`	32.9 ms	41.3 ms	-20.45%
⚡	Memory	`benchmark "wasm-modules-sync", scenario '{"name":"mode-production","mode":"production"}'`	7.6 MB	6.2 MB	+22.96%
⚡	Memory	`benchmark "context-esm", scenario '{"name":"mode-production","mode":"production"}'`	10.5 MB	8.7 MB	+20.3%
❌	Memory	`benchmark "asset-modules-source", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}'`	265.9 KB	402.7 KB	-33.97%
⚡	Memory	`benchmark "many-modules-commonjs", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}'`	520.5 KB	393.5 KB	+32.27%

_{Comparing aryanraj45:fix-fresh-css-warning-2 (b9b212a) with main (a475512)}

18 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

aryanraj45 · 2026-03-23T13:14:11Z

@alexander-akait ci all required test passed! Ready for merge thanks!

github-actions · 2026-03-23T14:23:45Z

This PR is packaged and the instant preview is available (70867d6).

Install it locally:

npm

npm i -D webpack@https://pkg.pr.new/webpack@70867d6

yarn

yarn add -D webpack@https://pkg.pr.new/webpack@70867d6

pnpm

pnpm add -D webpack@https://pkg.pr.new/webpack@70867d6

Copilot AI review requested due to automatic review settings March 17, 2026 15:05

Copilot started reviewing on behalf of aryanraj45 March 17, 2026 15:06 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Comment thread lib/css/CssModulesPlugin.js Outdated

alexander-akait reviewed Mar 18, 2026

View reviewed changes

fix(css): deduplicate chunk group names in warning

cf11cd9

alexander-akait reviewed Mar 18, 2026

View reviewed changes

fix(css): handle singular chunk group warning grammatically

169b7cc

alexander-akait reviewed Mar 18, 2026

View reviewed changes

aryanraj45 force-pushed the fix-fresh-css-warning-2 branch 2 times, most recently from 8150505 to 169b7cc Compare March 18, 2026 13:13

alexander-akait reviewed Mar 18, 2026

View reviewed changes

fix(css): trace conflicting modules back to their direct issuers

0b9890f

aryanraj45 force-pushed the fix-fresh-css-warning-2 branch from 455161f to 0b9890f Compare March 18, 2026 14:11

aryanraj45 requested a review from alexander-akait March 18, 2026 14:49

alexander-akait approved these changes Mar 21, 2026

View reviewed changes

Create brown-goats-kiss.md

b9b212a

alexander-akait merged commit 70867d6 into webpack:main Mar 23, 2026
52 of 55 checks passed

github-actions Bot mentioned this pull request Mar 23, 2026

chore(release): new release #20593

Merged

Uh oh!

Conversation

aryanraj45 commented Mar 17, 2026

Uh oh!

changeset-bot Bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

aryanraj45 commented Mar 18, 2026

Uh oh!

alexander-akait Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

alexander-akait Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

alexander-akait Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

aryanraj45 commented Mar 18, 2026

Uh oh!

alexander-akait Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

aryanraj45 commented Mar 19, 2026

Uh oh!

codspeed-hq Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 33.97%

Performance Changes

Footnotes

Uh oh!

aryanraj45 commented Mar 23, 2026

Uh oh!

Uh oh!

github-actions Bot commented Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Mar 17, 2026 •

edited

Loading

codspeed-hq Bot commented Mar 21, 2026 •

edited

Loading