[codemod] Support sx conditional inside spread element

packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.js

@@ -339,15 +339,42 @@ export default function sxV6(file, api, options) {
             }
           }
           if (data.node.argument.type === 'ConditionalExpression') {
-            recurseObjectExpression({
-              ...data,
-              node: data.node.argument,
-              parentNode: data.node,
-            });
-            if (data.deleteSelf) {
-              data.deleteSelf();
-            } else {
-              removeProperty(data.parentNode, data.node);
+            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');
+
+            if (!isSxSpread) {
+              recurseObjectExpression({
+                ...data,
+                node: data.node.argument,
+                parentNode: data.node,
+              });
+              wrapSxInArray(data.node.argument);
+              if (data.deleteSelf) {
+                data.deleteSelf();
+              } else {
+                removeProperty(data.parentNode, data.node);
+              }
+            }
+          }
+          if (data.node.argument.type === 'CallExpression') {
+            if (
+              getObjectKey(data.node.argument.callee)?.name === 'theme' &&
+              data.node.argument.callee.property?.name?.startsWith('apply') &&
+              data.node.argument.arguments[0]?.type === 'ObjectExpression'
+            ) {
+              recurseObjectExpression({
+                ...data,
+                node: data.node.argument.arguments[0],
+                buildStyle: (styleExpression) => {
+                  return j.arrowFunctionExpression([j.identifier('theme')], {
+                    ...data.node.argument,
+                    arguments: [styleExpression],
+                  });
+                },
+              });
             }
           }
         }

packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.test.js

@@ -129,5 +129,53 @@ describe('@mui/codemod', () => {
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
     });
+
+    describe('conditional sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-condition.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-condition.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-condition.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-condition.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('applyStyles sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-applyStyles.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-applyStyles.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-applyStyles.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-applyStyles.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
   });
 });

packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-applyStyles.actual.js

@@ -0,0 +1,73 @@
+<ButtonBase
+  component="span"
+  ref={ref}
+  {...props}
+  disabled={Boolean(disabled)}
+  onClick={(event) => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest' });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }}
+  onFocusVisible={(event) => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest' });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  }}
+  sx={[(theme) => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...theme.applyDarkStyles({}),
+    '&.Mui-disabled': {
+      opacity: 0.4,
+    }
+  }), (!disableBorder || selected) && {
+    borderColor: 'grey.100',
+  }, selected && (theme => ({
+    bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+    borderColor: 'primary.300',
+    // color: 'primary.500',
+    boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(
+      theme.palette.primary[100],
+      0.5,
+    )}`
+  })), !selected && {
+    '&:hover, &:focus': {
+      bgcolor: 'primary.50',
+      borderColor: 'primary.100',
+      '@media (hover: none)': {
+        bgcolor: 'transparent',
+      },
+    },
+  }, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
+    borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
+  })), !selected && (theme => theme.applyDarkStyles({
+    '&:hover, &:focus': {
+      bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+      borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+      '@media (hover: none)': {
+        bgcolor: 'transparent',
+      },
+    },
+  })), selected && (theme => theme.applyDarkStyles({
+    bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+    borderColor: 'primary.700',
+    // color: 'primary.300',
+    boxShadow: `0px 1px 4px ${
+      (theme.vars || theme).palette.primary[900]
+    }, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
+  })), ...(Array.isArray(sx) ? sx : [sx])]}
+/>;

packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-applyStyles.expected.js

@@ -0,0 +1,73 @@
+<ButtonBase
+  component="span"
+  ref={ref}
+  {...props}
+  disabled={Boolean(disabled)}
+  onClick={(event) => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest' });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  }}
+  onFocusVisible={(event) => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest' });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  }}
+  sx={[(theme) => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...theme.applyDarkStyles({}),
+    '&.Mui-disabled': {
+      opacity: 0.4,
+    }
+  }), (!disableBorder || selected) && {
+    borderColor: 'grey.100',
+  }, selected && (theme => ({
+    bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+    borderColor: 'primary.300',
+    // color: 'primary.500',
+    boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(
+      theme.palette.primary[100],
+      0.5,
+    )}`
+  })), !selected && {
+    '&:hover, &:focus': {
+      bgcolor: 'primary.50',
+      borderColor: 'primary.100',
+      '@media (hover: none)': {
+        bgcolor: 'transparent',
+      },
+    },
+  }, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
+    borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
+  })), !selected && (theme => theme.applyDarkStyles({
+    '&:hover, &:focus': {
+      bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+      borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+      '@media (hover: none)': {
+        bgcolor: 'transparent',
+      },
+    },
+  })), selected && (theme => theme.applyDarkStyles({
+    bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+    borderColor: 'primary.700',
+    // color: 'primary.300',
+    boxShadow: `0px 1px 4px ${
+      (theme.vars || theme).palette.primary[900]
+    }, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
+  })), ...(Array.isArray(sx) ? sx : [sx])]}
+/>;

packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-condition.actual.js

@@ -0,0 +1,98 @@
+<Card
+  {...otherProps}
+  ref={ref}
+  key={it.wcId}
+  data-p={it.performance / 100}
+  variant="outlined"
+  sx={{
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background:
+      'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    ...(horizontal
+      ? {
+          display: 'flex',
+          flexDirection: 'row',
+          pr: 1,
+        }
+      : {
+          display: 'flex',
+          flexDirection: 'column',
+          pb: 0.5,
+        }),
+
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important',
+    },
+  }}
+  onClick={(ev) => {
+    ev.preventDefault();
+    navigate(href);
+  }}
+>
+  <Box
+    component={Link}
+    to={href}
+    sx={{
+      position: 'relative',
+      aspectRatio: '100/55',
+      ...(horizontal
+        ? {
+            maxWidth: '50vw',
+            height: {
+              sm: '150px',
+              md: '170px',
+              lg: '210px',
+              xl: '250px',
+            },
+          }
+        : {
+            width: '100%',
+          }),
+    }}
+  >
+    <ResponsiveImage
+      sizes={imageSizes}
+      loading={imageLoading}
+      src={it.images[0]?.src}
+      alt={it.name}
+      style={{
+        aspectRatio: '100/55',
+        ...(horizontal
+          ? {
+              width: 'auto',
+              height: '100%',
+            }
+          : {
+              width: '100%',
+              height: 'auto',
+            }),
+      }}
+    />
+    <NoSsr>
+      {productOffer && productOffer.ui?.itemCard && (
+        <PromoBanner
+          style={{
+            ...defaultPromoCodeStyles,
+            ...productOffer.style,
+            ...productOffer.ui?.itemCard?.style,
+          }}
+        >
+          {productOffer.offerText}
+        </PromoBanner>
+      )}
+    </NoSsr>
+  </Box>
+  <Stack
+    direction="column"
+    sx={{
+      flex: 1,
+      ...(horizontal ? { py: 1.5, px: 1.5 } : { px: 1, pb: 0.5 }),
+    }}
+  ></Stack>
+</Card>;