Stylelint: newline between nested at-rules and declarations

Created on 7 Apr 2017 · 3Comments · Source: stylelint/stylelint

Describe the issue. Is it a bug or a feature request (new rule, new option, etc.)?

This is a feature request, if there is not already a way to do this. Is there a way to specify that there should be a newline between at-rules and declarations?

.some-button {
    @apply --custom-shared-button-styles;

    background-repeat: no-repeat;
    background-size: 20px 20px;
}

Which rule, if any, is this issue related to?

declaration-empty-line-before (or possibly a new rule like at-rule-newline-after?).

What CSS is needed to reproduce this issue?

See above.

What stylelint configuration is needed to reproduce this issue?

e.g.

{
  "rules": {
    "declaration-empty-line-before": [ "never", { "ignore": [ "after-declaration" ] } ]
  }
}

Which version of stylelint are you using?

7.10.1

How are you running stylelint: CLI, PostCSS plugin, Node API?

CLI with stylelint *.css

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

Possibly. @apply is behind a flag in Chrome and nested media queries are in draft.

What did you expect to happen?

Enforce spacing between a nested rule and a declaration.

What actually happened (e.g. what warnings or errors you are getting)?

I get "Unexpected empty line before declaration" from declaration-empty-line-before presently.

Source

jonathantneal

Most helpful comment

Try this config:

{
    "rules": {
        "declaration-empty-line-before": [
            "always", 
            {
                "except": ["first-nested", "after-comment", "after-declaration"]
            }
        ]
    }
}

hudochenkov on 7 Apr 2017

👍2

All 3 comments

Try this config:

{
    "rules": {
        "declaration-empty-line-before": [
            "always", 
            {
                "except": ["first-nested", "after-comment", "after-declaration"]
            }
        ]
    }
}

hudochenkov on 7 Apr 2017

👍2

@jonathantneal Thanks for writing up a detailed report. @hudochenkov configuration is the correct way to achieve your desired code style. FYI, you'll find more details about these empty-line rules in the docs, including a little bit on why there aren't any -after rules in stylelint. As a rule of thumb, you'll likely want to reach for the "always" option when using these rules _and then define you're exceptions_.

I'll close this issue, but @jonathantneal feel free to reopen it if @hudochenkov solution does not work for you.