@mui/codemod 5.7.0 → 5.8.0

package/README.md

@@ -605,6 +605,88 @@ You can find more details about this breaking change in [the migration guide](ht
 > **Note:** This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children.
 > This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://mui.com/material-ui/guides/migration-v4/)
 
+#### `jss-to-tss-react`
+
+Migrate JSS styling with `makeStyles` or `withStyles` to the corresponding `tss-react` API.
+
+```diff
+-import clsx from 'clsx';
+-import {makeStyles, createStyles} from '@material-ui/core/styles';
++import { makeStyles } from 'tss-react/mui';
+
+-const useStyles = makeStyles((theme) => createStyles<
+-  'root' | 'small' | 'child', {color: 'primary' | 'secondary', padding: number}
+->
+-({
+-  root: ({color, padding}) => ({
++const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
++  root: {
+     padding: padding,
+-    '&:hover $child': {
++    [`&:hover .${classes.child}`]: {
+       backgroundColor: theme.palette[color].main,
+     }
+-  }),
++  },
+   small: {},
+   child: {
+     border: '1px solid black',
+     height: 50,
+-    '&$small': {
++    [`&.${classes.small}`]: {
+       height: 30
+     }
+   }
+-}), {name: 'App'});
++}));
+
+ function App({classes: classesProp}: {classes?: any}) {
+-  const classes = useStyles({color: 'primary', padding: 30, classes: classesProp});
++  const { classes, cx } = useStyles({
++    color: 'primary',
++    padding: 30
++  }, {
++    props: {
++      classes: classesProp
++    }
++  });
+
+   return (
+     <div className={classes.root}>
+       <div className={classes.child}>
+         The Background take the primary theme color when the mouse hovers the parent.
+       </div>
+-      <div className={clsx(classes.child, classes.small)}>
++      <div className={cx(classes.child, classes.small)}>
+         The Background take the primary theme color when the mouse hovers the parent.
+         I am smaller than the other child.
+       </div>
+    </div>
+  );
+}
+
+export default App;
+```
+
+```sh
+npx @mui/codemod v5.0.0/jss-to-tss-react <path>
+```
+
+The following scenarios are not currently handled by this codemod and will be marked with a
+"TODO jss-to-tss-react codemod" comment:
+
+- If the hook returned by `makeStyles` (e.g. `useStyles`) is exported and used in another file,
+  the usages in other files will not be converted.
+- Arrow functions as the value for a CSS prop will not be converted. Arrow functions **are**
+  supported at the rule level, though with some caveats listed below.
+- In order for arrow functions at the rule level to be converted, the parameter must use object
+  destructuring (e.g. `root: ({color, padding}) => (...)`). If the parameter is not destructured
+  (e.g. `root: (props) => (...)`), it will not be converted.
+- If an arrow function at the rule level contains a code block (i.e. contains an explicit `return`
+  statement) rather than just an object expression, it will not be converted.
+
+You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/guides/migration-v4/#2-use-tss-react).
+
 #### `link-underline-hover`
 
 Apply `underline="hover"` to `<Link />` that does not define `underline` prop (to get the same behavior as in v4).

package/node/v5.0.0/jss-to-tss-react.js

@@ -0,0 +1,457 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const ruleEndRegEx = /[^a-zA-Z0-9_]+/;
+
+function transformNestedKeys(j, comments, propValueNode, ruleRegEx, nestedKeys) {
+  propValueNode.properties.forEach(prop => {
+    var _prop$value, _prop$value2;
+
+    if (((_prop$value = prop.value) == null ? void 0 : _prop$value.type) === 'ObjectExpression') {
+      if (typeof prop.key.value === 'string') {
+        let ruleIndex = prop.key.value.search(ruleRegEx);
+        let searchStartIndex = 0;
+        const elements = [];
+        const identifiers = [];
+
+        while (ruleIndex >= 0) {
+          const valueStartingAtRuleName = prop.key.value.substring(ruleIndex + 1);
+          const ruleEndIndex = valueStartingAtRuleName.search(ruleEndRegEx);
+          const ruleName = ruleEndIndex >= 0 ? prop.key.value.substring(ruleIndex + 1, ruleIndex + 1 + ruleEndIndex) : valueStartingAtRuleName;
+
+          if (!nestedKeys.includes(ruleName)) {
+            nestedKeys.push(ruleName);
+          }
+
+          const before = prop.key.value.substring(searchStartIndex, ruleIndex);
+          elements.push(j.templateElement({
+            raw: `${before}.`,
+            cooked: `${before}.`
+          }, false));
+          identifiers.push(j.identifier(`classes.${ruleName}`));
+          searchStartIndex = ruleIndex + ruleName.length + 1;
+          const after = prop.key.value.substring(searchStartIndex);
+          ruleIndex = after.search(ruleRegEx);
+
+          if (ruleIndex >= 0) {
+            ruleIndex += searchStartIndex;
+          } else {
+            elements.push(j.templateElement({
+              raw: after,
+              cooked: after
+            }, false));
+          }
+        }
+
+        if (identifiers.length > 0) {
+          prop.key = j.templateLiteral(elements, identifiers);
+          prop.computed = true;
+        }
+      }
+
+      transformNestedKeys(j, comments, prop.value, ruleRegEx, nestedKeys);
+    } else if (((_prop$value2 = prop.value) == null ? void 0 : _prop$value2.type) === 'ArrowFunctionExpression') {
+      comments.push(j.commentLine(' TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.', true));
+    }
+  });
+}
+
+function transformStylesExpression(j, comments, stylesExpression, nestedKeys, setStylesExpression) {
+  const ruleNames = [];
+  const paramNames = [];
+  let objectExpression;
+
+  if (stylesExpression.type === 'ObjectExpression') {
+    objectExpression = stylesExpression;
+  } else if (stylesExpression.type === 'ArrowFunctionExpression') {
+    if (stylesExpression.body.type === 'BlockStatement') {
+      const returnStatement = stylesExpression.body.body.find(b => b.type === 'ReturnStatement');
+
+      if (returnStatement.argument.type === 'ObjectExpression') {
+        objectExpression = returnStatement.argument;
+      }
+    } else if (stylesExpression.body.type === 'ObjectExpression') {
+      objectExpression = stylesExpression.body;
+    }
+  }
+
+  if (objectExpression !== undefined) {
+    objectExpression.properties.forEach(prop => {
+      var _prop$key;
+
+      if ((_prop$key = prop.key) != null && _prop$key.name) {
+        ruleNames.push(prop.key.name);
+      }
+    });
+    let ruleRegExString = '(';
+    ruleNames.forEach((ruleName, index) => {
+      if (index > 0) {
+        ruleRegExString += '|';
+      }
+
+      ruleRegExString += `\\$${ruleName}`;
+    });
+    ruleRegExString += ')';
+    const ruleRegEx = new RegExp(ruleRegExString, 'g');
+    objectExpression.properties.forEach(prop => {
+      if (prop.value) {
+        if (prop.value.type !== 'ObjectExpression') {
+          if (prop.value.type === 'ArrowFunctionExpression' && prop.value.body.type === 'ObjectExpression' && prop.value.params[0].type === 'ObjectPattern') {
+            prop.value.params[0].properties.forEach(property => {
+              const name = property.key.name;
+
+              if (!paramNames.includes(name)) {
+                paramNames.push(name);
+              }
+            });
+            prop.value = prop.value.body;
+          } else {
+            let extraComment = `Unexpected value type of ${prop.value.type}.`;
+
+            if (prop.value.type === 'ArrowFunctionExpression') {
+              if (prop.value.body.type === 'ObjectExpression') {
+                let example = '';
+
+                if (prop.value.params[0].type === 'Identifier') {
+                  example = ' (e.g. `(props) => ({...})` instead of `({color}) => ({...})`)';
+                }
+
+                extraComment = ` Arrow function has parameter type of ${prop.value.params[0].type} instead of ObjectPattern${example}.`;
+              } else {
+                extraComment = ` Arrow function has body type of ${prop.value.body.type} instead of ObjectExpression.`;
+              }
+            }
+
+            comments.push(j.commentLine(` TODO jss-to-tss-react codemod: Unable to handle style definition reliably. Unsupported arrow function syntax.`, true));
+            comments.push(j.commentLine(extraComment, true));
+            return;
+          }
+        }
+
+        transformNestedKeys(j, comments, prop.value, ruleRegEx, nestedKeys);
+      }
+    });
+
+    if (paramNames.length > 0 || nestedKeys.length > 0) {
+      let arrowFunction;
+
+      if (stylesExpression.type === 'ArrowFunctionExpression') {
+        arrowFunction = stylesExpression;
+      } else {
+        arrowFunction = j.arrowFunctionExpression([], objectExpression);
+        setStylesExpression(arrowFunction);
+      }
+
+      if (arrowFunction.params.length === 0) {
+        arrowFunction.params.push(j.identifier('_theme'));
+      }
+
+      let paramsString = '_params';
+
+      if (paramNames.length > 0) {
+        paramsString = `{ ${paramNames.join(', ')} }`;
+      }
+
+      arrowFunction.params.push(j.identifier(paramsString));
+
+      if (nestedKeys.length > 0) {
+        arrowFunction.params.push(j.identifier('classes'));
+      }
+
+      if (arrowFunction.body.type === 'ObjectExpression') {
+        // In some cases, some needed parentheses were being lost without this.
+        arrowFunction.body = j.parenthesizedExpression(objectExpression);
+      }
+    }
+  }
+}
+
+function addCommentsToDeclaration(declaration, commentsToAdd) {
+  let commentsPath = declaration;
+
+  if (declaration.parentPath.node.type === 'ExportNamedDeclaration') {
+    commentsPath = declaration.parentPath;
+  }
+
+  if (!commentsPath.node.comments) {
+    commentsPath.node.comments = [];
+  }
+
+  commentsPath.node.comments.push(...commentsToAdd);
+}
+
+function addComments(j, path, commentsToAdd) {
+  j(path).closest(j.VariableDeclaration).forEach(declaration => {
+    addCommentsToDeclaration(declaration, commentsToAdd);
+  });
+}
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+
+
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single'
+  };
+  let importsChanged = false;
+  let foundCreateStyles = false;
+  let foundMakeStyles = false;
+  let foundWithStyles = false;
+  /**
+   * transform imports
+   */
+
+  root.find(j.ImportDeclaration).forEach(path => {
+    const importSource = path.node.source.value;
+
+    if (importSource === '@material-ui/core/styles' || importSource === '@material-ui/core' || importSource === '@mui/styles') {
+      const specifiersToMove = [];
+      const specifiersToStay = [];
+      path.node.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier') {
+          if (specifier.imported.name === 'makeStyles') {
+            foundMakeStyles = true;
+            specifiersToMove.push(specifier);
+          } else if (specifier.imported.name === 'withStyles') {
+            foundWithStyles = true;
+            specifiersToMove.push(specifier);
+          } else if (specifier.imported.name === 'createStyles') {
+            foundCreateStyles = true;
+          } else {
+            specifiersToStay.push(specifier);
+          }
+        }
+      });
+
+      if (specifiersToMove.length > 0) {
+        path.replace(j.importDeclaration(specifiersToMove, j.stringLiteral('tss-react/mui')), specifiersToStay.length > 0 ? j.importDeclaration(specifiersToStay, j.stringLiteral(importSource)) : undefined);
+        importsChanged = true;
+      }
+    } else if (importSource === '@material-ui/styles/makeStyles') {
+      foundMakeStyles = true;
+      path.replace(j.importDeclaration([j.importSpecifier(j.identifier('makeStyles'))], j.stringLiteral('tss-react/mui')));
+      importsChanged = true;
+    } else if (importSource === '@material-ui/styles/withStyles') {
+      foundWithStyles = true;
+      path.replace(j.importDeclaration([j.importSpecifier(j.identifier('withStyles'))], j.stringLiteral('tss-react/mui')));
+      importsChanged = true;
+    }
+  });
+
+  if (!importsChanged) {
+    return file.source;
+  }
+
+  const isTypeScript = file.path.endsWith('.tsx') || file.path.endsWith('.ts');
+
+  if (foundMakeStyles) {
+    let clsxOrClassnamesName = null;
+    root.find(j.ImportDeclaration).forEach(path => {
+      const importSource = path.node.source.value;
+
+      if (importSource === 'clsx' || importSource === 'classnames') {
+        path.node.specifiers.forEach(specifier => {
+          if (specifier.type === 'ImportDefaultSpecifier') {
+            clsxOrClassnamesName = specifier.local.name;
+          }
+        });
+        j(path).remove();
+      }
+    });
+    /**
+     * Convert makeStyles syntax
+     */
+
+    const styleHooks = [];
+    root.find(j.CallExpression, {
+      callee: {
+        name: 'makeStyles'
+      }
+    }).forEach(path => {
+      let paramsTypes = null;
+
+      if (foundCreateStyles) {
+        j(path).find(j.CallExpression, {
+          callee: {
+            name: 'createStyles'
+          }
+        }).replaceWith(createStylesPath => {
+          if (isTypeScript && createStylesPath.node.typeParameters && createStylesPath.node.typeParameters.params.length > 1) {
+            paramsTypes = createStylesPath.node.typeParameters.params[1];
+          }
+
+          return createStylesPath.node.arguments[0];
+        });
+      }
+
+      const nestedKeys = [];
+      let makeStylesOptions = null;
+
+      if (path.node.arguments.length > 1) {
+        makeStylesOptions = path.node.arguments[1];
+      }
+
+      let stylesExpression = path.node.arguments[0];
+      const commentsToAdd = [];
+      transformStylesExpression(j, commentsToAdd, path.node.arguments[0], nestedKeys, newStylesExpression => {
+        stylesExpression = newStylesExpression;
+      });
+      addComments(j, path, commentsToAdd);
+      let makeStylesIdentifier = 'makeStyles';
+
+      if (isTypeScript && (nestedKeys.length > 0 || paramsTypes !== null)) {
+        let paramsTypeString = 'void';
+
+        if (paramsTypes !== null) {
+          paramsTypeString = j(paramsTypes).toSource(printOptions);
+        }
+
+        let nestedKeysString = '';
+
+        if (nestedKeys.length > 0) {
+          const nestedKeysUnion = nestedKeys.join("' | '");
+          nestedKeysString = `, '${nestedKeysUnion}'`;
+        }
+
+        makeStylesIdentifier += `<${paramsTypeString}${nestedKeysString}>`;
+      }
+
+      j(path).replaceWith(j.callExpression(j.callExpression(j.identifier(makeStylesIdentifier), makeStylesOptions === null ? [] : [makeStylesOptions]), [stylesExpression]));
+    }).closest(j.VariableDeclarator).forEach(path => {
+      styleHooks.push(path.node.id.name);
+      j(path).closest(j.ExportNamedDeclaration).forEach(() => {
+        const comments = [j.commentLine(` TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.`, true)];
+        addComments(j, path, comments);
+      });
+    });
+    /**
+     * Convert classes assignment syntax in calls to the hook (e.g. useStyles) and
+     * convert usages of clsx or classnames to cx.
+     */
+
+    styleHooks.forEach(hookName => {
+      root.find(j.CallExpression, {
+        callee: {
+          name: hookName
+        }
+      }).forEach(hookCall => {
+        if (hookCall.node.arguments.length === 1) {
+          const hookArg = hookCall.node.arguments[0];
+
+          if (hookArg.type === 'Identifier') {
+            const secondArg = j.objectExpression([]);
+            secondArg.properties.push(j.objectProperty(j.identifier('props'), j.identifier(hookArg.name)));
+            hookCall.node.arguments.push(secondArg);
+          } else if (hookArg.properties) {
+            const hookArgPropsMinusClasses = [];
+            let classesProp = null;
+            hookArg.properties.forEach(hookProp => {
+              if (hookProp.key.name === 'classes') {
+                classesProp = hookProp;
+              } else {
+                hookArgPropsMinusClasses.push(hookProp);
+              }
+            });
+
+            if (classesProp !== null) {
+              if (hookArgPropsMinusClasses.length === 0) {
+                hookCall.node.arguments[0] = j.identifier('undefined');
+              } else {
+                hookArg.properties = hookArgPropsMinusClasses;
+              }
+
+              const secondArg = j.objectExpression([]);
+              secondArg.properties.push(j.objectProperty(j.identifier('props'), j.objectExpression([j.objectProperty(j.identifier('classes'), classesProp.value)])));
+              hookCall.node.arguments.push(secondArg);
+            }
+          }
+        }
+      }).closest(j.VariableDeclarator).forEach(path => {
+        let foundClsxOrClassnamesUsage = false;
+        const classesName = path.node.id.name;
+        const classesAssign = classesName === 'classes' ? 'classes' : `classes: ${classesName}`;
+
+        if (clsxOrClassnamesName !== null) {
+          j(path).closestScope().find(j.CallExpression, {
+            callee: {
+              name: clsxOrClassnamesName
+            }
+          }).forEach(callPath => {
+            callPath.node.callee.name = 'cx';
+            foundClsxOrClassnamesUsage = true;
+          });
+        }
+
+        if (foundClsxOrClassnamesUsage) {
+          path.node.id.name = `{ ${classesAssign}, cx }`;
+        } else {
+          path.node.id.name = `{ ${classesAssign} }`;
+        }
+      });
+      root.find(j.ExportDefaultDeclaration, {
+        declaration: {
+          name: hookName
+        }
+      }).forEach(path => {
+        const comments = [j.commentLine(` TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.`, true)];
+        addCommentsToDeclaration(path, comments);
+      });
+    });
+  }
+
+  if (foundWithStyles) {
+    /**
+     * Convert withStyles syntax
+     */
+    const styleVariables = [];
+    root.find(j.CallExpression, {
+      callee: {
+        type: 'CallExpression',
+        callee: {
+          name: 'withStyles'
+        }
+      }
+    }).replaceWith(path => {
+      const withStylesCall = path.node.callee;
+      const styles = path.node.callee.arguments[0];
+
+      if (styles.type === 'Identifier') {
+        styleVariables.push(styles.name);
+      } else {
+        const nestedKeys = [];
+        const commentsToAdd = [];
+        transformStylesExpression(j, commentsToAdd, styles, nestedKeys, newStylesExpression => {
+          path.node.callee.arguments[0] = newStylesExpression;
+        });
+        addComments(j, path, commentsToAdd);
+      }
+
+      const component = path.node.arguments[0];
+      withStylesCall.arguments.unshift(component);
+      return withStylesCall;
+    });
+    styleVariables.forEach(styleVar => {
+      root.find(j.VariableDeclarator, {
+        id: {
+          name: styleVar
+        }
+      }).forEach(path => {
+        const nestedKeys = [];
+        const commentsToAdd = [];
+        transformStylesExpression(j, commentsToAdd, path.node.init, nestedKeys, newStylesExpression => {
+          path.node.init = newStylesExpression;
+        });
+        addComments(j, path, commentsToAdd);
+      });
+    });
+  }
+
+  return root.toSource(printOptions);
+}

