Skip to content

CSS regression in 7.3.9 #47926

@joshkel

Description

@joshkel

Steps to reproduce

Steps:

  1. Open this link to live example: https://stackblitz.com/edit/dlmtqo3v?file=src%2FDemo.tsx
  2. Open dev tools
  3. 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

Metadata

Metadata

Assignees

Labels

scope: typographyChanges related to typography.type: regressionA bug, but worse, it used to behave as expected.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions