Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CODEMOD] v6.0.0/sx-prop does not work on Typography color prop if the component is imported with path import #43983

Open
ryan-mcginty-alation opened this issue Oct 3, 2024 · 0 comments
Assignees
Labels
package: codemod Specific to @mui/codemod status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@ryan-mcginty-alation
Copy link

ryan-mcginty-alation commented Oct 3, 2024

Steps to reproduce

Link to live example: (required)

Steps:

  1. Run the codemod on this file with a path import:
import Typography from '@mui/material/Typography';

export function Test() {
  return (
    <Typography color='#fff' mb={5}>
      Test
    </Typography>
  );
}

Output:

import Typography from '@mui/material/Typography';

export function Test() {
  return (
    (<Typography color='#fff' sx={{
      mb: 5
    }}>Test
          </Typography>)
  );
}
  1. Run the codemod on this file with a named import:
import {Typography} from '@mui/material';

export function Test() {
  return (
    <Typography color='#fff' mb={5}>
      Test
    </Typography>
  );
}

Output:

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

export function Test() {
  return (
    (<Typography
      sx={{
        color: '#fff',
        mb: 5
      }}>Test
          </Typography>)
  );
}

Current behavior

Color prop is ignored but other system props are converted when a path import is used. When a named import is used it works correctly.

Expected behavior

Codemod should behave the same for both named and path imports

Context

No response

Your environment

npx @mui/envinfo
  System:
    OS: macOS 14.7
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.90
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base: ^5.0.0-beta.24 => 5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.1 
    @mui/icons-material: ^6.1.1 => 6.1.1 
    @mui/lab: ^6.0.0-beta.10 => 6.0.0-beta.10 
    @mui/material: ^6.1.1 => 6.1.1 
    @mui/private-theming:  6.1.1 
    @mui/styled-engine:  6.1.1 
    @mui/system: ^6.1.1 => 6.1.1 
    @mui/types: ^7.2.15 => 7.2.17 
    @mui/utils:  6.0.0-rc.0 
    @mui/x-data-grid: ^7.11.1 => 7.18.0 
    @mui/x-data-grid-generator: ^7.11.1 => 7.18.0 
    @mui/x-data-grid-premium:  7.18.0 
    @mui/x-data-grid-pro: ^7.11.1 => 7.18.0 
    @mui/x-date-pickers: ^7.11.1 => 7.18.0 
    @mui/x-date-pickers-pro: ^7.11.1 => 7.18.0 
    @mui/x-internals:  7.18.0 
    @mui/x-license: ^7.11.1 => 7.18.0 
    @mui/x-tree-view: ^7.11.1 => 7.18.0 
    @types/react: ^18.3.3 => 18.3.10 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.3.3 => 5.3.3 

Search keywords: v6.0.0/sx-prop codemod

@ryan-mcginty-alation ryan-mcginty-alation added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 3, 2024
@ryan-mcginty-alation ryan-mcginty-alation changed the title [CODEMOD] v6.0.0/sx-prop does not work on color prop if the component is imported with path import [CODEMOD] v6.0.0/sx-prop does not work on Typography color prop if the component is imported with path import Oct 3, 2024
@zannager zannager added the package: codemod Specific to @mui/codemod label Oct 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: codemod Specific to @mui/codemod status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

3 participants