fix import with layer

index.js

@@ -79,9 +79,46 @@ function AtImport(options) {
           }
 
           if (stmt.type === "import") {
-            stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`
+            const media = stmt.media.join(", ")
+            if (stmt.layer.length) {
+              const layerName = stmt.layer
+                .filter(layer => layer !== "")
+                .join(".")
+
+              let layerParams = "layer"
+              if (layerName) {
+                layerParams = `layer(${layerName})`
+              }
+
+              stmt.node.params = `${stmt.fullUri} ${layerParams})${media}`
+            } else {
+              stmt.node.params = `${stmt.fullUri} ${media}`
+            }
           } else if (stmt.type === "media") {
-            stmt.node.params = stmt.media.join(", ")
+            if (stmt.layer.length) {
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: stmt.node.source,
+              })
+
+              if (stmt.parentMedia && stmt.parentMedia.length) {
+                const mediaNode = atRule({
+                  name: "media",
+                  params: stmt.parentMedia.join(", "),
+                  source: stmt.node.source,
+                })
+
+                mediaNode.append(layerNode)
+                layerNode.append(stmt.node)
+                stmt.node = mediaNode
+              } else {
+                layerNode.append(stmt.node)
+                stmt.node = layerNode
+              }
+            } else {
+              stmt.node.params = stmt.media.join(", ")
+            }
           } else {
             const { nodes } = stmt
             const { parent } = nodes[0]
@@ -170,7 +207,9 @@ function AtImport(options) {
             return stmts.reduce((promise, stmt) => {
               return promise.then(() => {
                 stmt.media = joinMedia(media, stmt.media || [])
+                stmt.parentMedia = media
                 stmt.layer = joinLayer(layer, stmt.layer || [])
+                stmt.parentLayer = layer
 
                 // skip protocol base uri (protocol://url) or protocol-relative
                 if (

test/fixtures/imports/layer-level-2.css

@@ -0,0 +1,7 @@
+@import url("layer-level-3.css") layer(level-3) (min-width: 320px);
+
+@layer Y {
+  body {
+    color: purple;
+  }
+}

test/fixtures/imports/layer-level-3.css

@@ -0,0 +1,5 @@
+@layer Z {
+  body {
+    color: cyan;
+  }
+}

test/fixtures/imports/layer.css

@@ -0,0 +1,33 @@
+@import url("layer-level-2.css") layer(level-2);
+
+body {
+  order: 1;
+}
+
+@media (min-width: 50rem) {
+  body {
+    order: 2;
+  }
+}
+
+@keyframes RED_TO_BLUE {
+  0% {
+    background-color: red;
+  }
+  100% {
+    background-color: blue;
+  }
+}
+
+@supports (display: grid) {
+  body {
+    display: grid;
+    order: 3;
+  }
+}
+
+@layer A {
+  body {
+    order: 4;
+  }
+}

test/fixtures/layer-import-atrules.css

@@ -0,0 +1,3 @@
+@import url("layer.css") layer(imported-with-media) screen;
+
+@import url("layer.css") layer(imported-without-media);

test/fixtures/layer-import-atrules.expected.css

@@ -0,0 +1,127 @@
+@media screen and (min-width: 320px) {
+@layer imported-with-media.level-2.level-3 {
+@layer Z {
+  body {
+    color: cyan;
+  }
+}
+}
+}
+
+@media screen {
+@layer imported-with-media.level-2 {
+
+@layer Y {
+  body {
+    color: purple;
+  }
+}
+}
+}
+
+@media screen {
+@layer imported-with-media {
+
+body {
+  order: 1;
+}
+}
+}
+
+@media screen {
+@layer imported-with-media {
+
+@media (min-width: 50rem) {
+  body {
+    order: 2;
+  }
+}
+}
+}
+
+@media screen {
+@layer imported-with-media {
+
+@keyframes RED_TO_BLUE {
+  0% {
+    background-color: red;
+  }
+  100% {
+    background-color: blue;
+  }
+}
+
+@supports (display: grid) {
+  body {
+    display: grid;
+    order: 3;
+  }
+}
+
+@layer A {
+  body {
+    order: 4;
+  }
+}
+}
+}
+
+@media (min-width: 320px) {
+@layer imported-without-media.level-2.level-3 {
+@layer Z {
+  body {
+    color: cyan;
+  }
+}
+}
+}
+
+@layer imported-without-media.level-2 {
+
+@layer Y {
+  body {
+    color: purple;
+  }
+}
+}
+
+@layer imported-without-media {
+
+body {
+  order: 1;
+}
+}
+
+@layer imported-without-media {
+
+@media (min-width: 50rem) {
+  body {
+    order: 2;
+  }
+}
+}
+
+@layer imported-without-media {
+
+@keyframes RED_TO_BLUE {
+  0% {
+    background-color: red;
+  }
+  100% {
+    background-color: blue;
+  }
+}
+
+@supports (display: grid) {
+  body {
+    display: grid;
+    order: 3;
+  }
+}
+
+@layer A {
+  body {
+    order: 4;
+  }
+}
+}

test/layer.js

@@ -6,3 +6,9 @@ const test = require("ava")
 const checkFixture = require("./helpers/check-fixture")
 
 test("should resolve layers of import statements", checkFixture, "layer")
+
+test(
+  "should correctly wrap imported at rules in layers",
+  checkFixture,
+  "layer-import-atrules"
+)