Preserve empty line between CSS blocks

[nelsieborja]

For readability purpose, I want to enforce space between CSS blocks like so:

.style1 {
   ...
}

.style2 {
   ...
}

Does this already exist? I can't seem to find its availability in your rules..

[lydell]

Somewhat related: #2068

[nelsieborja]

Nope not working for SCSS but works for JS...

Wildcard just to see if it'll work but not at all

"padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "*" }
    ]

[gvincentlh]

Bump. We'd like to use Prettier on our SCSS but can't until this issue is resolved :-(

[lydell]

@nelsieborja and @gvincentlh Can you clarify if you want empty lines in the input code to be preserved (like in JS → will likely be fixed, or already works, not sure atm), or if you want to enforce blank lines at specific places (unlikely to happen)?

[gvincentlh]

@lydell we would need the ability to enforce (via config switch?) blank lines between selectors.

[lydell]

Here is a clarification of the current state:

Currently, handling of blank lines works the same for CSS as in JS.

In JS, Prettier never prints blank lines on its own. It only preserves blank lines from the input JS (with some extra rules). This is because finding where to place blank lines in JS is hard, and allowing the user to choose where they should be is a trade-off that had to be made to make Prettier usable in practice.

So, currently, the same applies to CSS.

• It is consistent if we handle blank lines the same as in JS.
• But CSS is a much simpler language, so it could be possible to make Prettier decide where blank lines go.
• That's why Option for ignoring original formatting 100% #2068 is related, because it discusses a mode where all original formatting is completely ignored, including blank lines – so Prettier would have to decide where to put blank lines instead.

[cmseaton42]

Has this been resolved? Is there currently a work around?

[lydell]

@cmseaton42 No, this is not resolved. Workaround: Use stylelint.

[nelsieborja]

Thanks @lydell works perfectly with styelint

[alexander-akait]

Closing. Should be done with stylelint. Thanks!

[jeddy3]

New options were recently added to the *-empty-line-before rules of stylelint. These options were added to help stylelint and Prettier work better together. Previously, both stylelint and Prettier would attempt to pretty-print/lint/format the first-nested node of each block. Now stylelint can be configured to ignore these first-nested nodes, leaving prettier to remove any empty lines before them without conflict. stylelint can then be used to just lint/format the empty lines between at-rules, rules, declarations and custom properties.

The following configuration makes use of these new options, and I believe it will configure stylelint to avoid stepping on Prettier's toes:

{
  "rules": {
    "at-rule-empty-line-before": [
      "always",
      {
        "except": ["blockless-after-same-name-blockless"],
        "ignore": ["after-comment", "first-nested"],
        "severity": "warning"
      }
    ],
    "custom-property-empty-line-before": [
      "always",
      {
        "except": ["after-custom-property"],
        "ignore": ["after-comment", "first-nested", "inside-single-line-block"],
        "severity": "warning"
      }
    ],
    "declaration-empty-line-before": [
      "always",
      {
        "except": ["after-declaration"],
        "ignore": ["after-comment", "first-nested", "inside-single-line-block"],
        "severity": "warning"
      }
    ],
    "rule-empty-line-before": [
      "always",
      {
        "ignore": ["after-comment", "first-nested"],
        "severity": "warning"
      }
    ]
  }
}

You'll need at least stylelint@9.1.1 for this config to work.