Visitar URL original
docs(module): document module.parser.css.pure (strict pure mode) (#8245) · webpack/webpack.js.org@a5ab2ad · GitHub
Skip to content

Commit a5ab2ad

Browse files
authored
docs(module): document module.parser.css.pure (strict pure mode) (#8245)
Webpack 5.107 adds a new pure parser option for css/module and css/auto that mirrors postcss-modules-local-by-default's pure mode. Every selector must contain at least one local class or id, otherwise the build fails. Documents the option, plus the two opt-out comments (/* cssmodules-pure-ignore */ per-rule and /* cssmodules-pure-no-check */ per-file) and the constructs that are exempt by design. Refs: webpack/webpack#20946
1 parent c0038eb commit a5ab2ad

1 file changed

Lines changed: 50 additions & 0 deletions

File tree

‎src/content/configuration/module.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,56 @@ import { footer, header } from "./styles.module.css";
447447

448448
By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.
449449

450+
#### module.parser.css.pure
451+
452+
<Badge text="5.107.0+" />
453+
454+
Enable strict pure mode for CSS Modules. Every selector must contain at least one local class or id selector; otherwise webpack emits a build error. This mirrors the pure mode of [`postcss-modules-local-by-default`](https://github.com/css-modules/postcss-modules-local-by-default) and helps catch accidentally global selectors early.
455+
456+
- Type: `boolean`
457+
- Default: `false`
458+
- Available for: `css/module` and `css/auto` (not exposed for `css/global`, where global-by-default is the intended semantic).
459+
460+
**webpack.config.js**
461+
462+
```js
463+
export default {
464+
experiments: { css: true },
465+
module: {
466+
parser: {
467+
"css/module": {
468+
pure: true,
469+
},
470+
},
471+
},
472+
};
473+
```
474+
475+
Two comments opt out of the check when needed.
476+
477+
`/* cssmodules-pure-ignore */` placed directly before a rule suppresses the check for that single rule. The suppression is per-rule and is not propagated to children.
478+
479+
```css
480+
/* cssmodules-pure-ignore */
481+
a {
482+
/* suppressed only for this rule */
483+
color: blue;
484+
}
485+
```
486+
487+
`/* cssmodules-pure-no-check */` placed among the leading comments of a file (before any rule) disables the check for the whole file.
488+
489+
```css
490+
/* cssmodules-pure-no-check */
491+
492+
a {
493+
/* would normally fail under pure mode */
494+
color: red;
495+
}
496+
```
497+
498+
Some constructs are exempt by design: nested rules inside a local-bearing ancestor are treated as pure-compliant, `&` resolves to the parent rule's purity, and `@keyframes` and `@counter-style` body contents are not checked.
499+
450500
#### module.parser.css.animation
451501

452502
<Badge text="5.104.0+" />

0 commit comments

Comments
 (0)