@mui/codemod 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSearch;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
@@ -351,11 +350,12 @@ function AppSearch() {
             canonicalAs,
             canonicalPathname
           } = (0, _helpers.pathnameToLanguage)(`${parseUrl.pathname}${parseUrl.hash}`);
-          return (0, _extends2.default)({}, item, {
+          return {
+            ...item,
             pathname: canonicalPathname,
             as: canonicalAs,
             userLanguage
-          });
+          };
         });
       },
       hitComponent: DocSearchHit,
@@ -433,16 +433,16 @@ function AppSearch() {
             transition: 'margin 0.2s',
             fontSize: theme.typography.pxToRem(16)
           },
-          '& .DocSearch-Modal': (0, _extends2.default)({
+          '& .DocSearch-Modal': {
             maxWidth: '700px',
-            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`
-          }, theme.palette.mode === 'dark' && {
-            border: '1px solid',
-            borderColor: theme.palette.primaryDark[700]
-          }, {
+            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`,
+            ...(theme.palette.mode === 'dark' && {
+              border: '1px solid',
+              borderColor: theme.palette.primaryDark[700]
+            }),
             // docsearch.css: <= 750px will be full screen modal
             borderRadius: `clamp(0px, (100vw - 750px) * 9999, ${theme.shape.borderRadius}px)`
-          }),
+          },
           '& .DocSearch-SearchBar': {
             borderBottom: '1px solid',
             borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSearch;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
@@ -351,11 +350,12 @@ function AppSearch() {
             canonicalAs,
             canonicalPathname
           } = (0, _helpers.pathnameToLanguage)(`${parseUrl.pathname}${parseUrl.hash}`);
-          return (0, _extends2.default)({}, item, {
+          return {
+            ...item,
             pathname: canonicalPathname,
             as: canonicalAs,
             userLanguage
-          });
+          };
         });
       },
       hitComponent: DocSearchHit,
@@ -433,16 +433,16 @@ function AppSearch() {
             transition: 'margin 0.2s',
             fontSize: theme.typography.pxToRem(16)
           },
-          '& .DocSearch-Modal': (0, _extends2.default)({
+          '& .DocSearch-Modal': {
             maxWidth: '700px',
-            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`
-          }, theme.palette.mode === 'dark' && {
-            border: '1px solid',
-            borderColor: theme.palette.primaryDark[700]
-          }, {
+            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`,
+            ...(theme.palette.mode === 'dark' && {
+              border: '1px solid',
+              borderColor: theme.palette.primaryDark[700]
+            }),
             // docsearch.css: <= 750px will be full screen modal
             borderRadius: `clamp(0px, (100vw - 750px) * 9999, ${theme.shape.borderRadius}px)`
-          }),
+          },
           '& .DocSearch-SearchBar': {
             borderBottom: '1px solid',
             borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],

package/node/v5.0.0/variant-prop.test/actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -20,19 +19,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select6.default, {}));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({}, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({}, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -41,10 +46,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {})), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {}))]
   });
 }

package/node/v5.0.0/variant-prop.test/expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -22,25 +21,28 @@ const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.j
 }));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      variant: "standard",
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      variant: "standard",
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      variant: "standard",
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -49,10 +51,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {
       variant: "standard"
     })), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {

package/node/v5.0.0/with-mobile-dialog.test/expected.js

@@ -5,20 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 const A = withMobileDialog()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v5.0.0/with-width.test/expected.js

@@ -5,18 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 const A = withWidth()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v6.0.0/all/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _v6All.default;
+  }
+});
+var _v6All = _interopRequireDefault(require("./v6-all"));

package/node/v6.0.0/all/postcss.config.js

