@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

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

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = styledV6;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const MAX_DEPTH = 20;
-
+var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -16,204 +14,6 @@ function styledV6(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
-  function createBuildStyle(key, upperBuildStyle) {
-    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') {
-          return upperBuildStyle(j.objectExpression([(0, _extends2.default)({}, j.objectProperty(key, styleExpression), {
-            computed: true
-          })]));
-        }
-      }
-      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
-    };
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getIdentifierKey(node) {
-    if (node.type === 'MemberExpression') {
-      return node.property;
-    }
-    return node;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getObjectKey(node) {
-    let tempNode = (0, _extends2.default)({}, node);
-    while (tempNode.type === 'UnaryExpression') {
-      tempNode = tempNode.argument;
-    }
-    while (tempNode.type === 'MemberExpression') {
-      tempNode = tempNode.object;
-    }
-    return tempNode;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
-   * @param {import('ast-types').namedTypes.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 {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
-   */
-  function inverseBinaryExpression(node) {
-    if (node.type === 'Identifier') {
-      return j.unaryExpression('!', node);
-    }
-    if (node.operator === '===') {
-      return (0, _extends2.default)({}, node, {
-        operator: '!=='
-      });
-    }
-    if (node.operator === '!==') {
-      return (0, _extends2.default)({}, 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;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} node
-   */
-  function removeProperty(parentNode, child) {
-    if (parentNode) {
-      if (parentNode.type === 'ObjectExpression') {
-        parentNode.properties = parentNode.properties.filter(prop => prop !== child && prop.value !== child);
-      }
-    }
-  }
-  function buildObjectAST(jsObject) {
-    const result = j.objectExpression([]);
-    Object.entries(jsObject).forEach(([key, value]) => {
-      result.properties.push(j.objectProperty(j.identifier(key), value));
-    });
-    return result;
-  }
-  function buildArrowFunctionAST(params, body) {
-    return j.arrowFunctionExpression([j.objectPattern([...params].map(k => (0, _extends2.default)({}, j.objectProperty(j.identifier(k), j.identifier(k)), {
-      shorthand: true
-    })))], body);
-  }
-
-  /**
-   *
-   * @param {{ properties: any[] }} node
-   * @param {Record<string, any[]>} 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), j.objectExpression(objectStyles)])));
-    });
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
-   */
-  function buildProps(node) {
-    const properties = [];
-    const variables = new Set();
-    let isAllEqual = true;
-    let tempNode = (0, _extends2.default)({}, 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 = (0, _extends2.default)({}, 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));
-  }
-  function isThemePaletteMode(node) {
-    return node.type === 'MemberExpression' && node.object.type === 'MemberExpression' && node.object.object.name === 'theme' && node.object.property.name === 'palette' && node.property.name === 'mode';
-  }
   let shouldTransform = false;
   root.find(j.CallExpression).forEach(path => {
     const styles = [];
@@ -238,220 +38,7 @@ function styledV6(file, api, options) {
     if (!shouldTransform && styles.length > 0) {
       shouldTransform = true;
     }
-
-    // 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);
-          });
-        }
-      });
-      const variants = [];
-      if (style.body.type === 'LogicalExpression') {
-        if (style.params[0] && 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.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((0, _extends2.default)({}, data, {
-                node: prop.value,
-                parentNode: data.node,
-                key: prop.key,
-                buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                replaceValue: newValue => {
-                  prop.value = newValue;
-                },
-                modeStyles
-              }));
-            } else {
-              recurseObjectExpression((0, _extends2.default)({}, 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;
-            const paramName = (_getObjectKey = getObjectKey(data.node.argument.left)) == null ? void 0 : _getObjectKey.name;
-            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 === '...'`
-            variant.style.properties.forEach(prop => {
-              if (prop.type === 'ObjectProperty') {
-                recurseObjectExpression((0, _extends2.default)({}, 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((0, _extends2.default)({}, 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((0, _extends2.default)({}, 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') {
-            var _getObjectKey2, _data$parentNode2, _data$node$test;
-            let leftName = (_getObjectKey2 = getObjectKey(data.node.test)) == null ? void 0 : _getObjectKey2.name;
-            if (data.node.test.left) {
-              var _getObjectKey3;
-              leftName = (_getObjectKey3 = getObjectKey(data.node.test.left)) == null ? void 0 : _getObjectKey3.name;
-            }
-            if (data.node.test.argument) {
-              var _getObjectKey4;
-              leftName = (_getObjectKey4 = getObjectKey(data.node.test.argument)) == null ? void 0 : _getObjectKey4.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((0, _extends2.default)({}, 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 = (0, _extends2.default)({}, data.node, {
-                  expressions: data.node.expressions.map(expression => (0, _extends2.default)({}, 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 && 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');
-        }
-      });
-    });
+    (0, _migrateToVariants.default)(j, styles);
 
     // Replace arrow function with object expression if the arg properties is empty
     args.forEach((arg, index) => {

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

@@ -1,78 +1,89 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const FormHelperTextRoot = styled('p')(({
   theme,
   ownerState,
   disabled
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   [`&.${formHelperTextClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-  marginTop: 6
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
-  marginTop: 6
-}, ownerState.size !== 'small' && {
-  marginBottom: 4
-}, ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
-  marginBottom: 6
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
-}, !ownerState.contained && {
-  marginTop: 14,
-  marginBottom: 14
-}, !!ownerState.disabled && {
-  opacity: 0.5
+  },
+  ...(ownerState.size === 'small' && {
+    marginTop: 4
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    marginTop: 6
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
+    marginTop: 6
+  }),
+  ...(ownerState.size !== 'small' && {
+    marginBottom: 4
+  }),
+  ...(ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
+    marginBottom: 6
+  }),
+  ...(ownerState.contained && {
+    marginLeft: 14,
+    marginRight: 14
+  }),
+  ...(!ownerState.contained && {
+    marginTop: 14,
+    marginBottom: 14
+  }),
+  ...(!!ownerState.disabled && {
+    opacity: 0.5
+  })
 }));
 const Component = styled.div(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.caption, ownerState.size === 'small' && {
-  marginTop: (theme.vars || theme).spacing(1)
+}) => ({
+  ...theme.typography.caption,
+  ...(ownerState.size === 'small' && {
+    marginTop: (theme.vars || theme).spacing(1)
+  })
 }));
 const ImageListRoot = styled('ul')(({
   ownerState
 }) => {
-  return (0, _extends2.default)({
+  return {
     display: 'grid',
     overflowY: 'auto',
     listStyle: 'none',
     padding: 0,
     // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch'
-  }, ownerState.variant === 'masonry' && {
-    display: 'block'
-  });
+    WebkitOverflowScrolling: 'touch',
+    ...(ownerState.variant === 'masonry' && {
+      display: 'block'
+    })
+  };
 });
 const ImageListItemRoot = styled('li')(({
   ownerState
 }) => ({
   display: 'block',
   position: 'relative',
-  [`& .${imageListItemClasses.img}`]: (0, _extends2.default)({
+  [`& .${imageListItemClasses.img}`]: {
     objectFit: 'cover',
     width: '100%',
     height: '100%',
-    display: 'block'
-  }, ownerState.variant === 'standard' && {
-    height: 'auto',
-    flexGrow: 1
-  }, {
+    display: 'block',
+    ...(ownerState.variant === 'standard' && {
+      height: 'auto',
+      flexGrow: 1
+    }),
     '&:hover': {
-      '&[data-shape="circular"]': (0, _extends2.default)({
-        borderRadius: '50%'
-      }, ownerState.variant === 'unique' && {
-        height: 'auto',
-        flexGrow: 1
-      })
+      '&[data-shape="circular"]': {
+        borderRadius: '50%',
+        ...(ownerState.variant === 'unique' && {
+          height: 'auto',
+          flexGrow: 1
+        })
+      }
     }
-  })
+  }
 }));

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

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const FormHelperTextRoot = styled('p')(({
   theme
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   [`&.${formHelperTextClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled
@@ -76,7 +74,8 @@ const FormHelperTextRoot = styled('p')(({
 }));
 const Component = styled.div(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.caption, {
+}) => ({
+  ...theme.typography.caption,
   variants: [{
     props: {
       size: 'small'