Skip to content
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.

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

[system] Make createBreakpoints independent for stringify theme #43048

Merged
merged 3 commits into from
Jul 25, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 24, 2024

Issue

Emotion is still bundled even though it is not used. The image below is a Next.js app with bundle analyzer:

image image

Thanks to @brijeshb42, he found out that the root cause comes from the import in the stringifyTheme:

import { createBreakpoints } from '@mui/system';

Solution

Moved createBreakpoints into its own folder (in system) and reexport it as unstable_createBreakpoints because we just need it for internal integration.

Result:

image image

Bye Emotion.


@siriwatknp siriwatknp added package: system Specific to @mui/system package: material-ui Specific to @mui/material labels Jul 24, 2024
@mui-bot
Copy link

mui-bot commented Jul 24, 2024

Netlify deploy preview

https://deploy-preview-43048--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5da94e1

@siriwatknp siriwatknp changed the title [POC] Make createBreakpoints independent for stringify theme [system] Make createBreakpoints independent for stringify theme Jul 24, 2024
@siriwatknp siriwatknp added nextjs package: pigment-css Specific to @pigment-css/* labels Jul 24, 2024
@siriwatknp siriwatknp marked this pull request as ready for review July 24, 2024 09:59
@@ -50,7 +50,7 @@ export { default as createStyled } from './createStyled';
export * from './createStyled';
export { default as styled } from './styled';
export { default as createTheme } from './createTheme';
export { default as createBreakpoints } from './createTheme/createBreakpoints';
export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we want this in the top level export? I'd say let's keep it at path level.

Copy link
Member Author

Choose a reason for hiding this comment

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

I think we need to keep it like this otherwise it's a breaking change which is out of scope of this PR.

Copy link
Contributor

@brijeshb42 brijeshb42 left a comment

Choose a reason for hiding this comment

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

Left one comment. Rest looks good.

@siriwatknp siriwatknp merged commit fb71e80 into mui:next Jul 25, 2024
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
nextjs package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/* package: system Specific to @mui/system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants