@mui/codemod 6.0.0-alpha.7 → 6.0.0-alpha.9

package/node/v6.0.0/theme-v6/test-cases/basicTheme.expected.js

@@ -1,31 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getCheckoutTheme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
 function getCheckoutTheme(mode) {
-  return (0, _extends2.default)({}, getDesignTokens(mode), {
+  return {
+    ...getDesignTokens(mode),
     components: {
       MuiAlert: {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             borderRadius: 10,
             backgroundColor: orange[100],
             color: theme.palette.text.primary,
             border: `1px solid ${alpha(orange[300], 0.5)}`,
             '& .MuiAlert-icon': {
               color: orange[500]
-            }
-          }, theme.applyStyles("dark", {
-            backgroundColor: `${alpha(orange[900], 0.5)}`,
-            border: `1px solid ${alpha(orange[800], 0.5)}`
-          }))
+            },
+            ...theme.applyStyles("dark", {
+              backgroundColor: `${alpha(orange[900], 0.5)}`,
+              border: `1px solid ${alpha(orange[800], 0.5)}`
+            })
+          })
         }
       },
       MuiButtonBase: {
@@ -154,65 +154,73 @@ function getCheckoutTheme(mode) {
               props: {
                 variant: 'outlined'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none'
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none'
-                }
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none'
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none'
+                  }
+                })
+              }
             }, {
               props: {
                 color: 'info',
                 variant: 'text'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                color: gray[200],
-                '&:hover': {
-                  backgroundColor: alpha(gray[700], 0.3)
-                }
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  color: gray[200],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.3)
+                  }
+                })
+              }
             }, {
               props: {
                 color: 'secondary',
                 variant: 'outlined'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                color: gray[300],
-                backgroundColor: alpha(gray[600], 0.1),
-                borderColor: alpha(gray[700], 0.5),
-                boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(gray[700], 0.2),
+              style: {
+                ...theme.applyStyles("dark", {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
                   borderColor: alpha(gray[700], 0.5),
-                  boxShadow: 'none'
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                  backgroundImage: 'none'
-                }
-              }))
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: 'none'
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundImage: 'none'
+                  }
+                })
+              }
             }, {
               props: {
                 color: 'primary',
                 variant: 'text'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                color: brand[200],
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.3)
-                }
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  color: brand[200],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[700], 0.3)
+                  }
+                })
+              }
             }]
           })
         }
