How to Disallow Concatenated Selectors

Question

I found this sass feature as hard to catch some missing styles and would like to lint my project on it. Here is the link to feature documentation: https://sass-lang.com/documentation/style-rules/parent-selector#adding-suffixes

Answer 1

You can configure Stylelint'sselector-disallowed-list rule to disallow concatenated selectors.

For example, to disallow the suffix examples in the Sass docs you can use:

{
  "rules": {
    "selector-disallowed-list": ["/^&__/", "/^&--/"]
  }
}

This will disallow selectors that start with &__ or &-- , eg:

.foo {
  &__bar {}
  &--baz {}
}

But not:

.foo {
  &::before {}
  &:hover {}
  & .bar {}
  &.baz {}
}