Search code examples
cssformatprettierstylelint

custom formatting rule for css modules

i'm try to find some tools which can help me with some code formatting issues. I'm try to split css rulesets at logically blocks, but actually, i'am can't find any tooling for this, i'm check tools like prettier, stylefmt, http://csscomb.com and other.

one more problem: we use css-modules, so csscomb for example can't handle with properties like composes, @value and selectors like .selector a :global .selector-b

can you help me with this problem, in which direction should i see ? Thanks ( and sorry for my English )

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

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

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

  • You can use stylelint and the stylelint order plugin to achieve this. It can process non-standard pseudo-classes like :global, properties like composes and at-rules like @value.

    Within the stylelint order plugin there are two rules you can use together:

    The former will allow you to order and group your properties. You can either craft your own order and groups or use a community config.

    The latter will allow you define the order of at-rules, custom properties, declarations and nested rules (and others) within rules.