[YevheniiKotyrlo]

Problem

getClassNameSelectors walks a selector from its subject outwards, and it reverses lightningcss's selector array in place to do so. A nested rule reads its parent's selector list again, so it sees that selector reversed. Measured on main:

CSS	main	here
.group .x { color: red; @media (min-width: 0px) { color: blue } }	the blue declaration on .group, under an .x container	on .x, under a .group container
the same with @container (min-width: 0px) or &:hover	the same	the same

So a .x inside .group renders red, where Chromium 153, Firefox 155 and WebKit 26.6 render blue. A single-compound selector reverses to itself, which is why media query nested in rules passes.

Solution

The walk reads selector.toReversed(), a copy, so every rule compiles against the selector as written.

Tests

• src/__tests__/compiler/compiler.test.tsx: @media, @container and &:hover nested in .group .x put every declaration on .x under a .group container, and nothing on .group.
• src/__tests__/native/grouping.test.tsx: a .x inside .group renders the nested @media declaration.
• On main, 4 of the 22 cases in the two files fail. Restoring the in-place reverse fails the same 4.

Verification

On Windows with Node 26:

• yarn lint clean
• yarn typecheck clean
• yarn test --coverage: every failure also fails on main on this machine (the four babel cases)
• yarn build clean
• yarn example expo export --platform web exported

No existing issue tracks this. I searched for nested media and nesting selector reversed.

Merge order

It shares compiler/selector-builder.ts with #459, which changes the same call; whichever lands second rebases.

[YevheniiKotyrlo]

No current device pair

In my test app the bundler flattens a nested rule for browsers before the compiler sees it, and #461 is what stops that. So the build without this PR compiles the flat rule, which is already right, and a pair would show no difference. The tests in the description are the evidence.

[sammoore]

Good fix! cc @danstepanov