[material-ui] Fix ThemeOptions and createTheme* cyclic dependency

[siriwatknp]

closes #46908

The root cause the the options type of the createTheme is mixing between createThemeNoVars and createThemeWithVars options causing complex type inferences for webpack as demonstrated by https://github.com/nvrtmd/mui-v7-memory-issue-repro

Solution

• remove cyclic dependency between both internal createTheme files by introduce a new file to store shared types.
• simplify the ThemeOptions by relying on the createThemeWithVars options (already extending the createThemeNoVars).

The fix also enhancing the ThemeOptions to be a complete version for users who import the type to build up theme options outside of the createTheme.

Test

1. Clone
2. Replace package.json with

"@mui/material": "https://pkg.pr.new/mui/material-ui/@mui/material@3e539c5",
"@mui/system": "https://pkg.pr.new/mui/material-ui/@mui/system@3e539c5",
"@mui/utils": "https://pkg.pr.new/mui/material-ui/@mui/utils@3e539c5",

3. Run npm run build:create-theme
4. The heapUsed is ~200MB

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

Bundle size report

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

Generated by 🚫 dangerJS against 3e539c5

[siriwatknp]

@sai6855 Can you check this PR on your side.

[sai6855]

I can see both memory and compile time got reduced

Before

After

[nvrtmd]

I followed your comment, modified my design system's package.json, and can confirm that the heapUsed is now back to a normal level like below. I really appreciate you resolving this significant issue.

[mem] beforeRun rss=92.2MB heapUsed=28.5MB ext=1.7MB
[mem] compile rss=92.5MB heapUsed=28.6MB ext=1.7MB
[mem] afterCompile rss=528.7MB heapUsed=458.5MB ext=2.9MB
[mem] emit rss=528.8MB heapUsed=458.5MB ext=2.9MB
[mem] done rss=535.3MB heapUsed=454.3MB ext=4.2MB

As I was studying the problem, I wanted to ensure I fully understood the root cause. Could you please confirm if my understanding of the original cyclic dependency is correct?

• The CssVarsThemeOptions type in createThemeWithVars.d.ts depended on ThemeOptions from createThemeNoVars.d.ts.
• Conversely, the ThemeOptions type in createThemeNoVars.d.ts depended on ColorSystemOptions from createThemeWithVars.d.ts.

This effectively created a circular reference where each file required a type from the other. Is this an accurate summary?

Thank you again for your time and the excellent fix.

[connorshea]

This is great, thank you for the investigation and fix!

[siriwatknp]

This effectively created a circular reference where each file required a type from the other. Is this an accurate summary?

I am 99% sure that's the root cause. Thank you so much for the reproduction repo, it helps a ton.

[chybisov]

@siriwatknp hey, looks like these changes broke augmentation for custom theme option overrides. This is now produces errors:

declare module '@mui/material/styles' {
  interface Shape {
    borderRadius: number
    borderRadiusSecondary: number // custom prop
  }
  interface Theme {
    shape: Shape
  }
  interface ThemeOptions {
    shape?: Partial<Shape>
  }
}

[plevavas]

@chybisov, did you find a solution?

[chybisov]

@plevavas nope, still on the previous version before this change.

@siriwatknp could you please advise here? 🙏 Thank you!

[siriwatknp]

@plevavas nope, still on the previous version before this change.

@siriwatknp could you please advise here? 🙏 Thank you!

I'm looking into it

[siriwatknp]

@chybisov Can you try this build

// package.json
"@mui/material": "https://pkg.pr.new/mui/material-ui/@mui/material@63cf433"