Skip to content

Commit

Permalink
fix: preserve order of link tags on HMR (#982)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guansss
guansss committed Nov 29, 2022
1 parent 2633446 commit 6ea0922
Show file tree
Hide file tree
Showing 13 changed files with 56 additions and 24 deletions.
14 changes: 10 additions & 4 deletions src/index.js
View file
Expand Up @@ -826,7 +826,7 @@ class MiniCssExtractPlugin {

return Template.asString([
`var createStylesheet = ${runtimeTemplate.basicFunction(
"chunkId, fullhref, resolve, reject",
"chunkId, fullhref, oldTag, resolve, reject",
[
'var linkTag = document.createElement("link");',
this.runtimeOptions.attributes
Expand Down Expand Up @@ -886,7 +886,13 @@ class MiniCssExtractPlugin {
`var target = document.querySelector("${this.runtimeOptions.insert}");`,
`target.parentNode.insertBefore(linkTag, target.nextSibling);`,
])
: Template.asString(["document.head.appendChild(linkTag);"]),
: Template.asString([
"if (oldTag) {",
Template.indent(["oldTag.after(linkTag);"]),
"} else {",
Template.indent(["document.head.appendChild(linkTag);"]),
"}",
]),
"return linkTag;",
]
)};`,
Expand Down Expand Up @@ -919,7 +925,7 @@ class MiniCssExtractPlugin {
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
"if(findStylesheet(href, fullhref)) return resolve();",
"createStylesheet(chunkId, fullhref, resolve, reject);",
"createStylesheet(chunkId, fullhref, null, resolve, reject);",
]
)});`
)}`,
Expand Down Expand Up @@ -995,7 +1001,7 @@ class MiniCssExtractPlugin {
`promises.push(new Promise(${runtimeTemplate.basicFunction(
"resolve, reject",
[
`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction(
`var tag = createStylesheet(chunkId, fullhref, oldTag, ${runtimeTemplate.basicFunction(
"",
[
'tag.as = "style";',
Expand Down
0 ...5-importModule/0.c4400460abdfefdd41ec.css → ...5-importModule/0.32c982869d9446e21cfa.css
View file
File renamed without changes.
0 ...k-5-importModule/c4400460abdfefdd41ec.css → ...k-5-importModule/32c982869d9446e21cfa.css
View file
File renamed without changes.
12 changes: 8 additions & 4 deletions test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
View file
Expand Up @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("c4400460abdfefdd41ec")
/******/ __webpack_require__.h = () => ("32c982869d9446e21cfa")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
Expand Down Expand Up @@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand All @@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
/******/ linkTag.href = fullhref;
/******/
/******/ document.head.appendChild(linkTag);
/******/ if (oldTag) {
/******/ oldTag.after(linkTag);
/******/ } else {
/******/ document.head.appendChild(linkTag);
/******/ }
/******/ return linkTag;
/******/ };
/******/ var findStylesheet = (href, fullhref) => {
Expand All @@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // object to store loaded CSS chunks
Expand Down
0 ...cted/webpack-5/0.03b0b5d315f22aa63867.css → ...cted/webpack-5/0.70641d5edcf4cb37424c.css
View file
File renamed without changes.
0 ...pected/webpack-5/03b0b5d315f22aa63867.css → ...pected/webpack-5/70641d5edcf4cb37424c.css
View file
File renamed without changes.
12 changes: 8 additions & 4 deletions test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
View file
Expand Up @@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("03b0b5d315f22aa63867")
/******/ __webpack_require__.h = () => ("70641d5edcf4cb37424c")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
Expand Down Expand Up @@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand All @@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
/******/ linkTag.href = fullhref;
/******/
/******/ document.head.appendChild(linkTag);
/******/ if (oldTag) {
/******/ oldTag.after(linkTag);
/******/ } else {
/******/ document.head.appendChild(linkTag);
/******/ }
/******/ return linkTag;
/******/ };
/******/ var findStylesheet = (href, fullhref) => {
Expand All @@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // object to store loaded CSS chunks
Expand Down
12 changes: 8 additions & 4 deletions test/cases/hmr/expected/main.js
View file
Expand Up @@ -934,7 +934,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand All @@ -958,7 +958,11 @@ __webpack_require__.r(__webpack_exports__);
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
/******/ linkTag.href = fullhref;
/******/
/******/ document.head.appendChild(linkTag);
/******/ if (oldTag) {
/******/ oldTag.after(linkTag);
/******/ } else {
/******/ document.head.appendChild(linkTag);
/******/ }
/******/ return linkTag;
/******/ };
/******/ var findStylesheet = (href, fullhref) => {
Expand All @@ -980,7 +984,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // no chunk loading
Expand All @@ -1007,7 +1011,7 @@ __webpack_require__.r(__webpack_exports__);
/******/ var oldTag = findStylesheet(href, fullhref);
/******/ if(!oldTag) return;
/******/ promises.push(new Promise((resolve, reject) => {
/******/ var tag = createStylesheet(chunkId, fullhref, () => {
/******/ var tag = createStylesheet(chunkId, fullhref, oldTag, () => {
/******/ tag.as = "style";
/******/ tag.rel = "preload";
/******/ resolve();
Expand Down
4 changes: 2 additions & 2 deletions test/cases/insert-function/expected/main.js
View file
Expand Up @@ -155,7 +155,7 @@
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand Down Expand Up @@ -206,7 +206,7 @@
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // object to store loaded CSS chunks
Expand Down
4 changes: 2 additions & 2 deletions test/cases/insert-string/expected/main.js
View file
Expand Up @@ -155,7 +155,7 @@
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand Down Expand Up @@ -202,7 +202,7 @@
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // object to store loaded CSS chunks
Expand Down
10 changes: 7 additions & 3 deletions test/cases/insert-undefined/expected/main.js
View file
Expand Up @@ -155,7 +155,7 @@
/******/
/******/ /* webpack/runtime/css loading */
/******/ (() => {
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
/******/ var linkTag = document.createElement("link");
/******/
/******/ linkTag.rel = "stylesheet";
Expand All @@ -179,7 +179,11 @@
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
/******/ linkTag.href = fullhref;
/******/
/******/ document.head.appendChild(linkTag);
/******/ if (oldTag) {
/******/ oldTag.after(linkTag);
/******/ } else {
/******/ document.head.appendChild(linkTag);
/******/ }
/******/ return linkTag;
/******/ };
/******/ var findStylesheet = (href, fullhref) => {
Expand All @@ -201,7 +205,7 @@
/******/ var href = __webpack_require__.miniCssF(chunkId);
/******/ var fullhref = __webpack_require__.p + href;
/******/ if(findStylesheet(href, fullhref)) return resolve();
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
/******/ });
/******/ }
/******/ // object to store loaded CSS chunks
Expand Down
4 changes: 4 additions & 0 deletions test/manual/index.html
View file
Expand Up @@ -49,6 +49,10 @@
<button class="lazy-button2">pressing this button</button>. Additional
clicks have no effect.
</p>
<p>
(HMR) Now modify the color in lazy.css and save it: This should remain
orange.
</p>
<p>
Refresh and press buttons in reverse order: This should turn green
instead.
Expand Down
8 changes: 7 additions & 1 deletion test/manual/webpack.config.js
View file
Expand Up @@ -69,7 +69,13 @@ module.exports = {
],
devServer: {
hot: ENABLE_HMR,
static: __dirname,
static: {
directory: __dirname,
watch: {
// prevent page reload on source change so that we can test HMR
ignored: /src/,
},
},
headers: {
"Access-Control-Allow-Origin": "*",
},
Expand Down

0 comments on commit 6ea0922

Please sign in to comment.