postcss-sort-media-queries 5.2.0 → 6.0.0

package/README.md

@@ -15,7 +15,7 @@
 
 [PostCSS] plugin for sorting and combining CSS media queries with **mobile first** / **desktop first** methodologies.
 
-> From 5.0.0 plugin support [Media Feature Types: “range”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)
+> From v6.0.0 plugin supported nested media queries and ESM usage
 
 ## Table of Contents
 
@@ -43,52 +43,49 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
 
 ### Mobile first sorting
 
-**before**
+**Before**
 
 ```css
-@media screen and (max-width: 640px) {
-  .head { color: #cfcfcf }
-}
-@media screen and (max-width: 768px) {
-  .footer { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  .main { color: #cfcfcf }
-}
-@media screen and (min-width: 1280px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (width > 640px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  .footer { color: #cfcfcf }
+@media (min-width: 1400px) {}
+@media (min-width: 1200px) {}
+
+@layer reset {
+
+  @media (min-width: 1200px) {
+    @media (min-width: 992px) {}
+    @media (min-width: 768px) {}
+  }
+
+  @media (min-width: 768px) {
+    @media (min-width: 640px) {}
+    @media (min-width: 320px) {}
+  }
 }
 ```
 
-**after**
+**After**
 
 ```css
-@media screen and (width > 640px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (min-width: 1280px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (max-width: 768px) {
-  .footer { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  /* combined */
-  .head { color: #cfcfcf }
-  .main { color: #cfcfcf }
-  .footer { color: #cfcfcf }
+@layer reset {
+
+  @media (min-width: 768px) {
+    @media (min-width: 320px) {}
+    @media (min-width: 640px) {}
+  }
+
+  @media (min-width: 1200px) {
+    @media (min-width: 768px) {}
+    @media (min-width: 992px) {}
+  }
 }
+
+@media (min-width: 1200px) {}
+@media (min-width: 1400px) {}
 ```
 
 ### Desktop first sorting
 
-**before**
+**Before**
 ```css
 @media screen and (width < 640px) {
   .header { color: #cdcdcd }
@@ -110,7 +107,7 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
 }
 ```
 
-**after**
+**After**
 
 ```css
 @media screen and (max-width: 760px) {
@@ -144,6 +141,15 @@ Check you project for existed PostCSS config: `postcss.config.js`
 in the project root, `"postcss"` section in `package.json`
 or `postcss` in bundle config.
 
+
+```js
+// CJS
+let sortCssMq = require('postcss-sort-media-queries');
+
+// ESM
+import sortCssMq from 'postcss-sort-media-queries';
+```
+
 If you already use PostCSS, add the plugin to plugins list:
 
 ```diff
@@ -176,7 +182,7 @@ and set this plugin in settings.
 
 ## Options
 
-> Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
+> Sorting works based on [OlehDutchenko/sort-css-media-queries](https://github.com/OlehDutchenko/sort-css-media-queries) function.
 
 ### sort
 
@@ -237,18 +243,6 @@ 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
@@ -266,7 +260,7 @@ See [Releases history]
 ## Thanks
 
 - Andrey Sitnik [@ai](https://github.com/ai)
-- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
+- Oleh Dutchenko [@dutchenkoOleg](https://github.com/OlehDutchenko)
 - Jakub Caban [@Lustmored](https://github.com/Lustmored)
 - Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
 - Kai Falkowski [@SassNinja](https://github.com/SassNinja)

package/build/index.cjs

@@ -0,0 +1,311 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// node_modules/sort-css-media-queries/lib/create-sort.js
+var minMaxWidth = /(!?\(\s*min(-device)?-width)(.|\n)+\(\s*max(-device)?-width|\(\s*width\s*>(=)?(.|\n)+\(\s*width\s*<(=)?|(!?\(.*<(=)?\s*width\s*<(=)?)/i;
+var minWidth = /\(\s*min(-device)?-width|\(\s*width\s*>(=)?/i;
+var maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width|\(\s*width\s*<(=)?(.|\n)+\(\s*width\s*>(=)?|(!?\(.*>(=)?\s*width\s*>(=)?)/i;
+var maxWidth = /\(\s*max(-device)?-width|\(\s*width\s*<(=)?/i;
+var isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+var isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+var minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height|\(\s*height\s*>(=)?(.|\n)+\(\s*height\s*<(=)?|(!?\(.*<(=)?\s*height\s*<(=)?)/i;
+var minHeight = /\(\s*min(-device)?-height|\(\s*height\s*>(=)?/i;
+var maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height|\(\s*height\s*<(=)?(.|\n)+\(\s*height\s*>(=)?|(!?\(.*>(=)?\s*height\s*>(=)?)/i;
+var maxHeight = /\(\s*max(-device)?-height|\(\s*height\s*<(=)?/i;
+var isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+var isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+var lessThan = /<(?!=)/;
+var grtrThan = />(?!=)/;
+var isPrint = /print/i;
+var isPrintOnly = /^print$/i;
+var maxValue = Number.MAX_VALUE;
+function _getQueryLength(query) {
+  let length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(query);
+  if (length === null && (isMinWidth(query) || isMinHeight(query))) {
+    length = /(\d)/.exec(query);
+  }
+  if (length === "0") {
+    return 0;
+  }
+  if (length === null) {
+    return maxValue;
+  }
+  let number = length[1];
+  const unit = length[2];
+  switch (unit) {
+    case "ch":
+      number = parseFloat(number) * 8.8984375;
+      break;
+    case "em":
+    case "rem":
+      number = parseFloat(number) * 16;
+      break;
+    case "ex":
+      number = parseFloat(number) * 8.296875;
+      break;
+    case "px":
+      number = parseFloat(number);
+      break;
+  }
+  return +number;
+}
+function _testQuery(doubleTestTrue, doubleTestFalse, singleTest) {
+  return function(query) {
+    let result;
+    if (doubleTestTrue.test(query)) result = true;
+    else if (doubleTestFalse.test(query)) result = false;
+    else result = singleTest.test(query);
+    return query.includes("not") ? !result : result;
+  };
+}
+function _testIsPrint(a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1;
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1;
+    }
+    return a.localeCompare(b);
+  }
+  if (isPrintA) {
+    return 1;
+  }
+  if (isPrintB) {
+    return -1;
+  }
+  return null;
+}
+function createSort(configuration) {
+  const config = configuration || {};
+  const UNITLESS_MQ_ALWAYS_FIRST = config.unitlessMqAlwaysFirst;
+  function sortCSSmq(a, b) {
+    const testIsPrint = _testIsPrint(a, b);
+    if (testIsPrint !== null) {
+      return testIsPrint;
+    }
+    const minA = isMinWidth(a) || isMinHeight(a);
+    const maxA = isMaxWidth(a) || isMaxHeight(a);
+    const minB = isMinWidth(b) || isMinHeight(b);
+    const maxB = isMaxWidth(b) || isMaxHeight(b);
+    if (UNITLESS_MQ_ALWAYS_FIRST && (!minA && !maxA || !minB && !maxB)) {
+      if (!minA && !maxA && !minB && !maxB) {
+        return a.localeCompare(b);
+      }
+      return !minB && !maxB ? 1 : -1;
+    } else {
+      if (minA && maxB) {
+        return -1;
+      }
+      if (maxA && minB) {
+        return 1;
+      }
+      const lengthA = _getQueryLength(a);
+      const lengthB = _getQueryLength(b);
+      if (lengthA === maxValue && lengthB === maxValue) {
+        return a.localeCompare(b);
+      } else if (lengthA === maxValue) {
+        return 1;
+      } else if (lengthB === maxValue) {
+        return -1;
+      }
+      if (lengthA > lengthB) {
+        if (maxA) {
+          return -1;
+        }
+        return 1;
+      }
+      if (lengthA < lengthB) {
+        if (maxA) {
+          return 1;
+        }
+        return -1;
+      }
+      if (lengthA === lengthB) {
+        if (maxA && maxB) {
+          if (lessThan.test(a) && !lessThan.test(b)) {
+            return 1;
+          }
+          if (!lessThan.test(a) && lessThan.test(b)) {
+            return -1;
+          }
+        }
+        if (minA && minB) {
+          if (grtrThan.test(a) && !grtrThan.test(b)) {
+            return 1;
+          }
+          if (!grtrThan.test(a) && grtrThan.test(b)) {
+            return -1;
+          }
+        }
+      }
+      return a.localeCompare(b);
+    }
+  }
+  sortCSSmq.desktopFirst = function(a, b) {
+    const testIsPrint = _testIsPrint(a, b);
+    if (testIsPrint !== null) {
+      return testIsPrint;
+    }
+    const minA = isMinWidth(a) || isMinHeight(a);
+    const maxA = isMaxWidth(a) || isMaxHeight(a);
+    const minB = isMinWidth(b) || isMinHeight(b);
+    const maxB = isMaxWidth(b) || isMaxHeight(b);
+    if (UNITLESS_MQ_ALWAYS_FIRST && (!minA && !maxA || !minB && !maxB)) {
+      if (!minA && !maxA && !minB && !maxB) {
+        return a.localeCompare(b);
+      }
+      return !minB && !maxB ? 1 : -1;
+    } else {
+      if (minA && maxB) {
+        return 1;
+      }
+      if (maxA && minB) {
+        return -1;
+      }
+      const lengthA = _getQueryLength(a);
+      const lengthB = _getQueryLength(b);
+      if (lengthA === maxValue && lengthB === maxValue) {
+        return a.localeCompare(b);
+      } else if (lengthA === maxValue) {
+        return 1;
+      } else if (lengthB === maxValue) {
+        return -1;
+      }
+      if (lengthA > lengthB) {
+        if (maxA) {
+          return -1;
+        }
+        return 1;
+      }
+      if (lengthA < lengthB) {
+        if (maxA) {
+          return 1;
+        }
+        return -1;
+      }
+      if (lengthA === lengthB) {
+        if (maxA && maxB) {
+          if (lessThan.test(a) && !lessThan.test(b)) {
+            return 1;
+          }
+          if (!lessThan.test(a) && lessThan.test(b)) {
+            return -1;
+          }
+        }
+        if (minA && minB) {
+          if (grtrThan.test(a) && !grtrThan.test(b)) {
+            return 1;
+          }
+          if (!grtrThan.test(a) && grtrThan.test(b)) {
+            return -1;
+          }
+        }
+      }
+      return -a.localeCompare(b);
+    }
+  };
+  return sortCSSmq;
+}
+
+// src/index.js
+function sortAtRules(queries, options, sortCSSmq) {
+  if (typeof options.sort !== "function") {
+    options.sort = options.sort === "desktop-first" ? sortCSSmq.desktopFirst : sortCSSmq;
+  }
+  return queries.sort(options.sort);
+}
+function plugin(options = {}) {
+  options = Object.assign(
+    {
+      sort: "mobile-first",
+      configuration: false
+    },
+    options
+  );
+  const sortCSSmq = createSort(options.configuration);
+  return {
+    postcssPlugin: "postcss-sort-media-queries",
+    OnceExit(root, { AtRule }) {
+      let parents = {
+        root: [],
+        nested: []
+      };
+      let processed = /* @__PURE__ */ Symbol("processed");
+      root.walkAtRules("media", (atRule) => {
+        if (atRule.parent[processed]) {
+          return;
+        }
+        if (atRule.parent.type === "root") {
+          parents.root.push(atRule.parent);
+        }
+        if (atRule.parent.type !== "root") {
+          parents.nested.push(atRule.parent);
+        }
+        atRule.parent[processed] = true;
+        return;
+      });
+      Object.keys(parents).forEach((type) => {
+        if (!parents[type].length) {
+          return;
+        }
+        parents[type].forEach((parent) => {
+          let media = parent.nodes.filter(
+            (n) => n.type === "atrule" && n.name === "media"
+          );
+          if (!media) {
+            return;
+          }
+          let atRules = [];
+          media.forEach((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();
+          });
+          if (atRules) {
+            sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach((query) => {
+              parent.append(atRules[query]);
+            });
+          }
+        });
+      });
+    }
+  };
+}
+plugin.postcss = true;
+var index_default = plugin;

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "postcss-sort-media-queries",
-  "version": "5.2.0",
   "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
+  "version": "6.0.0",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "keywords": [
     "postcss",
     "postcss-plugin",
@@ -29,67 +32,37 @@
     "url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
   },
   "homepage": "https://github.com/yunusga/postcss-sort-media-queries",
-  "scripts": {
-    "test": "jest-ci --coverage && eslint",
-    "refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
-  },
-  "engines": {
-    "node": ">=14.0.0"
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "require": "./src/index.cjs",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    }
   },
-  "dependencies": {
-    "sort-css-media-queries": "2.2.0"
+  "files": [
+    "build"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest --coverage",
+    "build": "npm run build:cjs",
+    "build:cjs": "esbuild src/index.js --outfile=build/index.cjs --format=cjs --bundle --platform=node --external:postcss"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
-    "eslint": "^8.3.0",
-    "eslint-ci": "^1.0.0",
-    "eslint-plugin-jest": "^25.3.0",
-    "husky": "^7.0.4",
-    "jest": "^27.3.1",
-    "jest-ci": "^0.1.1",
-    "jest-cli": "^27.3.1",
-    "lint-staged": "^13.2.1",
-    "postcss": "^8.4.23",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-media-minmax": "^5.0.0",
-    "postcss-nested": "^5.0.6"
+    "@vitest/coverage-v8": "^4.0.18",
+    "esbuild": "^0.27.3",
+    "postcss": "^8.5.6",
+    "prettier": "3.8.1",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "postcss": "^8.4.23"
+    "postcss": "^8.5.6"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": "eslint --fix"
-  },
-  "eslintConfig": {
-    "parserOptions": {
-      "ecmaVersion": 2017
-    },
-    "env": {
-      "node": true,
-      "es6": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:jest/recommended"
-    ],
-    "rules": {
-      "jest/expect-expect": "off"
-    }
-  },
-  "jest": {
-    "testEnvironment": "node",
-    "coverageThreshold": {
-      "global": {
-        "statements": 100
-      }
-    }
-  },
-  "sortCssMQ": {
-    "unitlessMqAlwaysFirst": false
+  "dependencies": {
+    "sort-css-media-queries": "^3.0.1"
   }
 }

package/src/index.js

@@ -0,0 +1,122 @@
+import createSort from 'sort-css-media-queries/create-sort';
+
+// PostCSS plugin to sort CSS @media rules according to a configurable order.
+// The plugin groups top-level and nested media at-rules, merges rules
+// with identical queries, and re-inserts them in the desired order.
+
+// Helper that ensures `options.sort` is a function and sorts queries.
+function sortAtRules(queries, options, sortCSSmq) {
+  if (typeof options.sort !== 'function') {
+    options.sort = options.sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq;
+  }
+
+  return queries.sort(options.sort);
+}
+
+function plugin(options = {}) {
+
+  // Set default options and allow user overrides
+  options = Object.assign(
+    {
+      sort: 'mobile-first',
+      configuration: false,
+    },
+    options
+  );
+
+  // Create a sorter based on configuration (from sort-css-media-queries)
+  const sortCSSmq = createSort(options.configuration);
+
+  return {
+    postcssPlugin: 'postcss-sort-media-queries',
+
+    // Execute once after the entire tree has been parsed
+    OnceExit(root, { AtRule }) {
+      // Collect parent nodes that contain media at-rules. We separate
+      // top-level (`root`) parents from nested parents so ordering
+      // semantics can be preserved independently.
+      let parents = {
+        root: [],
+        nested: [],
+      };
+
+      // Symbol used to mark parents that we've already collected
+      let processed = Symbol('processed');
+
+      // Walk all @media at-rules and group their parents
+      root.walkAtRules('media', (atRule) => {
+        if (atRule.parent[processed]) {
+          return;
+        }
+
+        // If the parent is the root of the document, add to root list
+        if (atRule.parent.type === 'root') {
+          parents.root.push(atRule.parent);
+        }
+
+        // Otherwise treat it as a nested parent
+        if (atRule.parent.type !== 'root') {
+          parents.nested.push(atRule.parent);
+        }
+
+        // Mark this parent so we don't collect it twice
+        atRule.parent[processed] = true;
+
+        return;
+      });
+
+      // For each parent group, merge and sort its media at-rules
+      Object.keys(parents).forEach((type) => {
+        if (!parents[type].length) {
+          return;
+        }
+
+        parents[type].forEach((parent) => {
+          // Filter only @media nodes from the parent's children
+          let media = parent.nodes.filter(
+            n => n.type === 'atrule' && n.name === 'media'
+          );
+
+          if (!media) {
+            return;
+          }
+
+          // Combine at-rules with identical query params into a single
+          // AtRule instance, cloning their children to preserve content.
+          let atRules = [];
+
+          media.forEach((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());
+            });
+
+            // Remove the original at-rule since its contents have been
+            // merged into `atRules[query]`.
+            atRule.remove();
+          });
+
+          // Sort query keys and append merged at-rules back to the parent
+          if (atRules) {
+            sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach((query) => {
+              parent.append(atRules[query]);
+            });
+          }
+        });
+      });
+    }
+  };
+}
+
+plugin.postcss = true;
+
+export default plugin;

package/browser.js

@@ -1,54 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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: false,
-      onlyTopLevel: false,
-    },
-    opts
-  )
-
-  const createSort = require('sort-css-media-queries/lib/create-sort');
-  const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
-
-  return {
-    postcssPlugin: 'postcss-sort-media-queries',
-    OnceExit (root, { AtRule }) {
-
-      let atRules = [];
-
-      root.walkAtRules('media', atRule => {
-        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
-            })
-          }
-
-          atRule.nodes.forEach(node => {
-            atRules[query].append(node.clone())
-          })
-
-          atRule.remove()
-        }
-
-        if (!opts.onlyTopLevel) {
-          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()
-        }
-      })
-
-      if (atRules) {
-        sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
-          root.append(atRules[query])
-        })
-      }
-    }
-  }
-}
-module.exports.postcss = true