[css-nesting] How to resolve nested CSS with pseudo elements in the parent #7433

first reported here : csstools/postcss-plugins#510

relevant specification parts:

https://www.w3.org/TR/css-nesting-1/#nest-selector

The nesting selector can be desugared by replacing it with the parent style rule’s selector, wrapped in an :is() selector. For example,

https://www.w3.org/TR/selectors-4/#matches-pseudo

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().

For this CSS :

.anything::before {
  @nest .something_else > & {
    color: black
  }
}

& should represent the matched element of the enclosing rule.
Which in this case is before.

This CSS :

1. is invalid
2. is valid but never matches
3. matches .something_else > .anything::before
4. matches .something_else.anything::before (or .something_else.anything :> before)

Also relevant :

• [selectors-4]Why Pseudo-elements cannot be represented by the :is()/:matches()? #2284 (comment)
• [selectors] Child & descendant pseudo element combinators #7346 (comment)