fix: avoid wrapping pseudo-element selectors in :is() during nesting compilation

[donlion]

Summary

When compiling nested selectors like .parent & where the parent selector contains a pseudo-element (e.g., .element::after), the code was incorrectly wrapping the parent in :is(), producing invalid CSS.

Input:

.element::after {
  .parent & {
    color: red;
  }
}

Before (incorrect):

.parent :is(.element:after) {
  color: red;
}

After (correct):

.parent .element:after {
  color: red;
}

Root Cause

The is_simple() function returns false for selectors with pseudo-elements because they internally contain a Combinator::PseudoElement component. This caused the nesting serialization to fall back to using :is(), which cannot contain pseudo-elements per CSS specification.

Fix

Added a check in serialize_nesting to detect when the parent selector contains a pseudo-element. In that case, we serialize the selector directly instead of wrapping it in :is().

Related Issues

• Fixes Ligthning generate :is with pseudo element #352 (original report from 2022)
• Extends the fix from Automatic :is() wrapping of pseudo-elements + nested media query produces invalid CSS #975 to handle the .parent & case (where & is not at the start)

Test Plan

• Added test case for the specific scenario
• All existing tests pass (cargo test)

[devongovett]

what happens if there are multiple selectors?

.foo, .element::after {
  .parent & {
    color: red;
  }
}

doing this without :is is really difficult if not impossible in some cases to do correctly.

[donlion]

Good point, I’ll see if I can come up with something.
Would it be terrible to compile to this?

.parent .foo, .parent .element::after {
}

[yisibl]

Essentially, the current CSS specification does not permit nesting & within pseudo-elements, which still requires addressing the case mentioned in this comment. #975 (comment)

[yisibl]

We need to ensure that the CSS in this WPT test case, after being compiled by lightningcss, still displays entirely in green.
http://wpt.live/css/css-nesting/nesting-basic.html

[donlion]

Essentially, the current CSS specification does not permit nesting & within pseudo-elements, which still requires addressing the case mentioned in this comment. #975 (comment)

Aha! That's news to me.
I suppose it's a matter of opinion on wether it should work and compile invalid css to valid css.
But I think it’s very valid to decide, that it shouldn't :)

What’s your thoughts?