Add Stylelint + RSCSS to lint pipeline #857

Closed
opened 2020-05-27 13:20:33 +00:00 by hj · 0 comments
Owner

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

[Stylelint](https://github.com/stylelint/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](https://rscss.io/) and [its plugin for stylelint](https://github.com/rstacruz/stylelint-rscss/) 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`: ```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`
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe#857
No description provided.