Skip to content

Commit ccd4240

Browse files
sokrasokra
committed
fix css hmr support
1 parent 4cfe4e1 commit ccd4240

3 files changed

Lines changed: 150 additions & 114 deletions

File tree

‎examples/css/README.md‎

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -182,23 +182,24 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
182182
/******/ var installedChunks = {};
183183
/******/
184184
/******/ var uniqueName = "app";
185-
/******/ var loadCssChunkData = (chunkId, link) => {
185+
/******/ var loadCssChunkData = (target, link, chunkId) => {
186186
/******/ var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], i = 0, cc = 1;
187187
/******/ try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }
188188
/******/ data = data.getPropertyValue("--webpack-" + uniqueName + "-" + chunkId);
189-
/******/ if(!data) return;
189+
/******/ if(!data) return [];
190190
/******/ for(; cc; i++) {
191191
/******/ cc = data.charCodeAt(i);
192192
/******/ if(cc == 40) { token2 = token; token = ""; }
193193
/******/ else if(cc == 41) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }
194194
/******/ else if(cc == 47 || cc == 37) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == 37) exportsWithDashes.push(token); token = ""; }
195-
/******/ else if(!cc || cc == 44) { token = token.replace(/^_/, ""); exportsWithId.forEach((x) => (exports[x] = uniqueName + "-" + token + "-" + exports[x])); exportsWithDashes.forEach((x) => (exports[x] = "--" + exports[x])); __webpack_require__.r(exports); __webpack_require__.m[token] = ((exports, module) => {
195+
/******/ else if(!cc || cc == 44) { token = token.replace(/^_/, ""); exportsWithId.forEach((x) => (exports[x] = uniqueName + "-" + token + "-" + exports[x])); exportsWithDashes.forEach((x) => (exports[x] = "--" + exports[x])); __webpack_require__.r(exports); target[token] = ((exports, module) => {
196196
/******/ module.exports = exports;
197197
/******/ }).bind(null, exports); token = ""; exports = {}; exportsWithId.length = 0; }
198198
/******/ else if(cc == 92) { token += data[++i] }
199199
/******/ else { token += data[i]; }
200200
/******/ }
201201
/******/ installedChunks[chunkId] = 0;
202+
/******/
202203
/******/ }
203204
/******/ var loadingAttribute = "data-webpack-loading";
204205
/******/ var loadStylesheet = (chunkId, url, done) => {
@@ -207,17 +208,16 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
207208
/******/ var links = document.getElementsByTagName("link");
208209
/******/ for(var i = 0; i < links.length; i++) {
209210
/******/ var l = links[i];
210-
/******/ if(l.getAttribute("href") == url || l.getAttribute("data-webpack") == uniqueName + ":" + key) { link = l; break; }
211+
/******/ if(l.href == url || l.getAttribute("href") == url || l.getAttribute("data-webpack") == uniqueName + ":" + key) { link = l; break; }
211212
/******/ }
212-
/******/ if(!url) return link;
213+
/******/ if(!done) return link;
213214
/******/
214215
/******/ if(!link) {
215216
/******/ needAttach = true;
216217
/******/ link = document.createElement('link');
217218
/******/ link.setAttribute("data-webpack", uniqueName + ":" + key);
218219
/******/ link.setAttribute(loadingAttribute, 1);
219220
/******/ link.rel = "stylesheet";
220-
/******/
221221
/******/ link.href = url;
222222
/******/ }
223223
/******/ var onLinkComplete = (prev, event) => {
@@ -236,7 +236,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
236236
/******/ needAttach && document.head.appendChild(link);
237237
/******/ return link;
238238
/******/ };
239-
/******/ loadCssChunkData(0);
239+
/******/ loadCssChunkData(__webpack_require__.m, 0, 0);
240240
/******/
241241
/******/ __webpack_require__.f.css = (chunkId, promises) => {
242242
/******/ // css chunk loading
@@ -270,7 +270,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
270270
/******/ error.request = realSrc;
271271
/******/ installedChunkData[1](error);
272272
/******/ } else {
273-
/******/ loadCssChunkData(chunkId, link);
273+
/******/ loadCssChunkData(__webpack_require__.m, link, chunkId);
274274
/******/ installedChunkData[0]();
275275
/******/ }
276276
/******/ }
@@ -486,26 +486,15 @@ 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-
}
500489
assets by chunk 16.8 KiB (name: main)
501490
asset output.js 16.4 KiB [emitted] (name: main)
502491
asset output.css 385 bytes [emitted] (name: main)
503492
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
504493
asset 1.output.css 49 bytes [emitted]
505494
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB output.css 385 bytes 1 auxiliary asset
506-
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]
495+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
507496
> ./example.js main
508-
runtime modules 9.94 KiB 9 modules
497+
runtime modules 10 KiB 9 modules
509498
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
510499
./example.js 176 bytes [built] [code generated]
511500
[no exports]
@@ -523,29 +512,20 @@ webpack 5.66.0 compiled successfully
523512
## Production mode
524513

525514
```
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-
}
535-
assets by chunk 4.2 KiB (name: main)
536-
asset output.js 3.82 KiB [emitted] [minimized] (name: main)
515+
assets by chunk 4.23 KiB (name: main)
516+
asset output.js 3.85 KiB [emitted] [minimized] (name: main)
537517
asset output.css 385 bytes [emitted] (name: main)
538518
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
539519
asset 159.output.css 53 bytes [emitted]
540-
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB output.css 385 bytes 1 auxiliary asset
520+
Entrypoint main 4.23 KiB (14.6 KiB) = output.js 3.85 KiB output.css 385 bytes 1 auxiliary asset
541521
chunk (runtime: main) 159.output.css 23 bytes
542522
> ./lazy-style.css ./example.js 4:0-26
543523
./lazy-style.css 23 bytes [built] [code generated]
544524
[no exports]
545525
import() ./lazy-style.css ./example.js 4:0-26
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]
526+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
547527
> ./example.js main
548-
runtime modules 9.94 KiB 9 modules
528+
runtime modules 10 KiB 9 modules
549529
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
550530
./example.js 176 bytes [built] [code generated]
551531
[no exports]

‎lib/RuntimePlugin.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"use strict";
77

88
const RuntimeGlobals = require("./RuntimeGlobals");
9+
const { getChunkFilenameTemplate } = require("./css/CssModulesPlugin");
910
const RuntimeRequirementsDependency = require("./dependencies/RuntimeRequirementsDependency");
1011
const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
1112
const AsyncModuleRuntimeModule = require("./runtime/AsyncModuleRuntimeModule");
@@ -279,9 +280,8 @@ class RuntimePlugin {
279280
"css",
280281
RuntimeGlobals.getChunkCssFilename,
281282
chunk =>
282-
chunk.cssFilenameTemplate ||
283-
compilation.outputOptions.cssChunkFilename,
284-
false
283+
getChunkFilenameTemplate(chunk, compilation.outputOptions),
284+
set.has(RuntimeGlobals.hmrDownloadUpdateHandlers)
285285
)
286286
);
287287
return true;

0 commit comments

Comments
 (0)