@@ -221,16 +229,16 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
-            boxShadow: 'none'
-          }, theme.applyStyles("dark", {
-            backgroundColor: alpha(gray[800], 0.6),
-            border: `1px solid ${alpha(gray[700], 0.3)}`
-          }), {
+            boxShadow: 'none',
+            ...theme.applyStyles("dark", {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
+            }),
             variants: [{
               props: {
                 variant: 'outlined'
@@ -244,11 +252,13 @@ function getCheckoutTheme(mode) {
               props: {
                 variant: 'outlined'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`
+                })
+              }
             }]
           })
         }
@@ -271,7 +281,7 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             margin: 10,
             height: 16,
             width: 16,
@@ -297,31 +307,33 @@ function getCheckoutTheme(mode) {
               '&:hover': {
                 backgroundColor: brand[600]
               }
-            }
-          }, theme.applyStyles("dark", {
-            borderColor: alpha(gray[700], 0.5),
-            boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-            backgroundColor: alpha(gray[900], 0.8),
-            '&:hover': {
-              borderColor: brand[300]
             },
-            '&.Mui-focusVisible': {
-              borderColor: brand[400],
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px'
-            }
-          }))
+            ...theme.applyStyles("dark", {
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              '&:hover': {
+                borderColor: brand[300]
+              },
+              '&.Mui-focusVisible': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px'
+              }
+            })
+          })
         }
       },
       MuiDivider: {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
-            borderColor: `${alpha(gray[200], 0.8)}`
-          }, theme.applyStyles("dark", {
-            borderColor: `${alpha(gray[700], 0.4)}`
-          }))
+          }) => ({
+            borderColor: `${alpha(gray[200], 0.8)}`,
+            ...theme.applyStyles("dark", {
+              borderColor: `${alpha(gray[700], 0.4)}`
+            })
+          })
         }
       },
       MuiFormLabel: {
@@ -338,19 +350,19 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200]
-            }
-          }, theme.applyStyles("dark", {
-            color: brand[200],
-            '&:hover': {
-              backgroundColor: alpha(brand[600], 0.3),
-              borderColor: brand[700]
-            }
-          }), {
+            },
+            ...theme.applyStyles("dark", {
+              color: brand[200],
+              '&:hover': {
+                backgroundColor: alpha(brand[600], 0.3),
+                borderColor: brand[700]
+              }
+            }),
             variants: [{
               props: {
                 size: 'small'
@@ -385,7 +397,7 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             color: brand[700],
             fontWeight: 500,
             position: 'relative',
@@ -409,10 +421,11 @@ function getCheckoutTheme(mode) {
               outline: `3px solid ${alpha(brand[500], 0.5)}`,
               outlineOffset: '4px',
               borderRadius: '2px'
-            }
-          }, theme.applyStyles("dark", {
-            color: brand[200]
-          }))
+            },
+            ...theme.applyStyles("dark", {
+              color: brand[200]
+            })
+          })
         }
       },
       MuiOutlinedInput: {
@@ -425,7 +438,7 @@ function getCheckoutTheme(mode) {
           },
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -454,33 +467,33 @@ function getCheckoutTheme(mode) {
               outline: `3px solid ${alpha(brand[500], 0.5)}`,
               outlineOffset: '2px',
               borderColor: brand[400]
-            }
-          }, theme.applyStyles("dark", {
-            'input:-webkit-autofill': {
-              WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
-              maxHeight: '6px',
-              borderRadius: '8px'
             },
-            '& .MuiInputBase-input': {
-              fontSize: '1rem',
-              '&::placeholder': {
-                opacity: 1,
-                color: gray[500]
+            ...theme.applyStyles("dark", {
+              'input:-webkit-autofill': {
+                WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
+                maxHeight: '6px',
+                borderRadius: '8px'
+              },
+              '& .MuiInputBase-input': {
+                fontSize: '1rem',
+                '&::placeholder': {
+                  opacity: 1,
+                  color: gray[500]
+                }
+              },
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              transition: 'border-color 120ms ease-in',
+              '&:hover': {
+                borderColor: brand[300]
+              },
+              '&.Mui-focused': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px'
               }
-            },
-            borderColor: alpha(gray[700], 0.5),
-            boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-            backgroundColor: alpha(gray[900], 0.8),
-            transition: 'border-color 120ms ease-in',
-            '&:hover': {
-              borderColor: brand[300]
-            },
-            '&.Mui-focused': {
-              borderColor: brand[400],
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px'
-            }
-          }), {
+            }),
             variants: [{
               props: {
                 color: 'error'
@@ -496,13 +509,15 @@ function getCheckoutTheme(mode) {
               props: {
                 color: 'error'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300]
-                }
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300]
+                  }
+                })
+              }
             }]
           })
         }
@@ -533,7 +548,7 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             color: 'transparent',
             border: `1px solid ${gray[400]}`,
             width: 12,
@@ -549,18 +564,18 @@ function getCheckoutTheme(mode) {
             '&.Mui-completed': {
               border: 'none',
               color: theme.palette.success.main
-            }
-          }, theme.applyStyles("dark", {
-            border: `1px solid ${gray[700]}`,
-            '&.Mui-active': {
-              border: 'none',
-              color: theme.palette.primary.light
             },
-            '&.Mui-completed': {
-              border: 'none',
-              color: theme.palette.success.light
-            }
-          }), {
+            ...theme.applyStyles("dark", {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light
+              }
+            }),
             variants: [{
               props: {
                 completed: true
@@ -578,11 +593,12 @@ function getCheckoutTheme(mode) {
           label: ({
             theme
           }) => ({
-            '&.Mui-completed': (0, _extends2.default)({
-              opacity: 0.6
-            }, theme.applyStyles("dark", {
-              opacity: 0.5
-            }))
+            '&.Mui-completed': {
+              opacity: 0.6,
+              ...theme.applyStyles("dark", {
+                opacity: 0.5
+              })
+            }
           })
         }
       },
@@ -590,37 +606,39 @@ function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             borderRadius: theme.shape.borderRadius,
             boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`,
             '& .Mui-selected': {
               color: brand[500]
-            }
-          }, theme.applyStyles("dark", {
-            '& .Mui-selected': {
-              color: 'hsl(0, 0%, 100%)'
             },
-            boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`
-          }))
+            ...theme.applyStyles("dark", {
+              '& .Mui-selected': {
+                color: 'hsl(0, 0%, 100%)'
+              },
+              boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`
+            })
+          })
         }
       },
       MuiToggleButton: {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             padding: '12px 16px',
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
-            fontWeight: 500
-          }, theme.applyStyles("dark", {
-            color: gray[400],
-            '&.Mui-selected': {
-              color: brand[300]
-            }
-          }))
+            fontWeight: 500,
+            ...theme.applyStyles("dark", {
+              color: gray[400],
+              '&.Mui-selected': {
+                color: brand[300]
+              }
+            })
+          })
         }
       }
     }
