[css-nesting] How to resolve nested CSS with pseudo elements in the parent (original) (raw)

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 :