Skip to content

[material-nextjs][system] Backport CSS layers to v6 #46283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Jun 24, 2025
Merged

[material-nextjs][system] Backport CSS layers to v6 #46283

merged 5 commits into from
Jun 24, 2025
+1,053 −53

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 6, 2025 •
edited
Loading

Docs

Next.js Pages

Next.js App Router

Vite

This PR cherry pick 2 commits:

siriwatknp added 2 commits June 6, 2025 16:12
@siriwatknp
[material-nextjs] Add option to enable CSS layers for pages router
670c7b6 
- 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
@siriwatknp
[docs] Add cascade layers documentation for Next.js pages router
c4230a3 
- 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
@mui-bot
Copy link

mui-bot commented Jun 6, 2025 •
edited
Loading

Netlify deploy preview

@mui/joy/GlobalStyles: parsed: +14.94% , gzip: +20.34%
@mui/joy/CssBaseline: parsed: +14.70% , gzip: +19.96%
GlobalStyles: parsed: +13.08% , gzip: +17.27%
CssBaseline: parsed: +12.53% , gzip: +16.53%
@material-ui/core: parsed: +0.33% , gzip: +0.35%
@material-ui/system: parsed: +2.11% , gzip: +1.77%
@mui/joy: parsed: +0.33% , gzip: +0.21%
TextField: parsed: +0.61% , gzip: +0.64%
OutlinedInput: parsed: +0.99% , gzip: +0.97%
NativeSelect: parsed: +0.98% , gzip: +0.94%
FilledInput: parsed: +0.95% , gzip: +0.99%
InputBase: parsed: +1.01% , gzip: +0.99%
ScopedCssBaseline: parsed: +1.11% , gzip: +1.08%
Radio: parsed: +0.77% , gzip: +0.62%
Breadcrumbs: parsed: +0.67% , gzip: +0.66%
Checkbox: parsed: +0.68% , gzip: +0.59%
SwipeableDrawer: parsed: +0.59% , gzip: +0.57%
CardHeader: parsed: +0.79% , gzip: +0.85%
ListItemText: parsed: +0.79% , gzip: +0.85%
Grid2: parsed: +0.81% , gzip: +0.83%
and 181 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f9c0b65

@siriwatknp @claude
[system] Add modularCssLayers theme flag to split styles into multi…
f15d52d 
…ple CSS layers (mui#46001)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@siriwatknp siriwatknp changed the title [material-nextjs] Back port CSS layers for pages router [material-nextjs][system] Back port CSS layers to v6 Jun 12, 2025
@siriwatknp siriwatknp added package: system Specific to @mui/system nextjs cherry-pick The PR was cherry-picked from the newer alpha/beta/stable branch labels Jun 12, 2025
@siriwatknp siriwatknp changed the title [material-nextjs][system] Back port CSS layers to v6 [material-nextjs][system] Backport CSS layers to v6 Jun 12, 2025
@siriwatknp siriwatknp marked this pull request as ready for review June 12, 2025 09:48
@siriwatknp siriwatknp added v6.x new feature New feature or request labels Jun 12, 2025
@zannager zannager requested a review from mnajdova June 13, 2025 03:17
@siriwatknp siriwatknp requested review from DiegoAndai and sai6855 June 16, 2025 08:52
@siriwatknp
Copy link
Member Author

Added @sai6855 as a reviewer, in case you see anything missing/wrong.

DiegoAndai
DiegoAndai reviewed Jun 17, 2025
View reviewed changes
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good @siriwatknp!

May I ask you to point me to what's different between this implementation and v7's?

@siriwatknp
Copy link
Member Author

Overall looks good @siriwatknp!

May I ask you to point me to what's different between this implementation and v7's?

There is no difference from implementation and API perspective. However, the code might not be exactly the same as v7 but that's because v6 - v7 has other changes in between (from other PRs).

DiegoAndai
DiegoAndai approved these changes Jun 24, 2025
View reviewed changes
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM @siriwatknp 🎉

@siriwatknp siriwatknp merged commit 6259f30 into mui:v6.x Jun 24, 2025
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DiegoAndai DiegoAndai DiegoAndai approved these changes

@mnajdova mnajdova Awaiting requested review from mnajdova

@sai6855 sai6855 Awaiting requested review from sai6855

Assignees
No one assigned
Labels
cherry-pick The PR was cherry-picked from the newer alpha/beta/stable branch new feature New feature or request nextjs package: system Specific to @mui/system v6.x
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@siriwatknp @mui-bot @DiegoAndai