Skip to content

README-ZH.md

Latest commit

 

History

History
243 lines (183 loc) · 6.67 KB

README-ZH.md

File metadata and controls

243 lines (183 loc) · 6.67 KB
Raw

PostCSS 排序媒体查询（Sort Media Queries）

npm Node.js CI license npm

🌏 English ▫ O'zbek ▫ 简体中文

PostcSS Sort Media Queries 是一个强大且灵活的 PostCSS 插件，用于按照 移动优先（mobile-first） 或 桌面优先（desktop-first） 的方式对 CSS 媒体查询进行排序与合并。它可以帮助保持样式表结构清晰、可预测，提高可读性，并防止意外的样式覆盖。

该插件的一个关键优势是 完全支持嵌套媒体查询，即使在复杂、深层嵌套的样式结构中也能正确处理与排序。这使它非常适用于现代 CSS 工作流，例如 PostCSS 嵌套或类似预处理器的写法。

此外，该插件完全支持 CSS Media Queries Level 4，包括现代的 范围语法（range syntax）。

排序逻辑基于 OlehDutchenko/sort-css-media-queries。

目录

安装

npm install postcss postcss-sort-media-queries --save-dev

使用

检查你的 PostCSS 配置是否已存在：项目根目录下的 postcss.config.js， 或 package.json 中的 "postcss" 字段，或构建工具配置中的 postcss。

// CJS
let sortCssMq = require("postcss-sort-media-queries");

// ESM
import sortCssMq from "postcss-sort-media-queries";

如果你已经在使用 PostCSS，将插件添加到 plugins 列表中：

module.exports = {
  plugins: [
+   require('postcss-sort-media-queries')({
+     sort: 'mobile-first' | 'desktop-first' | function // 默认（mobile-first）
+   }),
  ]
}

或使用自定义排序函数：

module.exports = {
  plugins: [
+   require('postcss-sort-media-queries')({
+     sort: function(a, b) {
+        // 自定义排序函数
+     }
+   }),
  ]
}

如果你没有使用 PostCSS，请参考 [官方文档] 并在配置中添加该插件。

选项

排序逻辑基于 OlehDutchenko/sort-css-media-queries

sort

该选项支持 字符串 或 函数 类型。

  • {string} 'mobile-first' -（默认）移动优先排序
  • {string} 'desktop-first' - 桌面优先排序
  • {function} 自定义排序函数

'mobile-first' 或 'desktop-first'

postcss([
  sortMediaQueries({
    sort: "mobile-first" | "desktop-first", // 默认（mobile-first）
  }),
]).process(css);

自定义排序函数

postcss([
  sortMediaQueries({
    sort: function (a, b) {
      return a.localeCompare(b);
    },
  }),
]).process(css);

在这个例子中，所有媒体查询将按 A-Z 顺序排序。

该排序函数会直接传递给 Array#sort() 方法，用于所有媒体查询数组。

排序配置

通过该配置，你可以控制排序行为。

postcss([
  sortMediaQueries({
    configuration: {
      unitlessMqAlwaysFirst: true, // 或 false
    },
  }),
]).process(css);

或者你也可以在项目根目录创建 sort-css-mq.config.json 文件，或者在 package.json 中添加 sortCssMQ: {} 字段。

在线演示

这里是 在线演示

示例

移动优先排序（包含嵌套媒体查询）

之前

root
│
├── (min-width: 1400px)
├── (min-width: 1200px)
│
└── @layer reset
   │
   ├── (min-width: 1200px)
   │   ├── (min-width: 992px)
   │   └── (min-width: 768px)
   │
   └── (min-width: 768px)
       ├── (min-width: 640px)
       └── (min-width: 320px)

之后

root
│
├── @layer reset
│  │
│  ├── (min-width: 768px)
│  │   ├── (min-width: 320px)
│  │   └── (min-width: 640px)
│  │
│  └── (min-width: 1200px)
│      ├── (min-width: 768px)
│      └── (min-width: 992px)
│
├── (min-width: 1200px)
└── (min-width: 1400px)

桌面优先排序

之前

root
│
├── (width < 640px)
├── (min-width: 760px)
├── (width < 640px)
├── (min-width: 1280px)
├── (max-width: 760px)
└── (max-width: 640px)

之后

root
│
├── (min-width: 760px)
├── (max-width: 640px)
├── (width < 640px)
├── (max-width: 760px)
└── (min-width: 1280px)

更新日志

查看 Releases history

许可证

MIT

其他 PostCSS 插件

  • postcss-momentum-scrolling - 用于为 iOS 中 overflow（scroll、auto）元素添加 惯性滚动（momentum scrolling）（-webkit-overflow-scrolling:touch）的插件（现代 Safari 已弃用）

致谢