Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant