1

I'm trying to configure my .stylelintrc.json to work where there is always an empty line between selectors except for the first nested selector.

Example

This is what I have after linting with --fix

.class {
                 
    .is-active {
        color: red;
    }

    .is-disabled {
        color: grey;
    }
}

.block__container {

    &--grid {
                                
        /* autoprefixer grid: no-autoplace */
        grid-template-rows: 1fr auto auto;
    }

    &--full {

        div {
           ....
        }
    }

    &--wide {

       div {
         ...
       }
    }
}

This is what I want the end result to be

//This is what I want
.class {
    .is-active {
        color: red;
    }

    .is-disabled {
        color: grey;
    }
}

.block__container {
    &--grid {                     
        /* autoprefixer grid: no-autoplace */
        grid-template-rows: 1fr auto auto;
    }

    &--full {
        div {
           ....
        }
    }

    &--wide {
       div {
         ...
       }
    }
}

This is my .stylelintrc.json file:

{
  "extends": [ "@wordpress/stylelint-config/scss" ],
  "rules": {
    "string-quotes": "single",
    "scss/at-extend-no-missing-placeholder": true,
    "selector-class-pattern": null,
    "selector-id-pattern": null,
    "declaration-empty-line-before": "never",
    "rule-empty-line-before": [
      "always",
      {
        "except": [
          "after-single-line-comment",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "first-nested"
        ]
      }
    ],
    "at-rule-empty-line-before": [
      "always",
      {
        "except": [
          "blockless-after-same-name-blockless",
          "blockless-after-blockless",
          "first-nested"
        ],
        "ignore": [
          "after-comment",
          "first-nested",
          "blockless-after-blockless"
        ],
        "ignoreAtRules": [
          "import"
        ]
      }
    ]
  } 
}

What rules, options, or plugins do I need to use/extend to get that result? Thank you so much

user3486605
  • 53
  • 7

1 Answers1

1

You can use the except: ["first-nested"] option on the built-in rule-empty-line-before rule to always have an empty line before rules except for the first nested rule.

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

(In your config, you're ignoring the first nested.)

jeddy3
  • 3,451
  • 1
  • 12
  • 21
  • Thank you! I didn't realize that having it in the "ignore" was backfiring for me. I get it now. Appreciate your help. – user3486605 Mar 13 '23 at 21:55