New Rule: `no-unscoped-nesting-selector`

[sethamus]

Rule details

Disallow the nesting selector (&) in a context with no scoping root

What type of rule is this?

Warns about a potential problem

Example code

/* ✗ no enclosing style rule: per css-nesting, `&` here "represents the same
   elements as :scope", so this silently styles the root element */
& {
  color: red;
}

/* ✓ the enclosing style rule is the scoping root */
a {
  & span {
    color: red;
  }
}

Prior Art

https://stylelint.io/user-guide/rules/nesting-selector-no-missing-scoping-root

Participation

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

No response

[DMartens]

I agree that this would be a helpful rule.
As this is a rule proposal, we should get more opinions from the team.