postcss-sort-media-queries 5.1.0 → 5.2.0

package/README.md

@@ -29,6 +29,7 @@
    - [sort](#sort)
    - [Custom sort function](#custom-sort-function)
    - [Sort configuration](#sort-configuration)
+   - [Only Top Level](#only-top-level)
  - [Changelog](#changelog)
  - [License](#license)
  - [Other PostCSS plugins](#other-postcss-plugins)
@@ -236,6 +237,18 @@ postcss([
 
 Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
 
+### Only Top Level
+
+Sort only top level media queries to prevent eject nested media queries from parent node
+
+```js
+postcss([
+  sortMediaQueries({
+    onlyTopLevel: true,
+  })
+]).process(css);
+```
+
 ---
 
 ## Changelog

package/browser.js

@@ -1,54 +1,54 @@
-function sortAtRules(queries, sort, sortCSSmq) {
-  if (typeof sort !== 'function') {
-    sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
-  }
-
-  return queries.sort(sort)
-}
-
-module.exports = (opts = {}) => {
-
-  opts = Object.assign(
-    {
-      sort: 'mobile-first',
-      configuration: {
-        unitlessMqAlwaysFirst: false,
-      },
-    },
-    opts
-  )
-
-  const createSort = require('sort-css-media-queries/lib/create-sort');
-  const sortCSSmq = createSort(opts.configuration);
-
-  return {
-    postcssPlugin: 'postcss-sort-media-queries',
-    OnceExit(root, { AtRule }) {
-
-      let atRules = [];
-
-      root.walkAtRules('media', atRule => {
-        let query = atRule.params
-
-        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()
-      })
-
-      sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
-        root.append(atRules[query])
-      })
-    }
-  }
-}
-module.exports.postcss = true
+function sortAtRules(queries, sort, sortCSSmq) {
+  if (typeof sort !== 'function') {
+    sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
+  }
+
+  return queries.sort(sort)
+}
+
+module.exports = (opts = {}) => {
+
+  opts = Object.assign(
+    {
+      sort: 'mobile-first',
+      configuration: {
+        unitlessMqAlwaysFirst: false,
+      },
+    },
+    opts
+  )
+
+  const createSort = require('sort-css-media-queries/lib/create-sort');
+  const sortCSSmq = createSort(opts.configuration);
+
+  return {
+    postcssPlugin: 'postcss-sort-media-queries',
+    OnceExit(root, { AtRule }) {
+
+      let atRules = [];
+
+      root.walkAtRules('media', atRule => {
+        let query = atRule.params
+
+        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()
+      })
+
+      sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
+        root.append(atRules[query])
+      })
+    }
+  }
+}
+module.exports.postcss = true

package/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])
+        })
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-sort-media-queries",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
   "keywords": [
     "postcss",