Stylelint - Making CSS Appears Before Subclass Definition

Question

is there a rule in stylelint to make it so CSS appears before any subclass definitions?

i would like something like this to be invalid:

.some-class {
  .some-sub-class {
    background: red;
  }
  border: 1px;
}

I would like this to be correct.

.some-class {
  border: 1px;
  .some-sub-class {
    background: red;
  }
}

my stylelint setup is very basic and the file .stylelintrc only contains the following:

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

does anyone know if there is a rule for what I am trying to do on stylelint?

Answer 1

You can use the order rule in the stylelint-order plugin pack to ensure declarations come before nested rules.

You'll need to install the plugin pack first:

npm i --save-dev stylelint-order

Then update your configuration object:

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "declarations",
      "rules"
    ]
  }
}