[material-nextjs][system] Backport CSS layers to v6 #46283
Conversation
- Add enableCssLayer option to createEmotionCache for pages router - Export createEmotionCache from v13-pagesRouter module - Update SSR emotion styles to handle CSS layer order rules properly - Prevent CSS layer order flickering during hydration Backport of mui#45596 to v6.x branch
- Document how to enable CSS layers with createEmotionCache - Update CSS theme variables heading level to h3 - Add examples for both _document.tsx and _app.tsx setup Part of backport of mui#45596 to v6.x branch
Netlify deploy preview
@mui/joy/GlobalStyles: parsed: +14.94% , gzip: +20.34% Bundle size reportDetails of bundle changes (Toolpad) |
…ple CSS layers (mui#46001) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
siriwatknp
changed the title
siriwatknp
added
package: system
siriwatknp
changed the title
|
Added @sai6855 as a reviewer, in case you see anything missing/wrong. |
There was a problem hiding this comment.
Overall looks good @siriwatknp!
May I ask you to point me to what's different between this implementation and v7's?
|
|
||
| head.prepend(styleElement); | ||
| } else { | ||
| head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove(); |
| if (!serialized.variants) { | ||
| return props.theme.modularCssLayers | ||
| ? shallowLayer(serialized.style, layerName) | ||
| : serialized.style; | ||
| } |
There was a problem hiding this comment.
What's the reason to move this inside the styleObjectProcessor function?
Docs
Next.js Pages
Next.js App Router
Vite
This PR cherry pick 2 commits:
[material-nextjs] Add option to enable CSS layers for pages router #45596: enable CSS layers for pages router
[system] Add
modularCssLayerstheme flag to split styles into multiple CSS layers #46001: modular CSS LayersI have followed (at least) the PR section of the contributing guide.