CSS 声明排序器

一个 Node.js 模块和 PostCSS 插件，用于根据属性名称对 CSS、SCSS 或 Less 声明进行排序。确保样式组织更加一致有序... 这个包的目标是在构建过程中对项目源代码进行排序，或减小分发的 CSS gzip 压缩后的大小。

查看Prettier 插件以了解如何与各种文件格式一起使用。

优点

从 MDN 兼容性数据项目获取最新的 CSS 属性。
选择你想要的排序方式或提供自己的排序方式。
支持嵌套规则排序。
当与 postcss-scss 或 postcss-less 结合使用时，支持 SCSS 和 Less。
提供经过深思熟虑的开箱即用排序方式，经作者认可。

字母顺序示例

输入：

body {
    display: block;
    animation: none;
    color: #C55;
    border: 0;
}

输出：

body {
    animation: none;
    border: 0;
    color: #C55;
    display: block;
}

内置排序方式

字母顺序
alphabetical
默认，按简单的 a-z 字母顺序排序。
SMACSS
smacss
从最重要、影响流程的属性到最不重要的属性排序。
1. 盒子
2. 边框
3. 背景
4. 文本
5. 其他
同心 CSS
concentric-css
从应用于盒模型外部的属性开始排序，向内移动到内在变化。
1. 定位
2. 可见性
3. 盒模型
4. 尺寸
5. 文本

使用方法

遵循 PostCSS 插件指南，本包将 PostCSS 作为对等依赖：
npm install postcss css-declaration-sorter --save-dev

命令行

本模块不包含自己的命令行界面，但可与官方 PostCSS CLI 配合使用。要使用以下示例，需要安装 postcss-cli 包作为依赖。

从文件输出结果：
postcss input.css --use css-declaration-sorter | cat

通过覆盖排序多个文件：
postcss *.css --use css-declaration-sorter --replace --no-map

使用 postcss-scss 通过覆盖方式排序目录中所有 SCSS 语法的文件：
postcss ./src/**/*.scss --syntax postcss-scss --use css-declaration-sorter --replace --no-map

使用 package.json 配置，以 SMACSS 顺序通过覆盖方式排序目录中所有 SCSS 语法的文件：

"postcss": {
  "syntax": "postcss-scss",
  "map": false,
  "plugins": {
    "css-declaration-sorter": { "order": "smacss" }
  }
}

postcss ./src/**/*.scss --replace --config package.json

原生 JS

import postcss from 'postcss';
import { cssDeclarationSorter } from 'css-declaration-sorter';

postcss([cssDeclarationSorter({ order: 'smacss' })])
  .process('a { color: hyperblue; display: block; }', { from: undefined })
  .then(result => console.log(
    result.css === 'a { display: block; color: hyperblue; }'
  ));

查看更多与其他工具结合使用的示例。