Search code examples
csssasslintstylelint

Stylelint validate declarations in SCSS mixin


I have a mixin that looks like this:

@mixin offset($fraction: 1) {
  @if type-of($fraction) != number or not unitless($fraction) {
    @include error("#{$fraction} is not a unitless number");
  }

  margin-left: percentage($fraction);
}

I also have stylelint setup with this rule:

"declaration-empty-line-before": "never"

The mixin and stylelint rule both work. However using this rule throws an error for the above mixin because of the empty line after the if statement. I can't find any ignore or except rules for this stylelint rule such as except after if statement. How can this sort of code validate without changing the rule for all declarations in a project?


Solution

  • Try inverting the objective of the rule i.e.:

    • from; never have an empty line before a declaration except when the declaration comes after an at-rule
    • to; always have an empty line before a declaration except when the declaration comes after another declaration (or is the first nested).

    The following rule configuration comes straight from the stylelint-config-standard and I believe will cater to your requirements:

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

    Ref: the About rules section of the stylelint docs.