csssassstylelint

Stylelint indentation rule returns false negative on multi-line mixin


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.