sassnuxt.jsstylelint

Nuxt stylelint empty line before


I'm trying to setup some rules about empty lines before in stylelint in Nuxt but doesn't seems to work as expected, this is the code I'm trying to fix:

.header {
    header {
      background-color: $color-primary-300;
    }
    &__inner {
      box-shadow: $box-shadow;
    }
    &__spacer {
      width: 100%;
      height: 72px;

      &--small {
        height: 66px;
      }
      @include respond-to(lg) {
        height: 106px;
      }

      &--no-links {
        @include respond-to(lg) {
          height: 0;
        }
      }

the &_ and @include declaration should have an empty line before but only if aren't nested like the last one in &--no-links block.

This is my configuration:

{
  "plugins": [
    "stylelint-declaration-strict-value"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "function",
          "if",
          "each",
          "include",
          "mixin",
          "at-root",
          "extend"
        ]
      }
    ],
    "rule-empty-line-before": [
      "always-multi-line",
      {
        "except": ["first-nested"],
        "ignore": ["after-comment"]
      }
    ],
    "at-rule-empty-line-before": [
      "always",
      {
        "except": ["first-nested"]
      }
    ],
    "no-empty-source": null,
    "no-descending-specificity": null,
    "declaration-no-important": true,
    "selector-pseudo-element-no-unknown": [true, {
      "ignorePseudoElements": ["v-deep"]
    }]
  },
  "extends": "stylelint-config-standard"
}

Solution

  • OK, I think I've found the solution by installing stylelint-config-recommended-scss

    "scss/dollar-variable-empty-line-before": [ "always", {
      "except": [
        "first-nested",
        "after-comment",
        "after-dollar-variable"
      ]
    } ]
    },
    "extends": "stylelint-config-recommended-scss"