postcss-sort-media-queries 6.4.4 → 6.6.0

package/README.md

@@ -1,9 +1,9 @@
 # PostCSS Sort Media Queries
 
-[PostCSS]:          https://github.com/postcss/postcss
-[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
+[PostCSS]: https://github.com/postcss/postcss
+[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)
@@ -12,7 +12,7 @@
 
 <img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
 
-🌏 **English** ▫ [**O'zbek**](README-UZ.md)
+🌏 **English** ▫ [**O'zbek**](README-UZ.md) ▫ [**简体中文**](README-ZH.md)
 
 **PostcSS Sort Qedia Queries** is a powerful and flexible [PostCSS] plugin for sorting and combining CSS media queries using **mobile-first** or **desktop-first** methodologies. It helps maintain a clean, predictable stylesheet structure, improves readability, and prevents unexpected style overrides.
 
@@ -24,24 +24,23 @@ Sorting works based on [OlehDutchenko/sort-css-media-queries](https://github.com
 
 ## Table of Contents
 
- - [Install](#install)
- - [Usage](#usage)
- - [Options](#options)
-   - [sort](#sort)
-   - [Custom sort function](#custom-sort-function)
-   - [Sort configuration](#sort-configuration)
- - [Online demo](#online-demo)
- - [Examples (with nested media queries)](#examples)
-   - [Sorting options](#mobile-first-sorting)
-   - [Desktop first sorting](#desktop-first-sorting)
- - [Changelog](#changelog)
- - [License](#license)
- - [Other PostCSS plugins](#other-postcss-plugins)
- - [Thanks 💪](#thanks)
+- [Install](#install)
+- [Usage](#usage)
+- [Options](#options)
+  - [sort](#sort)
+  - [Custom sort function](#custom-sort-function)
+  - [Sort configuration](#sort-configuration)
+- [Online demo](#online-demo)
+- [Examples (with nested media queries)](#examples)
+  - [Sorting options](#mobile-first-sorting)
+  - [Desktop first sorting](#desktop-first-sorting)
+- [Changelog](#changelog)
+- [License](#license)
+- [Other PostCSS plugins](#other-postcss-plugins)
+- [Thanks 💪](#thanks)
 
 ## Install
 
-
 ```
 npm install postcss postcss-sort-media-queries --save-dev
 ```
@@ -52,13 +51,12 @@ 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');
+let sortCssMq = require("postcss-sort-media-queries");
 
 // ESM
-import sortCssMq from 'postcss-sort-media-queries';
+import sortCssMq from "postcss-sort-media-queries";
 ```
 
 If you already use PostCSS, add the plugin to plugins list:
@@ -74,6 +72,7 @@ module.exports = {
 ```
 
 or with custom sort function
+
 ```diff
 module.exports = {
   plugins: [
@@ -106,18 +105,20 @@ This option support **string** or **function** values.
 ```js
 postcss([
   sortMediaQueries({
-    sort: 'mobile-first' | 'desktop-first' // default (mobile-first)
-  })
+    sort: "mobile-first" | "desktop-first", // default (mobile-first)
+  }),
 ]).process(css);
 ```
+
 ### Custom sort function
+
 ```js
 postcss([
   sortMediaQueries({
     function(a, b) {
       return a.localeCompare(b);
-    }
-  })
+    },
+  }),
 ]).process(css);
 ```
 
@@ -134,8 +135,8 @@ postcss([
   sortMediaQueries({
     configuration: {
       unitlessMqAlwaysFirst: true, // or false
-    }
-  })
+    },
+  }),
 ]).process(css);
 ```
 
@@ -190,6 +191,7 @@ root
 ### Desktop first sorting
 
 **Before**
+
 ```css
 root
 │
@@ -237,3 +239,4 @@ See [Releases history]
 - Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
 - ReindDooyeweerd [@ReindDooyeweerd](https://github.com/ReindDooyeweerd)
 - msev [@msev](https://github.com/msev)
+- ajiho [@ajiho](https://github.com/ajiho)

package/{build → dist}/index.cjs

@@ -234,36 +234,6 @@ 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") {
@@ -291,28 +261,22 @@ function plugin(options = {}) {
     postcssPlugin: "postcss-sort-media-queries",
     // Execute once after the entire tree has been parsed
     OnceExit(root, { AtRule }) {
-      let parents = [];
+      const parents = /* @__PURE__ */ new Map();
       root.walkAtRules("media", (atRule) => {
-        if (!atRule.parent.groupId) {
-          let groupId = nanoid();
-          atRule.parent.groupId = groupId;
-          parents[groupId] = {
+        if (!parents.has(atRule.parent)) {
+          parents.set(atRule.parent, {
             parent: atRule.parent,
             depth: getDepth(atRule.parent)
-          };
+          });
         }
-        return;
       });
-      if (!parents) {
+      if (parents.size === 0) {
         return;
       }
-      parents = Object.fromEntries(
-        Object.entries(parents).sort(([, a], [, b]) => {
-          return b.depth - a.depth;
-        })
-      );
-      Object.keys(parents).forEach((groupId) => {
-        let { parent } = parents[groupId];
+      const sortedParents = [...parents.values()].sort((a, b) => {
+        return b.depth - a.depth;
+      });
+      sortedParents.forEach(({ parent }) => {
         let medias = parent.nodes.filter(
           (node) => node.type === "atrule" && node.name === "media"
         );
@@ -334,9 +298,11 @@ function plugin(options = {}) {
           atRule.remove();
         });
         if (atRules) {
-          sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach((query) => {
-            parent.append(atRules[query]);
-          });
+          sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach(
+            (query) => {
+              parent.append(atRules[query]);
+            }
+          );
         }
       });
       root.walkAtRules("media", (parent) => {

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { Plugin } from "postcss";
+
+type SortOption =
+  | "mobile-first"
+  | "desktop-first"
+  | ((a: string, b: string) => number);
+
+interface Options {
+  sort?: SortOption;
+  configuration?: {
+    unitlessMqAlwaysFirst?: boolean;
+  };
+}
+
+declare const plugin: (options?: Options) => Plugin;
+
+export default plugin;

package/dist/index.js

@@ -0,0 +1,128 @@
+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 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.
+      const parents = new Map();
+
+      // Walk all @media at-rules and group their parents
+      root.walkAtRules("media", (atRule) => {
+        if (!parents.has(atRule.parent)) {
+          parents.set(atRule.parent, {
+            parent: atRule.parent,
+            depth: getDepth(atRule.parent),
+          });
+        }
+      });
+
+      if (parents.size === 0) {
+        return;
+      }
+
+      const sortedParents = [...parents.values()].sort((a, b) => {
+        return b.depth - a.depth;
+      });
+
+      sortedParents.forEach(({ 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;
+        }
+
+        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;

package/{build → dist}/wrapper.cjs

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const mod = require('./index.cjs');
+const mod = require("./index.cjs");
 
 const plugin = mod.default;
 

package/package.json

@@ -1,75 +1,76 @@
-{
-  "name": "postcss-sort-media-queries",
-  "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
-  "version": "6.4.4",
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "keywords": [
-    "postcss",
-    "postcss-plugin",
-    "css",
-    "css-optimizations",
-    "sort",
-    "mobile-first",
-    "desktop-first",
-    "mediaquery",
-    "media-queries",
-    "mq",
-    "responsive-css",
-    "combine-media-query",
-    "sort-media-query",
-    "css-mqpacker",
-    "node-css-mqpacker"
-  ],
-  "author": "Yunus Gaziyev <yunusga@yandex.ru>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/yunusga/postcss-sort-media-queries.git"
-  },
-  "bugs": {
-    "url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
-  },
-  "homepage": "https://yunusga.uz/postcss-sort-media-queries",
-  "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "require": "./build/wrapper.cjs",
-      "import": "./src/index.js",
-      "default": "./src/index.js"
-    }
-  },
-  "files": [
-    "build"
-  ],
-  "scripts": {
-    "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.1.2",
-    "esbuild": "^0.28.0",
-    "eslint": "^10.2.0",
-    "globals": "^17.4.0",
-    "husky": "^9.1.7",
-    "prettier": "3.8.1",
-    "vitest": "^4.1.2"
-  },
-  "peerDependencies": {
-    "nanoid": "^5.1.6",
-    "postcss": "^8.5.6"
-  },
-  "dependencies": {
-    "sort-css-media-queries": "^3.0.3"
-  }
-}
+{
+  "name": "postcss-sort-media-queries",
+  "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
+  "version": "6.6.0",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "postcss",
+    "postcss-plugin",
+    "css",
+    "css-optimizations",
+    "sort",
+    "mobile-first",
+    "desktop-first",
+    "mediaquery",
+    "media-queries",
+    "mq",
+    "responsive-css",
+    "combine-media-query",
+    "sort-media-query",
+    "css-mqpacker",
+    "node-css-mqpacker"
+  ],
+  "author": "Yunus Gaziyev <yunusga@yandex.ru>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yunusga/postcss-sort-media-queries.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
+  },
+  "homepage": "https://yunusga.uz/postcss-sort-media-queries",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/wrapper.cjs",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "npm run build && vitest run",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest --coverage",
+    "lint": "eslint",
+    "format": "prettier --write .",
+    "prepare": "husky",
+    "build": "npm run build:cjs && cpy \"src/**/*\" dist",
+    "build:cjs": "esbuild src/index.js --outfile=dist/index.cjs --format=cjs --bundle --platform=node --external:postcss"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@vitest/coverage-v8": "^4.1.2",
+    "cpy-cli": "^7.0.0",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.2.0",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
+    "prettier": "3.8.1",
+    "vitest": "^4.1.2"
+  },
+  "peerDependencies": {
+    "postcss": "^8.5.6"
+  },
+  "dependencies": {
+    "sort-css-media-queries": "^3.0.5"
+  }
+}

package/src/index.js

@@ -1,5 +1,4 @@
-import createSort from 'sort-css-media-queries/create-sort';
-import { nanoid } from 'nanoid';
+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
@@ -7,8 +6,9 @@ import { nanoid } from 'nanoid';
 
 // 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;
+  if (typeof options.sort !== "function") {
+    options.sort =
+      options.sort === "desktop-first" ? sortCSSmq.desktopFirst : sortCSSmq;
   }
 
   return queries.sort(options.sort);
@@ -25,61 +25,50 @@ function getDepth(node) {
 }
 
 function plugin(options = {}) {
-
   // Set default options and allow user overrides
   options = Object.assign(
     {
-      sort: 'mobile-first',
+      sort: "mobile-first",
       configuration: false,
     },
-    options
+    options,
   );
 
   // Create a sorter based on configuration (from sort-css-media-queries)
   const sortCSSmq = createSort(options.configuration);
 
   return {
-    postcssPlugin: 'postcss-sort-media-queries',
+    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 = [];
+      const parents = new Map();
 
       // 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] = {
+      root.walkAtRules("media", (atRule) => {
+        if (!parents.has(atRule.parent)) {
+          parents.set(atRule.parent, {
             parent: atRule.parent,
             depth: getDepth(atRule.parent),
-          }
+          });
         }
-
-        return;
       });
 
-      if (!parents) {
+      if (parents.size === 0) {
         return;
       }
 
-      parents = Object.fromEntries(
-        Object.entries(parents).sort(([, a], [, b]) => {
-          return b.depth - a.depth;
-        })
-      );
-
-      Object.keys(parents).forEach((groupId) => {
-        let { parent } = parents[groupId];
+      const sortedParents = [...parents.values()].sort((a, b) => {
+        return b.depth - a.depth;
+      });
 
+      sortedParents.forEach(({ parent }) => {
         // Filter only @media nodes from the parent's children
         let medias = parent.nodes.filter(
-          (node) => node.type === 'atrule' && node.name === 'media'
+          (node) => node.type === "atrule" && node.name === "media",
         );
 
         if (!medias) {
@@ -108,16 +97,18 @@ function plugin(options = {}) {
 
         // 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]);
-          });
+          sortAtRules(Object.keys(atRules), options, sortCSSmq).forEach(
+            (query) => {
+              parent.append(atRules[query]);
+            },
+          );
         }
       });
 
-      root.walkAtRules('media', (parent) => {
+      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'
+          (node) => node.type === "atrule" && node.name === "media",
         );
 
         if (!medias) {
@@ -128,7 +119,7 @@ function plugin(options = {}) {
           parent.append(atRule);
         });
       });
-    }
+    },
   };
 }