@mui/codemod 6.0.0-alpha.6 → 6.0.0-alpha.8

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

@@ -1,42 +1,48 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled('div')(({
   theme,
   ownerState
 }) => {
   var _palette;
   const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-  return (0, _extends2.default)({
+  return {
     overflow: 'visible',
     // Explicitly set the default value to solve a bug on IE11.
     color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
-    })
-  }, !ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  }, ownerState.edge === 'start' && {
-    marginLeft: ownerState.size === 'small' ? -3 : -12
-  }, ownerState.edge === 'end' && {
-    marginRight: ownerState.size === 'small' ? -3 : -12
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
-    color: palette == null ? void 0 : palette.main
-  }, !ownerState.disableRipple && {
-    '&:hover': (0, _extends2.default)({}, palette && {
-      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
-    }, {
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    }),
+    ...(!ownerState.disableRipple && {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
       }
+    }),
+    ...(ownerState.edge === 'start' && {
+      marginLeft: ownerState.size === 'small' ? -3 : -12
+    }),
+    ...(ownerState.edge === 'end' && {
+      marginRight: ownerState.size === 'small' ? -3 : -12
+    }),
+    ...(ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
+      color: palette == null ? void 0 : palette.main,
+      ...(!ownerState.disableRipple && {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(palette && {
+            backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+          }),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      })
     })
-  }));
+  };
 });

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled('div')(({
   theme
 }) => {
@@ -71,14 +69,17 @@ const Component = styled('div')(({
         ownerState
       }) => ownerState.color !== 'inherit' && ownerState.color !== 'default' && !ownerState.disableRipple,
       style: {
-        '&:hover': (0, _extends2.default)({}, palette && {
-          backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
-        }, {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(palette && {
+            backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+          }),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
           }
-        })
+        }
       }
     }]
   };

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

@@ -1,19 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Test = styled('div')(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   color: theme.palette.primary.main,
-  background: `linear-gradient(45deg, ${theme.palette.primary[600]} 30%, ${theme.palette.primary[500]} 90%})`
-}, theme.applyStyles("dark", {
-  color: theme.palette.primary.light,
-  background: `linear-gradient(45deg, ${theme.palette.primary[400]} 30%, ${theme.palette.primary[200]} 90%})`
-})));
+  background: `linear-gradient(45deg, ${theme.palette.primary[600]} 30%, ${theme.palette.primary[500]} 90%})`,
+  ...theme.applyStyles("dark", {
+    color: theme.palette.primary.light,
+    background: `linear-gradient(45deg, ${theme.palette.primary[400]} 30%, ${theme.palette.primary[200]} 90%})`
+  })
+}));
 const StyledPopper = styled(Popper)(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   border: `1px solid ${'#30363d'}`,
   boxShadow: `0 8px 24px ${'rgb(1, 4, 9)'}`,
   borderRadius: 6,
@@ -21,13 +20,14 @@ const StyledPopper = styled(Popper)(({
   zIndex: theme.zIndex.modal,
   fontSize: 13,
   color: '#c9d1d9',
-  backgroundColor: '#1c2128'
-}, theme.applyStyles("light", {
-  border: `1px solid ${'#e1e4e8'}`,
-  boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
-  color: '#24292e',
-  backgroundColor: '#fff'
-})));
+  backgroundColor: '#1c2128',
+  ...theme.applyStyles("light", {
+    border: `1px solid ${'#e1e4e8'}`,
+    boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
+    color: '#24292e',
+    backgroundColor: '#fff'
+  })
+}));
 const AntSwitch = styled(Switch)(({
   theme
 }) => ({
@@ -48,12 +48,13 @@ const AntSwitch = styled(Switch)(({
     '&.Mui-checked': {
       transform: 'translateX(12px)',
       color: '#fff',
-      '& + .MuiSwitch-track': (0, _extends2.default)({
+      '& + .MuiSwitch-track': {
         opacity: 1,
-        backgroundColor: '#1890ff'
-      }, theme.applyStyles("dark", {
-        backgroundColor: '#177ddc'
-      }))
+        backgroundColor: '#1890ff',
+        ...theme.applyStyles("dark", {
+          backgroundColor: '#177ddc'
+        })
+      }
     }
   },
   '& .MuiSwitch-thumb': {
@@ -65,12 +66,13 @@ const AntSwitch = styled(Switch)(({
       duration: 200
     })
   },
-  '& .MuiSwitch-track': (0, _extends2.default)({
+  '& .MuiSwitch-track': {
     borderRadius: 16 / 2,
     opacity: 1,
     backgroundColor: 'rgba(0,0,0,.25)',
-    boxSizing: 'border-box'
-  }, theme.applyStyles("dark", {
-    backgroundColor: 'rgba(255,255,255,.35)'
-  }))
+    boxSizing: 'border-box',
+    ...theme.applyStyles("dark", {
+      backgroundColor: 'rgba(255,255,255,.35)'
+    })
+  }
 }));

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

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled.div(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.caption, ownerState.size === 'small' && {
-  marginTop: (theme.vars || theme).spacing(1),
-  color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main
+}) => ({
+  ...theme.typography.caption,
+  ...(ownerState.size === 'small' && {
+    marginTop: (theme.vars || theme).spacing(1),
+    color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main
+  })
 }));

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

@@ -1,19 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled.div(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.caption, {
+}) => ({
+  ...theme.typography.caption,
   variants: [{
     props: {
       size: 'small'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginTop: (theme.vars || theme).spacing(1),
-      color: theme.palette.primary.main
-    }, theme.applyStyles("dark", {
-      color: theme.palette.primary.light
-    }))
+      color: theme.palette.primary.main,
+      ...theme.applyStyles("dark", {
+        color: theme.palette.primary.light
+      })
+    }
   }]
 }));