fix css hmr edge cases

insert css into old location
only look for rel="stylesheet" tags
This commit is contained in:
Tobias Koppers 2022-01-14 11:11:06 +01:00
parent b3871e8412
commit 3edda4d5f9
2 changed files with 12 additions and 10 deletions

View File

@ -208,7 +208,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
/******/ var links = document.getElementsByTagName("link");
/******/ for(var i = 0; i < links.length; i++) {
/******/ var l = links[i];
/******/ if(l.href == url || l.getAttribute("href") == url || l.getAttribute("data-webpack") == uniqueName + ":" + key) { link = l; break; }
/******/ if(l.rel == "stylesheet" && (l.href == url || l.getAttribute("href") == url || l.getAttribute("data-webpack") == uniqueName + ":" + key)) { link = l; break; }
/******/ }
/******/ if(!done) return link;
/******/
@ -233,6 +233,7 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
/******/ link.onerror = onLinkComplete.bind(null, link.onerror);
/******/ link.onload = onLinkComplete.bind(null, link.onload);
/******/ } else onLinkComplete(undefined, { type: 'load', target: link });
/******/
/******/ needAttach && document.head.appendChild(link);
/******/ return link;
/******/ };
@ -486,12 +487,12 @@ head{--webpack-app-1:_7;}
## Unoptimized
```
assets by chunk 16.8 KiB (name: main)
asset output.js 16.4 KiB [emitted] (name: main)
assets by chunk 16.9 KiB (name: main)
asset output.js 16.5 KiB [emitted] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 1.output.css 49 bytes [emitted]
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB output.css 385 bytes 1 auxiliary asset
Entrypoint main 16.9 KiB (14.6 KiB) = output.js 16.5 KiB output.css 385 bytes 1 auxiliary asset
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]
> ./example.js main
runtime modules 10 KiB 9 modules
@ -512,12 +513,12 @@ webpack 5.66.0 compiled successfully
## Production mode
```
assets by chunk 4.23 KiB (name: main)
asset output.js 3.85 KiB [emitted] [minimized] (name: main)
assets by chunk 4.25 KiB (name: main)
asset output.js 3.87 KiB [emitted] [minimized] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 159.output.css 53 bytes [emitted]
Entrypoint main 4.23 KiB (14.6 KiB) = output.js 3.85 KiB output.css 385 bytes 1 auxiliary asset
Entrypoint main 4.25 KiB (14.6 KiB) = output.js 3.87 KiB output.css 385 bytes 1 auxiliary asset
chunk (runtime: main) 159.output.css 23 bytes
> ./lazy-style.css ./example.js 4:0-26
./lazy-style.css 23 bytes [built] [code generated]

View File

@ -216,7 +216,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
"for(var i = 0; i < links.length; i++) {",
Template.indent([
"var l = links[i];",
`if(${
`if(l.rel == "stylesheet" && (${
withHmr
? 'l.href.startsWith(url) || l.getAttribute("href").startsWith(url)'
: 'l.href == url || l.getAttribute("href") == url'
@ -224,7 +224,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
uniqueName
? ' || l.getAttribute("data-webpack") == uniqueName + ":" + key'
: ""
}) { link = l; break; }`
})) { link = l; break; }`
]),
"}",
"if(!done) return link;",
@ -253,6 +253,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
"link.onload = onLinkComplete.bind(null, link.onload);"
]),
"} else onLinkComplete(undefined, { type: 'load', target: link });", // We assume any existing stylesheet is render blocking
withHmr ? "hmr ? document.head.insertBefore(link, hmr) :" : "",
"needAttach && document.head.appendChild(link);",
"return link;"
]
@ -433,7 +434,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
]),
"}"
]
)}, true);`
)}, oldTag);`
]
)}));`
])});`