@mui/codemod 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/util/migrateToVariants.js

@@ -0,0 +1,549 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = migrateToVariants;
+exports.getCreateBuildStyle = exports.getBuildArrowFunctionAST = exports.getAppendPaletteModeStyles = void 0;
+exports.getIdentifierKey = getIdentifierKey;
+exports.getObjectKey = getObjectKey;
+exports.getObjectToArrowFunction = void 0;
+exports.isThemePaletteMode = isThemePaletteMode;
+exports.removeProperty = removeProperty;
+const MAX_DEPTH = 20;
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ * @returns
+ */
+const getCreateBuildStyle = j => function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
+  if (applyStylesMode) {
+    upperBuildStyle = styleExpression => j.objectExpression([j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(applyStylesMode), styleExpression]))]);
+  }
+  return function buildStyle(styleExpression) {
+    if (key) {
+      if (key.type === 'Identifier' || key.type === 'StringLiteral') {
+        return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
+      }
+      if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
+        return upperBuildStyle(j.objectExpression([{
+          ...j.objectProperty(key, styleExpression),
+          computed: true
+        }]));
+      }
+    }
+    return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+  };
+};
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+exports.getCreateBuildStyle = getCreateBuildStyle;
+const getAppendPaletteModeStyles = j =>
+/**
+ *
+ * @param {{ properties: any[] }} node
+ * @param {Record<string, any[] | import('jscodeshift').ObjectExpression>} modeStyles
+ */
+function appendPaletteModeStyles(node, modeStyles) {
+  Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+    node.properties.push(j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(mode), Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles])));
+  });
+};
+
+/**
+ *
+ * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+exports.getAppendPaletteModeStyles = getAppendPaletteModeStyles;
+function getIdentifierKey(node) {
+  if (node.type === 'MemberExpression') {
+    return node.property;
+  }
+  return node;
+}
+
+/**
+ *
+ * @param {import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+function getObjectKey(node) {
+  let tempNode = {
+    ...node
+  };
+  while (tempNode.type === 'UnaryExpression') {
+    tempNode = tempNode.argument;
+  }
+  while (tempNode.type === 'MemberExpression' || tempNode.type === 'OptionMemberExpression') {
+    tempNode = tempNode.object;
+  }
+  return tempNode;
+}
+
+/**
+ *
+ * @param {import('jscodeshift').ObjectExpression} node
+ */
+function removeProperty(parentNode, child) {
+  if (parentNode) {
+    if (parentNode.type === 'ObjectExpression') {
+      parentNode.properties = parentNode.properties.filter(prop => prop !== child && prop.value !== child);
+    }
+  }
+}
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+const getBuildArrowFunctionAST = j =>
+/**
+ *
+ * @param {Set<string> | import('jscodeshift').Expression[]} params
+ * @param {import('jscodeshift').BlockStatement} body
+ * @returns
+ */
+function buildArrowFunctionAST(params, body) {
+  const destructured = [...params].every(param => typeof param === 'string');
+  return j.arrowFunctionExpression(destructured ? [j.objectPattern([...params].map(k => ({
+    ...j.objectProperty(j.identifier(k), j.identifier(k)),
+    shorthand: true
+  })))] : params, body);
+};
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+exports.getBuildArrowFunctionAST = getBuildArrowFunctionAST;
+const getObjectToArrowFunction = j => {
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  return (
+    /**
+     *
+     * @param {import('jscodeshift').ObjectExpression} objectExpression
+     * @param {import('jscodeshift').BinaryExpression} addtional
+     */
+    function objectToArrowFunction(objectExpression, addtional) {
+      const paramKeys = new Set();
+      let left;
+      objectExpression.properties.forEach((prop, index) => {
+        paramKeys.add(prop.key.name);
+        const result = j.binaryExpression('===', prop.key, prop.value);
+        if (index === 0) {
+          left = result;
+        } else {
+          left = j.logicalExpression('&&', left, result);
+        }
+      });
+      if (addtional) {
+        paramKeys.add(getObjectKey(addtional.left).name);
+      }
+      return buildArrowFunctionAST(paramKeys, addtional ? j.logicalExpression('&&', left, addtional) : left);
+    }
+  );
+};
+
+/**
+ *
+ * @param {undefined | null | import('jscodeshift').Expression} node
+ */
+exports.getObjectToArrowFunction = getObjectToArrowFunction;
+function isThemePaletteMode(node) {
+  return (node == null ? void 0 : node.type) === 'MemberExpression' && node.object.type === 'MemberExpression' && node.object.object.name === 'theme' && node.object.property.name === 'palette' && node.property.name === 'mode';
+}
+
+/**
+ *
+ * @param {import('jscodeshift').API['j']} j
+ * @param {any[]} styles
+ */
+function migrateToVariants(j, styles) {
+  const createBuildStyle = getCreateBuildStyle(j);
+  const appendPaletteModeStyles = getAppendPaletteModeStyles(j);
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  const objectToArrowFunction = getObjectToArrowFunction(j);
+
+  /**
+   *
+   * @param {import('jscodeshift').Identifier | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
+   */
+  function inverseBinaryExpression(node) {
+    if (node.type === 'Identifier' || node.type === 'MemberExpression') {
+      return j.unaryExpression('!', node);
+    }
+    if (node.operator === '===') {
+      return {
+        ...node,
+        operator: '!=='
+      };
+    }
+    if (node.operator === '!==') {
+      return {
+        ...node,
+        operator: '==='
+      };
+    }
+    if (node.operator === '!') {
+      var _node$argument;
+      if (((_node$argument = node.argument) == null ? void 0 : _node$argument.operator) === '!') {
+        return node.argument;
+      }
+      return j.unaryExpression('!', node);
+    }
+    return node;
+  }
+  function buildObjectAST(jsObject) {
+    const result = j.objectExpression([]);
+    Object.entries(jsObject).forEach(([key, value]) => {
+      result.properties.push(j.objectProperty(j.identifier(key), value));
+    });
+    return result;
+  }
+
+  /**
+   *
+   * @param {import('jscodeshift').LogicalExpression | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
+   */
+  function buildProps(node) {
+    const properties = [];
+    const variables = new Set();
+    let isAllEqual = true;
+    let tempNode = {
+      ...node
+    };
+    function assignProperties(_node) {
+      if (_node.type === 'BinaryExpression') {
+        variables.add(getObjectKey(_node.left).name);
+        if (_node.operator === '===') {
+          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+        } else {
+          isAllEqual = false;
+        }
+      }
+      if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
+        isAllEqual = false;
+        variables.add(getObjectKey(_node).name);
+      }
+      if (_node.type === 'UnaryExpression') {
+        isAllEqual = false;
+        if (_node.argument.type === 'UnaryExpression') {
+          // handle `!!variable`
+          variables.add(getObjectKey(_node.argument.argument).name);
+        } else {
+          // handle `!variable`
+          variables.add(getObjectKey(_node.argument).name);
+        }
+      }
+    }
+    let counter = 0;
+    if (tempNode.type !== 'LogicalExpression') {
+      assignProperties(tempNode);
+    } else {
+      while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
+        counter += 1;
+        if (tempNode.operator !== '&&') {
+          isAllEqual = false;
+        }
+        assignProperties(tempNode.right);
+        if (tempNode.left.type !== 'LogicalExpression') {
+          assignProperties(tempNode.left);
+          break;
+        }
+        tempNode = {
+          ...tempNode.left
+        };
+      }
+    }
+    if (!isAllEqual) {
+      return buildArrowFunctionAST(variables, node);
+    }
+    return j.objectExpression(properties);
+  }
+  function mergeProps(parentProps, currentProps) {
+    if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
+      return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
+    }
+    const parentArrow = parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
+    const currentArrow = currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
+    const variables = new Set();
+    [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach(param => {
+      variables.add(param.key.name);
+    });
+    return buildArrowFunctionAST(variables, j.logicalExpression('&&', parentArrow.body, currentArrow.body));
+  }
+
+  // 2. Find logical spread expressions to convert to variants
+  styles.forEach(style => {
+    const parameters = new Set();
+    style.params.forEach(param => {
+      if (param.type === 'ObjectPattern') {
+        param.properties.forEach(prop => {
+          parameters.add(prop.key.name);
+        });
+      }
+      if (param.type === 'Identifier') {
+        parameters.add(param.name);
+      }
+    });
+    const variants = [];
+    if (style.body.type === 'LogicalExpression') {
+      if (style.params[0] && (style.params[0].type === 'Identifier' || style.params[0].type === 'ObjectPattern' && style.params[0].properties.some(prop => prop.key.name !== 'theme'))) {
+        // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
+        style.body = j.objectExpression([j.objectProperty(j.identifier('variants'), j.arrayExpression([j.objectExpression([j.objectProperty(j.identifier('props'), buildProps(style.body.left)), j.objectProperty(j.identifier('style'), style.body.right)])]))]);
+      }
+    } else if (style.body.type === 'ConditionalExpression') {
+      // skip ConditionalExpression
+    } else {
+      let objectExpression = style.body;
+      let counter = 0;
+      while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
+        counter += 1;
+        if (objectExpression.type === 'BlockStatement') {
+          objectExpression = objectExpression.body.find(item => item.type === 'ReturnStatement').argument;
+        }
+      }
+      recurseObjectExpression({
+        node: objectExpression,
+        buildStyle: createBuildStyle()
+      });
+      if (variants.length) {
+        objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
+          const props = variant.properties.find(prop => prop.key.name === 'props');
+          const styleVal = variant.properties.find(prop => prop.key.name === 'style');
+          return props && styleVal && (!styleVal.value.properties || styleVal.value.properties.length > 0) && (props.value.type === 'ArrowFunctionExpression' || props.value.properties.length > 0);
+        }))));
+      }
+    }
+    function recurseObjectExpression(data) {
+      if (data.node.type === 'ObjectExpression') {
+        const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+        data.node.properties.forEach(prop => {
+          if (prop.type === 'ObjectProperty') {
+            recurseObjectExpression({
+              ...data,
+              node: prop.value,
+              parentNode: data.node,
+              key: prop.key,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              replaceValue: newValue => {
+                prop.value = newValue;
+              },
+              modeStyles
+            });
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: prop,
+              parentNode: data.node,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle)
+            });
+          }
+        });
+        appendPaletteModeStyles(data.node, modeStyles);
+      }
+      if (data.node.type === 'SpreadElement') {
+        if (data.node.argument.type === 'LogicalExpression') {
+          var _getObjectKey, _getObjectKey2;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey = getObjectKey(data.node.argument.left.left)) == null ? void 0 : _getObjectKey.name : (_getObjectKey2 = getObjectKey(data.node.argument.left)) == null ? void 0 : _getObjectKey2.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;
+              data.node.argument.right.properties.forEach(prop => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: data.node.argument.right,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                    replaceValue: newValue => {
+                      prop.value = newValue;
+                    }
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: data.node.argument.right,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode)
+                  });
+                }
+              });
+              appendPaletteModeStyles(data.parentNode, {
+                [mode]: data.node.argument.right
+              });
+            }
+            removeProperty(data.parentNode, data.node);
+            return;
+          }
+          if (paramName && !parameters.has(paramName)) {
+            return;
+          }
+          const scopeProps = buildProps(data.node.argument.left);
+          const variant = {
+            props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
+            style: data.node.argument.right
+          };
+          const lastLength = variants.push({}); // preserve the order of the recursive calls
+
+          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+          if (variant.style.type === 'ObjectExpression') {
+            variant.style.properties.forEach(prop => {
+              if (prop.type === 'ObjectProperty') {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop.value,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  key: prop.key,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                  replaceValue: newValue => {
+                    prop.value = newValue;
+                  },
+                  modeStyles
+                });
+              } else {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle)
+                });
+              }
+            });
+          }
+          appendPaletteModeStyles(variant.style, modeStyles);
+          variant.style = data.buildStyle(variant.style);
+          variants[lastLength - 1] = buildObjectAST(variant);
+          removeProperty(data.parentNode, data.node);
+        }
+        if (data.node.argument.type === 'ConditionalExpression') {
+          recurseObjectExpression({
+            ...data,
+            node: data.node.argument,
+            parentNode: data.node
+          });
+          removeProperty(data.parentNode, data.node);
+        }
+      }
+      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 _getObjectKey3, _data$parentNode2, _data$node$test;
+          let leftName = (_getObjectKey3 = getObjectKey(data.node.test)) == null ? void 0 : _getObjectKey3.name;
+          if (data.node.test.left) {
+            var _getObjectKey4;
+            leftName = (_getObjectKey4 = getObjectKey(data.node.test.left)) == null ? void 0 : _getObjectKey4.name;
+          }
+          if (data.node.test.argument) {
+            var _getObjectKey5;
+            leftName = (_getObjectKey5 = getObjectKey(data.node.test.argument)) == null ? void 0 : _getObjectKey5.name;
+          }
+          if (parameters.has(leftName) && leftName !== 'theme') {
+            var _data$parentNode;
+            let props = buildProps(data.node.test);
+            if (data.props) {
+              props = mergeProps(data.props, props);
+            }
+            const styleVal = data.buildStyle(data.node.consequent);
+            const variant = {
+              props,
+              style: styleVal
+            };
+            variants.push(buildObjectAST(variant));
+
+            // create another variant with inverted condition
+            let props2 = buildProps(inverseBinaryExpression(data.node.test));
+            if (data.props) {
+              props2 = mergeProps(data.props, props2);
+            }
+            const styleVal2 = data.buildStyle(data.node.alternate);
+            const variant2 = {
+              props: props2,
+              style: styleVal2
+            };
+            variants.push(buildObjectAST(variant2));
+            if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
+              removeProperty(data.parentNode, data.node);
+            }
+          }
+          if (leftName === 'theme' && ((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression' && ((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' && isThemePaletteMode(data.node.test.left)) {
+            if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
+              var _data$replaceValue;
+              if (data.modeStyles) {
+                if (!data.modeStyles[data.node.test.right.value]) {
+                  data.modeStyles[data.node.test.right.value] = [];
+                }
+                data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, data.node.consequent));
+              }
+              (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, data.node.alternate);
+            }
+          }
+        }
+      }
+      if (data.node.type === 'TemplateLiteral') {
+        var _data$parentNode3;
+        if (((_data$parentNode3 = data.parentNode) == null ? void 0 : _data$parentNode3.type) === 'ObjectExpression') {
+          const modeStyles = {};
+          data.node.expressions.forEach((expression, index) => {
+            recurseObjectExpression({
+              ...data,
+              node: expression,
+              parentNode: data.parentNode,
+              buildStyle: createBuildStyle(data.key, data.buildStyle),
+              replaceValue: newValue => {
+                data.node.expressions[index] = newValue;
+              },
+              modeStyles
+            });
+          });
+          if (data.modeStyles) {
+            Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+              const clonedNode = {
+                ...data.node,
+                expressions: data.node.expressions.map(expression => ({
+                  ...expression
+                }))
+              };
+              clonedNode.expressions = objectStyles.map(item => item.value);
+              if (!data.modeStyles[mode]) {
+                data.modeStyles[mode] = [];
+              }
+              data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+            });
+            if (data.key) {
+              var _data$replaceValue2;
+              // to remove the arrow function
+              // { ...: theme => `1px solid...` } to { ...: `1px solid...` }
+              (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node);
+            }
+          }
+        }
+      }
+      if (data.key && data.key.type === 'Identifier' && data.node.type === 'MemberExpression' && data.node.object.type === 'ObjectExpression' && parameters.has(getObjectKey(data.node.property).name)) {
+        data.node.object.properties.forEach(prop => {
+          variants.push(buildObjectAST({
+            props: j.objectExpression([j.objectProperty(getIdentifierKey(data.node.property), j.stringLiteral(prop.key.name))]),
+            style: data.buildStyle(prop.value)
+          }));
+        });
+        removeProperty(data.parentNode, data.node);
+      }
+    }
+    style.params.forEach(param => {
+      if (param.type === 'ObjectPattern') {
+        param.properties = param.properties.filter(prop => prop.key.name === 'theme');
+      }
+    });
+    if (style.body.type === 'ObjectExpression') {
+      // Remove empty `...theme.applyStyles('...', {})`
+      style.body.properties = style.body.properties.filter(prop => {
+        var _prop$argument, _prop$argument2, _prop$argument3;
+        if (((_prop$argument = prop.argument) == null || (_prop$argument = _prop$argument.callee) == null || (_prop$argument = _prop$argument.object) == null ? void 0 : _prop$argument.name) === 'theme' && typeof ((_prop$argument2 = prop.argument) == null || (_prop$argument2 = _prop$argument2.arguments[0]) == null ? void 0 : _prop$argument2.value) === 'string' && !((_prop$argument3 = prop.argument) != null && (_prop$argument3 = _prop$argument3.arguments) != null && (_prop$argument3 = _prop$argument3[1]) != null && (_prop$argument3 = _prop$argument3.properties) != null && _prop$argument3.length)) {
+          return false;
+        }
+        return true;
+      });
+    }
+  });
+}

package/node/v5.0.0/badge-overlap-value.test/actual.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
@@ -31,9 +29,10 @@ var _jsxRuntime = require("react/jsx-runtime");
       '& .MuiBadge-anchorOriginBottomLeftCircle': {}
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
-    classes: (0, _extends2.default)({}, badgeClasses, {
+    classes: {
+      ...badgeClasses,
       badge: badgeClasses.badge
-    }),
+    },
     children: icon
   })]
 });

package/node/v5.0.0/badge-overlap-value.test/expected.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
@@ -31,9 +29,10 @@ var _jsxRuntime = require("react/jsx-runtime");
       '& .MuiBadge-anchorOriginBottomLeftCircular': {}
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
-    classes: (0, _extends2.default)({}, badgeClasses, {
+    classes: {
+      ...badgeClasses,
       badge: badgeClasses.badge
-    }),
+    },
     children: icon
   })]
 });

package/node/v5.0.0/base-remove-component-prop.test/actual.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Input = _interopRequireDefault(require("@mui/material/Input"));
 var _Input2 = _interopRequireDefault(require("@mui/base/Input"));
 var _Switch = _interopRequireDefault(require("@mui/base/Switch"));
@@ -15,9 +14,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
   component: CustomRoot
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, (0, _extends2.default)({
-  component: CustomRoot
-}, others));
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
+  component: CustomRoot,
+  ...others
+});
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
   component: CustomRoot,
   randomProp: "1",

