css模块的自定义格式规则

Question

我正在尝试寻找一些可以帮助我解决一些代码格式问题的工具。我试图在逻辑块上拆分 css 规则集，但实际上，我找不到任何工具，我正在检查类似的工具 更漂亮，stylefmt，http://csscomb.com 等。

还有一个问题：我们使用 css 模块，因此 csscomb 无法处理诸如 composes、@value 和 .selector a :global .selector-b 之类的选择器之类的属性

你能帮我解决这个问题吗，我应该看哪个方向？ 谢谢（对不起我的英语）

.selector {
   position: absolute;
   content: '';

   left: 0;
   right: 0;
   top: 0;
   bottom: 0;

   margin-top: 2em;
   margin-bottom: 5em;
}

Answer 1

您可以使用stylelint 和stylelint order plugin 来实现此目的。它可以处理像:global这样的非标准伪类，像composes这样的属性和像@value这样的规则。

在 stylelint 订单插件中有两条规则可以一起使用：

• properties-order
• order

前者将允许您对属性进行排序和分组。您可以制作自己的订单和群组或use a community config。

后者将允许您在规则中定义 at 规则、自定义属性、声明和嵌套规则（以及其他规则）的顺序。