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