package/node/v5.0.0/base-remove-component-prop.test/expected.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Input = _interopRequireDefault(require("@mui/material/Input"));
 var _Input2 = _interopRequireDefault(require("@mui/base/Input"));
 var _Switch = _interopRequireDefault(require("@mui/base/Switch"));
@@ -17,11 +16,12 @@ var _jsxRuntime = require("react/jsx-runtime");
     root: CustomRoot
   }
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, (0, _extends2.default)({
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input2.default, {
   slots: {
     root: CustomRoot
-  }
-}, others));
+  },
+  ...others
+});
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
   slots: {
     root: CustomRoot

package/node/v5.0.0/base-remove-unstyled-suffix.js

@@ -15,12 +15,12 @@ function transformer(file, api) {
     node
   }) => {
     const sourceVal = node.source.value;
-    if (sourceVal.startsWith('@mui/base')) {
-      node.source.value = sourceVal.replace(/unstyled/im, '');
-      node.source.raw = sourceVal.replace(/unstyled/im, '');
-    }
     return sourceVal.startsWith('@mui/base');
   }).forEach(path => {
+    const sourceVal = path.node.source.value;
+    if (sourceVal.startsWith('@mui/base')) {
+      path.node.source = j.stringLiteral(sourceVal.replace(/unstyled/im, ''));
+    }
     const specifiers = [];
     path.node.specifiers.forEach(elementNode => {
       var _elementNode$imported;

package/node/v5.0.0/box-sx-prop.test/actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BoxComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _Button2 = _interopRequireDefault(require("@material-ui/core/Button"));
@@ -34,8 +33,9 @@ function BoxComponent(props) {
         component: "span",
         children: "Save"
       }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, (0, _extends2.default)({
-      p: [1, 2, 4]
-    }, props))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      p: [1, 2, 4],
+      ...props
+    })]
   });
 }