Skip to content

Add Stylelint + RSCSS to lint pipeline

Stylelint on itself (with stylelint-config-recommended) is pretty useful to avoid common pitfalls and also avoid blatant mistakes like defining same section twice.

RSCSS and its plugin for stylelint help enforce guidelines i've been proposing some time ago in regards of SCSS and nesting. RSCSS by itself is very strict and at times feels TOO strict but checker is very flexible and configurable.

Proposed stylelint.json:

{
  "extends": [
    "stylelint-rscss/config",
    "stylelint-config-recommended",
    "stylelint-config-standard"
  ],
  "rules": {
    "declaration-no-important": true,
    "rscss/no-descendant-combinator": false,
    "rscss/class-format": [
      true,
      {
        "component": "pascal-case",
        "variant": "^-[a-z]\\w+",
        "element": "^[a-z]\\w+"
      }
    ]
  }
}

This means:

  • no forced > operator since it's very inconvenient to use ALL the time, it only matters when components can contain themseleves (see several nested tab switchers in settings-modal branch) and when you have conflicting element names (i.e. .TabSwitcher .text vs .InnerPage .text), we could possibly enforce it so that elements contain component name.
  • component should have root class and it's called in pascal-case, i.e. .TabSwitcher
  • variant/modificator should begin with -, so it would be like .TabSwitcher.-side-tabs or &.-side-tabs
  • element can be called anything that stats with a lowercase letter.

For stuff like using .btn inside we can put stylelint-ignore for now or turn those into helper classes, i.e. ._btn, but for most those selectors should become more unique, i.e. instead of .btn it would be .submitBtn