@mui/codemod 5.1.1 → 5.2.0

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

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -34,7 +34,7 @@
     "yargs": "^17.2.1"
   },
   "devDependencies": {
-    "@types/jscodeshift": "0.11.2"
+    "@types/jscodeshift": "0.11.3"
   },
   "sideEffects": false,
   "publishConfig": {