Support nested queries

A nested media queries should be popped up to root and pack. This
change resolves hail2u#50 in most case.

Author: hail2u

index.js

@@ -160,10 +160,26 @@ module.exports = postcss.plugin(pkg.name, (opts) => {
     }
 
     css.walkAtRules("media", (atRule) => {
-      if (atRule.parent.type !== "root") {
+      if (atRule.parent.parent && atRule.parent.parent.type !== "root") {
         return;
       }
 
+      if (atRule.parent.type !== "root") {
+        const newAtRule = postcss.atRule({
+          name: atRule.parent.name,
+          params: atRule.parent.params
+        });
+
+        atRule.each((rule) => {
+          newAtRule.append(rule);
+        });
+        atRule.remove();
+        atRule = postcss.atRule({
+          name: atRule.name,
+          params: atRule.params
+        }).append(newAtRule);
+      }
+
       const queryList = atRule.params;
       const past = queries[queryList];
 

test/fixtures/issue50.css renamed to test/expected/nested-queries.css

@@ -2,20 +2,22 @@
   z-index: 1;
 }
 
-@media (min-width: 1024px) {
+@supports (display: auto) {
   .foo {
-    z-index: 4;
+    z-index: 2;
   }
 }
 
-@supports (display: auto) {
+@media (min-width: 1024px) {
   .foo {
-    z-index: 2;
+    z-index: 3;
   }
-
-  @media (min-width: 1024px) {
+  @supports (display: auto) {
     .foo {
-      z-index: 3;
+      z-index: 4;
     }
   }
+  .bar {
+    z-index: 5;
+  }
 }

test/expected/issue50.css renamed to test/fixtures/nested-queries.css

@@ -2,20 +2,26 @@
   z-index: 1;
 }
 
+@media (min-width: 1024px) {
+  .foo {
+    z-index: 3;
+  }
+}
+
 @supports (display: auto) {
   .foo {
     z-index: 2;
   }
 
   @media (min-width: 1024px) {
     .foo {
-      z-index: 3;
+      z-index: 4;
     }
   }
 }
 
 @media (min-width: 1024px) {
-  .foo {
-    z-index: 4;
+  .bar {
+    z-index: 5;
   }
 }