postcss-sort-media-queries 6.0.0 → 6.2.2

package/README.md

@@ -1,8 +1,9 @@
 # PostCSS Sort Media Queries
 
 [PostCSS]:          https://github.com/postcss/postcss
-[MIT]:              https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE
 [official docs]:    https://github.com/postcss/postcss#usage
+[Online Demo]:      https://yunusga.uz/postcss-sort-media-queries/
+[MIT]:              https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE
 [Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md
 
 [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
@@ -37,7 +38,7 @@
 
 ## Online demo
 
-And here is the [online demo](https://postcss-sort-media-queries.github.io)
+And here is the [Online Demo]
 
 ## Examples
 
@@ -260,8 +261,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

@@ -235,12 +235,20 @@ function createSort(configuration) {
 }
 
 // src/index.js
+var import_crypto = require("crypto");
 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 getDepth(node) {
+  let depth = 0;
+  for (let p = node.parent; p; p = p.parent) {
+    depth++;
+  }
+  return depth;
+}
 function plugin(options = {}) {
   options = Object.assign(
     {
@@ -252,56 +260,65 @@ function plugin(options = {}) {
   const sortCSSmq = createSort(options.configuration);
   return {
     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 = (0, import_crypto.randomUUID)();
+          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.clone());
-            });
-            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

@@ -0,0 +1,9 @@
+'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.0.0",
+  "version": "6.2.2",
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=20.0.0"
   },
   "keywords": [
     "postcss",
@@ -31,13 +31,13 @@
   "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",
   "exports": {
     ".": {
-      "require": "./src/index.cjs",
+      "require": "./build/wrapper.cjs",
       "import": "./src/index.js",
       "default": "./src/index.js"
     }
@@ -46,15 +46,21 @@
     "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",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
     "postcss": "^8.5.6",
     "prettier": "3.8.1",
     "vitest": "^4.0.18"

package/src/index.js

@@ -1,122 +1,137 @@
-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;
+import createSort from 'sort-css-media-queries/create-sort';
+import { randomUUID } from 'crypto';
+
+// 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 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
+  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 = [];
+
+      // Walk all @media at-rules and group their parents
+      root.walkAtRules('media', (atRule) => {
+        if (!atRule.parent.groupId) {
+          let groupId = randomUUID();
+
+          atRule.parent.groupId = groupId;
+
+          parents[groupId] = {
+            parent: atRule.parent,
+            depth: getDepth(atRule.parent),
+          }
+        }
+
+        return;
+      });
+
+      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;
+        }
+
+        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);
+          });
+
+          // Remove the original at-rule since its contents have been
+          // merged into `atRules[atRule.params]`.
+          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]);
+          });
+        }
+      });
+
+      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'
+        );
+
+        if (!medias) {
+          return;
+        }
+
+        medias.forEach((atRule) => {
+          parent.append(atRule);
+        });
+      });
+    }
+  };
+}
+
+plugin.postcss = true;
+
+export default plugin;