css 个模块的自定义格式规则

Question

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

还有一个问题：我们使用 css-modules，因此 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 and the stylelint order plugin 来实现。它可以处理非标准伪类，如 :global，属性，如 composes 和规则，如 @value.

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

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

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

custom formatting rule for css modules