postcss-sort-media-queries 6.4.4 → 6.5.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

@@ -334,9 +334,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,139 @@
+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;

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,77 @@
-{
-  "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.5.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": {
+    "nanoid": "^5.1.6",
+    "postcss": "^8.5.6"
+  },
+  "dependencies": {
+    "sort-css-media-queries": "^3.0.5"
+  }
+}

package/src/index.js

@@ -1,5 +1,5 @@
-import createSort from 'sort-css-media-queries/create-sort';
-import { nanoid } from 'nanoid';
+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
@@ -7,8 +7,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,21 +26,20 @@ 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 }) {
@@ -49,7 +49,7 @@ function plugin(options = {}) {
       let parents = [];
 
       // Walk all @media at-rules and group their parents
-      root.walkAtRules('media', (atRule) => {
+      root.walkAtRules("media", (atRule) => {
         if (!atRule.parent.groupId) {
           let groupId = nanoid();
 
@@ -58,7 +58,7 @@ function plugin(options = {}) {
           parents[groupId] = {
             parent: atRule.parent,
             depth: getDepth(atRule.parent),
-          }
+          };
         }
 
         return;
@@ -71,7 +71,7 @@ function plugin(options = {}) {
       parents = Object.fromEntries(
         Object.entries(parents).sort(([, a], [, b]) => {
           return b.depth - a.depth;
-        })
+        }),
       );
 
       Object.keys(parents).forEach((groupId) => {
@@ -79,7 +79,7 @@ function plugin(options = {}) {
 
         // 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 +108,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 +130,7 @@ function plugin(options = {}) {
           parent.append(atRule);
         });
       });
-    }
+    },
   };
 }