@@ -0,0 +1,9 @@
+"use strict";
+
+// Currently empty, when adding the first codemod:
+//   - Read mui-codemod/CONTRIBUTING.md
+//   - Follow mui-codemod/src/deprecations/all/postcss.config.js as a guide
+//   - Remove this comment
+module.exports = {
+  plugins: []
+};

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = v6All;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function v6All(file) {
+  // Currently empty, when adding the first codemod:
+  //   - Read mui-codemod/CONTRIBUTING.md
+  //   - Follow mui-codemod/src/deprecations/all/deprecations-all.js as a guide
+  //   - Remove this comment
+  return file.source;
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _styledV.default;
+  }
+});
+var _styledV = _interopRequireDefault(require("./styled-v6"));

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styledV6;
+var _migrateToVariants = _interopRequireDefault(require("../../util/migrateToVariants"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function styledV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  let shouldTransform = false;
+  root.find(j.CallExpression).forEach(path => {
+    const styles = [];
+    let args = [];
+
+    // styled('div')(...arguments)
+    if (path.node.callee.type === 'Identifier' && path.node.callee.name === 'styled' && path.parentPath.node.type === 'CallExpression') {
+      args = path.parentPath.node.arguments;
+    }
+
+    // styled.div(...arguments)
+    if (path.node.callee.type === 'MemberExpression' && path.node.callee.object.type === 'Identifier' && path.node.callee.object.name === 'styled') {
+      args = path.node.arguments;
+    }
+
+    // 1. collecting styles that should be tranformed
+    args.forEach(arg => {
+      if (arg.type === 'ArrowFunctionExpression' && arg.params[0] && arg.params[0].type === 'ObjectPattern') {
+        styles.push(arg);
+      }
+    });
+    if (!shouldTransform && styles.length > 0) {
+      shouldTransform = true;
+    }
+    (0, _migrateToVariants.default)(j, styles);
+
+    // Replace arrow function with object expression if the arg properties is empty
+    args.forEach((arg, index) => {
+      if (arg.type === 'ArrowFunctionExpression' && arg.params[0] && arg.params[0].type === 'ObjectPattern' && arg.params[0].properties.length === 0) {
+        if (arg.body.type === 'ObjectExpression') {
+          args[index] = arg.body;
+        }
+        if (arg.body.type === 'BlockStatement') {
+          const returnStatement = arg.body.body.find(item => item.type === 'ReturnStatement');
+          if (returnStatement) {
+            args[index] = returnStatement.argument;
+          }
+        }
+      }
+    });
+  });
+  const transformed = root.toSource(printOptions);
+  if (shouldTransform) {
+    // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+    // need to remove them manually
+    const lines = [];
+    let isInStyled = false;
+    transformed.split('\n').forEach((line, index, array) => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '' || line === '' && array[index + 1] && array[index + 1].includes('return')) {
+        if (line.match(/^}\)+(\({}\)|\(\))?;?$/) || line.match(/^\);?$/)) {
+          isInStyled = false;
+        }
+        lines.push(line);
+      }
+      if (line.includes('styled.') || line.includes('styled(')) {
+        isInStyled = true;
+      }
+    });
+    return lines.join('\n');
+  }
+  return transformed;
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+
+const FormHelperTextRoot = styled('p')(({
+  theme,
+  ownerState,
+  disabled
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
+  textAlign: 'left',
+  [`&.${formHelperTextClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  ...(ownerState.size === 'small' && {
+    marginTop: 4
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    marginTop: 6
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
+    marginTop: 6
+  }),
+  ...(ownerState.size !== 'small' && {
+    marginBottom: 4
+  }),
+  ...(ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
+    marginBottom: 6
+  }),
+  ...(ownerState.contained && {
+    marginLeft: 14,
+    marginRight: 14
+  }),
+  ...(!ownerState.contained && {
+    marginTop: 14,
+    marginBottom: 14
+  }),
+  ...(!!ownerState.disabled && {
+    opacity: 0.5
+  })
+}));
+const Component = styled.div(({
+  theme,
+  ownerState
+}) => ({
+  ...theme.typography.caption,
+  ...(ownerState.size === 'small' && {
+    marginTop: (theme.vars || theme).spacing(1)
+  })
+}));
+const ImageListRoot = styled('ul')(({
+  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'
+    })
+  };
+});
+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
+        })
+      }
+    }
+  }
+}));

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

@@ -0,0 +1,143 @@
+"use strict";
+
+const FormHelperTextRoot = styled('p')(({
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
+  textAlign: 'left',
+  [`&.${formHelperTextClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      size: 'small'
+    },
+    style: {
+      marginTop: 6
+    }
+  }, {
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.size === 'small' && ownerState.variant === 'contained' && disabled,
+    style: {
+      marginTop: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.size !== 'small',
+    style: {
+      marginBottom: 4
+    }
+  }, {
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled,
+    style: {
+      marginBottom: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.contained,
+    style: {
+      marginTop: 14,
+      marginBottom: 14
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.disabled,
+    style: {
+      opacity: 0.5
+    }
+  }]
+}));
+const Component = styled.div(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: (theme.vars || theme).spacing(1)
+    }
+  }]
+}));
+const ImageListRoot = styled('ul')({
+  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 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
+          }
+        }
+      }
+    }
+  }]
+});