Search code examples
csssassstylelint

Stylelint / stylelint-scss: is it possible to prohibit use of different nesting in selectors / class name unions?

Aiming to avoid unnecessary code reviews. So I have a case when someone added rules without reusing the previous selector:

.games-lib-table {
  // ...
  &__info {
    // ...
  }
}
// later in the file someone added
.games-lib-table__info_filters {
  // ...
}

My first idea was to use stylint-scss: enforce selector-nest-combinators then somehow to prohibit duplication. But that's not nesting combinators rather a union of a class name.

Anyone has an idea how to enforce reusing existing class name unions like I've described?

Maybe there's some other linter besides Stylelint/stylelint-scss that could do that?

Solution

  • Anyone has an idea how to enforce reusing existing class name unions like I've described?

    I don't believe an existing plugin or other linter does this. You can create your own Stylelint plugin by forking the existing stylelint-use-nesting one to add support for SCSS's union nesting by splitting classes on __.

    (The existing plugin is geared towards standard CSS nesting and is unlikely to support SCSS union nesting itself.)