Custom Stylelint rule to ban BEM convention in CSS modules

(1 comment) (0 reactions) (1 assignee)JavaScript (2 forks)auto 404

good first issue

Repository metrics

Stars: (6 stars)
PR merge metrics: (PR metrics pending)

Description

Problem statement

This summer we started the migration to CSS modules in the main Sourcegraph monorepo. We decided not to use the BEM convention in CSS modules apart from modifier selectors:

// Global CSS
.repo-header {
  &--active  { ... }
  &__button { ... }
}

// CSS module
.repo-header {
  &--active  { ... }
}

.button { ... }

Notice how we keep a nested modifier selector &--active. But the &__button selector is bubbled to the top level. To stick to this convention, we need a Stylelint rule to ban usage on &__* selectors in CSS modules.

Success criteria

A custom Stylelint rule is created that warns if the &__* selector is used.
It's added to our Stylelint config as a glob-based rule to apply it only to *.module.scss files.

Things to learn/practice during the implementation

Writing custom Stylelint rules to keep the codebase consistent.

Estimated amount of work

T-shirt size estimate: M.

Contributor guide

Research direction: Examine existing custom Stylelint rules in the repository. Study the Stylelint plugin API for creating custom rules. Implement the rule to detect & * selectors in .module.scss files and add it to the configuration with glob based rule application.
Tech stack: javascript
Domain: frontend
Issue type: Feature
Difficulty: 2
Estimated time: Half day
Activity status: Active
Clarity: Clear
Prerequisites: GitNode.js
Newbie friendliness: 80