@mui/codemod 6.0.0-alpha.9 → 6.0.0-beta.1

package/node/v6.0.0/grid-v2-props/grid-v2-props.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = gridV2Props;
+const possibleDefaultImports = ['@mui/material/Unstable_Grid2', '@mui/system/Unstable_Grid', '@mui/joy/Grid'];
+const possibleNamedImports = {
+  '@mui/material': 'Unstable_Grid2',
+  '@mui/system': 'Unstable_Grid',
+  '@mui/joy': 'Grid'
+};
+const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function gridV2Props(file, api, options) {
+  var _file$path, _file$path2, _options$muiBreakpoin;
+  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const breakpoints = ((_options$muiBreakpoin = options.muiBreakpoints) == null ? void 0 : _options$muiBreakpoin.split(',')) || defaultBreakpoints;
+  const printOptions = options.printOptions;
+  const gridLocalNames = [];
+  root.find(j.ImportDeclaration, decl => possibleDefaultImports.includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportDefaultSpecifier') {
+        gridLocalNames.push(spec.local.name);
+      }
+    });
+  });
+  root.find(j.ImportDeclaration, decl => Object.keys(possibleNamedImports).includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (possibleNamedImports[decl.node.source.value] === spec.imported.name) {
+          gridLocalNames.push(spec.local.name);
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => gridLocalNames.includes(name)
+      }
+    }
+  }).forEach(el => {
+    const size = j.objectExpression([]);
+    const spreadProps = [];
+    const attributesToPrune = [];
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadProps.push(attr);
+      }
+    });
+    const breakpointNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name));
+    breakpointNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name;
+      const nodeValue = node.value;
+      let value;
+      if (nodeValue === null) {
+        value = j.stringLiteral('grow');
+      } else if (nodeValue.type === 'JSXExpressionContainer') {
+        if (nodeValue.expression.value === true) {
+          value = j.stringLiteral('grow');
+        } else {
+          value = nodeValue.expression;
+        }
+      } else {
+        value = nodeValue;
+      }
+      size.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          if (breakpoints.includes(property.key.name)) {
+            size.properties.push(j.property('init', property.key, property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (size.properties.length) {
+      let sizePropValue = size;
+      if (size.properties.length === 1 && size.properties[0].key.name === 'xs') {
+        sizePropValue = size.properties[0].value;
+      }
+      if (sizePropValue.type !== 'StringLiteral') {
+        sizePropValue = j.jsxExpressionContainer(sizePropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+      var _attr$name;
+      return !breakpoints.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name);
+    });
+    const offset = j.objectExpression([]);
+    const offsetNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name.endsWith('Offset') && breakpoints.includes(path.node.name.name.replace('Offset', '')));
+    offsetNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name.replace('Offset', '');
+      const value = node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value;
+      offset.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          const breakpoint = property.key.name.replace('Offset', '');
+          if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) {
+            offset.properties.push(j.property('init', j.identifier(breakpoint), property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (offset.properties.length) {
+      let offsetPropValue = offset;
+      if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') {
+        offsetPropValue = offset.properties[0].value;
+      }
+      if (offsetPropValue.type !== 'StringLiteral') {
+        offsetPropValue = j.jsxExpressionContainer(offsetPropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+      var _attr$name2;
+      return !breakpoints.includes(attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name.replace('Offset', ''));
+    });
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !attributesToPrune.includes(attr));
+  });
+  return root.toSource(printOptions);
+}

package/node/v6.0.0/grid-v2-props/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 _gridV2Props.default;
+  }
+});
+var _gridV2Props = _interopRequireDefault(require("./grid-v2-props"));

package/node/v6.0.0/grid-v2-props/test-cases/actual.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: true,
+  sm: "auto",
+  md: 2,
+  lg: true,
+  xl: false
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: 4,
+  mdOffset: 6,
+  lgOffset: 8,
+  xlOffset: 10
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: "auto"
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  xsOffset: 0,
+  smOffset: 2
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXs: 2,
+  customSm: 4,
+  customMd: 6
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXsOffset: 2,
+  customSmOffset: 4,
+  customMdOffset: 6
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});

package/node/v6.0.0/grid-v2-props/test-cases/expected.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  size: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: "grow",
+    sm: "auto",
+    md: 2,
+    lg: "grow",
+    xl: false
+  }
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: "auto"
+  }
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4
+  },
+  offset: {
+    xs: 0,
+    sm: 2
+  }
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

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

