@mui/codemod 5.1.1 → 5.3.0

package/README.md

@@ -39,7 +39,7 @@ Examples:
   npx @mui/codemod v5.0.0/preset-safe src --parser=flow
 ```
 
-#### jscodeshift options
+### jscodeshift options
 
 To pass more options directly to jscodeshift, use `--jscodeshift="..."`. For example:
 
@@ -49,7 +49,7 @@ npx @mui/codemod --jscodeshift="--run-in-band --verbose=2"
 
 See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
 
-#### Recast Options
+### Recast Options
 
 Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
 through jscodeshift's `printOptions` command line argument
@@ -1247,13 +1247,13 @@ npx @mui/codemod v1.0.0/color-imports <path>
 
 <!-- #default-branch-switch -->
 
-```
+```sh
 npx @mui/codemod v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
 ```
 
 #### `svg-icon-imports`
 
-Updates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new [`@material-ui/icons`](https://github.com/mui-org/material-ui/tree/next/packages/mui-material-icons) package.
+Updates the `svg-icons` import paths from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`, to use the new `@material-ui/icons` package.
 The diff should look like this:
 
 ```diff

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/v1.0.0/svg-icon-imports.js

@@ -21,7 +21,6 @@ function pascalize(iconName) {
  * Update all `svg-icons` import references to use `@material-ui/icons` package.
  * Find and replace string literal AST nodes to ensure all svg-icon paths get updated, regardless
  * of being in an import declaration, or a require() call, etc.
- * https://github.com/mui-org/material-ui/tree/next/packages/@material-ui/icons
  * @param {jscodeshift_api_object} j
  * @param {jscodeshift_ast_object} root
  */

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/fifth.actual.js

@@ -79,14 +79,14 @@ function SellHero() {
         align: "center",
         variant: "h3",
         color: "textSecondary",
-        children: 'Build your React themes business on the official MUI store.'
+        children: 'Build your React themes business on the official MUI Store.'
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.actions,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.default, {
           variant: "contained",
           component: _Link.default,
           naked: true,
-          to: "https://material-ui.zendesk.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
+          to: "https://support.mui.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
           target: "_blank",
           rel: "noopener",
           className: classes.apply,

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

@@ -88,14 +88,14 @@ function SellHero() {
         align: "center",
         variant: "h3",
         color: "textSecondary",
-        children: 'Build your React themes business on the official MUI store.'
+        children: 'Build your React themes business on the official MUI Store.'
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.actions,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.default, {
           variant: "contained",
           component: _Link.default,
           naked: true,
-          to: "https://material-ui.zendesk.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
+          to: "https://support.mui.com/hc/en-us/articles/360008775380-How-do-I-apply-to-be-a-contributor-",
           target: "_blank",
           rel: "noopener",
           className: classes.apply,

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

@@ -208,7 +208,7 @@ class AppAppBar extends _react.default.Component {
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             className: classes.item,
             component: _Link.default,
-            to: "https://material-ui.zendesk.com/hc/en-us",
+            to: "https://support.mui.com/hc/en-us",
             target: "_blank",
             children: 'Help'
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NoSsr.default, {

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

@@ -223,7 +223,7 @@ class AppAppBar extends _react.default.Component {
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             className: classes.item,
             component: _Link.default,
-            to: "https://material-ui.zendesk.com/hc/en-us",
+            to: "https://support.mui.com/hc/en-us",
             target: "_blank",
             children: 'Help'
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NoSsr.default, {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,16 +25,20 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/mui-org/material-ui/tree/master/packages/mui-codemod",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui"
+  },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
-    "@babel/traverse": "^7.16.3",
-    "jscodeshift": "^0.13.0",
+    "@babel/core": "^7.16.7",
+    "@babel/runtime": "^7.16.7",
+    "@babel/traverse": "^7.16.8",
+    "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.2.1"
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
-    "@types/jscodeshift": "0.11.2"
+    "@types/jscodeshift": "0.11.3"
   },
   "sideEffects": false,
   "publishConfig": {