Stylelint: нow to sort properties before nested classes

Question

I can't find a rule that would automatically fix this:

.a {
  .b {
    width: 16px;
  }

  padding: 2px 0;
}

on this:

.a {
  padding: 2px 0;

  .b {
    width: 16px;
  }
}

Answer 1

You can use the order rule of the stylelint-order plugin to order things inside of rule sets.

To ensure nested rules come before declarations you should add the following to your Stylelint configuration:

{
  "plugins": [
    "stylelint-order",
  ],
  "rules": {
    "order/order": [
      ["custom-properties", "declarations", "rules", "at-rules"]
    ]
  }
}