Add support for '@mui/styles/makeStyles' imports

Fixes #32935

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.js

@@ -214,7 +214,10 @@ export default function transformer(file, api, options) {
         );
         importsChanged = true;
       }
-    } else if (importSource === '@material-ui/styles/makeStyles') {
+    } else if (
+      importSource === '@material-ui/styles/makeStyles' ||
+      importSource === '@mui/styles/makeStyles'
+    ) {
       foundMakeStyles = true;
       path.replace(
         j.importDeclaration(
@@ -223,7 +226,10 @@ export default function transformer(file, api, options) {
         ),
       );
       importsChanged = true;
-    } else if (importSource === '@material-ui/styles/withStyles') {
+    } else if (
+      importSource === '@material-ui/styles/withStyles' ||
+      importSource === '@mui/styles/withStyles'
+    ) {
       foundWithStyles = true;
       path.replace(
         j.importDeclaration(

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test.js

@@ -92,6 +92,19 @@ describe('@mui/codemod', () => {
         const expected = read('./jss-to-tss-react.test/expected-from-mui-styles.js');
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
+      it('transforms @mui/styles/makeStyles to use tss-react', () => {
+        const actual = transform(
+          {
+            source: read('./jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js'),
+            path: require.resolve('./jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./jss-to-tss-react.test/expected-from-mui-styles-makeStyles.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
       it('transforms typescript makeStyles with nested selectors to use tss-react', () => {
         const actual = transform(
           {

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js

@@ -0,0 +1,33 @@
+import React from "react";
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+
+const useStyles2 = makeStyles({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "& $test2": {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+});
+
+function InnerComponent() {
+  const classes = useStyles2();
+  return <div className={classes.test2}>Inner Test</div>;
+}
+export default function ComponentUsingStyles(props) {
+  const classes = useStyles();
+  return <div className={classes.test}>Test<InnerComponent/></div>;
+}

packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-mui-styles-makeStyles.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+
+const useStyles2 = makeStyles()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+
+function InnerComponent() {
+  const { classes } = useStyles2();
+  return <div className={classes.test2}>Inner Test</div>;
+}
+export default function ComponentUsingStyles(props) {
+  const { classes } = useStyles();
+  return <div className={classes.test}>Test<InnerComponent/></div>;
+}