Stylelint setup

Stylelint lets you run automated checks on your CSS and SCSS files for formatting defects. We encourage all projects to adopt Stylelint for linting.

Add your packages

Add the stylelint package, as well as some others.

yarn add --dev \
  stylelint \
  stylelint-config-standard \
  stylelint-rscss

Configure stylelint

Edit .stylelintrc in your project root. Here's an example:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-rscss/config"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "at-rule-empty-line-before": null,
    "declaration-empty-line-before": null,
    "no-descending-specificity": null,
    "no-duplicate-selectors": null,
    "rscss/class-format": [
      true,
      {
        "maxDepth": 4,
        "componentWhitelist": [
          "btn",
          "container"
        ]
      }
    ]
  }
}

Add scripts

Edit your package.json to add a stylelint script. Be sure to enclose the path globs with 'single quotes'!

/* package.json */
{
  "scripts": {
    "stylelint": "stylelint 'apps/css/**/*.scss'"
  }
}

Run stylelint on CI

Configure your CI to run Stylelint as part of its test suite. Here's an example for Semaphore CI:

if grep stylelint >/dev/null; then yarn run stylelint; fi

Further reading