Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
pleroma-fe
pleroma-fe
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 243
    • Issues 243
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 21
    • Merge Requests 21
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Pleroma
  • pleroma-fepleroma-fe
  • Issues
  • #857

Closed
Open
Opened May 27, 2020 by HJ@hj🐼Maintainer
  • Report abuse
  • New issue
Report abuse New issue

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

Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: pleroma/pleroma-fe#857