fix: order of @import with pathinfo (#815)

Author: alexander-akait

package-lock.json

@@ -29,6 +29,7 @@
     "release": "standard-version",
     "security": "npm audit --production",
     "test:only": "cross-env NODE_ENV=test jest",
+    "test:only:experimental": "EXPERIMENTAL_USE_IMPORT_MODULE=true cross-env NODE_ENV=test jest",
     "test:watch": "npm run test:only -- --watch",
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "test:manual": "npm run build && webpack serve ./test/manual/src/index.js --open --config ./test/manual/webpack.config.js",

package.json

@@ -989,6 +989,7 @@ class MiniCssExtractPlugin {
       let content = module.content.toString();
 
       const readableIdentifier = module.readableIdentifier(requestShortener);
+      const startsWithAtRuleImport = /^@import url/.test(content);
 
       if (compilation.outputOptions.pathinfo) {
         // From https://github.com/webpack/webpack/blob/29eff8a74ecc2f87517b627dee451c2af9ed3f3f/lib/ModuleInfoHeaderPlugin.js#L191-L194
@@ -999,7 +1000,7 @@ class MiniCssExtractPlugin {
         content = headerStr + content;
       }
 
-      if (/^@import url/.test(content)) {
+      if (startsWithAtRuleImport) {
         // HACK for IE
         // http://stackoverflow.com/a/14676665/1458162
         if (module.media) {

src/index.js

@@ -0,0 +1,3 @@
+body {
+  font-family: "Manrope";
+}

test/cases/at-import-in-entry/a.css

@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);

test/cases/at-import-in-entry/b.css

@@ -0,0 +1,16 @@
+/*!****************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./b.css ***!
+  \****************************************************************/
+@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);
+/*!****************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./a.css ***!
+  \****************************************************************/
+body {
+  font-family: "Manrope";
+}
+
+/*!********************************************************************!*\
+  !*** css ../../../node_modules/css-loader/dist/cjs.js!./b.css (1) ***!
+  \********************************************************************/
+
+

test/cases/at-import-in-entry/expected/main.css

@@ -0,0 +1,22 @@
+import Self from "../../../src";
+
+module.exports = {
+  mode: "development",
+  entry: ["./a.css", "./b.css"],
+  output: {
+    pathinfo: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};

test/cases/at-import-in-entry/webpack.config.js

@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("ab3ada7332542b91ceb4")
+/******/ 		__webpack_require__.h = () => ("d67c698e3fd6a71ab1e8")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
@@ -308,12 +308,14 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 			// add "moreModules" to the modules object,
 /******/ 			// then flag all "chunkIds" as loaded and fire callback
 /******/ 			var moduleId, chunkId, i = 0;
-/******/ 			for(moduleId in moreModules) {
-/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
 /******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
 /******/ 			}
-/******/ 			if(runtime) var result = runtime(__webpack_require__);
 /******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
 /******/ 			for(;i < chunkIds.length; i++) {
 /******/ 				chunkId = chunkIds[i];