@mui/codemod 5.8.3 → 5.8.7

package/README.md

@@ -437,7 +437,7 @@ You can find more details about this breaking change in [the migration guide](ht
 
 #### `emotion-prepend-cache`
 
-Adds `prepend: true` to emotion `createCache`
+Adds `prepend: true` to Emotion `createCache`
 
 ```diff
 const cache = emotionCreateCache({
@@ -685,7 +685,7 @@ The following scenarios are not currently handled by this codemod and will be ma
 - 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/migration/migrating-from-jss/#2-use-tss-react).
+You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react).
 
 #### `link-underline-hover`
 

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

@@ -172,6 +172,18 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se
   }
 }
 
+function addCommentsToNode(node, commentsToAdd, addToBeginning = false) {
+  if (!node.comments) {
+    node.comments = [];
+  }
+
+  if (addToBeginning) {
+    node.comments.unshift(...commentsToAdd);
+  } else {
+    node.comments.push(...commentsToAdd);
+  }
+}
+
 function addCommentsToDeclaration(declaration, commentsToAdd) {
   let commentsPath = declaration;
 
@@ -179,18 +191,18 @@ function addCommentsToDeclaration(declaration, commentsToAdd) {
     commentsPath = declaration.parentPath;
   }
 
-  if (!commentsPath.node.comments) {
-    commentsPath.node.comments = [];
-  }
-
-  commentsPath.node.comments.push(...commentsToAdd);
+  addCommentsToNode(commentsPath.node, commentsToAdd);
 }
 
-function addComments(j, path, commentsToAdd) {
+function addCommentsToClosestDeclaration(j, path, commentsToAdd) {
   j(path).closest(j.VariableDeclaration).forEach(declaration => {
     addCommentsToDeclaration(declaration, commentsToAdd);
   });
 }
+
+function getFirstNode(j, root) {
+  return root.find(j.Program).get('body', 0).node;
+}
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -203,6 +215,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions || {
     quote: 'single'
   };
+  const originalFirstNode = getFirstNode(j, root);
   let importsChanged = false;
   let foundCreateStyles = false;
   let foundMakeStyles = false;
@@ -213,6 +226,7 @@ function transformer(file, api, options) {
 
   root.find(j.ImportDeclaration).forEach(path => {
     const importSource = path.node.source.value;
+    const originalComments = path.node.comments;
 
     if (importSource === '@material-ui/core/styles' || importSource === '@material-ui/core' || importSource === '@mui/styles') {
       const specifiersToMove = [];
@@ -237,15 +251,17 @@ function transformer(file, api, options) {
         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') {
+    } else if (importSource === '@material-ui/styles/makeStyles' || importSource === '@mui/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') {
+    } else if (importSource === '@material-ui/styles/withStyles' || importSource === '@mui/styles/withStyles') {
       foundWithStyles = true;
       path.replace(j.importDeclaration([j.importSpecifier(j.identifier('withStyles'))], j.stringLiteral('tss-react/mui')));
       importsChanged = true;
     }
+
+    path.node.comments = originalComments;
   });
 
   if (!importsChanged) {
@@ -265,7 +281,19 @@ function transformer(file, api, options) {
             clsxOrClassnamesName = specifier.local.name;
           }
         });
+        let commentsToPreserve = null;
+
+        if (originalFirstNode === path.node) {
+          // For a removed import, only preserve the comments if it is the first node in the file,
+          // otherwise the comments are probably about the removed import and no longer relevant.
+          commentsToPreserve = path.node.comments;
+        }
+
         j(path).remove();
+
+        if (commentsToPreserve) {
+          addCommentsToNode(getFirstNode(j, root), commentsToPreserve, true);
+        }
       }
     });
     /**
@@ -306,7 +334,7 @@ function transformer(file, api, options) {
       transformStylesExpression(j, commentsToAdd, path.node.arguments[0], nestedKeys, newStylesExpression => {
         stylesExpression = newStylesExpression;
       });
-      addComments(j, path, commentsToAdd);
+      addCommentsToClosestDeclaration(j, path, commentsToAdd);
       let makeStylesIdentifier = 'makeStyles';
 
       if (isTypeScript && (nestedKeys.length > 0 || paramsTypes !== null)) {
@@ -331,7 +359,7 @@ function transformer(file, api, options) {
       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);
+        addCommentsToClosestDeclaration(j, path, comments);
       });
     });
     /**
@@ -433,7 +461,7 @@ function transformer(file, api, options) {
         transformStylesExpression(j, commentsToAdd, styles, nestedKeys, newStylesExpression => {
           path.node.callee.arguments[0] = newStylesExpression;
         });
-        addComments(j, path, commentsToAdd);
+        addCommentsToClosestDeclaration(j, path, commentsToAdd);
       }
 
       const component = path.node.arguments[0];
@@ -451,7 +479,7 @@ function transformer(file, api, options) {
         transformStylesExpression(j, commentsToAdd, path.node.init, nestedKeys, newStylesExpression => {
           path.node.init = newStylesExpression;
         });
-        addComments(j, path, commentsToAdd);
+        addCommentsToClosestDeclaration(j, path, commentsToAdd);
       });
     });
   }

package/node/v5.0.0/jss-to-tss-react.test/actual-from-mui-styles-makeStyles.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _makeStyles.default)({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _makeStyles.default)({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    "& $test2": {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  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-mixins-pattern.js

@@ -9,14 +9,15 @@ exports.default = ComponentUsingStyles;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
+// Comment on first node where the first node will be removed and we should preserve this comment.
 function mixins() {
   return {
     test: {

package/node/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useExportedStyles = exports.default = void 0;
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@material-ui/core");
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _InnerComponent;

package/node/v5.0.0/jss-to-tss-react.test/expected-from-mui-styles-makeStyles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentUsingStyles;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mui = require("tss-react/mui");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _InnerComponent;
+
+const useStyles = (0, _mui.makeStyles)()({
+  test: {
+    backgroundColor: "purple",
+    color: "white"
+  }
+});
+const useStyles2 = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
+  test: {
+    backgroundColor: "purple",
+    color: "white",
+    [`& .${classes.test2}`]: {
+      backgroundColor: "lime",
+      color: "blue"
+    }
+  },
+  test2: {
+    backgroundColor: "blue",
+    color: "lime"
+  }
+}));
+
+function InnerComponent() {
+  const {
+    classes
+  } = useStyles2();
+  return /*#__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/expected-mixins-pattern.js

@@ -15,6 +15,7 @@ var _mui = require("tss-react/mui");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+// Comment on first node where the first node will be removed and we should preserve this comment.
 function mixins() {
   return {
     test: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.8.3",
+  "version": "5.8.7",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -35,7 +35,7 @@
     "@babel/traverse": "^7.17.3",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "yargs": "^17.4.1"
+    "yargs": "^17.5.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "0.11.5"