Skip to content

Commit 6ea0922

Browse files
guansssguansss
authored
fix: preserve order of link tags on HMR (#982)
1 parent 2633446 commit 6ea0922

13 files changed

Lines changed: 56 additions & 24 deletions

File tree

‎src/index.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -826,7 +826,7 @@ class MiniCssExtractPlugin {
826826

827827
return Template.asString([
828828
`var createStylesheet = ${runtimeTemplate.basicFunction(
829-
"chunkId, fullhref, resolve, reject",
829+
"chunkId, fullhref, oldTag, resolve, reject",
830830
[
831831
'var linkTag = document.createElement("link");',
832832
this.runtimeOptions.attributes
@@ -886,7 +886,13 @@ class MiniCssExtractPlugin {
886886
`var target = document.querySelector("${this.runtimeOptions.insert}");`,
887887
`target.parentNode.insertBefore(linkTag, target.nextSibling);`,
888888
])
889-
: Template.asString(["document.head.appendChild(linkTag);"]),
889+
: Template.asString([
890+
"if (oldTag) {",
891+
Template.indent(["oldTag.after(linkTag);"]),
892+
"} else {",
893+
Template.indent(["document.head.appendChild(linkTag);"]),
894+
"}",
895+
]),
890896
"return linkTag;",
891897
]
892898
)};`,
@@ -919,7 +925,7 @@ class MiniCssExtractPlugin {
919925
`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`,
920926
`var fullhref = ${RuntimeGlobals.publicPath} + href;`,
921927
"if(findStylesheet(href, fullhref)) return resolve();",
922-
"createStylesheet(chunkId, fullhref, resolve, reject);",
928+
"createStylesheet(chunkId, fullhref, null, resolve, reject);",
923929
]
924930
)});`
925931
)}`,
@@ -995,7 +1001,7 @@ class MiniCssExtractPlugin {
9951001
`promises.push(new Promise(${runtimeTemplate.basicFunction(
9961002
"resolve, reject",
9971003
[
998-
`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction(
1004+
`var tag = createStylesheet(chunkId, fullhref, oldTag, ${runtimeTemplate.basicFunction(
9991005
"",
10001006
[
10011007
'tag.as = "style";',

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.c4400460abdfefdd41ec.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.32c982869d9446e21cfa.css

File renamed without changes.

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/c4400460abdfefdd41ec.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/32c982869d9446e21cfa.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("c4400460abdfefdd41ec")
76+
/******/ __webpack_require__.h = () => ("32c982869d9446e21cfa")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
171171
/******/
172172
/******/ /* webpack/runtime/css loading */
173173
/******/ (() => {
174-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
174+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
175175
/******/ var linkTag = document.createElement("link");
176176
/******/
177177
/******/ linkTag.rel = "stylesheet";
@@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
195195
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
196196
/******/ linkTag.href = fullhref;
197197
/******/
198-
/******/ document.head.appendChild(linkTag);
198+
/******/ if (oldTag) {
199+
/******/ oldTag.after(linkTag);
200+
/******/ } else {
201+
/******/ document.head.appendChild(linkTag);
202+
/******/ }
199203
/******/ return linkTag;
200204
/******/ };
201205
/******/ var findStylesheet = (href, fullhref) => {
@@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
217221
/******/ var href = __webpack_require__.miniCssF(chunkId);
218222
/******/ var fullhref = __webpack_require__.p + href;
219223
/******/ if(findStylesheet(href, fullhref)) return resolve();
220-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
224+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
221225
/******/ });
222226
/******/ }
223227
/******/ // object to store loaded CSS chunks

test/cases/chunkFilename-fullhash/expected/webpack-5/0.03b0b5d315f22aa63867.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5/0.70641d5edcf4cb37424c.css

File renamed without changes.

test/cases/chunkFilename-fullhash/expected/webpack-5/03b0b5d315f22aa63867.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5/70641d5edcf4cb37424c.css

File renamed without changes.

‎test/cases/chunkFilename-fullhash/expected/webpack-5/main.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
7373
/******/
7474
/******/ /* webpack/runtime/getFullHash */
7575
/******/ (() => {
76-
/******/ __webpack_require__.h = () => ("03b0b5d315f22aa63867")
76+
/******/ __webpack_require__.h = () => ("70641d5edcf4cb37424c")
7777
/******/ })();
7878
/******/
7979
/******/ /* webpack/runtime/global */
@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
171171
/******/
172172
/******/ /* webpack/runtime/css loading */
173173
/******/ (() => {
174-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
174+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
175175
/******/ var linkTag = document.createElement("link");
176176
/******/
177177
/******/ linkTag.rel = "stylesheet";
@@ -195,7 +195,11 @@ __webpack_require__.r(__webpack_exports__);
195195
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
196196
/******/ linkTag.href = fullhref;
197197
/******/
198-
/******/ document.head.appendChild(linkTag);
198+
/******/ if (oldTag) {
199+
/******/ oldTag.after(linkTag);
200+
/******/ } else {
201+
/******/ document.head.appendChild(linkTag);
202+
/******/ }
199203
/******/ return linkTag;
200204
/******/ };
201205
/******/ var findStylesheet = (href, fullhref) => {
@@ -217,7 +221,7 @@ __webpack_require__.r(__webpack_exports__);
217221
/******/ var href = __webpack_require__.miniCssF(chunkId);
218222
/******/ var fullhref = __webpack_require__.p + href;
219223
/******/ if(findStylesheet(href, fullhref)) return resolve();
220-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
224+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
221225
/******/ });
222226
/******/ }
223227
/******/ // object to store loaded CSS chunks

‎test/cases/hmr/expected/main.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -934,7 +934,7 @@ __webpack_require__.r(__webpack_exports__);
934934
/******/
935935
/******/ /* webpack/runtime/css loading */
936936
/******/ (() => {
937-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
937+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
938938
/******/ var linkTag = document.createElement("link");
939939
/******/
940940
/******/ linkTag.rel = "stylesheet";
@@ -958,7 +958,11 @@ __webpack_require__.r(__webpack_exports__);
958958
/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
959959
/******/ linkTag.href = fullhref;
960960
/******/
961-
/******/ document.head.appendChild(linkTag);
961+
/******/ if (oldTag) {
962+
/******/ oldTag.after(linkTag);
963+
/******/ } else {
964+
/******/ document.head.appendChild(linkTag);
965+
/******/ }
962966
/******/ return linkTag;
963967
/******/ };
964968
/******/ var findStylesheet = (href, fullhref) => {
@@ -980,7 +984,7 @@ __webpack_require__.r(__webpack_exports__);
980984
/******/ var href = __webpack_require__.miniCssF(chunkId);
981985
/******/ var fullhref = __webpack_require__.p + href;
982986
/******/ if(findStylesheet(href, fullhref)) return resolve();
983-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
987+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
984988
/******/ });
985989
/******/ }
986990
/******/ // no chunk loading
@@ -1007,7 +1011,7 @@ __webpack_require__.r(__webpack_exports__);
10071011
/******/ var oldTag = findStylesheet(href, fullhref);
10081012
/******/ if(!oldTag) return;
10091013
/******/ promises.push(new Promise((resolve, reject) => {
1010-
/******/ var tag = createStylesheet(chunkId, fullhref, () => {
1014+
/******/ var tag = createStylesheet(chunkId, fullhref, oldTag, () => {
10111015
/******/ tag.as = "style";
10121016
/******/ tag.rel = "preload";
10131017
/******/ resolve();

‎test/cases/insert-function/expected/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
/******/
156156
/******/ /* webpack/runtime/css loading */
157157
/******/ (() => {
158-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
158+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
159159
/******/ var linkTag = document.createElement("link");
160160
/******/
161161
/******/ linkTag.rel = "stylesheet";
@@ -206,7 +206,7 @@
206206
/******/ var href = __webpack_require__.miniCssF(chunkId);
207207
/******/ var fullhref = __webpack_require__.p + href;
208208
/******/ if(findStylesheet(href, fullhref)) return resolve();
209-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
209+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
210210
/******/ });
211211
/******/ }
212212
/******/ // object to store loaded CSS chunks

‎test/cases/insert-string/expected/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
/******/
156156
/******/ /* webpack/runtime/css loading */
157157
/******/ (() => {
158-
/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
158+
/******/ var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
159159
/******/ var linkTag = document.createElement("link");
160160
/******/
161161
/******/ linkTag.rel = "stylesheet";
@@ -202,7 +202,7 @@
202202
/******/ var href = __webpack_require__.miniCssF(chunkId);
203203
/******/ var fullhref = __webpack_require__.p + href;
204204
/******/ if(findStylesheet(href, fullhref)) return resolve();
205-
/******/ createStylesheet(chunkId, fullhref, resolve, reject);
205+
/******/ createStylesheet(chunkId, fullhref, null, resolve, reject);
206206
/******/ });
207207
/******/ }
208208
/******/ // object to store loaded CSS chunks

0 commit comments

Comments
 (0)