mui · siriwatknp · Apr 22, 2024 · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
@@ -9,6 +9,27 @@ export default function styledV6(file, api, options) {
   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([
+              {
+                ...j.objectProperty(key, styleExpression),
+                computed: true,
+              },
+            ]),
+          );
+        }
+      }
+      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+    };
+  }
+
   /**
    *
    * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
@@ -309,7 +330,7 @@ export default function styledV6(file, api, options) {
           }
         }
 
-        recurseObjectExpression({ node: objectExpression });
+        recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() });
 
         if (variants.length) {
           objectExpression.properties.push(
@@ -343,13 +364,19 @@ export default 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;
                 },
                 modeStyles,
               });
             } else {
-              recurseObjectExpression({ ...data, node: prop, parentNode: data.node });
+              recurseObjectExpression({
+                ...data,
+                node: prop,
+                parentNode: data.node,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              });
             }
           });
           appendPaletteModeStyles(data.node, modeStyles);
@@ -367,6 +394,8 @@ export default function styledV6(file, api, options) {
               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') {
@@ -376,6 +405,7 @@ export default 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;
                   },
@@ -387,15 +417,21 @@ export default function styledV6(file, api, options) {
                   node: prop,
                   parentNode: variant.style,
                   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') {
-            recurseObjectExpression({ ...data, node: data.node.argument, parentNode: data.node });
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument,
+              parentNode: data.node,
+            });
             removeProperty(data.parentNode, data.node);
           }
         }
@@ -417,17 +453,10 @@ export default 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));
 
@@ -436,17 +465,10 @@ export default 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?.type === 'ObjectExpression') {
@@ -484,7 +506,7 @@ export default function styledV6(file, api, options) {
                 ...data,
                 node: expression,
                 parentNode: data.parentNode,
-                key: data.key,
+                buildStyle: createBuildStyle(data.key, data.buildStyle),
                 replaceValue: (newValue) => {
                   data.node.expressions[index] = newValue;
                 },
@@ -523,7 +545,7 @@ export default function styledV6(file, api, options) {
                     j.stringLiteral(prop.key.name),
                   ),
                 ]),
-                style: j.objectExpression([j.objectProperty(data.key, prop.value)]),
+                style: data.buildStyle(prop.value),
               }),
             );
           });

diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.actual.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.actual.js
@@ -58,3 +58,27 @@ const ImageListRoot = styled('ul')(({ ownerState }) => {
     }),
   };
 });
+
+const ImageListItemRoot = styled('li')(({ ownerState }) => ({
+  display: 'block',
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    ...(ownerState.variant === 'standard' && {
+      height: 'auto',
+      flexGrow: 1,
+    }),
+    '&:hover': {
+      '&[data-shape="circular"]': {
+        borderRadius: '50%',
+        ...(ownerState.variant === 'unique' && {
+          height: 'auto',
+          flexGrow: 1,
+        }),
+      },
+    },
+  },
+}));
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.expected.js
@@ -117,3 +117,44 @@ const ImageListRoot = styled('ul')({
     }
   }]
 });
+
+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,
+          }
+        }
+      }
+    }
+  }]
+}));
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js
@@ -17,6 +17,13 @@ const LinearProgressBar1 = styled('span', {
   theme
 }) => ({
   variants: [{
+    props: {
+      variant: 'buffer'
+    },
+    style: {
+      '&:hover': {}
+    }
+  }, {
     props: (
       {
         variant,
@@ -56,13 +63,6 @@ const LinearProgressBar1 = styled('span', {
             backgroundColor: 'currentColor',
           }
     }
-  }, {
-    props: {
-      variant: 'buffer'
-    },
-    style: {
-      '&:hover': {}
-    }
   }, {
     props: (
       {

diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/NestedSpread.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/NestedSpread.expected.js
@@ -62,6 +62,16 @@ const Component = styled('div')(({
       style: {
         marginRight: -12
       }
+    }, {
+      props: (
+        {
+          ownerState
+        }
+      ) => ownerState.color !== 'inherit' &&
+        ownerState.color !== 'default',
+      style: {
+        color: palette?.main
+      }
     }, {
       props: (
         {
@@ -84,16 +94,6 @@ const Component = styled('div')(({
           },
         },
       }
-    }, {
-      props: (
-        {
-          ownerState
-        }
-      ) => ownerState.color !== 'inherit' &&
-        ownerState.color !== 'default',
-      style: {
-        color: palette?.main
-      }
     }]
   };
 });
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.js b/packages/mui-material/src/FormHelperText/FormHelperText.js
@@ -41,7 +41,7 @@ const FormHelperTextRoot = styled('p', {
       ownerState.filled && styles.filled,
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   color: (theme.vars || theme).palette.text.secondary,
   ...theme.typography.caption,
   textAlign: 'left',
@@ -55,13 +55,23 @@ const FormHelperTextRoot = styled('p', {
   [`&.${formHelperTextClasses.error}`]: {
     color: (theme.vars || theme).palette.error.main,
   },
-  ...(ownerState.size === 'small' && {
-    marginTop: 4,
-  }),
-  ...(ownerState.contained && {
-    marginLeft: 14,
-    marginRight: 14,
-  }),
+  variants: [
+    {
+      props: {
+        size: 'small',
+      },
+      style: {
+        marginTop: 4,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.contained,
+      style: {
+        marginLeft: 14,
+        marginRight: 14,
+      },
+    },
+  ],
 }));
 
 const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {

diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js
@@ -27,18 +27,23 @@ const ImageListRoot = styled('ul', {
 
     return [styles.root, styles[ownerState.variant]];
   },
-})(({ ownerState }) => {
-  return {
-    display: 'grid',
-    overflowY: 'auto',
-    listStyle: 'none',
-    padding: 0,
-    // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch',
-    ...(ownerState.variant === 'masonry' && {
-      display: 'block',
-    }),
-  };
+})({
+  display: 'grid',
+  overflowY: 'auto',
+  listStyle: 'none',
+  padding: 0,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  variants: [
+    {
+      props: {
+        variant: 'masonry',
+      },
+      style: {
+        display: 'block',
+      },
+    },
+  ],
 });
 
 const ImageList = React.forwardRef(function ImageList(inProps, ref) {