fix: module identifier, don't merge modules with different media/supp…

…ors/layer (#1021)
webpack-contrib · Mar 16, 2023 · ad3729b · ad3729b
1 parent e0ca181
commit ad3729b
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -165,7 +165,7 @@ class MiniCssExtractPlugin {
       }
 
       identifier() {
-        return `css|${this._identifier}|${this._identifierIndex}`;
+        return `css|${this._identifier}|${this._identifierIndex}|${this.layer}|${this.supports}|${this.media}}}`;
       }
 
       /**

diff --git a/test/cases/issue-css-loader-1503-1/dark.css b/test/cases/issue-css-loader-1503-1/dark.css
@@ -0,0 +1,3 @@
+body {
+  background: black;
+}
diff --git a/test/cases/issue-css-loader-1503-1/expected/dark.css b/test/cases/issue-css-loader-1503-1/expected/dark.css
@@ -0,0 +1,4 @@
+body {
+  background: black;
+}
+
diff --git a/test/cases/issue-css-loader-1503-1/expected/index.css b/test/cases/issue-css-loader-1503-1/expected/index.css
@@ -0,0 +1,8 @@
+@supports (display: flex) {
+body {
+  background: black;
+}
+
+}
+
+
diff --git a/test/cases/issue-css-loader-1503-1/index.css b/test/cases/issue-css-loader-1503-1/index.css
@@ -0,0 +1 @@
+@import url("dark.css") supports(display: flex);
diff --git a/test/cases/issue-css-loader-1503-1/webpack.config.js b/test/cases/issue-css-loader-1503-1/webpack.config.js
@@ -0,0 +1,31 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: {
+    dark: "./dark.css",
+    index: "./index.css",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/test/cases/issue-css-loader-1503-2/dark.css b/test/cases/issue-css-loader-1503-2/dark.css
@@ -0,0 +1,3 @@
+body {
+  background: black;
+}
diff --git a/test/cases/issue-css-loader-1503-2/expected/dark.css b/test/cases/issue-css-loader-1503-2/expected/dark.css
@@ -0,0 +1,4 @@
+body {
+  background: black;
+}
+
diff --git a/test/cases/issue-css-loader-1503-2/expected/index.css b/test/cases/issue-css-loader-1503-2/expected/index.css
@@ -0,0 +1,8 @@
+@layer framework.component {
+body {
+  background: black;
+}
+
+}
+
+
diff --git a/test/cases/issue-css-loader-1503-2/index.css b/test/cases/issue-css-loader-1503-2/index.css
@@ -0,0 +1 @@
+@import url("dark.css") layer(framework.component);
diff --git a/test/cases/issue-css-loader-1503-2/webpack.config.js b/test/cases/issue-css-loader-1503-2/webpack.config.js
@@ -0,0 +1,31 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: {
+    dark: "./dark.css",
+    index: "./index.css",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/test/cases/issue-css-loader-1503/dark.css b/test/cases/issue-css-loader-1503/dark.css
@@ -0,0 +1,3 @@
+body {
+  background: black;
+}
diff --git a/test/cases/issue-css-loader-1503/expected/dark.css b/test/cases/issue-css-loader-1503/expected/dark.css
@@ -0,0 +1,4 @@
+body {
+  background: black;
+}
+
diff --git a/test/cases/issue-css-loader-1503/expected/index.css b/test/cases/issue-css-loader-1503/expected/index.css
@@ -0,0 +1,8 @@
+@media (prefers-color-scheme: dark) {
+body {
+  background: black;
+}
+
+}
+
+
diff --git a/test/cases/issue-css-loader-1503/index.css b/test/cases/issue-css-loader-1503/index.css
@@ -0,0 +1 @@
+@import "./dark.css" (prefers-color-scheme: dark);
diff --git a/test/cases/issue-css-loader-1503/webpack.config.js b/test/cases/issue-css-loader-1503/webpack.config.js
@@ -0,0 +1,31 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: {
+    dark: "./dark.css",
+    index: "./index.css",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};