Skip to content

Commit b2c1e64

Browse files
authored
docs(compilation-hooks): document CssModulesPlugin.getCompilationHooks() 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
1 parent 9ef6664 commit b2c1e64

1 file changed

Lines changed: 58 additions & 0 deletions

File tree

src/content/api/compilation-hooks.mdx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -744,3 +744,61 @@ This hook is called when a part should be printed.
744744
This hook is called for the resulting string for a part.
745745

746746
- Callback Parameters: `result` `context`
747+
748+
## CssModulesPlugin.getCompilationHooks(compilation)
749+
750+
When [`experiments.css`](/configuration/experiments/#experimentscss) is enabled, the internal `CssModulesPlugin` exposes a set of per-compilation hooks for plugin authors. Access them via the static `getCompilationHooks(compilation)` method:
751+
752+
```js
753+
const webpack = require("webpack");
754+
755+
class MyCssPlugin {
756+
apply(compiler) {
757+
compiler.hooks.thisCompilation.tap("MyCssPlugin", (compilation) => {
758+
const hooks =
759+
webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
760+
// tap into hooks here
761+
});
762+
}
763+
}
764+
```
765+
766+
W> These hooks are only registered when `experiments.css` is enabled and may evolve while the CSS feature is experimental.
767+
768+
### orderModules
769+
770+
<Badge text="5.107.0+" />
771+
772+
`SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`
773+
774+
Called once per CSS source type (CSS imports and CSS modules) with the chunk's modules pre-sorted by full module name. Taps may return an ordered `Module[]` to override webpack's default import-order topological sort, or return `undefined` to keep the default order.
775+
776+
The hook is the recommended escape hatch when webpack's topological sort surfaces a `Conflicting order between css ...` warning that cannot be resolved by restructuring imports. Returning the pre-sorted array (or any deterministic order) lets the build pick a stable order without changing application code.
777+
778+
- Callback Parameters: `chunk` `modules` `compilation`
779+
780+
```js
781+
const webpack = require("webpack");
782+
783+
class CssOrderByPathPlugin {
784+
apply(compiler) {
785+
compiler.hooks.thisCompilation.tap(
786+
"CssOrderByPathPlugin",
787+
(compilation) => {
788+
const hooks =
789+
webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
790+
791+
// Modules arrive pre-sorted by full module name; return as-is to
792+
// enforce a deterministic file-path order across rebuilds and
793+
// side-step the conflicting-order warning.
794+
hooks.orderModules.tap(
795+
"CssOrderByPathPlugin",
796+
(_chunk, modules) => modules,
797+
);
798+
},
799+
);
800+
}
801+
}
802+
```
803+
804+
The hook is a `SyncBailHook`, so the first tap to return a non-`undefined` value wins. Subsequent taps are not invoked for that call.

0 commit comments

Comments
 (0)