Claude/solve issue 20976 g8i yo#20978
Conversation
…CSS module ordering
Add optimization.cssModulesOrder ("import" | "name", default "import"). With
"name", CssModulesPlugin emits a chunk's CSS modules in deterministic full-name
order and skips the topological merge across chunk groups, so the "Conflicting
order between css ..." warning is no longer produced. Useful when migrating
from mini-css-extract-plugin to the builtin CSS support and when CSS modules
rarely share classnames across files. Closes #20976.
…dulesPlugin orderModules hook Drop the optimization.cssModulesOrder option introduced in the previous commit in favor of a more general SyncBailHook on CssModulesPlugin's compilation hooks: orderModules(chunk, modules, compilation). Modules arrive pre-sorted by full module name. A tap returning Module[] overrides the default import-order topological sort (and so suppresses the "Conflicting order" warning); returning undefined keeps the default. This avoids committing webpack core to a specific ordering algorithm while still letting users (and dedicated plugins) solve the discussion #20976 use case.
Add three configCases that exercise the new CssModulesPlugin orderModules hook: - css-modules-order-priority: pin a specific file (e.css) to the front and keep the rest in name order — practical "reset.css first" pattern. - css-modules-order-fallback: tap returns undefined and webpack falls back to its default import-order topological sort, including the Conflicting order warning (asserted via warnings.js). - css-modules-order-multi-tap: two taps where the first wins and the second throws if reached, locking in SyncBailHook short-circuit semantics.
🦋 Changeset detectedLatest commit: f528d02 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 (561ee9b). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@561ee9b
yarn add -D webpack@https://pkg.pr.new/webpack@561ee9b
pnpm add -D webpack@https://pkg.pr.new/webpack@561ee9b |
…nfig configCase Replace the four separate test directories with a single test/configCases/css/css-modules-order-hook/ that exports a webpack configuration array, exercising all four scenarios in one place: - name: tap returns modules as-is (modules arrive pre-sorted by full name) - priority: tap pins e.css to the front while keeping the rest in name order - fallback: tap returns undefined and webpack applies its default topological sort (the "Conflicting order" warning is still emitted) - multi-tap: two taps where the first wins and the second throws if reached, asserting SyncBailHook short-circuit semantics The shared CSS fixtures are deduplicated to a single copy, scenario assertions live in per-entry files via a tiny helper, and the expected fallback warning is captured in warnings.js (MultiStats aggregates child warnings into the top-level array).
Codecov Report✅ All modified and coverable lines are covered by tests. ❌ Your changes status has failed because you have indirect coverage changes. Learn more about Unexpected Coverage Changes and reasons for indirect coverage changes. Additional details and impacted files@@ Coverage Diff @@
## main #20978 +/- ##
==========================================
- Coverage 90.92% 90.91% -0.02%
==========================================
Files 571 573 +2
Lines 58301 58616 +315
Branches 15659 15764 +105
==========================================
+ Hits 53009 53289 +280
- Misses 5292 5327 +35
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Adds a new CSS module ordering hook so plugins can override webpack’s default CSS import-order sort, with generated typings, release notes, and config-case coverage for ordering behaviors.
Changes:
- Adds
CssModulesPlugin.getCompilationHooks(compilation).orderModules. - Updates generated public typings and adds a minor changeset.
- Adds CSS config cases for name ordering, priority ordering, fallback behavior, and SyncBailHook multi-tap behavior.
Reviewed changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
.changeset/css-modules-order-name.md |
Documents the new CSS ordering hook as a minor feature. |
lib/css/CssModulesPlugin.js |
Defines and invokes the new orderModules hook during CSS module ordering. |
types.d.ts |
Adds generated public typings for the new hook. |
test/configCases/css/css-modules-order-fallback/a.css |
Fixture CSS module for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/b.css |
Fixture CSS module for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/c.css |
Fixture CSS module for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/d.css |
Fixture CSS module for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/e.css |
Fixture CSS module for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/index.js |
Asserts undefined hook result keeps default ordering. |
test/configCases/css/css-modules-order-fallback/lazy1.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-fallback/lazy2.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-fallback/lazy3.css |
Fixture importing additional CSS. |
test/configCases/css/css-modules-order-fallback/lazy4.js |
Fixture importing CSS through JS. |
test/configCases/css/css-modules-order-fallback/test.config.js |
Selects bundles for fallback ordering test. |
test/configCases/css/css-modules-order-fallback/warnings.js |
Asserts default conflict warning remains. |
test/configCases/css/css-modules-order-fallback/webpack.config.js |
Adds plugin returning undefined from hook. |
test/configCases/css/css-modules-order-multi-tap/a.css |
Fixture CSS module for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/b.css |
Fixture CSS module for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/c.css |
Fixture CSS module for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/d.css |
Fixture CSS module for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/e.css |
Fixture CSS module for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/index.js |
Asserts first SyncBailHook result wins. |
test/configCases/css/css-modules-order-multi-tap/lazy1.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-multi-tap/lazy2.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-multi-tap/lazy3.css |
Fixture importing additional CSS. |
test/configCases/css/css-modules-order-multi-tap/lazy4.js |
Fixture importing CSS through JS. |
test/configCases/css/css-modules-order-multi-tap/test.config.js |
Selects bundles for multi-tap test. |
test/configCases/css/css-modules-order-multi-tap/webpack.config.js |
Adds two hook taps to verify bail behavior. |
test/configCases/css/css-modules-order-name/a.css |
Fixture CSS module for name ordering test. |
test/configCases/css/css-modules-order-name/b.css |
Fixture CSS module for name ordering test. |
test/configCases/css/css-modules-order-name/c.css |
Fixture CSS module for name ordering test. |
test/configCases/css/css-modules-order-name/d.css |
Fixture CSS module for name ordering test. |
test/configCases/css/css-modules-order-name/e.css |
Fixture CSS module for name ordering test. |
test/configCases/css/css-modules-order-name/index.js |
Asserts emitted CSS follows hook-provided name order. |
test/configCases/css/css-modules-order-name/lazy1.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-name/lazy2.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-name/lazy3.css |
Fixture importing additional CSS. |
test/configCases/css/css-modules-order-name/lazy4.js |
Fixture importing CSS through JS. |
test/configCases/css/css-modules-order-name/test.config.js |
Selects bundles for name ordering test. |
test/configCases/css/css-modules-order-name/webpack.config.js |
Adds plugin returning pre-sorted modules. |
test/configCases/css/css-modules-order-priority/a.css |
Fixture CSS module for priority ordering test. |
test/configCases/css/css-modules-order-priority/b.css |
Fixture CSS module for priority ordering test. |
test/configCases/css/css-modules-order-priority/c.css |
Fixture CSS module for priority ordering test. |
test/configCases/css/css-modules-order-priority/d.css |
Fixture CSS module for priority ordering test. |
test/configCases/css/css-modules-order-priority/e.css |
Fixture CSS module pinned first by priority test. |
test/configCases/css/css-modules-order-priority/index.js |
Asserts hook can pin e.css before other modules. |
test/configCases/css/css-modules-order-priority/lazy1.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-priority/lazy2.css |
Fixture importing CSS in conflicting order. |
test/configCases/css/css-modules-order-priority/lazy3.css |
Fixture importing additional CSS. |
test/configCases/css/css-modules-order-priority/lazy4.js |
Fixture importing CSS through JS. |
test/configCases/css/css-modules-order-priority/test.config.js |
Selects bundles for priority ordering test. |
test/configCases/css/css-modules-order-priority/webpack.config.js |
Adds plugin that prioritizes e.css. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Merging this PR will degrade performance by 29.85%
Warning Please fix the performance issues or acknowledge them on CodSpeed. Performance Changes
Tip Investigate this regression by commenting Comparing Footnotes
|
Co-authored-by: Kārlis Gaņģis <Knagis@users.noreply.github.com>
…ests
- Add JSDoc types (Compiler, Variant, CssCompilationHooks) so the file
passes lint:types-test under TypeScript strict mode.
- Replace the Unix-only `endsWith("/e.css")` check in the "priority"
variant with a cross-platform regex `/[\\/]e\.css$/` so the test also
passes on windows-latest where module identifiers use backslashes.
…s() and orderModules (#8248) Webpack 5.107 adds a new orderModules hook on CssModulesPlugin.getCompilationHooks(compilation). It is a SyncBailHook called once per CSS source type (CSS_IMPORT_TYPE and CSS_TYPE) with the chunk's modules pre-sorted by full module name, letting plugin authors override the default import-order topological sort and side-step the "Conflicting order between css ..." warning. Adds a new section at the end of compilation-hooks.mdx documenting both the CssModulesPlugin.getCompilationHooks() entry point and the orderModules hook itself, following the pattern already used in the file for NormalModule.getCompilationHooks().loader. Refs: webpack/webpack#20978
Summary
feat - ability to control order
What kind of change does this PR introduce?
feat
Did you add tests for your changes?
Yes
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?
New hook
Use of AI
Yes