fix(styled-jsx): handle top-level & nesting selector correctly in scopeSelector

[Copilot]

Summary

Fixes the handling of top-level & (CSS nesting) in scopeSelector. Previously the function had no awareness of :scope pseudo-classes (which lightningcss emits when it flattens a top-level &), so patterns like &:global(.foo) and & .bar produced incorrect or missing scoped selectors.

Changes

src/css.ts

• Add isScopePseudo helper to detect :scope pseudo-classes emitted by lightningcss when expanding a top-level &
• Fix &:global() handling: strip any leading :scope (from &) before unwrapping :global(), so &:global(.theme-dark) correctly emits .theme-dark instead of leaving .jsx-HASH:scope
• Simplify non-global compound handling: instead of a two-step strip-then-insert, replace :scope in-place with the scope class. This means & is substituted directly rather than removed and re-added at a different position
  • &.active → .jsx-HASH.active (was .active.jsx-HASH)
  • &.active:hover → .jsx-HASH.active:hover (was .active.jsx-HASH:hover)
  • All other & patterns are unaffected: &:hover, &::before, &:not(...), bare &, & .child
• Update JSDoc comments to describe the new behaviour

Test fixtures

• issue-94 — new fixture covering & :global(.foo) and & .localClass (the two patterns from issue & :global(...) selectors mis-compile to .jsx-HASH:scope ... (dead selector) instead of .jsx-HASH ... #94)
• scope-ampersand-patterns — new fixture exhaustively covering all top-level & combinations: &.class, &:pseudo, &::element, &:not(), &.class:pseudo, &:global(), & + combinator, and bare &

Behaviour notes

The CSS semantics are equivalent in all cases — both .active.jsx-HASH and .jsx-HASH.active require both classes to be present on the element. The change is purely in which position the scope class occupies in the compound selector.

[sapphi-red]

It's arguable that &:global(.foo) should be .jsx-hash.foo, but I think either is fine as &:global(.foo) is contradictory.

[pkg-pr-new]

Open in StackBlitz

@rolldown/plugin-babel

pnpm add https://pkg.pr.new/@rolldown/plugin-babel@95 -D

npm i https://pkg.pr.new/@rolldown/plugin-babel@95 -D

yarn add https://pkg.pr.new/@rolldown/plugin-babel@95.tgz -D

@rolldown/plugin-emotion

pnpm add https://pkg.pr.new/@rolldown/plugin-emotion@95 -D

npm i https://pkg.pr.new/@rolldown/plugin-emotion@95 -D

yarn add https://pkg.pr.new/@rolldown/plugin-emotion@95.tgz -D

@rolldown/plugin-jsx-remove-attributes

pnpm add https://pkg.pr.new/@rolldown/plugin-jsx-remove-attributes@95 -D

npm i https://pkg.pr.new/@rolldown/plugin-jsx-remove-attributes@95 -D

yarn add https://pkg.pr.new/@rolldown/plugin-jsx-remove-attributes@95.tgz -D

oxc-unshadowed-visitor

pnpm add https://pkg.pr.new/oxc-unshadowed-visitor@95 -D

npm i https://pkg.pr.new/oxc-unshadowed-visitor@95 -D

yarn add https://pkg.pr.new/oxc-unshadowed-visitor@95.tgz -D

@rolldown/pluginutils

pnpm add https://pkg.pr.new/@rolldown/pluginutils@95 -D

npm i https://pkg.pr.new/@rolldown/pluginutils@95 -D

yarn add https://pkg.pr.new/@rolldown/pluginutils@95.tgz -D

@rolldown/plugin-styled-jsx

pnpm add https://pkg.pr.new/@rolldown/plugin-styled-jsx@95 -D

npm i https://pkg.pr.new/@rolldown/plugin-styled-jsx@95 -D

yarn add https://pkg.pr.new/@rolldown/plugin-styled-jsx@95.tgz -D

@rolldown/plugin-transform-imports

pnpm add https://pkg.pr.new/@rolldown/plugin-transform-imports@95 -D

npm i https://pkg.pr.new/@rolldown/plugin-transform-imports@95 -D

yarn add https://pkg.pr.new/@rolldown/plugin-transform-imports@95.tgz -D

commit: b9150ba

[Kegulf]

I have tested the canary and it resolves issue #94 perfectly! 😊
The code also looks sane to me (without knowing the codebase extensively).