Nested selector in pseudo-class aren't properly expanded

[joshkel]

Current behavior:

If a selector has more than one rule, at least one of which has the nested selector (&) inside a pseudo-class (like :where), then the nested selector's class name is prepended, and & is passed through as &\f (& followed by a form feed character), instead of being properly expanded.

For example:

.ListItemText {
  .Typography:where(& .ListItemText-primary), .Typography:where(& .ListItemText-secondary) {
    display: block
  }
}

is changed to something like

.ListItemText .Typography:where(&\f .ListItemText-primary),
.ListItemText .Typography:where(&\f .ListItemText-secondary) {
  display: block
}

To reproduce:

https://codesandbox.io/p/sandbox/emotion-issue-template-forked-vhftj5

(generated by Claude Code - please let me know if anything is incorrect or unclear)

Expected behavior:

Nested selectors are properly expanded:

.Typography:where(.ListItemText .ListItemText-primary),
.Typography:where(.ListItemText .ListItemText-secondary) {
  display: block
}

Environment information:

• react version: 18.0.0
• @emotion/react version: 11.9.0