Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

(CSS) Fix nesting lowering with complex sub selectors #4037

Closed
wants to merge 1 commit into from

Conversation

tim-we
Copy link

@tim-we tim-we commented Jan 13, 2025

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.

@tim-we tim-we changed the title Fix nesting lowering with complex sub selectors (CSS) Fix nesting lowering with complex sub selectors Jan 13, 2025
@evanw evanw closed this in 31e7b4d Feb 4, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant