fix: source map generation with pathinfo (#817)

Author: alexander-akait

src/index.js

@@ -991,16 +991,22 @@ class MiniCssExtractPlugin {
       const readableIdentifier = module.readableIdentifier(requestShortener);
       const startsWithAtRuleImport = /^@import url/.test(content);
 
+      let header;
+
       if (compilation.outputOptions.pathinfo) {
         // From https://github.com/webpack/webpack/blob/29eff8a74ecc2f87517b627dee451c2af9ed3f3f/lib/ModuleInfoHeaderPlugin.js#L191-L194
         const reqStr = readableIdentifier.replace(/\*\//g, "*_/");
         const reqStrStar = "*".repeat(reqStr.length);
         const headerStr = `/*!****${reqStrStar}****!*\\\n  !*** ${reqStr} ***!\n  \\****${reqStrStar}****/\n`;
 
-        content = headerStr + content;
+        header = new RawSource(headerStr);
       }
 
       if (startsWithAtRuleImport) {
+        if (typeof header !== "undefined") {
+          externalsSource.add(header);
+        }
+
         // HACK for IE
         // http://stackoverflow.com/a/14676665/1458162
         if (module.media) {
@@ -1013,6 +1019,10 @@ class MiniCssExtractPlugin {
         externalsSource.add(content);
         externalsSource.add("\n");
       } else {
+        if (typeof header !== "undefined") {
+          source.add(header);
+        }
+
         if (module.media) {
           source.add(`@media ${module.media} {\n`);
         }

test/cases/pathinfo-devtool-source-map/expected/main.css

@@ -0,0 +1,3 @@
+body {
+  background: yellow;
+}

test/cases/pathinfo-devtool-source-map/expected/main.css.map

@@ -0,0 +1,3 @@
+import "./style.css";
+import "./other.css";
+import "./extra.css";

test/cases/pathinfo-devtool-source-map/extra.css

@@ -0,0 +1,3 @@
+body {
+  background: blue;
+}

test/cases/pathinfo-devtool-source-map/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/pathinfo-devtool-source-map/other.css

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