(CSS) Fix nesting lowering with complex sub selectors by tim-we · Pull Request #4037 · evanw/esbuild (original) (raw)

This PR fixes the issue described in #3620.

When nesting is lowered (for example when the target is Chrome 117) the current version of esbuild will transform this:

.parent {

.a, .b1 > .b2 { color: red; } }

into this (playground link)

.parent > :is(.a, .b1 > .b2) { color: red; }

which is wrong because .parent > :is(.b1 > .b2) is semantically different from .parent > .b1 > .b2.

With the change in this PR the output will instead be this:

.parent > .a, .parent > .b1 > .b2 { color: red; }

I have added a test for this as well. The fix is in the first pass of the lowerNestingInRuleWithContext method. When a nested complex selector is sufficiently complex (has another combinator) the transformation will be disabled.