@mui/codemod 5.11.12 → 5.11.14

package/node/v5.0.0/rename-css-variables.js

@@ -7,7 +7,7 @@ exports.default = transformer;
 const capitalize = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
-const JoyComponents = ['Alert', 'AspectRatio', 'Autocomplete', 'AutocompleteListbox', 'AutocompleteOption', 'Avatar', 'AvatarGroup', 'Badge', 'Box', 'Breadcrumbs', 'Button', 'Card', 'CardContent', 'CardCover', 'CardOverflow', 'Checkbox', 'Chip', 'ChipDelete', 'CircularProgress', 'Container', 'CssBaseline', 'Divider', 'FormControl', 'FormHelperText', 'FormLabel', 'Grid', 'IconButton', 'Input', 'LinearProgress', 'Link', 'List', 'ListDivider', 'ListItem', 'ListItemButton', 'ListItemContent', 'ListItemDecorator', 'ListSubheader', 'Menu', 'MenuItem', 'MenuList', 'Modal', 'ModalClose', 'ModalDialog', 'Option', 'Radio', 'RadioGroup', 'ScopedCssBaseline', 'Select', 'Sheet', 'Slider', 'Stack', 'SvgIcon', 'Switch', 'Tab', 'Table', 'TabList', 'TabPanel', 'Tabs', 'Textarea', 'TextField', 'Tooltip', 'Typography'];
+const JoyComponents = ['Alert', 'AspectRatio', 'Autocomplete', 'AutocompleteListbox', 'AutocompleteOption', 'Avatar', 'AvatarGroup', 'Badge', 'Box', 'Breadcrumbs', 'Button', 'Card', 'CardContent', 'CardCover', 'CardOverflow', 'Checkbox', 'Chip', 'ChipDelete', 'CircularProgress', 'Container', 'CssBaseline', 'Divider', 'FormControl', 'FormHelperText', 'FormLabel', 'Grid', 'IconButton', 'Input', 'LinearProgress', 'Link', 'List', 'ListDivider', 'ListItem', 'ListItemButton', 'ListItemContent', 'ListItemDecorator', 'ListSubheader', 'Menu', 'MenuItem', 'MenuList', 'Modal', 'ModalClose', 'ModalDialog', 'Option', 'Radio', 'RadioGroup', 'ScopedCssBaseline', 'Select', 'Sheet', 'Slider', 'Stack', 'SvgIcon', 'Switch', 'Tab', 'Table', 'TableCell', 'TabList', 'TabPanel', 'Tabs', 'Textarea', 'TextField', 'Tooltip', 'Typography'];
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -16,15 +16,24 @@ function transformer(file) {
   return file.source
   // from `--<Component>-<slot>-<property>` to `--<Component>-<slot><Property>`
   .replace(/--([a-zA-Z]+)([-_])([a-zA-Z]+)-([a-zA-Z]+)/gm, (matched, capture1, capture2, capture3, capture4) => {
-    if (!JoyComponents.includes(capture1) && !['internal', 'unstable'].includes(capture1)) {
+    if (!JoyComponents.includes(capture1) && !['internal', 'unstable', 'private'].includes(capture1)) {
       return matched;
     }
     // turn `--List-item-...` and `--List-divider-...` to `--ListItem-...` and `--ListDivider-...`
     if (capture1 === 'List' && ['divider', 'item'].includes(capture3)) {
       return `--${capture1}${capitalize(capture3)}-${capture4}`;
     }
-    return `--${capture1}${capture2}${capture3}${capitalize(capture4)}`;
-  })
+    // turn `--List-decorator-...` to `--ListItemDecorator-...`
+    if (capture1 === 'List' && ['decorator'].includes(capture3)) {
+      return `--${capture1}Item${capitalize(capture3)}-${capture4}`;
+    }
+    if (!JoyComponents.includes(capture3)) {
+      return `--${capture1}${capture2}${capture3}${capitalize(capture4)}`;
+    }
+    return matched;
+  }).replace(/--List-decoratorSize/gm, '--ListItemDecorator-size').replace(/--List-decoratorColor/gm, '--ListItemDecorator-color')
   // from `--internal-...` to `--unstable_...`
-  .replace(/--internal-/gm, '--unstable_');
+  .replace(/--internal-/gm, '--unstable_')
+  // from `--private_...` to `--unstable_...`
+  .replace(/--private_/gm, '--unstable_');
 }

package/node/v5.0.0/rename-css-variables.test/actual.js

@@ -4,7 +4,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
     sx: {
-      py: 'var(--ListDivider-gap)'
+      py: 'var(--ListDivider-gap)',
+      '--List-decorator-size': '24px'
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+    sx: {
+      '--List-decoratorSize': '24px'
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
     sx: {
@@ -14,6 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       '--Input-decoratorChildHeight': '10px'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalDialog, {
+    sx: {
+      '--unstable_ModalDialog-descriptionOffset': '12px'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
     sx: {
       '--Autocomplete-wrapperGap': '10px'
@@ -26,6 +35,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       py: 'var(--internal-action-radius)'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    sx: {
+      py: 'var(--private_action-radius)'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
     sx: {
       py: 'var(--unstable_action-radius)'

package/node/v5.0.0/rename-css-variables.test/expected.js

@@ -4,7 +4,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
     sx: {
-      py: 'var(--ListDivider-gap)'
+      py: 'var(--ListDivider-gap)',
+      '--ListItemDecorator-size': '24px'
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+    sx: {
+      '--ListItemDecorator-size': '24px'
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
     sx: {
@@ -14,6 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       '--Input-decoratorChildHeight': '10px'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalDialog, {
+    sx: {
+      '--unstable_ModalDialog-descriptionOffset': '12px'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
     sx: {
       '--Autocomplete-wrapperGap': '10px'
@@ -30,5 +39,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       py: 'var(--unstable_actionRadius)'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    sx: {
+      py: 'var(--unstable_actionRadius)'
+    }
   })]
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.12",
+  "version": "5.11.14",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/runtime": "^7.21.0",
-    "@babel/traverse": "^7.21.2",
+    "@babel/traverse": "^7.21.3",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.1"