@mui/codemod 6.0.0-alpha.3 → 6.0.0-alpha.4

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

@@ -16,6 +16,21 @@ 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;
+    };
+  }
 
   /**
    *
@@ -252,7 +267,8 @@ function styledV6(file, api, options) {
           }
         }
         recurseObjectExpression({
-          node: objectExpression
+          node: objectExpression,
+          buildStyle: createBuildStyle()
         });
         if (variants.length) {
           objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
@@ -271,6 +287,7 @@ function styledV6(file, api, options) {
                 node: prop.value,
                 parentNode: data.node,
                 key: prop.key,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
                 replaceValue: newValue => {
                   prop.value = newValue;
                 },
@@ -279,7 +296,8 @@ function styledV6(file, api, options) {
             } else {
               recurseObjectExpression((0, _extends2.default)({}, data, {
                 node: prop,
-                parentNode: data.node
+                parentNode: data.node,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle)
               }));
             }
           });
@@ -297,6 +315,8 @@ function styledV6(file, api, options) {
               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') {
@@ -305,6 +325,7 @@ function styledV6(file, api, options) {
                   parentNode: variant.style,
                   props: variant.props,
                   key: prop.key,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
                   replaceValue: newValue => {
                     prop.value = newValue;
                   },
@@ -314,12 +335,14 @@ function styledV6(file, api, options) {
                 recurseObjectExpression((0, _extends2.default)({}, data, {
                   node: prop,
                   parentNode: variant.style,
-                  props: variant.props
+                  props: variant.props,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle)
                 }));
               }
             });
             appendPaletteModeStyles(variant.style, modeStyles);
-            variants.push(buildObjectAST(variant));
+            variant.style = data.buildStyle(variant.style);
+            variants[lastLength - 1] = buildObjectAST(variant);
             removeProperty(data.parentNode, data.node);
           }
           if (data.node.argument.type === 'ConditionalExpression') {
@@ -348,14 +371,10 @@ function styledV6(file, api, options) {
               if (data.props) {
                 props = mergeProps(data.props, props);
               }
-              const styleVal = data.node.consequent;
-              let newStyle = styleVal;
-              if (data.key && (data.key.type === 'Identifier' || data.key.type === 'StringLiteral')) {
-                newStyle = j.objectExpression([j.objectProperty(data.key, styleVal)]);
-              }
+              const styleVal = data.buildStyle(data.node.consequent);
               const variant = {
                 props,
-                style: newStyle
+                style: styleVal
               };
               variants.push(buildObjectAST(variant));
 
@@ -364,14 +383,10 @@ function styledV6(file, api, options) {
               if (data.props) {
                 props2 = mergeProps(data.props, props2);
               }
-              const styleVal2 = data.node.alternate;
-              let newStyle2 = styleVal2;
-              if (data.key && (data.key.type === 'Identifier' || data.key.type === 'StringLiteral')) {
-                newStyle2 = j.objectExpression([j.objectProperty(data.key, styleVal2)]);
-              }
+              const styleVal2 = data.buildStyle(data.node.alternate);
               const variant2 = {
                 props: props2,
-                style: newStyle2
+                style: styleVal2
               };
               variants.push(buildObjectAST(variant2));
               if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
@@ -400,7 +415,7 @@ function styledV6(file, api, options) {
               recurseObjectExpression((0, _extends2.default)({}, data, {
                 node: expression,
                 parentNode: data.parentNode,
-                key: data.key,
+                buildStyle: createBuildStyle(data.key, data.buildStyle),
                 replaceValue: newValue => {
                   data.node.expressions[index] = newValue;
                 },
@@ -425,7 +440,7 @@ function styledV6(file, api, options) {
           data.node.object.properties.forEach(prop => {
             variants.push(buildObjectAST({
               props: j.objectExpression([j.objectProperty(getIdentifierKey(data.node.property), j.stringLiteral(prop.key.name))]),
-              style: j.objectExpression([j.objectProperty(data.key, prop.value)])
+              style: data.buildStyle(prop.value)
             }));
           });
           removeProperty(data.parentNode, data.node);

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

@@ -51,4 +51,28 @@ const ImageListRoot = styled('ul')(({
   }, ownerState.variant === 'masonry' && {
     display: 'block'
   });
-});
+});
+const ImageListItemRoot = styled('li')(({
+  ownerState
+}) => ({
+  display: 'block',
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: (0, _extends2.default)({
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    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
+      })
+    }
+  })
+}));

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

@@ -101,4 +101,44 @@ const ImageListRoot = styled('ul')({
       display: 'block'
     }
   }]
+});
+const ImageListItemRoot = styled('li')({
+  display: 'block',
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    '&:hover': {
+      '&[data-shape="circular"]': {
+        borderRadius: '50%'
+      }
+    }
+  },
+  variants: [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        height: 'auto',
+        flexGrow: 1
+      }
+    }
+  }, {
+    props: {
+      variant: 'unique'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        '&:hover': {
+          '&[data-shape="circular"]': {
+            height: 'auto',
+            flexGrow: 1
+          }
+        }
+      }
+    }
+  }]
 });

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

@@ -18,6 +18,13 @@ const LinearProgressBar1 = styled('span', {
   theme
 }) => ({
   variants: [{
+    props: {
+      variant: 'buffer'
+    },
+    style: {
+      '&:hover': {}
+    }
+  }, {
     props: ({
       variant,
       ownerState
@@ -53,13 +60,6 @@ const LinearProgressBar1 = styled('span', {
         backgroundColor: 'currentColor'
       }
     }
-  }, {
-    props: {
-      variant: 'buffer'
-    },
-    style: {
-      '&:hover': {}
-    }
   }, {
     props: ({
       ownerState,

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

@@ -59,6 +59,13 @@ const Component = styled('div')(({
       style: {
         marginRight: -12
       }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
+      style: {
+        color: palette == null ? void 0 : palette.main
+      }
     }, {
       props: ({
         ownerState
@@ -73,13 +80,6 @@ const Component = styled('div')(({
           }
         })
       }
-    }, {
-      props: ({
-        ownerState
-      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
-      style: {
-        color: palette == null ? void 0 : palette.main
-      }
     }]
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.4",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",