fix: source map generation with pathinfo (#817)

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/extra.css

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

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

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

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

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

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

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

test/cases/pathinfo-devtool-source-map/webpack.config.js

@@ -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",
+ }),
+ ],
+};