-  });
+  };
 }

package/node/v6.0.0/theme-v6/test-cases/themeVariants.actual.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getCheckoutTheme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function getCheckoutTheme(mode) {
-  return (0, _extends2.default)({}, getDesignTokens(mode), {
+  return {
+    ...getDesignTokens(mode),
     components: {
       MuiStepIcon: {
         variants: [{
@@ -23,7 +22,7 @@ function getCheckoutTheme(mode) {
           root: ({
             theme,
             ownerState
-          }) => (0, _extends2.default)({
+          }) => ({
             color: 'transparent',
             border: `1px solid ${gray[400]}`,
             width: 12,
@@ -39,25 +38,28 @@ function getCheckoutTheme(mode) {
             '&.Mui-completed': {
               border: 'none',
               color: theme.palette.success.main
-            }
-          }, ownerState.size === 'large' && {
-            width: 20,
-            height: 20
-          }, theme.palette.mode === 'dark' && (0, _extends2.default)({
-            border: `1px solid ${gray[700]}`,
-            '&.Mui-active': {
-              border: 'none',
-              color: theme.palette.primary.light
             },
-            '&.Mui-completed': {
-              border: 'none',
-              color: theme.palette.success.light
-            }
-          }, ownerState.variant === 'shadow' && {
-            boxShadow: theme.shadows[2]
-          }))
+            ...(ownerState.size === 'large' && {
+              width: 20,
+              height: 20
+            }),
+            ...(theme.palette.mode === 'dark' && {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light
+              },
+              ...(ownerState.variant === 'shadow' && {
+                boxShadow: theme.shadows[2]
+              })
+            })
+          })
         }
       }
     }
-  });
+  };
 }

package/node/v6.0.0/theme-v6/test-cases/themeVariants.expected.js

@@ -1,19 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getCheckoutTheme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function getCheckoutTheme(mode) {
-  return (0, _extends2.default)({}, getDesignTokens(mode), {
+  return {
+    ...getDesignTokens(mode),
     components: {
       MuiStepIcon: {
         styleOverrides: {
           root: ({
             theme
-          }) => (0, _extends2.default)({
+          }) => ({
             color: 'transparent',
             border: `1px solid ${gray[400]}`,
             width: 12,
@@ -29,18 +28,18 @@ function getCheckoutTheme(mode) {
             '&.Mui-completed': {
               border: 'none',
               color: theme.palette.success.main
-            }
-          }, theme.applyStyles("dark", {
-            border: `1px solid ${gray[700]}`,
-            '&.Mui-active': {
-              border: 'none',
-              color: theme.palette.primary.light
             },
-            '&.Mui-completed': {
-              border: 'none',
-              color: theme.palette.success.light
-            }
-          }), {
+            ...theme.applyStyles("dark", {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light
+              }
+            }),
             variants: [{
               props: {
                 size: 'large'
@@ -53,9 +52,11 @@ function getCheckoutTheme(mode) {
               props: {
                 variant: 'shadow'
               },
-              style: (0, _extends2.default)({}, theme.applyStyles("dark", {
-                boxShadow: theme.shadows[2]
-              }))
+              style: {
+                ...theme.applyStyles("dark", {
+                  boxShadow: theme.shadows[2]
+                })
+              }
             }, {
               props: {
                 completed: true
@@ -69,5 +70,5 @@ function getCheckoutTheme(mode) {
         }
       }
     }
-  });
+  };
 }

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

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styledV6;
+exports.default = themeV6;
 var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
 var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-function styledV6(file, api, options) {
+function themeV6(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;