'Expected empty line before declaration' error for delaration after nested property

[flachware]

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

Warning for standard SCSS syntax (related to #2456).

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

declaration-empty-line-before

What CSS is needed to reproduce this issue?

e.g.

a  {
  padding: {
    left: 10px;
    right: 10px; 
  }
  color: #fff;
}

What stylelint configuration is needed to reproduce this issue?

e.g.

{
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"]
}

Which version of stylelint are you using?

e.g. 8.2.0

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

npm script with "lint": "./node_modules/.bin/stylelint --syntax scss \"src/scss/**/*.scss\""

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

Yes, it’s related to SCSS nested properties.

What did you expect to happen?

No warnings to be flagged.

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

The following warnings were flagged:

Expected empty line before declaration

[hudochenkov]

Thank you for reporting and using a template. Can you show a full error message, please, with line and column numbers?

[CAYdenberg]

I believe this is the expected behaviour? padding { ... is a declaration and should have an empty line before it. Unless I'm misunderstanding.

We could add except (or ignore?): "inside-block" as a secondary option as we are doing for rule-empty-line-before (see #2982 )

[flachware]

Thanks for the immediate response!

_mobile.header.scss:

a {
  padding: {
    left: $spacer-6;
    right: $spacer-6;
  }
  color: $white;
}

shell:

src/scss/_mobile-header.scss
 6:3  ✖  Expected empty line before declaration   declaration-empty-line-before

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! XXX@0.1.1 lint: `stylelint --syntax scss "src/scss/**/*.scss"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the XXX@0.1.1 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/johannes/.npm/_logs/2017-11-02T15_46_07_723Z-debug.log

[CAYdenberg]

Oh I see. There's an argument to be made that padding: { ... is a rule and not a declaration. Not sure postcss parser understands this though ... I think formally it might be a declaration.

[hudochenkov]

padding: in this case is not a declaration. It might be a declaration in Sass terms, though. This Sass feature is very unpopular. In my opinion, it's not worth it to add logic for this “declarations”, because there are no benefits for our users.

[flachware]

Thanks for the clarification.

[jeddy3]

As @hudochenkov and @CAYdenberg have diagnosed, the rule is behaving as intended.

The stylelint-config-standard expects an empty line before declarations unless it comes after a declaration or is the first nested node:

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

In the example above, the color: #fff; declaration doesn't come after a declaration (it comes after a non-standard "nested-property" construct) nor is it the first nested node. Therefore, it expects an empty line.

@johanneskrtek I believe you have four options:

• Turn off the rule.
• Try to reconfigure the rule using the "never" primary option.
• Stop using the "nested-property" construct.
• Create a plugin that understands these constructs. (perhaps stylelint-scss would be a good home for it.)