diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f7a334e..f36c55ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.7.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.3...v2.7.4) (2023-03-16)
+
+
+### Bug Fixes
+
+* module identifier, don't merge modules with different media/suppors/layer ([#1021](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1021)) ([ad3729b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/ad3729ba9d3fed328a170340eafb66e8c2a13bdc))
+
 ### [2.7.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.2...v2.7.3) (2023-03-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index 5c6bc0e7..407d5286 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mini-css-extract-plugin",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mini-css-extract-plugin",
-      "version": "2.7.3",
+      "version": "2.7.4",
       "license": "MIT",
       "dependencies": {
         "schema-utils": "^4.0.0"
@@ -15515,9 +15515,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.75.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
-      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
+      "version": "5.76.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
+      "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -27862,9 +27862,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.75.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
-      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
+      "version": "5.76.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
+      "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
diff --git a/package.json b/package.json
index 3b91d6b7..69ca8823 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-css-extract-plugin",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "extracts CSS into separate files",
   "license": "MIT",
   "repository": "webpack-contrib/mini-css-extract-plugin",
diff --git a/src/index.js b/src/index.js
index 6a5969e1..e20f93c2 100644
--- 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
new file mode 100644
index 00000000..ff1323b1
--- /dev/null
+++ 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
new file mode 100644
index 00000000..e8518be8
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b6e23f99
--- /dev/null
+++ 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
new file mode 100644
index 00000000..36f1d369
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8feb4cb7
--- /dev/null
+++ 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
new file mode 100644
index 00000000..ff1323b1
--- /dev/null
+++ 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
new file mode 100644
index 00000000..e8518be8
--- /dev/null
+++ 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
new file mode 100644
index 00000000..fb259abd
--- /dev/null
+++ 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
new file mode 100644
index 00000000..80a1ddcc
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8feb4cb7
--- /dev/null
+++ 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
new file mode 100644
index 00000000..ff1323b1
--- /dev/null
+++ 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
new file mode 100644
index 00000000..e8518be8
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b8e4b9f0
--- /dev/null
+++ 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
new file mode 100644
index 00000000..9551bc78
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8feb4cb7
--- /dev/null
+++ 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",
+    }),
+  ],
+};