[codemod] v5 top-level-imports changing color imports

[CalebJamesStevens]

Steps to reproduce

Steps:

1. Import grey from @mui/material/colors
   import { grey } from @mui/material/colors;
2. npx @mui/codemod@latest v5.0.0/top-level-imports
3. The import will change to import { grey } from '@mui/material';

Current behavior

Steps:

1. Import grey from @mui/material/colors
   import { grey } from @mui/material/colors;
2. npx @mui/codemod@latest v5.0.0/top-level-imports
3. The import will change to import { grey } from '@mui/material';

Expected behavior

npx @mui/codemod@latest v5.0.0/top-level-imports <path> should not change imports to those that are not valid

Context

No response

Your environment

npx @mui/envinfo

    System:
    OS: macOS 15.1.1
  Binaries:
    Node: 21.2.0 - ~/node_modules/.bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 132.0.6834.83
    Edge: 131.0.2903.147
    Safari: 18.1.1
  npmPackages:
    @emotion/react: ^11.10.4 => 11.14.0 
    @emotion/styled: ^11.10.4 => 11.14.0 
    @mui/base:  5.0.0-beta.66 
    @mui/core-downloads-tracker:  5.16.11 
    @mui/icons-material: ^5.8.4 => 5.16.11 
    @mui/lab: ^5.0.0-alpha.95 => 5.0.0-alpha.174 
    @mui/material: ^5.10.1 => 5.16.11 
    @mui/material-nextjs: ^5.15.6 => 5.16.8 
    @mui/private-theming:  5.16.8 
    @mui/styled-engine:  5.16.8 
    @mui/styles: ^5.9.3 => 5.16.11 
    @mui/system:  5.16.8 
    @mui/types:  7.2.19 
    @mui/utils:  5.16.8 
    @mui/x-data-grid:  6.20.4 
    @mui/x-data-grid-pro: ^6.0.4 => 6.20.4 
    @mui/x-date-pickers:  6.20.2 
    @mui/x-date-pickers-pro: ^6.0.0 => 6.20.2 
    @mui/x-license-pro:  6.10.2 
    @types/react: ^18.0.28 => 18.3.16 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^4.9.5 => 4.9.5 

Search keywords: codemod, top-level-import, color imports

[siriwatknp]

Thank you for reporting the issue.

[DiegoAndai]

I added the ready to take label in case anyone wants to work on this before the team gets to it. Please reach out if you're interested, I'll gladly guide you.

[ellensigurdar]

@DiegoAndai I'm interested in this issue, would gladly accept your guidance.

[DiegoAndai]

Hey @ellensigurdar! Sure 😊, go ahead.

You'll want to review the codemod, which is here: https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/top-level-imports.js

And investigate the root cause of this issue. After you have an idea, you can comment here and we can discuss a solution 😊

Let me know if you need any help. Thanks in advance.

[crabsim]

@DiegoAndai: I was reviewing this issue and I think it might be related to the boolean check:

!whitelist.has(specifier.imported.name) == null
on line 73 in this file: top-level-imports.js.

It seems that this expression always evaluates to false because it's effectively checking !(boolean) == null. I believe the correct condition should simply be:

!whitelist.has(specifier.imported.name)
Would you agree with this change?

[DiegoAndai]

@crabsim yes, this seems like it might be the issue. Sorry for the late reply. If you're still interested in this issue, I welcome you to open a PR. We have to add a test case as well.

[AidanLDev]

I'd be happy to work on this :)