From e8925d006a0879137376db9c0a951ba65b05e407 Mon Sep 17 00:00:00 2001
From: "alexander.akait" <sheo13666q@gmail.com>
Date: Wed, 10 Jan 2024 17:54:56 +0300
Subject: [PATCH 1/2] fix: adding media, supports and layer for external import

---
 src/index.js                                  | 25 +++++++++++++++++--
 .../cases/at-import-external-with-media/a.css | 15 +++++++++++
 .../cases/at-import-external-with-media/b.css |  5 ++++
 .../expected/main.css                         | 17 +++++++++++++
 .../at-import-external-with-media/index.js    |  2 ++
 .../webpack.config.js                         | 18 +++++++++++++
 6 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 test/cases/at-import-external-with-media/a.css
 create mode 100644 test/cases/at-import-external-with-media/b.css
 create mode 100644 test/cases/at-import-external-with-media/expected/main.css
 create mode 100644 test/cases/at-import-external-with-media/index.js
 create mode 100644 test/cases/at-import-external-with-media/webpack.config.js

diff --git a/src/index.js b/src/index.js
index d708d95c..c23cc837 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1368,11 +1368,32 @@ class MiniCssExtractPlugin {
 
         // HACK for IE
         // http://stackoverflow.com/a/14676665/1458162
-        if (module.media) {
+        if (
+          module.media ||
+          module.supports ||
+          typeof module.layer !== "undefined"
+        ) {
+          let atImportExtra = "";
+
+          const needLayer = typeof module.layer !== "undefined";
+
+          if (needLayer) {
+            atImportExtra +=
+              module.layer.length > 0 ? ` layer(${module.layer})` : " layer";
+          }
+
+          if (module.supports) {
+            atImportExtra += ` supports(${module.supports})`;
+          }
+
+          if (module.media) {
+            atImportExtra += ` ${module.media}`;
+          }
+
           // insert media into the @import
           // this is rar
           // TODO improve this and parse the CSS to support multiple medias
-          content = content.replace(/;|\s*$/, `${module.media};`);
+          content = content.replace(/;|\s*$/, `${atImportExtra};`);
         }
 
         externalsSource.add(content);
diff --git a/test/cases/at-import-external-with-media/a.css b/test/cases/at-import-external-with-media/a.css
new file mode 100644
index 00000000..1652c1f6
--- /dev/null
+++ b/test/cases/at-import-external-with-media/a.css
@@ -0,0 +1,15 @@
+@import url(http://some/path/to/css1.css);
+@import url(http://some/path/to/css2.css) screen and (max-width: 1024px);
+@import url(http://some/path/to/css3.css) supports(display: grid) screen and
+  (max-width: 400px);
+@import url(http://some/path/to/css4.css) supports(display: grid);
+@import url(http://some/path/to/css5.css) layer();
+@import url(http://some/path/to/css6.css) layer;
+@import url(http://some/path/to/css7.css) layer(layer-name)
+  supports(display: grid) screen and (max-width: 1024px);
+@import url(http://some/path/to/css8.css) layer(layer-name) screen and
+  (max-width: 1024px);
+
+body {
+  background: red;
+}
diff --git a/test/cases/at-import-external-with-media/b.css b/test/cases/at-import-external-with-media/b.css
new file mode 100644
index 00000000..d1ff1aee
--- /dev/null
+++ b/test/cases/at-import-external-with-media/b.css
@@ -0,0 +1,5 @@
+@import url("https://some/external/css");
+
+.b {
+  background: red;
+}
diff --git a/test/cases/at-import-external-with-media/expected/main.css b/test/cases/at-import-external-with-media/expected/main.css
new file mode 100644
index 00000000..ed84ad17
--- /dev/null
+++ b/test/cases/at-import-external-with-media/expected/main.css
@@ -0,0 +1,17 @@
+@import url(http://some/path/to/css1.css);
+@import url(http://some/path/to/css2.css) screen and (max-width: 1024px);
+@import url(http://some/path/to/css3.css) supports(display: grid) screen and (max-width: 400px);
+@import url(http://some/path/to/css4.css) supports(display: grid);
+@import url(http://some/path/to/css5.css) layer;
+@import url(http://some/path/to/css6.css) layer;
+@import url(http://some/path/to/css7.css) layer(layer-name) supports(display: grid) screen and (max-width: 1024px);
+@import url(http://some/path/to/css8.css) layer(layer-name) screen and (max-width: 1024px);
+@import url(https://some/external/css);
+body {
+  background: red;
+}
+
+.b {
+  background: red;
+}
+
diff --git a/test/cases/at-import-external-with-media/index.js b/test/cases/at-import-external-with-media/index.js
new file mode 100644
index 00000000..5337afb9
--- /dev/null
+++ b/test/cases/at-import-external-with-media/index.js
@@ -0,0 +1,2 @@
+import "./a.css";
+import "./b.css";
diff --git a/test/cases/at-import-external-with-media/webpack.config.js b/test/cases/at-import-external-with-media/webpack.config.js
new file mode 100644
index 00000000..cf55c08c
--- /dev/null
+++ b/test/cases/at-import-external-with-media/webpack.config.js
@@ -0,0 +1,18 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};

From 0099faf71209fa11d312d1cbdf69dbf3f12d92d2 Mon Sep 17 00:00:00 2001
From: "alexander.akait" <sheo13666q@gmail.com>
Date: Wed, 10 Jan 2024 17:57:36 +0300
Subject: [PATCH 2/2] test: update

---
 test/cases/at-import-external-with-media/expected/main.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/cases/at-import-external-with-media/expected/main.css b/test/cases/at-import-external-with-media/expected/main.css
index ed84ad17..6207fe2a 100644
--- a/test/cases/at-import-external-with-media/expected/main.css
+++ b/test/cases/at-import-external-with-media/expected/main.css
@@ -1,11 +1,13 @@
 @import url(http://some/path/to/css1.css);
 @import url(http://some/path/to/css2.css) screen and (max-width: 1024px);
-@import url(http://some/path/to/css3.css) supports(display: grid) screen and (max-width: 400px);
+@import url(http://some/path/to/css3.css) supports(display: grid) screen and
+  (max-width: 400px);
 @import url(http://some/path/to/css4.css) supports(display: grid);
 @import url(http://some/path/to/css5.css) layer;
 @import url(http://some/path/to/css6.css) layer;
 @import url(http://some/path/to/css7.css) layer(layer-name) supports(display: grid) screen and (max-width: 1024px);
-@import url(http://some/path/to/css8.css) layer(layer-name) screen and (max-width: 1024px);
+@import url(http://some/path/to/css8.css) layer(layer-name) screen and
+  (max-width: 1024px);
 @import url(https://some/external/css);
 body {
   background: red;