@@ -18,6 +18,7 @@ const LinearProgressBar1 = styled('span', {
       variant: 'buffer'
     },
     style: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].light,
       '&:hover': {}
     }
   }, {
@@ -28,14 +29,6 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, {
-    props: {
-      variant: 'buffer',
-      color: 'normal'
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].light
-    }
   }, {
     props: ({
       variant,
@@ -58,18 +51,18 @@ const LinearProgressBar1 = styled('span', {
     }
   }, {
     props: ({
-      ownerState,
-      color
-    }) => ownerState.variant !== 'buffer' && color === 'inherit',
+      ownerState
+    }) => ownerState.variant !== 'buffer',
     style: {
-      backgroundColor: 'currentColor'
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }, {
     props: ({
-      ownerState
-    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+      ownerState,
+      color
+    }) => ownerState.variant !== 'buffer' && color === 'inherit',
     style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      backgroundColor: 'currentColor'
     }
   }]
 }));
@@ -84,6 +77,7 @@ const ExpandMore = styled(props => {
 })(({
   theme
 }) => ({
+  transform: 'rotate(180deg)',
   marginLeft: 'auto',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest
@@ -95,13 +89,6 @@ const ExpandMore = styled(props => {
     style: {
       transform: 'rotate(0deg)'
     }
-  }, {
-    props: ({
-      expand
-    }) => !!expand,
-    style: {
-      transform: 'rotate(180deg)'
-    }
   }]
 }));
 const Main = styled('main', {

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme,
+  demoOptions,
+  openDemoSource
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...(theme.direction === 'rtl' && {
+      left: theme.spacing(1)
+    }),
+    ...(theme.direction !== 'rtl' && {
+      right: theme.spacing(1)
+    })
+  }
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...theme.applyStyles("rtl", {
+      left: theme.spacing(1)
+    }),
+    ...theme.applyStyles("rtl", {
+      right: theme.spacing(1)
+    })
+  },
+  variants: [{
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        marginTop: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderTopWidth: 1
+      }
+    }
+  }, {
+    props: ({
+      openDemoSource
+    }) => openDemoSource,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderRadius: 0
+      }
+    }
+  }]
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

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

@@ -25,4 +25,34 @@ const ToolbarRoot = styled('div', {
   disabled
 }) => ownerState.variant !== 'regular' && !disabled && theme.mixins.toolbar4, ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme,
+  'aria-pressed': pressed = 'false'
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  ...(pressed === 'false' && {
+    '&:hover': theme.variants.plainHover.neutral,
+    '&:active': theme.variants.plainActive.neutral
+  }),
+  ...(pressed === 'true' && {
+    color: theme.vars.palette.danger.plainColor,
+    backgroundColor: theme.vars.palette.background.body,
+    boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+  })
+}));

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

@@ -49,4 +49,42 @@ const ToolbarRoot = styled('div', {
   }]
 }), ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  variants: [{
+    props: {
+      "aria-pressed": 'false'
+    },
+    style: {
+      '&:hover': theme.variants.plainHover.neutral,
+      '&:active': theme.variants.plainActive.neutral
+    }
+  }, {
+    props: {
+      "aria-pressed": 'true'
+    },
+    style: {
+      color: theme.vars.palette.danger.plainColor,
+      backgroundColor: theme.vars.palette.background.body,
+      boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+    }
+  }]
+}));

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

@@ -25,6 +25,13 @@ const Component = styled('div')(({
           }
         }
       }
+    }, {
+      props: {
+        edge: 'start'
+      },
+      style: {
+        marginLeft: -12
+      }
     }, {
       props: {
         edge: 'start',
@@ -34,12 +41,11 @@ const Component = styled('div')(({
         marginLeft: -3
       }
     }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'start' && ownerState.size !== 'small',
+      props: {
+        edge: 'end'
+      },
       style: {
-        marginLeft: -12
+        marginRight: -12
       }
     }, {
       props: {
@@ -49,14 +55,6 @@ const Component = styled('div')(({
       style: {
         marginRight: -3
       }
-    }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'end' && ownerState.size !== 'small',
-      style: {
-        marginRight: -12
-      }
     }, {
       props: ({
         ownerState