Steps to reproduce
Steps:
- Open this link to live example: https://stackblitz.com/edit/dlmtqo3v?file=src%2FDemo.tsx
- Open dev tools
- Inspect the second
<style data-emotion="css"> tag.
Current behavior
The CSS contains the following:
.css-1suf81v-MuiListItemText-root .MuiTypography-root:where(& .MuiListItemText-primary),
.css-1suf81v-MuiListItemText-root .MuiTypography-root:where(& .MuiListItemText-secondary) {
display:block;
}
& here is invalid - it's interpreted as a CSS nested selector, scoped to document, not an Emotion / Stylis nested selector, as intended.
Expected behavior
Correct nesting. Compare with 7.3.8:
.MuiTypography-root:where(.css-cfq8qh-MuiListItemText-root .MuiListItemText-primary) {
display:block;
}
.MuiTypography-root:where(.css-cfq8qh-MuiListItemText-root .MuiListItemText-secondary) {
display:block;
}
Context
I discovered this while comparing Jest snapshots. It appears to be the result of a bug in @emotion/cache (see emotion-js/emotion#3366) and was triggered by the refactoring in #47838.
Your environment
npx @mui/envinfo
System:
OS: macOS 15.7.4
Binaries:
Node: 24.14.0 - /Users/josh/.nvm/versions/node/v24.14.0/bin/node
npm: 11.9.0 - /Users/josh/.nvm/versions/node/v24.14.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 145.0.7632.160
Edge: 145.0.3800.82
Firefox: 148.0
Safari: 26.3
npmPackages:
@base-ui/utils: 0.2.3
@emotion/react: 11.14.0
@emotion/styled: 11.14.1
@mui/core-downloads-tracker: 7.3.9
@mui/icons-material: 7.3.9
@mui/lab: 7.0.1-beta.23
@mui/material: 7.3.9
@mui/private-theming: 7.3.9
@mui/styled-engine: 7.3.9
@mui/system: 7.3.9
@mui/types: 7.4.12
@mui/utils: 7.3.9
@mui/x-date-pickers: 8.27.2
@mui/x-internals: 8.26.0
@mui/x-tree-view: 8.27.2
@types/react: ^18.3.27 => 18.3.27
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.9.3 => 5.9.3
Search keywords: nested css
Steps to reproduce
Steps:
<style data-emotion="css">tag.Current behavior
The CSS contains the following:
&here is invalid - it's interpreted as a CSS nested selector, scoped todocument, not an Emotion / Stylis nested selector, as intended.Expected behavior
Correct nesting. Compare with 7.3.8:
Context
I discovered this while comparing Jest snapshots. It appears to be the result of a bug in @emotion/cache (see emotion-js/emotion#3366) and was triggered by the refactoring in #47838.
Your environment
npx @mui/envinfoSearch keywords: nested css