postcss-sort-media-queries 6.2.2 → 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:

package/build/index.cjs

@@ -234,8 +234,37 @@ 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
-var import_crypto = require("crypto");
 function sortAtRules(queries, options, sortCSSmq) {
   if (typeof options.sort !== "function") {
     options.sort = options.sort === "desktop-first" ? sortCSSmq.desktopFirst : sortCSSmq;
@@ -265,7 +294,7 @@ function plugin(options = {}) {
       let parents = [];
       root.walkAtRules("media", (atRule) => {
         if (!atRule.parent.groupId) {
-          let groupId = (0, import_crypto.randomUUID)();
+          let groupId = nanoid();
           atRule.parent.groupId = groupId;
           parents[groupId] = {
             parent: atRule.parent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "postcss-sort-media-queries",
   "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
-  "version": "6.2.2",
+  "version": "6.3.2",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -61,11 +61,11 @@
     "eslint": "^10.0.3",
     "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "postcss": "^8.5.6",
     "prettier": "3.8.1",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "nanoid": "^5.1.6",
     "postcss": "^8.5.6"
   },
   "dependencies": {

package/src/index.js

@@ -1,137 +1,137 @@
-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;
+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
+// 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 = nanoid();
+
+          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;