package/node/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+/*
+Sandboxes for verifying correct behavior:
+JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
+TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
+ */
+const useStyles = (0, _styles.makeStyles)({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+}, {
+  name: "TestName"
+});
+const useStyles2 = (0, _styles.makeStyles)(() => ({
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+
+function InnerComponent() {
+  const classes = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+
+function ComponentUsingStyles(props) {
+  const classes = useStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.test,
+    children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+  });
+}

package/node/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _core.makeStyles)(() => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "&$qualifier": {
+      textDecoration: "underline"
+    },
+    "&$qualifier$qualifier2": {
+      fontStyle: "italic"
+    },
+    "&$qualifier2 .testStuffInBetween $qualifier": {
+      color: "brown"
+    },
+    "&$qualifier:hover": {
+      backgroundColor: "red"
+    },
+    "&$qualifier2:not(:hover)": {
+      fontWeight: 700
+    }
+  },
+  qualifier: {},
+  qualifier2: {}
+}));
+const useStyles2 = (0, _core.makeStyles)({
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+});
+
+function InnerComponent() {
+  const classes = useStyles2();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.test2,
+    children: "Inner Test"
+  });
+}
+
+function ComponentUsingStyles(props) {
+  const classes = useStyles(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.test,
+      children: ["Test", _InnerComponent || (_InnerComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerComponent, {}))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(classes.test, classes.qualifier),
+      children: "Qualifier Test"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(classes.test, classes.qualifier2),
+      children: "Qualifier 2 Test"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(classes.test, classes.qualifier, classes.qualifier2),
+      children: "Qualifier & Qualifier 2 Test"
+    })]
+  });
+}