Stylelint, have an empty line before non-nested rules and no empty line before nested rules?

Question

Is there any way at all to accomplish this now?

I see rule-nested-empty-line-before has been removed for some reason, so is this config no longer possible?

I want this to throw errors...

@media (max-width: 300px) {

    .foo {
        display: block;
    }
}
@media (max-width: 600px) {
    .bar {
        display: block;
    }
}

There should be a space before @media since it's not nested, and no space before .foo since it's nested.

Answer 1

The rule-nested-empty-line-before and rule-non-nested-empty-line-before rules were combined together to form the new rule-empty-line-before rule in version 8.0.0. You can use this rule to control the empty lines before the .foo {} and .bar {} rules.

@media is an at-rule, so you should use the at-rule-empty-line-before rule to control the empty lines before it.

You can learn about how rules are named and how they work together in this section of the User Guide.

There should be a space before @media since it's not nested, and no space before .foo since it's nested.

With the above in mind, the configuration for that should be:

{
  "rules": {
    "at-rule-empty-line-before": ["always"],
    "rule-empty-line-before": ["always", {
      except: ["first-nested"]
    }]
  }
}

Alternatively, you can use stylelint-standard-config, which has sensible defaults for stylistic rules.