Codemod jss-to-styled doesn't delete makeStyles call

[amakk]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Start with the file shown below
2. Run npx @mui/codemod v5.0.0/jss-to-styled dialog.js
3. Observe the output

Starting file:

import React from 'react'
import MuiDialog from '@mui/material/Dialog'
import makeStyles from '@mui/styles/makeStyles'

const useDialogStyles = makeStyles((theme) => ({
  dialogPaper: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  },
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <MuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </MuiDialog>
  )
}

Current behavior 😯

This file gets generated:

import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

const useDialogStyles = makeStyles((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}))

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  const classes = useDialogStyles({ maxWidth })

  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}

Expected behavior 🤔

The makeStyles call and useDialogStyles hook call shouldn't be there anymore. I'm expecting the file to be something like this:

import React from 'react'
import { styled } from '@mui/material/styles';
import MuiDialog from '@mui/material/Dialog'
const PREFIX = 'dialog';

const classes = {
  dialogPaper: `${PREFIX}-dialogPaper`
};

const StyledMuiDialog = styled(MuiDialog)((
  {
    theme
  }
) => ({
  [`& .${classes.dialogPaper}`]: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    maxWidth: (props) => props.maxWidth && `${props.maxWidth} !important`,
  }
}));

export function Dialog({
  open,
  onClose,
  children,
  maxWidth = '600px',
  ...props
}) {
  return (
    <StyledMuiDialog
      open={open}
      scroll={'body'}
      onClose={onClose}
      classes={{ paperScrollBody: classes.dialogPaper }}
      style={{ display: 'block' }}
      {...props}
    >
      {children}
    </StyledMuiDialog>
  );
}

Context 🔦

I'm trying to migrate from material UI v4 to v5. Since this codemod is not producing working code, I'm not able to carry out this migration easily.

Your environment 🌎

npx @mui/envinfo

``` I'm not able to run @mui/envinfo - it hangs and doesn't output anything or use any system resources. ```

[siriwatknp]

Do you want to submit a PR?

[amakk]

I've never worked with codemod code before, so I don't think I'd be able to