Add onlyTopLevel option prevent eject nested media queries from parent

Author: yunusga

index.js

@@ -12,6 +12,7 @@ module.exports = (opts = {}) => {
     {
       sort: 'mobile-first',
       configuration: false,
+      onlyTopLevel: false,
     },
     opts
   )
@@ -26,26 +27,48 @@ module.exports = (opts = {}) => {
       let atRules = [];
 
       root.walkAtRules('media', atRule => {
-        let query = atRule.params
+        if (opts.onlyTopLevel && atRule.parent.type === 'root') {
+          let query = atRule.params
 
-        if (!atRules[query]) {
-          atRules[query] = new AtRule({
-            name: atRule.name,
-            params: atRule.params,
-            source: atRule.source
+          if (!atRules[query]) {
+            atRules[query] = new AtRule({
+              name: atRule.name,
+              params: atRule.params,
+              source: atRule.source
+            })
+          }
+
+          atRule.nodes.forEach(node => {
+            atRules[query].append(node.clone())
           })
+
+          atRule.remove()
         }
 
-        atRule.nodes.forEach(node => {
-          atRules[query].append(node.clone())
-        })
+        if (!opts.onlyTopLevel) {
+          let query = atRule.params
 
-        atRule.remove()
-      })
+          if (!atRules[query]) {
+            atRules[query] = new AtRule({
+              name: atRule.name,
+              params: atRule.params,
+              source: atRule.source
+            })
+          }
 
-      sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
-        root.append(atRules[query])
+          atRule.nodes.forEach(node => {
+            atRules[query].append(node.clone())
+          })
+
+          atRule.remove()
+        }
       })
+
+      if (atRules) {
+        sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
+          root.append(atRules[query])
+        })
+      }
     }
   }
 }

index.test.js

@@ -146,3 +146,9 @@ it('postcss nested -> media minmax', async () => {
   let output = fs.readFileSync('./test/postcss.media.minmax.out.css', 'utf8')
   await mediaMinmaxAfterNestedRun(input, output)
 })
+
+it('only top level', async () => {
+  let input = fs.readFileSync('./test/only-top-level.in.css', 'utf8')
+  let output = fs.readFileSync('./test/only-top-level.out.css', 'utf8')
+  await run(input, output, { onlyTopLevel: true })
+})

package-lock.json

@@ -0,0 +1,39 @@
+@media (min-width: 700px) {
+  .a {
+    color: #00FF00;
+  }
+}
+
+@supports (animation-name: test) {
+  @media (min-width: 250px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 150px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}
+
+@media print {
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}
+
+@media (width >= 400px) {
+  .a {
+    color: #00FF00;
+  }
+}

test/only-top-level.in.css

@@ -0,0 +1,36 @@
+@supports (animation-name: test) {
+  @media (min-width: 250px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 150px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}
+@media (width >= 400px) {
+  .a {
+    color: #00FF00;
+  }
+}
+@media (min-width: 700px) {
+  .a {
+    color: #00FF00;
+  }
+}
+@media print {
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}