@mui/codemod 5.8.4 → 5.9.3

package/README.md

@@ -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 = [];
@@ -246,6 +260,8 @@ function transformer(file, api, options) {
       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-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-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/node/v5.0.0/theme-spacing.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 
+/* eslint-disable no-template-curly-in-string */
+
 /**
  * @param {import('jscodeshift').FileInfo} file
  */
 function transformer(file) {
-  return file.source // `${theme.spacing(2)}px` -> theme.spacing(2)
-  .replace(/`(-?)\${(-?)(theme\.spacing|spacing)\(([^{}]*)\)}px`/gm, '$3($1$2$4)') // `${theme.spacing(2)}px ${theme.spacing(4)}px` -> `${theme.spacing(2)} ${theme.spacing(4)}`
-  .replace(/(?<={(theme\.spacing|spacing)\([^]*.*[^]*\)})px/gm, '').replace(/((theme\.spacing|spacing)\(.*\))\s*\+\s*'px'/gm, '$1').replace(/\${(theme.spacing|spacing)(\(.*\))\s*([+-])\s*([\d.]+)\s*}px/gm, // eslint-disable-next-line no-template-curly-in-string
-  'calc(${$1$2} $3 $4px)').replace(/\${(theme.spacing|spacing)(\(.*\))\s*([*/])\s*([\d.]+)\s*}px/gm, // eslint-disable-next-line no-template-curly-in-string
-  'calc(${$1$2} $3 $4)');
+  return file.source.replace( // handle cases like: `-${theme.spacing(1)}px`
+  /`(-?)\${(-?)(theme\.spacing|spacing)\(([^{}]*)\)}px`/gm, '$3($1$2$4)').replace( // handle cases like: theme.spacing(gap) + 'px'
+  /((theme\.spacing|spacing)\(.*\))\s*\+\s*'px'/gm, '$1').replace( // handle cases like: theme.spacing(gap) + "px"
+  /((theme\.spacing|spacing)\(.*\))\s*\+\s*"px"/gm, '$1').replace( // handle cases like: `calc(${theme.spacing(2)} - 1px) 0`
+  /\${(theme\.spacing|spacing)(\([^)]+\))\s*([+-])\s*([\d.]+)\s*}px/gm, 'calc(${$1$2} $3 $4px)').replace( // handle cases like: calc(${theme.spacing(itemHorzPadding)} * 0.3)
+  /\${(theme\.spacing|spacing)(\([^)]+\))\s*([*/])\s*([\d.]+)\s*}px/gm, 'calc(${$1$2} $3 $4)').replace( // handle common cases like:
+  // `${theme.spacing(2)}px`
+  // `${theme.spacing(2)}px ${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`
+  /(spacing\([^)]+\)\})px(.)/gm, '$1$2');
 }

package/node/v5.0.0/theme-spacing.test/actual.js

@@ -2,6 +2,8 @@
 
 `${theme.spacing(2)}px``${spacing(2)}px``${theme.spacing(1 / 2)}px``${theme.spacing(0.5)}px``${theme.spacing(1 / 2)}px ${theme.spacing(4)}px`;
 theme.spacing(gap) + 'px';
-spacing(gap) + 'px'`calc(100% - ${spacing(itemHorzPadding * 2)}px)``calc(100% - ${theme.spacing(itemHorzPadding * 2)}px)`;
+spacing(gap) + 'px';
+theme.spacing(gap) + "px";
+spacing(gap) + "px"`calc(100% - ${spacing(itemHorzPadding * 2)}px)``calc(100% - ${theme.spacing(itemHorzPadding * 2)}px)`;
 
 padding: `${theme.spacing(2) - 1}px 0``calc(100% - ${theme.spacing(itemHorzPadding) * 0.3}px)``${-theme.spacing(1)}px``-${theme.spacing(1)}px``${theme.spacing(2)}px ${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`;

package/node/v5.0.0/theme-spacing.test/expected.js

@@ -5,6 +5,8 @@ spacing(2);
 theme.spacing(1 / 2);
 theme.spacing(0.5)`${theme.spacing(1 / 2)} ${theme.spacing(4)}`;
 theme.spacing(gap);
+spacing(gap);
+theme.spacing(gap);
 spacing(gap)`calc(100% - ${spacing(itemHorzPadding * 2)})``calc(100% - ${theme.spacing(itemHorzPadding * 2)})`;
 
 padding: `calc(${theme.spacing(2)} - 1px) 0``calc(100% - calc(${theme.spacing(itemHorzPadding)} * 0.3))`;