Why is this an issue?

The nesting selector & expands to the selector of an enclosing style rule. When there is no enclosing style rule, selectors such as &.active have no scoping root to reference.

Using & at the top level of a stylesheet, or directly inside an at-rule with no enclosing style rule, creates nested rules that cannot expand as intended. This makes the stylesheet misleading and can leave declarations unapplied.

To fix this, move the nested rule inside a style rule so that & can expand from a concrete selector.

Noncompliant code example

&.active {
  color: red;
}

Compliant solution

.button {
  &.active {
    color: red;
  }
}

Resources

Documentation

• stylelint - Rule nesting-selector-no-missing-scoping-root