diff --git a/src/index.js b/src/index.js
index 154f5fea..069ac721 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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
@@ -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;",
]
)};`,
@@ -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);",
]
)});`
)}`,
@@ -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";',
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css
similarity index 100%
rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css
rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css
similarity index 100%
rename from test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css
rename to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
index 81166abf..6acd31cc 100644
--- a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("c4400460abdfefdd41ec")
+/******/ __webpack_require__.h = () => ("32c982869d9446e21cfa")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
@@ -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";
@@ -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) => {
@@ -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
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css
similarity index 100%
rename from test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css
rename to test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css b/test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css
similarity index 100%
rename from test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css
rename to test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
index 6724eba3..58994c6c 100644
--- a/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5/main.js
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("03b0b5d315f22aa63867")
+/******/ __webpack_require__.h = () => ("70641d5edcf4cb37424c")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
@@ -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";
@@ -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) => {
@@ -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
diff --git a/test/cases/hmr/expected/main.js b/test/cases/hmr/expected/main.js
index 05985243..ee4a6f9f 100644
--- a/test/cases/hmr/expected/main.js
+++ b/test/cases/hmr/expected/main.js
@@ -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";
@@ -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) => {
@@ -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
@@ -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();
diff --git a/test/cases/insert-function/expected/main.js b/test/cases/insert-function/expected/main.js
index 17b89e75..0034d7cf 100644
--- a/test/cases/insert-function/expected/main.js
+++ b/test/cases/insert-function/expected/main.js
@@ -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";
@@ -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
diff --git a/test/cases/insert-string/expected/main.js b/test/cases/insert-string/expected/main.js
index 28c69b09..05e9aaeb 100644
--- a/test/cases/insert-string/expected/main.js
+++ b/test/cases/insert-string/expected/main.js
@@ -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";
@@ -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
diff --git a/test/cases/insert-undefined/expected/main.js b/test/cases/insert-undefined/expected/main.js
index 2cc6ae2b..06940274 100644
--- a/test/cases/insert-undefined/expected/main.js
+++ b/test/cases/insert-undefined/expected/main.js
@@ -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";
@@ -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) => {
@@ -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
diff --git a/test/manual/index.html b/test/manual/index.html
index 0a438be4..610b7268 100644
--- a/test/manual/index.html
+++ b/test/manual/index.html
@@ -49,6 +49,10 @@
. Additional
clicks have no effect.
+
+ (HMR) Now modify the color in lazy.css and save it: This should remain
+ orange.
+
Refresh and press buttons in reverse order: This should turn green
instead.
diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js
index 4587f51f..3892d04a 100644
--- a/test/manual/webpack.config.js
+++ b/test/manual/webpack.config.js
@@ -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": "*",
},