postcss-sort-media-queries 6.1.0 → 6.3.2

package/README.md

@@ -24,13 +24,13 @@
  - [Examples](#examples)
    - [Mobile first sorting](#mobile-first-sorting)
    - [Desktop first sorting](#desktop-first-sorting)
+   - [Nested media queries sorting](#nested-media-queries-sorting)
  - [Install](#install)
  - [Usage](#usage)
  - [Options](#options)
    - [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)
@@ -128,6 +128,377 @@ And here is the [Online Demo]
 }
 ```
 
+### Nested media queries sorting
+
+**Before**
+
+```css
+@media (min-width: 710px) {
+  .print-only-global-2 {
+    display: block;
+  }
+}
+
+@media (min-width: 1210px) {
+  .print-only-global-4 {
+    display: block;
+  }
+
+  .print-only-global-5 {
+    display: block;
+  }
+
+  .print-only-global-6 {
+    display: block;
+  }
+}
+
+@media (min-width: 310px) {
+  .print-only-global-1 {
+    display: block;
+  }
+}
+
+@media (min-width: 710px) {
+  .print-only-global-3 {
+    display: block;
+  }
+}
+
+@media (min-width: 1210px) {
+  .print-only-global-7 {
+    display: block;
+  }
+}
+
+@media print {
+  .print-only {
+    display: block;
+  }
+
+  .print-only-parent-1 {
+    display: block;
+  }
+
+  @media (orientation: landscape) {
+    .print-only {
+      color: black;
+    }
+
+    @media (min-width: 910px) {
+      .nested-landscape-3 {
+        color: black;
+      }
+
+      .nested-landscape-4 {
+        color: black;
+      }
+
+      .nested-landscape-5 {
+        color: black;
+      }
+    }
+
+    @media (min-width: 810px) {
+      .nested-landscape-2 {
+        color: black;
+      }
+    }
+
+    @media (min-width: 710px) {
+      .nested-landscape-1 {
+        color: black;
+      }
+    }
+
+    .nested-landscape-0 {
+      color: black;
+    }
+
+    @media (min-width: 710px) {
+      .nested-landscape-4 {
+        color: black;
+      }
+
+      .nested-landscape-5 {
+        color: black;
+      }
+
+      .nested-landscape-6 {
+        color: black;
+      }
+    }
+
+    @media (min-width: 710px) {
+      .nested-landscape-8 {
+        color: black;
+      }
+
+      .nested-landscape-9 {
+        color: black;
+      }
+    }
+  }
+
+  @media (min-width: 500px) {
+    .print-only {
+      color: black;
+    }
+  }
+
+  .print-only-parent-2 {
+    display: block;
+  }
+
+  @media (min-width: 500px) {
+    .print-only {
+      color: black;
+    }
+  }
+
+  @media (orientation: portrait) {
+    .print-only {
+      color: gray;
+    }
+  }
+
+  .print-only-parent-3 {
+    display: block;
+  }
+
+  @media (min-width: 320px) {
+    .print-only {
+      color: black;
+    }
+  }
+
+  @media (orientation: landscape) {
+    .print-only-landscape-1-1 {
+      color: gray;
+    }
+
+    .print-only-landscape-1-2 {
+      color: gray;
+    }
+
+    .print-only-landscape-1-3 {
+      color: gray;
+    }
+  }
+}
+
+@layer base {
+
+  @media (min-width: 1220px) {
+    .print-only-1200-1 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 320px) {
+    .print-only-320-1 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 1220px) {
+    .print-only-1200-2 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .print-only-640-1 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 320px) {
+    .print-only-320-2 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 320px) {
+    .print-only-320-3 {
+      color: black;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .print-only-640-2 {
+      color: black;
+    }
+  }
+}
+```
+
+**After**
+
+```css
+@layer base {
+  @media (min-width: 320px) {
+    .print-only-320-1 {
+      color: black;
+    }
+    .print-only-320-2 {
+      color: black;
+    }
+    .print-only-320-3 {
+      color: black;
+    }
+  }
+  @media (min-width: 620px) {
+    .print-only-640-1 {
+      color: black;
+    }
+    .print-only-640-2 {
+      color: black;
+    }
+  }
+  @media (min-width: 1220px) {
+    .print-only-1200-1 {
+      color: black;
+    }
+    .print-only-1200-2 {
+      color: black;
+    }
+  }
+}
+@media (min-width: 310px) {
+  .print-only-global-1 {
+    display: block;
+  }
+}
+@media (min-width: 710px) {
+  .print-only-global-2 {
+    display: block;
+  }
+  .print-only-global-3 {
+    display: block;
+  }
+}
+@media (min-width: 1210px) {
+  .print-only-global-4 {
+    display: block;
+  }
+
+  .print-only-global-5 {
+    display: block;
+  }
+
+  .print-only-global-6 {
+    display: block;
+  }
+  .print-only-global-7 {
+    display: block;
+  }
+}
+@media print {
+  .print-only {
+    display: block;
+  }
+
+  .print-only-parent-1 {
+    display: block;
+  }
+
+  .print-only-parent-2 {
+    display: block;
+  }
+
+  .print-only-parent-3 {
+    display: block;
+  }
+
+  @media (min-width: 320px) {
+    .print-only {
+      color: black;
+    }
+  }
+
+  @media (min-width: 500px) {
+    .print-only {
+      color: black;
+    }
+    .print-only {
+      color: black;
+    }
+  }
+
+  @media (orientation: landscape) {
+    .print-only {
+      color: black;
+    }
+
+    .nested-landscape-0 {
+      color: black;
+    }
+    .print-only-landscape-1-1 {
+      color: gray;
+    }
+
+    .print-only-landscape-1-2 {
+      color: gray;
+    }
+
+    .print-only-landscape-1-3 {
+      color: gray;
+    }
+
+    @media (min-width: 710px) {
+      .nested-landscape-1 {
+        color: black;
+      }
+      .nested-landscape-4 {
+        color: black;
+      }
+
+      .nested-landscape-5 {
+        color: black;
+      }
+
+      .nested-landscape-6 {
+        color: black;
+      }
+      .nested-landscape-8 {
+        color: black;
+      }
+
+      .nested-landscape-9 {
+        color: black;
+      }
+    }
+
+    @media (min-width: 810px) {
+      .nested-landscape-2 {
+        color: black;
+      }
+    }
+
+    @media (min-width: 910px) {
+      .nested-landscape-3 {
+        color: black;
+      }
+
+      .nested-landscape-4 {
+        color: black;
+      }
+
+      .nested-landscape-5 {
+        color: black;
+      }
+    }
+  }
+
+  @media (orientation: portrait) {
+    .print-only {
+      color: gray;
+    }
+  }
+}
+```
+
 ## Install
 
 First thing's, install the module:
@@ -261,8 +632,10 @@ See [Releases history]
 ## Thanks
 
 - Andrey Sitnik [@ai](https://github.com/ai)
-- Oleh Dutchenko [@dutchenkoOleg](https://github.com/OlehDutchenko)
+- Oleh Dutchenko [@OlehDutchenko](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)
 - Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
+- ReindDooyeweerd [@ReindDooyeweerd](https://github.com/ReindDooyeweerd)
+- msev [@msev](https://github.com/msev)

package/build/index.cjs

@@ -234,6 +234,36 @@ function createSort(configuration) {
   return sortCSSmq;
 }
 
+// node_modules/nanoid/index.js
+var import_node_crypto = require("node:crypto");
+
+// node_modules/nanoid/url-alphabet/index.js
+var urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+
+// node_modules/nanoid/index.js
+var POOL_SIZE_MULTIPLIER = 128;
+var pool;
+var poolOffset;
+function fillPool(bytes) {
+  if (!pool || pool.length < bytes) {
+    pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
+    import_node_crypto.webcrypto.getRandomValues(pool);
+    poolOffset = 0;
+  } else if (poolOffset + bytes > pool.length) {
+    import_node_crypto.webcrypto.getRandomValues(pool);
+    poolOffset = 0;
+  }
+  poolOffset += bytes;
+}
+function nanoid(size = 21) {
+  fillPool(size |= 0);
+  let id = "";
+  for (let i = poolOffset - size; i < poolOffset; i++) {
+    id += urlAlphabet[pool[i] & 63];
+  }
+  return id;
+}
+
 // src/index.js
 function sortAtRules(queries, options, sortCSSmq) {
   if (typeof options.sort !== "function") {
@@ -241,6 +271,13 @@ function sortAtRules(queries, options, sortCSSmq) {
   }
   return queries.sort(options.sort);
 }
+function getDepth(node) {
+  let depth = 0;
+  for (let p = node.parent; p; p = p.parent) {
+    depth++;
+  }
+  return depth;
+}
 function plugin(options = {}) {
   options = Object.assign(
     {
@@ -254,55 +291,63 @@ function plugin(options = {}) {
     postcssPlugin: "postcss-sort-media-queries",
     // Execute once after the entire tree has been parsed
     OnceExit(root, { AtRule }) {
-      let parents = {
-        root: [],
-        nested: []
-      };
-      let processed = /* @__PURE__ */ Symbol("processed");
+      let parents = [];
       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);
+        if (!atRule.parent.groupId) {
+          let groupId = nanoid();
+          atRule.parent.groupId = groupId;
+          parents[groupId] = {
+            parent: atRule.parent,
+            depth: getDepth(atRule.parent)
+          };
         }
-        atRule.parent[processed] = true;
         return;
       });
-      Object.keys(parents).forEach((type) => {
-        if (!parents[type].length) {
+      if (!parents) {
+        return;
+      }
+      parents = Object.fromEntries(
+        Object.entries(parents).sort(([, a], [, b]) => {
+          return b.depth - a.depth;
+        })
+      );
+      Object.keys(parents).forEach((groupId) => {
+        let { parent } = parents[groupId];
+        let medias = parent.nodes.filter(
+          (node) => node.type === "atrule" && node.name === "media"
+        );
+        if (!medias) {
           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);
-            });
-            atRule.remove();
-          });
-          if (atRules) {
-            sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach((query) => {
-              parent.append(atRules[query]);
+        let atRules = [];
+        medias.forEach((atRule) => {
+          if (!atRules[atRule.params]) {
+            atRules[atRule.params] = new AtRule({
+              name: atRule.name,
+              params: atRule.params,
+              source: atRule.source
             });
           }
+          [...atRule.nodes].forEach((node) => {
+            atRules[atRule.params].append(node);
+          });
+          atRule.remove();
+        });
+        if (atRules) {
+          sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach((query) => {
+            parent.append(atRules[query]);
+          });
+        }
+      });
+      root.walkAtRules("media", (parent) => {
+        let medias = parent.nodes.filter(
+          (node) => node.type === "atrule" && node.name === "media"
+        );
+        if (!medias) {
+          return;
+        }
+        medias.forEach((atRule) => {
+          parent.append(atRule);
         });
       });
     }

package/build/wrapper.cjs

@@ -1,9 +1,9 @@
-'use strict';
-
-const mod = require('./index.cjs');
-
-const plugin = mod.default;
-
-plugin.postcss = mod.postcss;
-
-module.exports = plugin;
+'use strict';
+
+const mod = require('./index.cjs');
+
+const plugin = mod.default;
+
+plugin.postcss = mod.postcss;
+
+module.exports = plugin;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "postcss-sort-media-queries",
   "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
-  "version": "6.1.0",
+  "version": "6.3.2",
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=20.0.0"
   },
   "keywords": [
     "postcss",
@@ -31,7 +31,7 @@
   "bugs": {
     "url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
   },
-  "homepage": "https://github.com/yunusga/postcss-sort-media-queries",
+  "homepage": "https://yunusga.uz/postcss-sort-media-queries",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -46,20 +46,26 @@
     "build"
   ],
   "scripts": {
-    "test": "vitest run",
+    "test": "npm run build && vitest run",
     "test:watch": "vitest --watch",
     "coverage": "vitest --coverage",
+    "lint": "eslint",
+    "prepare": "husky",
     "build": "npm run build:cjs",
     "build:cjs": "esbuild src/index.js --outfile=build/index.cjs --format=cjs --bundle --platform=node --external:postcss"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@vitest/coverage-v8": "^4.0.18",
     "esbuild": "^0.27.3",
-    "postcss": "^8.5.6",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
     "prettier": "3.8.1",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "nanoid": "^5.1.6",
     "postcss": "^8.5.6"
   },
   "dependencies": {

package/src/index.js

@@ -1,4 +1,5 @@
 import createSort from 'sort-css-media-queries/create-sort';
+import { nanoid } from 'nanoid';
 
 // PostCSS plugin to sort CSS @media rules according to a configurable order.
 // The plugin groups top-level and nested media at-rules, merges rules
@@ -13,6 +14,16 @@ function sortAtRules(queries, options, sortCSSmq) {
   return queries.sort(options.sort);
 }
 
+function getDepth(node) {
+  let depth = 0;
+
+  for (let p = node.parent; p; p = p.parent) {
+    depth++;
+  }
+
+  return depth;
+}
+
 function plugin(options = {}) {
 
   // Set default options and allow user overrides
@@ -35,82 +46,86 @@ function plugin(options = {}) {
       // 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');
+      let parents = [];
 
       // Walk all @media at-rules and group their parents
       root.walkAtRules('media', (atRule) => {
-        if (atRule.parent[processed]) {
-          return;
-        }
+        if (!atRule.parent.groupId) {
+          let groupId = nanoid();
 
-        // If the parent is the root of the document, add to root list
-        if (atRule.parent.type === 'root') {
-          parents.root.push(atRule.parent);
-        }
+          atRule.parent.groupId = groupId;
 
-        // Otherwise treat it as a nested parent
-        if (atRule.parent.type !== 'root') {
-          parents.nested.push(atRule.parent);
+          parents[groupId] = {
+            parent: atRule.parent,
+            depth: getDepth(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) {
+      if (!parents) {
+        return;
+      }
+
+      parents = Object.fromEntries(
+        Object.entries(parents).sort(([, a], [, b]) => {
+          return b.depth - a.depth;
+        })
+      );
+
+      Object.keys(parents).forEach((groupId) => {
+        let { parent } = parents[groupId];
+
+        // Filter only @media nodes from the parent's children
+        let medias = parent.nodes.filter(
+          (node) => node.type === 'atrule' && node.name === 'media'
+        );
+
+        if (!medias) {
           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'
-          );
+        let atRules = [];
 
-          if (!media) {
-            return;
+        medias.forEach((atRule) => {
+          if (!atRules[atRule.params]) {
+            atRules[atRule.params] = new AtRule({
+              name: atRule.name,
+              params: atRule.params,
+              source: atRule.source,
+            });
           }
 
-          // Combine at-rules with identical query params into a single
-          // AtRule instance, cloning their children to preserve content.
-          let atRules = [];
+          [...atRule.nodes].forEach((node) => {
+            atRules[atRule.params].append(node);
+          });
 
-          media.forEach((atRule) => {
-            let query = atRule.params;
+          // Remove the original at-rule since its contents have been
+          // merged into `atRules[atRule.params]`.
+          atRule.remove();
+        });
 
-            if (!atRules[query]) {
-              atRules[query] = new AtRule({
-                name: atRule.name,
-                params: atRule.params,
-                source: atRule.source
-              });
-            }
+        // 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]);
+          });
+        }
+      });
 
-            atRule.nodes.forEach((node) => {
-              atRules[query].append(node);
-            });
+      root.walkAtRules('media', (parent) => {
+        // Filter only @media nodes from the parent's children
+        let medias = parent.nodes.filter(
+          (node) => node.type === 'atrule' && node.name === 'media'
+        );
 
-            // Remove the original at-rule since its contents have been
-            // merged into `atRules[query]`.
-            atRule.remove();
-          });
+        if (!medias) {
+          return;
+        }
 
-          // 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]);
-            });
-          }
+        medias.forEach((atRule) => {
+          parent.append(atRule);
         });
       });
     }