@mui/codemod 5.0.5 → 5.2.1

package/README.md

@@ -26,6 +26,8 @@ Options:
   --help     Show help                                           [boolean]
   --dry      dry run (no changes are made to files)
                                                 [boolean] [default: false]
+  --parser   which parser for jscodeshift to use.
+                                                [string] [default: 'tsx']
   --print    print transformed files to stdout, useful for development
                                                 [boolean] [default: false]
   --jscodeshift                                  [string] [default: false]
@@ -34,6 +36,7 @@ Examples:
   npx @mui/codemod v4.0.0/theme-spacing-api src
   npx @mui/codemod v5.0.0/component-rename-prop src --
   --component=Grid --from=prop --to=newProp
+  npx @mui/codemod v5.0.0/preset-safe src --parser=flow
 ```
 
 #### jscodeshift options
@@ -756,10 +759,10 @@ You can find more details about this breaking change in [the migration guide](ht
 #### `skeleton-variant`
 
 ```diff
--<Skeleton vairiant="circle" />
--<Skeleton vairiant="rect" />
-+<Skeleton vairiant="circular" />
-+<Skeleton vairiant="rectangular" />
+-<Skeleton variant="circle" />
+-<Skeleton variant="rect" />
++<Skeleton variant="circular" />
++<Skeleton variant="rectangular" />
 ```
 
 ```sh
@@ -1119,7 +1122,7 @@ Replace every occurrence of `material-ui` related package with the new package n
 +"@mui/material": "next",
 +"@mui/icons-material": "next",
 +"@mui/lab": "next",
