[PoC] Multi Theme Support in MaterialUI

[silviuaavram]

Summary

This PR explores static CSS distribution for multiple Material UI themes. Component structure and behavior remain in JavaScript, while tokens, shared component styles, and theme-specific appearance are delivered as CSS.

The PoC covers Button and Slider, two Material UI themes, and one consumer-owned theme.

Implemented

• Added shared foundational tokens for palette, spacing, typography, shape, elevation, and motion.
• Added theme-independent base CSS for Button and Slider.
• Added Polished and Brutalist theme CSS:
  • per-component granular files;
  • whole-theme barrel files.
• Removed the components’ CSS-in-JS style bodies for the experiment.
• Added a no-op styled-engine alias in the Vite sandbox to prevent remaining runtime style injection.
• Added cascade layers with the following order:
  • mui.tokens
  • mui.base
  • mui.theme
  • unlayered consumer overrides
• Added a consumer-owned Ocean theme built from Material UI tokens and base CSS.
• Exposed the CSS files through package wildcard exports and marked them as side effects.
• Updated the Material UI build to:
  • copy the authored CSS;
  • discover theme directories automatically;
  • generate flattened and minified index.bundle.css files with source maps.
• Added Vite scenarios for:
  • Polished through a whole-theme barrel;
  • Brutalist through granular component imports;
  • the consumer-owned Ocean theme.
• Added plain HTML scenarios for:
  • a flattened whole-theme bundle;
  • a self-contained granular component stylesheet.
• Extended the build verifier to check theme isolation, foundational CSS deduplication, generated bundles, and no-bundler CSS graphs.

Goals coverage

1. Background and goals

Goal	How it is achieved and how to check
Only the selected theme is downloaded	Each Vite entry imports one theme. Run the sandbox build, then inspect dist/{index,brutalist,consumer}.html and their referenced CSS; no page should contain another theme.
Tokens and base CSS are not duplicated	The granular Button and Slider files share token dependencies. Run the build; verify-build.mjs counts the token and base signatures across each page’s loaded CSS.
Override order is deterministic	Library styles use ordered cascade layers, while consumer overrides are unlayered. Open a Vite page and inspect the browser’s Styles panel to see consumer rules winning.
Granular and rollup consumption work	/ uses the Polished rollup and /brutalist.html uses granular imports. After building, open cdn.html and cdn-granular.html to check both no-bundler paths.
Adding a theme does not change component JS or exports	Package exports use a CSS wildcard and the build scans theme directories. Add a theme directory with an index.css, run the build, and confirm its index.bundle.css.

2. Next

Remaining scope

• Validate deduplication with another tier-1 bundler such as webpack.
• Generate the source distribution from component-colocated CSS rather than the current PoC layout.
• Expand coverage beyond Button and Slider.
• Runtime theme switching and generated scoped theme bundles remain outside the v1 scope.

[code-infra-dashboard]

Deploy preview

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

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(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.