Skip to content

Commit 64581a0

Browse files
authored
docs(experiments): document CSS scope hoisting and @value in URLs (5.107) (#8244)
Webpack 5.107 brings two additions to the experiments.css feature set: - Scope hoisting (module concatenation) now applies to CSS Modules with exportType "text", "css-style-sheet", "style", or "link", reducing runtime overhead in CSS-heavy bundles when optimization.concatenateModules is enabled. - @value identifiers can be used as the path argument to @import and inside url() references, so shared paths/assets are defined once and reused. Both quoted and bare forms are accepted and resolved through webpack's normal asset pipeline. Adds two bullets to the existing experimental features list in experiments.css. Refs: - webpack/webpack#20851 (scope hoisting) - webpack/webpack#20925 (@value in URLs)
1 parent 2f24ec5 commit 64581a0

1 file changed

Lines changed: 25 additions & 0 deletions

File tree

src/content/configuration/experiments.mdx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,31 @@ Experimental features:
238238
- CSS imports: webpack will inline CSS imports into the generated CSS file.
239239
- Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload.
240240

241+
- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) for CSS
242+
Modules. When
243+
[`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)
244+
is enabled, CSS Modules whose `exportType` is `text`, `css-style-sheet`,
245+
`style`, or `link` are concatenated into a single module instance instead of
246+
being kept as separate runtime instances. This reduces overhead and produces
247+
smaller output for CSS-heavy bundles.
248+
249+
- <Badge text="5.107.0+" /> `@value` identifiers can be used as the path
250+
argument to `@import` and inside `url()` references, so shared paths and
251+
assets can be defined once and reused across stylesheets. Both quoted
252+
(`"./x"`, `'./x'`) and bare (`./x`) forms are accepted and resolved through
253+
webpack's normal asset pipeline.
254+
255+
```css
256+
@value path: "./other.module.css";
257+
@import path;
258+
259+
@value bg: "./image.png";
260+
261+
.a {
262+
background: url(bg);
263+
}
264+
```
265+
241266
### experiments.cacheUnaffected
242267

243268
Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.

0 commit comments

Comments
 (0)