Skip to content

[material-ui] Keep CSS theme variables out of the default theme#48607

Draft
Janpot wants to merge 1 commit into
mui:masterfrom
Janpot:janpot/default-theme-no-css-vars
Draft

[material-ui] Keep CSS theme variables out of the default theme#48607
Janpot wants to merge 1 commit into
mui:masterfrom
Janpot:janpot/default-theme-no-css-vars

Conversation

@Janpot
Copy link
Copy Markdown
Member

@Janpot Janpot commented Jun 1, 2026

defaultTheme is built through the public createTheme(), which statically imports both createThemeNoVars and createThemeWithVars and selects one at runtime based on the cssVariables option. Because that dispatch is a runtime branch, bundlers can't tree-shake the unused CSS-variables path, so the whole createThemeWithVars machinery (and its helpers: createColorScheme, createGetSelector, excludeVariablesFromRoot, getOverlayAlpha, prepareTypographyVars) ends up in every component bundle that only needs the default fallback theme.

createTheme() with no arguments is definitionally identical to createThemeNoVars() — the default cssVariables: false path returns createThemeNoVars(options), and createThemeNoVars does not depend on createThemeWithVars. Importing it directly produces a byte-identical default theme while letting the dead CSS-vars code be dropped.

The public createTheme export is untouched, so consumers who opt into CSS theme variables are unaffected.

Bundle size impact

Measured with test/bundle-size (gzip):

bundle before after change
@mui/material/Button 25.29 kB 20.55 kB -18.8%
@mui/material/Typography 18.76 kB 14.07 kB -25.0%
@mui/material/IconButton 24.27 kB 19.54 kB -19.5%
@mui/material/Checkbox 25.53 kB 20.76 kB -18.7%
@mui/material/Slider 25.33 kB 20.57 kB -18.8%
@mui/material/Switch 25.20 kB 20.45 kB -18.8%
@mui/material (barrel) 148.92 kB 148.92 kB unchanged
@mui/material/styles#createTheme 14.57 kB 14.57 kB unchanged

~4.7 kB gzip (~18 kB parsed) off essentially every component, while the @mui/material barrel and the public createTheme entry are unchanged.

@Janpot Janpot marked this pull request as draft June 1, 2026 17:43
@Janpot Janpot added the scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd). label Jun 1, 2026
@code-infra-dashboard
Copy link
Copy Markdown

Deploy preview

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

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) ▼-1B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant