Skip to content

Commit 4cfe4e1

Browse files
sokrasokra
authored
Merge pull request #15158 from webpack/bugfix/css-modules-initial-only
fix missing css runtime when only initial css is used
2 parents 4c24876 + 713aa37 commit 4cfe4e1

12 files changed

Lines changed: 76 additions & 18 deletions

File tree

‎examples/css/README.md‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
365365
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
366366
/******/ installedChunks[chunkId][0]();
367367
/******/ }
368-
/******/ installedChunks[chunkIds[i]] = 0;
368+
/******/ installedChunks[chunkId] = 0;
369369
/******/ }
370370
/******/
371371
/******/ }
@@ -486,6 +486,17 @@ head{--webpack-app-1:_7;}
486486
## Unoptimized
487487

488488
```
489+
main Set(9) {
490+
'__webpack_require__',
491+
'__webpack_require__.r',
492+
'__webpack_exports__',
493+
'__webpack_require__.e',
494+
'__webpack_require__.*',
495+
'has css modules',
496+
'module',
497+
'__webpack_require__.p',
498+
'webpackChunk'
499+
}
489500
assets by chunk 16.8 KiB (name: main)
490501
asset output.js 16.4 KiB [emitted] (name: main)
491502
asset output.css 385 bytes [emitted] (name: main)
@@ -506,12 +517,21 @@ chunk (runtime: main) 1.output.css 23 bytes
506517
[no exports]
507518
[used exports unknown]
508519
import() ./lazy-style.css ./example.js 4:0-26
509-
webpack 5.64.4 compiled successfully
520+
webpack 5.66.0 compiled successfully
510521
```
511522

512523
## Production mode
513524

514525
```
526+
main Set(7) {
527+
'__webpack_require__',
528+
'__webpack_require__.e',
529+
'__webpack_require__.*',
530+
'has css modules',
531+
'module',
532+
'__webpack_require__.p',
533+
'webpackChunk'
534+
}
515535
assets by chunk 4.2 KiB (name: main)
516536
asset output.js 3.82 KiB [emitted] [minimized] (name: main)
517537
asset output.css 385 bytes [emitted] (name: main)
@@ -523,13 +543,13 @@ chunk (runtime: main) 159.output.css 23 bytes
523543
./lazy-style.css 23 bytes [built] [code generated]
524544
[no exports]
525545
import() ./lazy-style.css ./example.js 4:0-26
526-
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.95 KiB (runtime) [entry] [rendered]
546+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.94 KiB (runtime) [entry] [rendered]
527547
> ./example.js main
528-
runtime modules 9.95 KiB 9 modules
548+
runtime modules 9.94 KiB 9 modules
529549
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
530550
./example.js 176 bytes [built] [code generated]
531551
[no exports]
532552
[no exports used]
533553
entry ./example.js main
534-
webpack 5.64.4 compiled successfully
554+
webpack 5.66.0 compiled successfully
535555
```

‎examples/css/index.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<html>
22
<head>
3-
<link
4-
rel="stylesheet"
5-
href="dist/0.output.css"
6-
data-webpack="app:chunk-0"
7-
/>
3+
<link rel="stylesheet" href="dist/output.css" data-webpack="app:chunk-0" />
84
</head>
95
<body>
106
<main>Hello World</main>

‎lib/RuntimeGlobals.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,11 @@ exports.getChunkScriptFilename = "__webpack_require__.u";
195195
*/
196196
exports.getChunkCssFilename = "__webpack_require__.k";
197197

198+
/**
199+
* a flag when a module/chunk/tree has css modules
200+
*/
201+
exports.hasCssModules = "has css modules";
202+
198203
/**
199204
* the filename of the script part of the hot update chunk
200205
*/

‎lib/css/CssGenerator.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
const { ReplaceSource } = require("webpack-sources");
99
const Generator = require("../Generator");
1010
const InitFragment = require("../InitFragment");
11+
const RuntimeGlobals = require("../RuntimeGlobals");
1112

1213
/** @typedef {import("webpack-sources").Source} Source */
1314
/** @typedef {import("../Dependency")} Dependency */
@@ -34,6 +35,8 @@ class CssGenerator extends Generator {
3435
const initFragments = [];
3536
const cssExports = new Map();
3637

38+
generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
39+
3740
const templateContext = {
3841
runtimeTemplate: generateContext.runtimeTemplate,
3942
dependencyTemplates: generateContext.dependencyTemplates,

‎lib/css/CssLoadingRuntimeModule.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,6 @@ class CssLoadingRuntimeModule extends RuntimeModule {
7979
const withHmr = _runtimeRequirements.has(
8080
RuntimeGlobals.hmrDownloadUpdateHandlers
8181
);
82-
83-
if (!withLoading && !withHmr) {
84-
return null;
85-
}
86-
87-
const { createStylesheet } =
88-
CssLoadingRuntimeModule.getCompilationHooks(compilation);
89-
9082
const initialChunkIdsWithCss = new Set();
9183
const initialChunkIdsWithoutCss = new Set();
9284
for (const c of chunk.getAllInitialChunks()) {
@@ -96,6 +88,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
9688
).add(c.id);
9789
}
9890

91+
if (!withLoading && !withHmr && initialChunkIdsWithCss.size === 0) {
92+
return null;
93+
}
94+
95+
const { createStylesheet } =
96+
CssLoadingRuntimeModule.getCompilationHooks(compilation);
97+
9998
const stateExpression = withHmr
10099
? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
101100
: undefined;

‎lib/css/CssModulesPlugin.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,9 @@ class CssModulesPlugin {
238238
const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
239239
compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
240240
};
241+
compilation.hooks.runtimeRequirementInTree
242+
.for(RuntimeGlobals.hasCssModules)
243+
.tap(plugin, handler);
241244
compilation.hooks.runtimeRequirementInTree
242245
.for(RuntimeGlobals.ensureChunkHandlers)
243246
.tap(plugin, handler);

‎test/configCases/css/basic-initial-only/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as style from "./style.css";
2+
3+
it("should compile and load style on demand", () => {
4+
expect(style).toEqual(nsObj({}));
5+
const computedStyle = getComputedStyle(document.body);
6+
expect(computedStyle.getPropertyValue("background")).toBe(" red");
7+
expect(computedStyle.getPropertyValue("margin")).toBe(" 10px");
8+
});

‎test/configCases/css/basic-initial-only/style-imported.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
margin: 10px;
3+
}

‎test/configCases/css/basic-initial-only/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "style-imported.css";
2+
body {
3+
background: red;
4+
}

‎test/configCases/css/basic-initial-only/test.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
moduleScope(scope) {
3+
const link = scope.window.document.createElement("link");
4+
link.rel = "stylesheet";
5+
link.href = "bundle0.css";
6+
scope.window.document.head.appendChild(link);
7+
}
8+
};

0 commit comments

Comments
 (0)