fix: adding media, supports and layer for external import (#1072)

Author: alexander-akait

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);

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;
+}

test/cases/at-import-external-with-media/b.css

@@ -0,0 +1,5 @@
+@import url("https://some/external/css");
+
+.b {
+  background: red;
+}

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;
+}
+

test/cases/at-import-external-with-media/index.js

@@ -0,0 +1,2 @@
+import "./a.css";
+import "./b.css";

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",
+    }),
+  ],
+};