@mui/codemod 6.0.0-beta.5 → 6.0.0-beta.6

package/node/v5.0.0/joy-text-field-to-input.js

@@ -25,10 +25,8 @@ function transformer(file, api, options) {
     ].includes(sourceVal);
   }).forEach(path => {
     path.node.specifiers.forEach(elementNode => {
-      var _elementNode$imported;
-      if (elementNode.type === 'ImportSpecifier' && ((_elementNode$imported = elementNode.imported) == null ? void 0 : _elementNode$imported.name) === 'TextField' || elementNode.type === 'ImportDefaultSpecifier') {
-        var _elementNode$imported2;
-        if (((_elementNode$imported2 = elementNode.imported) == null ? void 0 : _elementNode$imported2.name) === 'TextField') {
+      if (elementNode.type === 'ImportSpecifier' && elementNode.imported?.name === 'TextField' || elementNode.type === 'ImportDefaultSpecifier') {
+        if (elementNode.imported?.name === 'TextField') {
           elementNode.imported.name = 'Input';
         }
         let newElementName;
@@ -45,7 +43,6 @@ function transformer(file, api, options) {
           let formLabelValue;
           let formHelperTextValue;
           elementPath.node.openingElement.attributes.forEach(attributeNode => {
-            var _attributeNode$value$, _attributeNode$value$2;
             if (attributeNode.type !== 'JSXAttribute') {
               return;
             }
@@ -57,7 +54,7 @@ function transformer(file, api, options) {
                 formControlAttributeNodes.push(attributeNode);
                 break;
               case 'slotProps':
-                if (((_attributeNode$value$ = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$.type) === 'ObjectExpression') {
+                if (attributeNode.value.expression?.type === 'ObjectExpression') {
                   attributeNode.value.expression.properties.forEach(propNode => {
                     if (propNode.value.type !== 'ObjectExpression') {
                       return;
@@ -85,7 +82,7 @@ function transformer(file, api, options) {
                 }
                 break;
               case 'slots':
-                if (((_attributeNode$value$2 = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$2.type) === 'ObjectExpression') {
+                if (attributeNode.value.expression?.type === 'ObjectExpression') {
                   attributeNode.value.expression.properties.forEach(propNode => {
                     const newAttributeNode = j.jsxAttribute(j.jsxIdentifier('component'), j.jsxExpressionContainer(propNode.value));
                     switch (propNode.key.name) {

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

@@ -7,8 +7,7 @@ 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 (prop.value?.type === 'ObjectExpression') {
       if (typeof prop.key.value === 'string' && ruleRegEx !== null) {
         let ruleIndex = prop.key.value.search(ruleRegEx);
         let searchStartIndex = 0;
@@ -45,7 +44,7 @@ function transformNestedKeys(j, comments, propValueNode, ruleRegEx, nestedKeys)
         }
       }
       transformNestedKeys(j, comments, prop.value, ruleRegEx, nestedKeys);
-    } else if (((_prop$value2 = prop.value) == null ? void 0 : _prop$value2.type) === 'ArrowFunctionExpression') {
+    } else if (prop.value?.type === 'ArrowFunctionExpression') {
       comments.push(j.commentLine(' TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.', true));
     }
   });
@@ -68,10 +67,9 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se
   }
   if (objectExpression !== undefined) {
     objectExpression.properties.forEach(prop => {
-      var _prop$key, _prop$key2;
-      if ((_prop$key = prop.key) != null && _prop$key.name) {
+      if (prop.key?.name) {
         ruleNames.push(prop.key.name);
-      } else if (((_prop$key2 = prop.key) == null ? void 0 : _prop$key2.value) === '@global') {
+      } else if (prop.key?.value === '@global') {
         comments.push(j.commentLine(` TODO jss-to-tss-react codemod: '@global' is not supported by tss-react.`, true));
         comments.push(j.commentLine(` See https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override for alternatives.`, true));
       }

package/node/v5.0.0/link-underline-hover.js

@@ -41,10 +41,7 @@ function transformer(file, api, options) {
     root.findJSXElements(name).forEach(({
       node
     }) => {
-      const hasUnderlineProp = node.openingElement.attributes.find(attr => {
-        var _attr$name;
-        return (attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'underline';
-      });
+      const hasUnderlineProp = node.openingElement.attributes.find(attr => attr?.name?.name === 'underline');
       if (!hasUnderlineProp) {
         node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('underline'), j.literal('hover')));
       }

package/node/v5.0.0/pagination-round-circular.js

@@ -13,18 +13,13 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   const source = j(file.source).find(j.JSXElement).filter(({
     node
-  }) => {
-    var _node$openingElement$;
-    return (_node$openingElement$ = node.openingElement.name.name) == null ? void 0 : _node$openingElement$.match(/^(Pagination|PaginationItem)$/);
-  }).forEach(path => {
+  }) => node.openingElement.name.name?.match(/^(Pagination|PaginationItem)$/)).forEach(path => {
     path.node.openingElement.attributes.forEach(node => {
-      var _node$value$expressio;
-      if (node.type === 'JSXAttribute' && node.name.name === 'shape' && (node.value.value === 'round' || ((_node$value$expressio = node.value.expression) == null ? void 0 : _node$value$expressio.value) === 'round')) {
+      if (node.type === 'JSXAttribute' && node.name.name === 'shape' && (node.value.value === 'round' || node.value.expression?.value === 'round')) {
         node.value = j.literal('circular');
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value;
-        (((_node$value = node.value) == null || (_node$value = _node$value.expression) == null ? void 0 : _node$value.properties) || []).forEach(subNode => {
+        (node.value?.expression?.properties || []).forEach(subNode => {
           if (subNode.key.name === 'round') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/skeleton-variant.js

@@ -14,17 +14,15 @@ function transformer(file, api, options) {
   const source = j(file.source).findJSXElements('Skeleton').forEach(path => {
     path.node.openingElement.attributes.forEach(node => {
       if (node.type === 'JSXAttribute' && node.name.name === 'variant') {
-        var _node$value$expressio, _node$value$expressio2;
-        if (node.value.value === 'circle' || ((_node$value$expressio = node.value.expression) == null ? void 0 : _node$value$expressio.value) === 'circle') {
+        if (node.value.value === 'circle' || node.value.expression?.value === 'circle') {
           node.value = j.literal('circular');
         }
-        if (node.value.value === 'rect' || ((_node$value$expressio2 = node.value.expression) == null ? void 0 : _node$value$expressio2.value) === 'rect') {
+        if (node.value.value === 'rect' || node.value.expression?.value === 'rect') {
           node.value = j.literal('rectangular');
         }
       }
       if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        var _node$value;
-        (_node$value = node.value) == null || (_node$value = _node$value.expression) == null || (_node$value = _node$value.properties) == null || _node$value.forEach(subNode => {
+        node.value?.expression?.properties?.forEach(subNode => {
           if (subNode.key.name === 'circle') {
             subNode.key.name = 'circular';
           }

package/node/v5.0.0/table-props.js

@@ -14,15 +14,11 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   root.find(j.JSXElement).filter(({
     node
-  }) => {
-    var _node$openingElement$;
-    return (_node$openingElement$ = node.openingElement.name.name) == null ? void 0 : _node$openingElement$.match(/^(Table|TableCell)$/);
-  }).forEach(({
+  }) => node.openingElement.name.name?.match(/^(Table|TableCell)$/)).forEach(({
     node
   }) => {
     node.openingElement.attributes.forEach(attr => {
-      var _attr$name, _attr$value, _attr$value2;
-      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'padding' && (((_attr$value = attr.value) == null ? void 0 : _attr$value.value) === 'default' || ((_attr$value2 = attr.value) == null || (_attr$value2 = _attr$value2.expression) == null ? void 0 : _attr$value2.value) === 'default')) {
+      if (attr.name?.name === 'padding' && (attr.value?.value === 'default' || attr.value?.expression?.value === 'default')) {
         attr.value = j.literal('normal');
       }
     });
@@ -31,14 +27,13 @@ function transformer(file, api, options) {
     node
   }) => {
     node.openingElement.attributes.forEach(attr => {
-      var _attr$name2, _attr$name3;
       if (attr.type === 'JSXAttribute' && attr.name.name === 'onChangeRowsPerPage') {
         attr.name.name = 'onRowsPerPageChange';
       }
-      if (attr.type === 'JSXAttribute' && ((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'onChangePage') {
+      if (attr.type === 'JSXAttribute' && attr.name?.name === 'onChangePage') {
         attr.name.name = 'onPageChange';
       }
-      if (attr.type === 'JSXAttribute' && ((_attr$name3 = attr.name) == null ? void 0 : _attr$name3.name) === 'classes') {
+      if (attr.type === 'JSXAttribute' && attr.name?.name === 'classes') {
         (attr.value.expression.properties || []).forEach(subNode => {
           if (subNode.key.name === 'input') {
             subNode.key.name = 'select';

package/node/v5.0.0/tabs-scroll-buttons.js

@@ -19,13 +19,12 @@ function transformer(file, api, options) {
     node.openingElement.attributes.forEach(attr => {
       if (attr.name && attr.name.name === 'scrollButtons') {
         if (attr.value) {
-          var _attr$value$expressio, _attr$value$expressio2, _attr$value$expressio3, _attr$value$expressio4;
-          prevScrollButtonValue = attr.value.value || ((_attr$value$expressio = attr.value.expression) == null ? void 0 : _attr$value$expressio.value);
-          if (attr.value.value === 'on' || ((_attr$value$expressio2 = attr.value.expression) == null ? void 0 : _attr$value$expressio2.value) === 'on') {
+          prevScrollButtonValue = attr.value.value || attr.value.expression?.value;
+          if (attr.value.value === 'on' || attr.value.expression?.value === 'on') {
             delete attr.value;
-          } else if (attr.value.value === 'desktop' || ((_attr$value$expressio3 = attr.value.expression) == null ? void 0 : _attr$value$expressio3.value) === 'desktop') {
+          } else if (attr.value.value === 'desktop' || attr.value.expression?.value === 'desktop') {
             delete attr.value;
-          } else if (attr.value.value === 'off' || ((_attr$value$expressio4 = attr.value.expression) == null ? void 0 : _attr$value$expressio4.value) === 'off') {
+          } else if (attr.value.value === 'off' || attr.value.expression?.value === 'off') {
             attr.value = j.jsxExpressionContainer(j.literal(false));
           }
         }

package/node/v6.0.0/grid-v2-props/grid-v2-props.js

@@ -17,13 +17,12 @@ const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
  * @param {import('jscodeshift').API} api
  */
 function gridV2Props(file, api, options) {
-  var _file$path, _file$path2, _options$muiBreakpoin;
-  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
     return file.source;
   }
   const j = api.jscodeshift;
   const root = j(file.source);
-  const breakpoints = ((_options$muiBreakpoin = options.muiBreakpoints) == null ? void 0 : _options$muiBreakpoin.split(',')) || defaultBreakpoints;
+  const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints;
   const printOptions = options.printOptions;
   const gridLocalNames = [];
   root.find(j.ImportDeclaration, decl => possibleDefaultImports.includes(decl.source.value)).forEach(decl => {
@@ -101,10 +100,7 @@ function gridV2Props(file, api, options) {
       }
       el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue));
     }
-    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
-      var _attr$name;
-      return !breakpoints.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name);
-    });
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name));
     const offset = j.objectExpression([]);
     const offsetNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name.endsWith('Offset') && breakpoints.includes(path.node.name.name.replace('Offset', '')));
     offsetNodes.nodes().forEach(node => {
@@ -139,10 +135,7 @@ function gridV2Props(file, api, options) {
       }
       el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue));
     }
-    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
-      var _attr$name2;
-      return !breakpoints.includes(attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name.replace('Offset', ''));
-    });
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name.replace('Offset', '')));
     el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !attributesToPrune.includes(attr));
   });
   return root.toSource(printOptions);

package/node/v6.0.0/list-item-button-prop/list-item-button-prop.js

@@ -26,8 +26,7 @@ function transformer(file, api, options) {
   }).forEach(path => {
     const defaultProps = path.parent.value;
     defaultProps.properties.forEach(property => {
-      var _property$key;
-      if (((_property$key = property.key) == null ? void 0 : _property$key.name) === 'button') {
+      if (property.key?.name === 'button') {
         // Remove the button property from the defaultProps object
         const newListButtonProps = defaultProps.properties.filter(prop => prop.key.name !== 'button');
         const muiListItemButtonNode = j.objectProperty(j.identifier('MuiListItemButton'), j.objectExpression([j.property('init', j.identifier('defaultProps'), j.objectExpression(newListButtonProps))]));

package/node/v6.0.0/styled/test-cases/NestedSpread.actual.js

@@ -4,8 +4,7 @@ const Component = styled('div')(({
   theme,
   ownerState
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
   return {
     overflow: 'visible',
     // Explicitly set the default value to solve a bug on IE11.
@@ -29,7 +28,7 @@ const Component = styled('div')(({
       marginRight: ownerState.size === 'small' ? -3 : -12
     }),
     ...(ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
-      color: palette == null ? void 0 : palette.main,
+      color: palette?.main,
       ...(!ownerState.disableRipple && {
         '&:hover': {
           // The codemod won't handle this case when the variable is not declared in the style argument.

package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js

@@ -3,8 +3,7 @@
 const Component = styled('div')(({
   theme
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
   return {
     // Explicitly set the default value to solve a bug on IE11.
     overflow: 'visible',
@@ -60,7 +59,7 @@ const Component = styled('div')(({
         ownerState
       }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
       style: {
-        color: palette == null ? void 0 : palette.main
+        color: palette?.main
       }
     }, {
       props: ({

package/node/v6.0.0/sx-prop/sx-v6.js

@@ -14,8 +14,7 @@ var _migrateToVariants = require("../../util/migrateToVariants");
 function getCssVarName(node) {
   let varName = '-';
   while (node.type === 'MemberExpression') {
-    var _node$object, _node$property;
-    varName += `-${((_node$object = node.object) == null ? void 0 : _node$object.name) || ((_node$property = node.property) == null ? void 0 : _node$property.name) || 'unknown'}`;
+    varName += `-${node.object?.name || node.property?.name || 'unknown'}`;
     if (node.object.type === 'MemberExpression') {
       node = node.object;
     } else {
@@ -43,7 +42,7 @@ function sxV6(file, api, options) {
    * @param {import('jscodeshift').Identifier} node
    */
   function replaceUndefined(node, replacement = j.nullLiteral()) {
-    if ((node == null ? void 0 : node.type) === 'Identifier' && node.name === 'undefined') {
+    if (node?.type === 'Identifier' && node.name === 'undefined') {
       return replacement;
     }
     return node;
@@ -118,8 +117,7 @@ function sxV6(file, api, options) {
     }
     function rootThemeCallback(data) {
       if (data.root.type === 'ObjectExpression') {
-        var _data$replaceRoot;
-        (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
+        data.replaceRoot?.(buildArrowFunctionAST([j.identifier('theme')], data.root));
       } else if (data.root.type === 'ArrayExpression') {
         data.root.elements.forEach((item, index) => {
           if (item === data.node) {
@@ -137,8 +135,7 @@ function sxV6(file, api, options) {
       if (data.node.type === 'ArrowFunctionExpression') {
         const returnExpression = (0, _getReturnExpression.default)(data.node);
         if (returnExpression) {
-          var _returnExpression$pro, _getObjectKey, _getObjectKey2, _getObjectKey3, _getObjectKey4;
-          if (returnExpression.type === 'MemberExpression' && ((_returnExpression$pro = returnExpression.property) == null ? void 0 : _returnExpression$pro.type) === 'ConditionalExpression') {
+          if (returnExpression.type === 'MemberExpression' && returnExpression.property?.type === 'ConditionalExpression') {
             recurseObjectExpression({
               ...data,
               node: j.conditionalExpression(returnExpression.property.test, {
@@ -151,7 +148,7 @@ function sxV6(file, api, options) {
             });
           } else if (returnExpression.type === 'TemplateLiteral') {
             const firstExpression = returnExpression.expressions[0];
-            if ((firstExpression == null ? void 0 : firstExpression.type) === 'ConditionalExpression') {
+            if (firstExpression?.type === 'ConditionalExpression') {
               recurseObjectExpression({
                 ...data,
                 node: j.conditionalExpression(firstExpression.test, {
@@ -168,9 +165,8 @@ function sxV6(file, api, options) {
                 node: returnExpression
               });
             }
-          } else if (returnExpression.type === 'CallExpression' && ((_getObjectKey = (0, _migrateToVariants.getObjectKey)(returnExpression.callee)) == null ? void 0 : _getObjectKey.name) === 'theme' || returnExpression.type === 'MemberExpression' && ((_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(returnExpression)) == null ? void 0 : _getObjectKey2.name) === 'theme' || returnExpression.type === 'BinaryExpression' && (((_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(returnExpression.left)) == null ? void 0 : _getObjectKey3.name) === 'theme' || ((_getObjectKey4 = (0, _migrateToVariants.getObjectKey)(returnExpression.right)) == null ? void 0 : _getObjectKey4.name) === 'theme')) {
-            var _data$replaceValue;
-            (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, returnExpression);
+          } else if (returnExpression.type === 'CallExpression' && (0, _migrateToVariants.getObjectKey)(returnExpression.callee)?.name === 'theme' || returnExpression.type === 'MemberExpression' && (0, _migrateToVariants.getObjectKey)(returnExpression)?.name === 'theme' || returnExpression.type === 'BinaryExpression' && ((0, _migrateToVariants.getObjectKey)(returnExpression.left)?.name === 'theme' || (0, _migrateToVariants.getObjectKey)(returnExpression.right)?.name === 'theme')) {
+            data.replaceValue?.(returnExpression);
             rootThemeCallback(data);
           } else {
             recurseObjectExpression({
@@ -196,8 +192,7 @@ function sxV6(file, api, options) {
               deleteSelf: () => {
                 (0, _migrateToVariants.removeProperty)(data.node, prop);
                 if (data.node.properties.length === 0) {
-                  var _data$deleteSelf;
-                  (_data$deleteSelf = data.deleteSelf) == null || _data$deleteSelf.call(data);
+                  data.deleteSelf?.();
                 }
               },
               modeStyles
@@ -215,8 +210,7 @@ function sxV6(file, api, options) {
       }
       if (data.node.type === 'SpreadElement') {
         if (data.node.argument.type === 'LogicalExpression') {
-          var _getObjectKey5, _getObjectKey6;
-          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey5 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey5.name : (_getObjectKey6 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey6.name;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)?.name : (0, _migrateToVariants.getObjectKey)(data.node.argument.left)?.name;
           if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
             if (data.node.argument.right.type === 'ObjectExpression') {
               const mode = data.node.argument.left.right.value;
@@ -270,7 +264,7 @@ function sxV6(file, api, options) {
           }
         }
         if (data.node.argument.type === 'ConditionalExpression') {
-          const isSxSpread = data.node.argument.consequent.type === 'Identifier' && data.node.argument.consequent.name === 'sx' || data.node.argument.alternate.type === 'Identifier' && data.node.argument.alternate.name === 'sx';
+          const isSxSpread = data.node.argument.test.type === 'CallExpression' && data.node.argument.test.callee.type === 'MemberExpression' && data.node.argument.test.callee.object.name === 'Array' && data.node.argument.test.callee.property.name === 'isArray' || data.node.argument.consequent.type === 'Identifier' && data.node.argument.consequent.name === 'sx' || data.node.argument.alternate.type === 'Identifier' && data.node.argument.alternate.name === 'sx';
           if (!isSxSpread) {
             recurseObjectExpression({
               ...data,
@@ -286,8 +280,7 @@ function sxV6(file, api, options) {
           }
         }
         if (data.node.argument.type === 'CallExpression') {
-          var _getObjectKey7, _data$node$argument$c;
-          if (((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(data.node.argument.callee)) == null ? void 0 : _getObjectKey7.name) === 'theme' && (_data$node$argument$c = data.node.argument.callee.property) != null && (_data$node$argument$c = _data$node$argument$c.name) != null && _data$node$argument$c.startsWith('apply')) {
+          if ((0, _migrateToVariants.getObjectKey)(data.node.argument.callee)?.name === 'theme' && data.node.argument.callee.property?.name?.startsWith('apply')) {
             const objIndex = data.node.argument.arguments.findIndex(arg => arg.type === 'ObjectExpression');
             recurseObjectExpression({
               ...data,
@@ -306,11 +299,9 @@ function sxV6(file, api, options) {
       }
       if (data.node.type === 'ConditionalExpression') {
         if (data.node.test.type === 'BinaryExpression' || data.node.test.type === 'UnaryExpression' || data.node.test.type === 'Identifier' || data.node.test.type === 'MemberExpression') {
-          var _data$parentNode, _data$node$test, _data$node$test2;
-          if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression' && (((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' || ((_data$node$test2 = data.node.test) == null ? void 0 : _data$node$test2.type) === 'Identifier')) {
+          if (data.parentNode?.type === 'ObjectExpression' && (data.node.test?.type === 'BinaryExpression' || data.node.test?.type === 'Identifier')) {
             if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
               if ((0, _migrateToVariants.isThemePaletteMode)(data.node.test.left)) {
-                var _data$replaceValue2;
                 const consequentKey = (0, _migrateToVariants.getObjectKey)(data.node.consequent);
                 if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
                   const varName = getCssVarName(data.node.consequent);
@@ -329,11 +320,10 @@ function sxV6(file, api, options) {
                   }
                   data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, replaceUndefined(data.node.consequent)));
                 }
-                (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, replaceUndefined(data.node.alternate));
+                data.replaceValue?.(replaceUndefined(data.node.alternate));
                 rootThemeCallback(data);
               } else {
-                var _data$buildStyle, _data$buildStyle2;
-                wrapSxInArray(j.conditionalExpression(data.node.test, (_data$buildStyle = data.buildStyle) == null ? void 0 : _data$buildStyle.call(data, replaceUndefined(data.node.consequent)), (_data$buildStyle2 = data.buildStyle) == null ? void 0 : _data$buildStyle2.call(data, replaceUndefined(data.node.alternate))));
+                wrapSxInArray(j.conditionalExpression(data.node.test, data.buildStyle?.(replaceUndefined(data.node.consequent)), data.buildStyle?.(replaceUndefined(data.node.alternate))));
                 if (data.deleteSelf) {
                   data.deleteSelf();
                 } else {
@@ -345,8 +335,7 @@ function sxV6(file, api, options) {
         }
       }
       if (data.node.type === 'TemplateLiteral') {
-        var _data$parentNode2, _data$node$expression;
-        if (((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression') {
+        if (data.parentNode?.type === 'ObjectExpression') {
           const modeStyles = {};
           data.node.expressions.forEach((expression, index) => {
             if (expression.type === 'MemberExpression') {
@@ -384,15 +373,11 @@ function sxV6(file, api, options) {
               data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
             });
             if (data.key) {
-              var _data$replaceValue3;
-              (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
+              data.replaceValue?.(data.node);
             }
           }
         }
-        if ((_data$node$expression = data.node.expressions) != null && _data$node$expression.some(expression => {
-          var _getObjectKey8, _getObjectKey9;
-          return ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey8.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey9 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey9.name) === 'theme';
-        })) {
+        if (data.node.expressions?.some(expression => (0, _migrateToVariants.getObjectKey)(expression)?.name === 'theme' || expression.type === 'CallExpression' && (0, _migrateToVariants.getObjectKey)(expression.callee)?.name === 'theme')) {
           rootThemeCallback(data);
         }
       }
@@ -409,8 +394,7 @@ function sxV6(file, api, options) {
       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]) && line.endsWith('}')) {
+        if (spaceMatch && line.match(/^\s+/)?.[0] === spaceMatch?.[0] && line.endsWith('}')) {
           isInStyled = false;
           spaceMatch = null;
         }

package/node/v6.0.0/sx-prop/test-cases/sx-condition.actual.js

@@ -2,7 +2,6 @@
 
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _it$images$, _productOffer$ui, _productOffer$ui2;
 /*#__PURE__*/(0, _react.createElement)(Card, {
   ...otherProps,
   ref: ref,
@@ -56,7 +55,7 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
     sizes: imageSizes,
     loading: imageLoading,
-    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    src: it.images[0]?.src,
     alt: it.name,
     style: {
       aspectRatio: '100/55',
@@ -69,11 +68,11 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
       })
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
-    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+    children: productOffer && productOffer.ui?.itemCard && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
       style: {
         ...defaultPromoCodeStyles,
         ...productOffer.style,
-        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+        ...productOffer.ui?.itemCard?.style
       },
       children: productOffer.offerText
     })

package/node/v6.0.0/sx-prop/test-cases/sx-condition.expected.js

@@ -2,7 +2,6 @@
 
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _it$images$, _productOffer$ui, _productOffer$ui2;
 /*#__PURE__*/(0, _react.createElement)(Card, {
   ...otherProps,
   ref: ref,
@@ -54,7 +53,7 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
     sizes: imageSizes,
     loading: imageLoading,
-    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    src: it.images[0]?.src,
     alt: it.name,
     style: {
       aspectRatio: '100/55',
@@ -67,11 +66,11 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
       })
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
-    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+    children: productOffer && productOffer.ui?.itemCard && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
       style: {
         ...defaultPromoCodeStyles,
         ...productOffer.style,
-        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+        ...productOffer.ui?.itemCard?.style
       },
       children: productOffer.offerText
     })

package/node/v6.0.0/sx-prop/test-cases/sx-inheritance.actual.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
+  ...layoutProps,
+  ...slotProps.layout,
+  slots: slots,
+  slotProps: slotProps,
+  sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps.layout.sx])],
+  className: clsx(className, slotProps.layout.className),
+  ref: ref
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(FormControl, {
+  disabled: disabled,
+  id: id,
+  sx: [...(Array.isArray(formControlSx) ? formControlSx : [formControlSx])]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-inheritance.expected.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
+  ...layoutProps,
+  ...slotProps.layout,
+  slots: slots,
+  slotProps: slotProps,
+  sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps.layout.sx])],
+  className: clsx(className, slotProps.layout.className),
+  ref: ref
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(FormControl, {
+  disabled: disabled,
+  id: id,
+  sx: [...(Array.isArray(formControlSx) ? formControlSx : [formControlSx])]
+});

package/node/v6.0.0/system-props/removeSystemProps.js

@@ -134,8 +134,7 @@ const components = ['Box', 'Stack', 'Typography', 'Link', 'Grid'];
  * @param {import('jscodeshift').API} api
  */
 function removeSystemProps(file, api, options) {
-  var _file$path, _file$path2;
-  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
     return file.source;
   }
   const j = api.jscodeshift;
@@ -144,10 +143,7 @@ function removeSystemProps(file, api, options) {
   const deprecatedElements = [];
   const customReplacement = {
     Typography: {
-      matcher: (key, val) => {
-        var _val$value;
-        return key !== 'color' || ((_val$value = val.value) == null ? void 0 : _val$value.includes('.')) && val.value !== 'inherit' || val.value === 'divider';
-      }
+      matcher: (key, val) => key !== 'color' || val.value?.includes('.') && val.value !== 'inherit' || val.value === 'divider'
     },
     Link: {
       matcher: key => key !== 'color'
@@ -181,12 +177,11 @@ function removeSystemProps(file, api, options) {
       }
     }
   }).forEach(el => {
-    var _el$value, _sxNodesArray$;
     const sx = j.objectExpression([]);
-    const elementName = (_el$value = el.value) == null || (_el$value = _el$value.openingElement) == null || (_el$value = _el$value.name) == null ? void 0 : _el$value.name;
+    const elementName = el.value?.openingElement?.name?.name;
     const sxNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name === 'sx');
     const sxNodesArray = sxNodes.nodes() || [];
-    const existingSxValue = (_sxNodesArray$ = sxNodesArray[0]) == null || (_sxNodesArray$ = _sxNodesArray$.value) == null ? void 0 : _sxNodesArray$.expression;
+    const existingSxValue = sxNodesArray[0]?.value?.expression;
     let spreadElement = null;
     el.node.openingElement.attributes.forEach(attr => {
       if (attr.type === 'JSXSpreadAttribute') {
@@ -195,12 +190,11 @@ function removeSystemProps(file, api, options) {
     });
     const attrToPrune = ['sx'];
     el.node.openingElement.attributes.forEach(attr => {
-      var _attr$name, _attr$name2;
-      if (attr.type === 'JSXSpreadAttribute' || !attr.value || !systemProps.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name)) {
+      if (attr.type === 'JSXSpreadAttribute' || !attr.value || !systemProps.includes(attr?.name?.name)) {
         return;
       }
-      const key = attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name;
-      const literal = attr == null ? void 0 : attr.value;
+      const key = attr?.name?.name;
+      const literal = attr?.value;
       const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal;
       const shouldPrune = !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val);
       if (key && val) {
@@ -211,17 +205,14 @@ function removeSystemProps(file, api, options) {
       }
     });
     if (sx.properties.length) {
-      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
-        var _attr$name3;
-        return attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr == null || (_attr$name3 = attr.name) == null ? void 0 : _attr$name3.name);
-      });
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr?.name?.name));
       let finalSx;
       if (!existingSxValue) {
         finalSx = sx;
-      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ObjectExpression') {
+      } else if (existingSxValue?.type === 'ObjectExpression') {
         sx.properties.push(...existingSxValue.properties);
         finalSx = sx;
-      } else if ((existingSxValue == null ? void 0 : existingSxValue.type) === 'ArrayExpression') {
+      } else if (existingSxValue?.type === 'ArrayExpression') {
         existingSxValue.elements = [sx, ...existingSxValue.elements];
         finalSx = existingSxValue;
       } else {