[codemod] Fix v5.0.0/top-level-imports codemod changing color imports

[AidanLDev]

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

Summary

Fixes #45051 - Fixed logical error in top-level-imports codemod that was incorrectly transforming color imports.

Description

The v5.0.0/top-level-imports codemod was incorrectly transforming imports from @mui/material/colors (e.g., import { grey } from '@mui/material/colors') to @mui/material (e.g., import { grey } from '@mui/material'). This transformation is invalid because color exports like grey, blue, etc. are not available from the main @mui/material package.

Root Cause

The issue was in the whitelist check condition:

// Before (buggy)
if (!whitelist.has(specifier.imported.name) == null && ...)

// After (fixed) 
if (!whitelist.has(specifier.imported.name) && ...)

[DiegoAndai]

Thanks for submitting this @AidanLDev! The fix seems correct and the tests as well.

May I ask you to move the expected input and output test content to separate files? Similar to how it's done for other tests. You can create separate files for this test in particular, or add it to the existing files.

[AidanLDev]

Good point, I will update the tests to follow the same style as the other ones :)

[DiegoAndai]

Why is createTheme moved? Is createTheme not included on the whitelist?

[AidanLDev]

Good question, that's right it's not currently in the whitelist so to get the tests passing I moved it outside of the @mui/material import.

[DiegoAndai]

@siriwatknp do you know if this is correct?

[ZeeshanTamboli]

This is correct. The reason it should be moved outside of the direct @mui/material root import is because in the actual.js file it is imported from the styles folder:

import { createTheme } from '@mui/material/styles';

And ThemeProvider is imported directly:

import { ThemeProvider } from '@mui/material';

So, it should be the same in the expected.js file and should not transform the imports because they are not in the whitelist.

To make it consistent with createTheme, I moved ThemeProvider to be imported from styles folder in actual.js file.

---

Before this bugfix, it was also transforming imports from @mui/material/styles which was incorrect. If it is imported from @mui/material/styles, it should keep it as is and if it is imported from @mui/material it should keep it as is for createTheme and ThemeProvider APIs.

[mui-bot]

Netlify deploy preview

https://deploy-preview-46405--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 342ae25

[ZeeshanTamboli]

@AidanLDev Looks good! Thanks for the fix.