-+"@mui/core": "next",
++"@mui/base": "next",
 +"@mui/styled-engine-sc": "next",
 ```
 

package/codemod.js

@@ -42,10 +42,11 @@ async function runTransform(transform, files, flags, codemodFlags) {
     '--extensions',
     'js,ts,jsx,tsx',
     '--parser',
-    'tsx',
+    flags.parser || 'tsx',
     '--ignore-pattern',
     '**/node_modules/**',
   ];
+
   if (flags.dry) {
     args.push('--dry');
   }
@@ -98,6 +99,11 @@ yargs
           default: false,
           type: 'boolean',
         })
+        .option('parser', {
+          description: 'which parser for jscodeshift to use',
+          default: 'tsx',
+          type: 'string',
+        })
         .option('print', {
           description: 'print transformed files to stdout, useful for development',
           default: false,

package/node/util/propsToObject.js

@@ -9,6 +9,7 @@ function propsToObject({
   j,
   root,
   componentName,
+  aliasName,
   propName,
   props
 }) {
@@ -20,30 +21,41 @@ function propsToObject({
     return value;
   }
 
-  return root.findJSXElements(componentName).forEach(path => {
-    let propValue = [];
-    const attributes = path.node.openingElement.attributes;
-    attributes.forEach((node, index) => {
-      // Only transform whitelisted props
-      if (node.type === 'JSXAttribute' && props.includes(node.name.name)) {
-        propValue = buildObject(node, propValue);
-        delete attributes[index];
+  const result = aliasName ? root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        property: {
+          name: componentName
+        }
       }
-    });
+    }
+  }) : root.findJSXElements(componentName);
+  return result.forEach(path => {
+    if (!aliasName || aliasName && path.node.openingElement.name.object.name === aliasName) {
+      let propValue = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        // Only transform whitelisted props
+        if (node.type === 'JSXAttribute' && props.includes(node.name.name)) {
+          propValue = buildObject(node, propValue);
+          delete attributes[index];
+        }
+      });
 
-    if (propValue.length > 0) {
-      const propNameAttr = attributes.find(attr => {
-        var _attr$name;
+      if (propValue.length > 0) {
+        const propNameAttr = attributes.find(attr => {
+          var _attr$name;
 
-        return (attr == null ? void 0 : (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === propName;
-      });
+          return (attr == null ? void 0 : (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === propName;
+        });
 
-      if (propNameAttr) {
-        var _propNameAttr$value$e;
+        if (propNameAttr) {
+          var _propNameAttr$value$e;
 
-        (((_propNameAttr$value$e = propNameAttr.value.expression) == null ? void 0 : _propNameAttr$value$e.properties) || []).push(...j.objectExpression(propValue).properties);
-      } else {
-        attributes.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.objectExpression(propValue))));
+          (((_propNameAttr$value$e = propNameAttr.value.expression) == null ? void 0 : _propNameAttr$value$e.properties) || []).push(...j.objectExpression(propValue).properties);
+        } else {
+          attributes.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.objectExpression(propValue))));
+        }
       }
     }
   });

package/node/v5.0.0/box-sx-prop.js

@@ -21,9 +21,20 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions || {
     quote: 'single'
   };
+  let aliasName;
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (path.node.source.value.match(/^(@mui\/material|@material-ui\/core)$/)) {
+      var _path$node$specifiers;
+
+      if (((_path$node$specifiers = path.node.specifiers[0]) == null ? void 0 : _path$node$specifiers.type) === 'ImportNamespaceSpecifier') {
+        aliasName = path.node.specifiers[0].local.name;
+      }
+    }
+  });
   return (0, _propsToObject.default)({
     j,
     root,
+    aliasName,
     componentName: 'Box',
     propName: 'sx',
     props

package/node/v5.0.0/box-sx-prop.test/alias-actual.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var UI = _interopRequireWildcard(require("@material-ui/core"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _UI$Box;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Foo = () => _UI$Box || (_UI$Box = /*#__PURE__*/(0, _jsxRuntime.jsx)(UI.Box, {
+  px: 2
+}));

package/node/v5.0.0/box-sx-prop.test/alias-expected.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var UI = _interopRequireWildcard(require("@material-ui/core"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Foo = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(UI.Box, {
+  sx: {
+    px: 2
+  }
+});

package/node/v5.0.0/jss-to-styled.js

@@ -164,21 +164,30 @@ function transformer(file, api, options) {
 
     return declaration;
   }
+
+  const classesCount = {};
   /**
    *
    * @param {import('jscodeshift').ObjectExpression} objExpression
+   * @param {import('jscodeshift').ObjectExpression} prevObj
    */
 
-
-  function createClasses(objExpression) {
-    const classes = j.objectExpression([]);
+  function createClasses(objExpression, prevObj) {
+    const classes = prevObj || j.objectExpression([]);
     objExpression.properties.forEach(prop => {
-      classes.properties.push(j.objectProperty(prop.key, j.templateLiteral([j.templateElement({
+      if (!classesCount[prop.key.name]) {
+        classesCount[prop.key.name] = 1;
+      } else {
+        classesCount[prop.key.name] += 1;
+      }
+
+      const resolvedKey = classesCount[prop.key.name] === 1 ? prop.key.name : `${prop.key.name}${classesCount[prop.key.name]}`;
+      classes.properties.push(j.objectProperty(j.identifier(resolvedKey), j.templateLiteral([j.templateElement({
         raw: '',
         cooked: ''
       }, false), j.templateElement({
-        raw: `-${prop.key.name}`,
-        cooked: `-${prop.key.name}`
+        raw: `-${resolvedKey}`,
+        cooked: `-${resolvedKey}`
       }, true)], [j.identifier('PREFIX')])));
     });
     return classes;
@@ -225,46 +234,66 @@ function transformer(file, api, options) {
     return null;
   }
   /**
-   *
-   * @param {import('jscodeshift').ArrowFunctionExpression | import('jscodeshift').FunctionDeclaration} functionExpression
+   * @param {import('jscodeshift').ObjectExpression | import('jscodeshift').ArrowFunctionExpression | import('jscodeshift').FunctionDeclaration} expression
    */
 
 
-  function convertToStyledArg(functionExpression, rootKeys = []) {
+  function getObjectExpression(expression) {
     let objectExpression;
 
-    if (functionExpression.type === 'ObjectExpression') {
-      objectExpression = functionExpression;
+    if (expression.type === 'ObjectExpression') {
+      objectExpression = expression;
     }
 
-    if (functionExpression.type === 'ArrowFunctionExpression') {
-      if (functionExpression.body.type === 'BlockStatement') {
-        const returnStatement = functionExpression.body.body.find(b => b.type === 'ReturnStatement');
+    if (expression.type === 'ArrowFunctionExpression') {
+      if (expression.body.type === 'BlockStatement') {
+        const returnStatement = expression.body.body.find(b => b.type === 'ReturnStatement');
         objectExpression = returnStatement.argument;
       }
 
-      if (functionExpression.body.type === 'ObjectExpression') {
-        functionExpression.body.extra.parenthesized = false;
-        objectExpression = functionExpression.body;
+      if (expression.body.type === 'ObjectExpression') {
+        expression.body.extra.parenthesized = false;
+        objectExpression = expression.body;
       }
     }
 
-    if (functionExpression.type === 'FunctionDeclaration') {
-      functionExpression.type = 'FunctionExpression';
-      const returnStatement = functionExpression.body.body.find(b => b.type === 'ReturnStatement');
+    if (expression.type === 'FunctionDeclaration') {
+      expression.type = 'FunctionExpression';
+      const returnStatement = expression.body.body.find(b => b.type === 'ReturnStatement');
       objectExpression = returnStatement.argument;
     }
 
+    return objectExpression;
+  }
+
+  const stylesCount = {};
+  /**
+   *
+   * @param {import('jscodeshift').ObjectExpression | import('jscodeshift').ArrowFunctionExpression | import('jscodeshift').FunctionDeclaration} functionExpression
+   * @param {string[]} rootKeys
+   * @param {import('jscodeshift').ObjectExpression | import('jscodeshift').ArrowFunctionExpression | import('jscodeshift').FunctionDeclaration} prevStyleArg
+   */
+
+  function convertToStyledArg(functionExpression, rootKeys = [], prevStyleArg) {
+    const objectExpression = getObjectExpression(functionExpression);
+
     if (objectExpression) {
       objectExpression.properties.forEach(prop => {
-        const selector = rootKeys.includes(prop.key.name) ? '&.' : '& .';
+        if (!stylesCount[prop.key.name]) {
+          stylesCount[prop.key.name] = 1;
+        } else {
+          stylesCount[prop.key.name] += 1;
+        }
+
+        const resolvedKey = stylesCount[prop.key.name] === 1 ? prop.key.name : `${prop.key.name}${stylesCount[prop.key.name]}`;
+        const selector = rootKeys.includes(resolvedKey) ? '&.' : '& .';
         prop.key = j.templateLiteral([j.templateElement({
           raw: selector,
           cooked: selector
         }, false), j.templateElement({
           raw: '',
           cooked: ''
-        }, true)], [j.identifier(`classes.${prop.key.name}`)]);
+        }, true)], [j.identifier(`classes.${resolvedKey}`)]);
         prop.computed = true;
         return prop;
       });
@@ -282,6 +311,22 @@ function transformer(file, api, options) {
       });
     }
 
+    if (prevStyleArg) {
+      const prevObjectExpression = getObjectExpression(prevStyleArg);
+
+      if (objectExpression) {
+        // merge object
+        prevObjectExpression.properties = [...prevObjectExpression.properties, ...objectExpression.properties];
+      }
+
+      if (functionExpression.params && prevStyleArg.type === 'ObjectExpression') {
+        // turn prevStyleArg to ArrowFunction
+        prevStyleArg = j.arrowFunctionExpression(functionExpression.params, prevStyleArg);
+      }
+
+      return prevStyleArg;
+    }
+
     return functionExpression;
   }
 
@@ -326,6 +371,8 @@ function transformer(file, api, options) {
   const prefix = getPrefix(withStylesCall || makeStylesCall);
   const rootClassKeys = getRootClassKeys();
   const result = {};
+  const componentClassesCount = {};
+  const withStylesComponents = [];
 
   if (withStylesCall) {
     let stylesFnName;
@@ -333,7 +380,7 @@ function transformer(file, api, options) {
       callee: {
         name: 'withStyles'
       }
-    }).at(0).forEach(path => {
+    }).forEach(path => {
       const arg = path.node.arguments[0];
 
       if (arg.type === 'Identifier') {
@@ -343,15 +390,33 @@ function transformer(file, api, options) {
       const objectExpression = getReturnStatement(arg);
 
       if (objectExpression) {
-        result.classes = createClasses(objectExpression, prefix);
-        result.styledArg = convertToStyledArg(arg, rootClassKeys);
+        // do this first, because objectExpression will be mutated in `createClasses` below.
+        if (path.parent.parent && path.parent.parent.node.id) {
+          // save withStylesComponent name, to add classes on JSX
+          withStylesComponents.push({
+            variableName: path.parent.parent.node.id.name,
+            classes: j.objectExpression(objectExpression.properties.map(prop => {
+              if (!componentClassesCount[prop.key.name]) {
+                componentClassesCount[prop.key.name] = 1;
+              } else {
+                componentClassesCount[prop.key.name] += 1;
+              }
+
+              const resolvedKey = componentClassesCount[prop.key.name] === 1 ? prop.key.name : `${prop.key.name}${componentClassesCount[prop.key.name]}`;
+              return j.property('init', j.identifier(prop.key.name), j.memberExpression(j.identifier('classes'), j.identifier(resolvedKey)));
+            }))
+          });
+        }
+
+        result.classes = createClasses(objectExpression, result.classes);
+        result.styledArg = convertToStyledArg(arg, rootClassKeys, result.styledArg);
       }
     });
     root.find(j.VariableDeclarator, {
       id: {
         name: stylesFnName
       }
-    }).at(0).forEach(path => {
+    }).forEach(path => {
       let fnArg = path.node.init;
       const objectExpression = getReturnStatement(fnArg);
 
@@ -370,7 +435,7 @@ function transformer(file, api, options) {
       }
 
       if (objectExpression) {
-        result.classes = createClasses(objectExpression, prefix);
+        result.classes = createClasses(objectExpression, result.classes);
         result.styledArg = convertToStyledArg(fnArg, rootClassKeys);
       }
     }).remove();
@@ -378,9 +443,9 @@ function transformer(file, api, options) {
       id: {
         name: stylesFnName
       }
-    }).at(0).forEach(path => {
+    }).forEach(path => {
       const returnStatement = path.node.body.body.find(b => b.type === 'ReturnStatement');
-      result.classes = createClasses(returnStatement.argument, prefix);
+      result.classes = createClasses(returnStatement.argument, result.classes);
       result.styledArg = convertToStyledArg(path.node, rootClassKeys);
     }).remove();
   }
@@ -415,7 +480,7 @@ function transformer(file, api, options) {
       }
 
       if (objectExpression) {
-        result.classes = createClasses(objectExpression, prefix);
+        result.classes = createClasses(objectExpression, result.classes);
         result.styledArg = convertToStyledArg(arg, rootClassKeys);
       }
     });
@@ -427,7 +492,7 @@ function transformer(file, api, options) {
       const objectExpression = getReturnStatement(path.node.init);
 
       if (objectExpression) {
-        result.classes = createClasses(objectExpression, prefix);
+        result.classes = createClasses(objectExpression, result.classes);
         result.styledArg = convertToStyledArg(path.node.init, rootClassKeys);
       }
     }).remove();
@@ -437,7 +502,7 @@ function transformer(file, api, options) {
       }
     }).at(0).forEach(path => {
       const returnStatement = path.node.body.body.find(b => b.type === 'ReturnStatement');
-      result.classes = createClasses(returnStatement.argument, prefix);
+      result.classes = createClasses(returnStatement.argument, result.classes);
       result.styledArg = convertToStyledArg(path.node, rootClassKeys);
     }).remove();
     root.find(j.VariableDeclaration).filter(path => path.node.declarations.some(d => d.id.name === 'useStyles')).remove();
@@ -500,10 +565,28 @@ function transformer(file, api, options) {
     root.findJSXElements(rootJsxName).at(0).forEach(transformJsxRootToStyledComponent);
   }
   /**
-   * import styled if not exist
+   * Attach classes to components created by withStyles
+   * ex. const Button1 = withStyles(...)(Button)
    */
 
 
+  withStylesComponents.forEach(data => {
+    root.find(j.JSXOpeningElement, {
+      name: {
+        name: data.variableName
+      }
+    }).forEach(path => {
+      if (!path.node.attributes) {
+        path.node.attributes = [];
+      }
+
+      path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('classes'), j.jsxExpressionContainer(data.classes)));
+    });
+  });
+  /**
+   * import styled if not exist
+   */
+
   const imports = root.find(j.ImportDeclaration).filter(({
     node
   }) => node.source.value.match(/^@material-ui\/core\/styles$/)).forEach(({
@@ -524,8 +607,21 @@ function transformer(file, api, options) {
    */
 
 
-  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@material-ui\/styles\/?(withStyles|makeStyles|createStyles)?$/)).forEach(path => {
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^(@material-ui|@mui)\/styles\/?(withStyles|makeStyles|createStyles)?$/)).forEach(path => {
     path.node.specifiers = path.node.specifiers.filter(s => s.local.name !== 'withStyles' && s.local.name !== 'makeStyles' && s.local.name !== 'createStyles');
   }).filter(path => !path.node.specifiers.length).remove();
+  /**
+   * remove withStyles calls that create new component
+   */
+
+  root.find(j.CallExpression, {
+    callee: {
+      name: 'withStyles'
+    }
+  }).forEach(path => {
+    if (path.parent.parent.parent.node.type === 'VariableDeclaration' && path.parent.parent.parent.parent.node.type !== 'ExportNamedDeclaration' && path.parent.node.arguments[0].type === 'Identifier') {
+      path.parent.parent.node.init = j.identifier(path.parent.node.arguments[0].name);
+    }
+  });
   return root.toSource(printOptions).replace(/withStyles\([^)]*\),?/gm, '').replace(/([^=]{.*)classes[^.],?(.*})/gm, '$1$2').replace(/^.*useStyles(.*);?/gm, '');
 }

package/node/v5.0.0/jss-to-styled.test/multipleWithStyles.actual.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Test = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _React$Fragment;
+
+const Button1 = (0, _withStyles.default)({
+  root: {
+    backgroundColor: 'red'
+  }
+})(_Button.default);
+const Button2 = (0, _withStyles.default)(theme => ({
+  root: {
+    backgroundColor: theme.palette.primary.main
+  },
+  actions: {
+    padding: theme.spacing(1)
+  }
+}))(_Button.default);
+const Button3 = (0, _withStyles.default)({
+  root: {
+    backgroundColor: 'blue'
+  },
+  actions: {
+    padding: '0px'
+  }
+})(_Button.default);
+
+const Test = () => _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button1, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button2, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button3, {})]
+}));
+
+exports.Test = Test;

package/node/v5.0.0/jss-to-styled.test/multipleWithStyles.expected.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Test = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const PREFIX = 'Test';
+const classes = {
+  root: `${PREFIX}-root`,
+  root2: `${PREFIX}-root2`,
+  actions: `${PREFIX}-actions`,
+  root3: `${PREFIX}-root3`,
+  actions2: `${PREFIX}-actions2`
+}; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+
+const Root = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  [`& .${classes.root}`]: {
+    backgroundColor: 'red'
+  },
+  [`& .${classes.root2}`]: {
+    backgroundColor: theme.palette.primary.main
+  },
+  [`& .${classes.actions}`]: {
+    padding: theme.spacing(1)
+  },
+  [`& .${classes.root3}`]: {
+    backgroundColor: 'blue'
+  },
+  [`& .${classes.actions2}`]: {
+    padding: '0px'
+  }
+}));
+const Button1 = _Button.default;
+const Button2 = _Button.default;
+const Button3 = _Button.default;
+
+const Test = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button1, {
+    classes: {
+      root: classes.root
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button2, {
+    classes: {
+      root: classes.root2,
+      actions: classes.actions
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button3, {
+    classes: {
+      root: classes.root3,
+      actions: classes.actions2
+    }
+  })]
+});
+
+exports.Test = Test;

package/node/v5.0.0/mui-replace.js

@@ -9,5 +9,5 @@ exports.default = transformer;
  * @param {import('jscodeshift').FileInfo} file
  */
 function transformer(file) {
-  return file.source.replace(/@material-ui\/unstyled/gm, '@mui/core').replace(/@material-ui\/core/gm, '@mui/material').replace(/@material-ui\/icons/gm, '@mui/icons-material').replace(/@material-ui\/(?!(pickers|data-grid|x-grid))/gm, '@mui/');
+  return file.source.replace(/@material-ui\/unstyled/gm, '@mui/base').replace(/@material-ui\/core/gm, '@mui/material').replace(/@material-ui\/icons/gm, '@mui/icons-material').replace(/@material-ui\/(?!(pickers|data-grid|x-grid))/gm, '@mui/');
 }

package/node/v5.0.0/mui-replace.test/expected.js

@@ -14,9 +14,9 @@ var _styles2 = require("@mui/styles");
 
 var _createStyles = _interopRequireDefault(require("@mui/styles/createStyles"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
-var _SwitchUnstyled = _interopRequireDefault(require("@mui/core/SwitchUnstyled"));
+var _SwitchUnstyled = _interopRequireDefault(require("@mui/base/SwitchUnstyled"));
 
 var _system = require("@mui/system");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.0.5",
+  "version": "5.2.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -8,7 +8,7 @@
   "keywords": [
     "react",
     "react-component",
-    "material-ui",
+    "mui",
     "codemod",
     "jscodeshift"
   ],
@@ -26,15 +26,15 @@
   "license": "MIT",
   "homepage": "https://github.com/mui-org/material-ui/tree/master/packages/mui-codemod",
   "dependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/runtime": "^7.15.4",
-    "@babel/traverse": "^7.15.4",
+    "@babel/core": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
+    "@babel/traverse": "^7.16.3",
     "jscodeshift": "^0.13.0",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.2.1"
   },
   "devDependencies": {
-    "@types/jscodeshift": "0.11.2"
+    "@types/jscodeshift": "0.11.3"
   },
   "sideEffects": false,
   "publishConfig": {