Stylelint indentation rule returns false negative on multi-line mixin

Issue

I have an app that uses Stylelint to enforce stylistic rules inside styles, but here, Stylelint complains about indentation when a long line is split in half by Prettier.

@include box-shadow(
  var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-spread)
    $color-white, // complains here about 2 extra whitespaces
  var(--shadow-offset) var(--shadow-offset) $color-red
);

raises this error Expected indentation of 8 spaces (indentation)

I tried
/* stylelint-disable-line indentation */
/* stylelint-disable-line */
only
/* stylelint-disable */ gets rid of the "error".

Solution

When using Prettier alongside Stylelint, you should extend the appropriate Prettier shared config, e.g. stylelint-config-prettier-scss, in your Stylelint configuration:

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

This config turns off all the rules that conflict with Prettier. It should be placed last in the extends array.

Prettier is then responsible more enforcing stylistic conventions, like whitespace, and Stylelint is focused on helping you avoid errors and enforce non-stylistic conventions, e.g. what units you want to allow in your codebase.

Answered By – jeddy3

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.