@mui/codemod 6.0.0-alpha.1 → 6.0.0-alpha.11

package/node/v6.0.0/theme-v6/test-cases/themeVariants.expected.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getCheckoutTheme;
+function getCheckoutTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiStepIcon: {
+        styleOverrides: {
+          root: ({
+            theme
+          }) => ({
+            color: 'transparent',
+            border: `1px solid ${gray[400]}`,
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            '& text': {
+              display: 'none'
+            },
+            '&.Mui-active': {
+              border: 'none',
+              color: theme.palette.primary.main
+            },
+            '&.Mui-completed': {
+              border: 'none',
+              color: theme.palette.success.main
+            },
+            ...theme.applyStyles("dark", {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light
+              }
+            }),
+            variants: [{
+              props: {
+                size: 'large'
+              },
+              style: {
+                width: 20,
+                height: 20
+              }
+            }, {
+              props: {
+                variant: 'shadow'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  boxShadow: theme.shadows[2]
+                })
+              }
+            }, {
+              props: {
+                completed: true
+              },
+              style: {
+                width: 12,
+                height: 12
+              }
+            }]
+          })
+        }
+      }
+    }
+  };
+}

package/node/v6.0.0/theme-v6/theme-v6.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = themeV6;
+var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
+var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function themeV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  let shouldTransform = false;
+  root.find(j.ArrowFunctionExpression).forEach(path => {
+    const styles = [];
+    let args = [];
+    if (path.parent.parent.parent.get('key', 'name').value === 'styleOverrides') {
+      args = [path.node];
+    }
+
+    // 1. collecting styles that should be tranformed
+    args.forEach(arg => {
+      if (arg.type === 'ArrowFunctionExpression' && arg.params[0] && arg.params[0].type === 'ObjectPattern') {
+        styles.push(arg);
+      }
+    });
+    if (!shouldTransform && styles.length > 0) {
+      shouldTransform = true;
+    }
+    (0, _migrateToVariants.default)(j, styles);
+    if (path.parent.get('key', 'name').value === 'root') {
+      const componentTheme = path.parent.parent.parent.parent.get('properties');
+      if (componentTheme.node.type === 'ObjectExpression') {
+        componentTheme.node.properties.forEach(prop => {
+          if (prop.key.name === 'variants') {
+            prop.value.elements = prop.value.elements.map(element => {
+              const styleIndex = element.properties.findIndex(styleProp => styleProp.type === 'ObjectProperty' && styleProp.key.name === 'style');
+              if (styleIndex !== -1 && element.properties[styleIndex].value.type !== 'ObjectExpression') {
+                element.properties[styleIndex].value = (0, _getReturnExpression.default)(element.properties[styleIndex].value);
+              }
+              return element;
+            });
+            const stylesNode = (0, _getReturnExpression.default)(path.node);
+            const variantsNode = stylesNode == null ? void 0 : stylesNode.properties.find(styleProp => styleProp.type === 'ObjectProperty' && styleProp.key.name === 'variants');
+            if (variantsNode) {
+              variantsNode.value.elements.push(...prop.value.elements);
+            } else {
+              stylesNode.properties.push(j.property('init', j.identifier('variants'), prop.value));
+            }
+          }
+        });
+        componentTheme.node.properties = componentTheme.node.properties.filter(prop => prop.key.name !== 'variants');
+      }
+    }
+  });
+  const transformed = root.toSource(printOptions);
+  if (shouldTransform) {
+    // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+    // need to remove them manually
+    const lines = [];
+    let isInStyled = false;
+    let spaceMatch;
+    transformed.split('\n').forEach(line => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '') {
+        var _line$match, _spaceMatch;
+        if (spaceMatch && ((_line$match = line.match(/^\s+/)) == null ? void 0 : _line$match[0]) === ((_spaceMatch = spaceMatch) == null ? void 0 : _spaceMatch[0])) {
+          isInStyled = false;
+          spaceMatch = null;
+        }
+        lines.push(line);
+      }
+      if (line.includes('styleOverrides')) {
+        isInStyled = true;
+        spaceMatch = line.match(/^\s+/);
+      }
+    });
+    return lines.join('\n');
+  }
+  return transformed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,18 +24,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/runtime": "^7.24.4",
-    "@babel/traverse": "^7.24.1",
-    "jscodeshift": "^0.13.1",
+    "@babel/core": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
+    "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",
-    "postcss-cli": "^8.3.1",
+    "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.14",
-    "@types/jscodeshift": "0.11.5",
+    "@types/chai": "^4.3.16",
+    "@types/jscodeshift": "0.11.11",
     "chai": "^4.4.1"
   },
   "sideEffects": false,