diff --git a/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.css b/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.css
new file mode 100644
index 00000000000..9a143ab169a
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.css
@@ -0,0 +1,3 @@
+.index-dependency-dependency {
+  background-color: red;
+}
diff --git a/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.js b/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.js
new file mode 100644
index 00000000000..761eec7c020
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index-dependency-dependency.js
@@ -0,0 +1,3 @@
+import "./index-dependency-dependency.css";
+
+export const indexDependencyDependency = () => {};
diff --git a/test/configCases/optimization/order-of-side-effect-modules/index-dependency.css b/test/configCases/optimization/order-of-side-effect-modules/index-dependency.css
new file mode 100644
index 00000000000..0908338722b
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index-dependency.css
@@ -0,0 +1,3 @@
+.index-dependency {
+  background-color: aqua;
+}
diff --git a/test/configCases/optimization/order-of-side-effect-modules/index-dependency.js b/test/configCases/optimization/order-of-side-effect-modules/index-dependency.js
new file mode 100644
index 00000000000..7dbd182ab25
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index-dependency.js
@@ -0,0 +1,9 @@
+// this would work
+// import { indexDependencyDependency as A } from "./index-dependency-dependency";
+// export const indexDependencyDependency = A
+
+export { indexDependencyDependency } from "./index-dependency-dependency";
+
+import "./index-dependency.css";
+
+export const indexDependency = () => {};
diff --git a/test/configCases/optimization/order-of-side-effect-modules/index.css b/test/configCases/optimization/order-of-side-effect-modules/index.css
new file mode 100644
index 00000000000..64f9c3b658a
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index.css
@@ -0,0 +1,3 @@
+.index {
+  background-color: black;
+}
diff --git a/test/configCases/optimization/order-of-side-effect-modules/index.js b/test/configCases/optimization/order-of-side-effect-modules/index.js
new file mode 100644
index 00000000000..fe1f196fde2
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/index.js
@@ -0,0 +1,33 @@
+import { indexDependencyDependency } from "./index-dependency";
+import "./index.css";
+
+indexDependencyDependency();
+
+it("correct module order with \"sideEffects\": [\"*.css\"]", function (done) {
+	const postOrder = __STATS__.modules
+		.filter(mod => mod.name.endsWith(".css"))
+		.map(mod => ({ module: mod.name, postOrderIndex: mod.postOrderIndex }));
+
+	console.log(postOrder);
+
+    // this is the order we'd get if we don't use `"sideEffects": ["*.css"]` in package.json
+    // since mini-css-extract-plugin loads .css modules in postOrder order
+    // our css classes would be index-dependency-dependency.css (least important) -> index-dependency.css -> index.css
+	expect(postOrder).toStrictEqual([
+		{ module: "./index.css", postOrderIndex: 5 },
+		{ module: "./index-dependency.css", postOrderIndex: 3 },
+		{ module: "./index-dependency-dependency.css", postOrderIndex: 1 }
+	]);
+
+    
+    // this is the actual order with `"sideEffects": ["*.css"]`
+    const actualOrder = [
+        { module: './index.css', postOrderIndex: 1 },
+        // bug: index-dependency-depednency.css will override index.css, even though in reality it was imported first
+        { module: './index-dependency-dependency.css', postOrderIndex: 2 },
+        // another bug: index-dependency.css is missing from the bundle entirely, even though it should be loaded
+        { module: './index-dependency.css', postOrderIndex: null }
+      ]
+
+	done();
+});
diff --git a/test/configCases/optimization/order-of-side-effect-modules/package.json b/test/configCases/optimization/order-of-side-effect-modules/package.json
new file mode 100644
index 00000000000..1e84294f864
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/package.json
@@ -0,0 +1,3 @@
+{
+  "sideEffects": ["*.css"]
+}
diff --git a/test/configCases/optimization/order-of-side-effect-modules/webpack.config.js b/test/configCases/optimization/order-of-side-effect-modules/webpack.config.js
new file mode 100644
index 00000000000..9027d7b7687
--- /dev/null
+++ b/test/configCases/optimization/order-of-side-effect-modules/webpack.config.js
@@ -0,0 +1,11 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ["css-loader"]
+			}
+		]
+	}
+};