From 60c53311c125425d2e742414ed6dbd59cea8cbe4 Mon Sep 17 00:00:00 2001
From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Date: Wed, 10 Jan 2024 18:02:44 +0300
Subject: [PATCH] fix: adding media, supports and layer for external import
 (#1072)

---
 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                         | 19 ++++++++++++++
 .../at-import-external-with-media/index.js    |  2 ++
 .../webpack.config.js                         | 18 +++++++++++++
 6 files changed, 82 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..6207fe2a
--- /dev/null
+++ b/test/cases/at-import-external-with-media/expected/main.css
@@ -0,0 +1,19 @@
+@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",
+    }),
+  ],
+};