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

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
+      })
+    }
   }]
 }));

package/node/v6.0.0/sx-prop/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 _sxV.default;
+  }
+});
+var _sxV = _interopRequireDefault(require("./sx-v6"));

package/node/v6.0.0/sx-prop/sx-v6.js

@@ -0,0 +1,355 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = sxV6;
+var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
+var _migrateToVariants = require("../../util/migrateToVariants");
+/**
+ *
+ * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+function getCssVarName(node) {
+  if (node.type === 'MemberExpression') {
+    var _getObjectKey;
+    return `--${(_getObjectKey = (0, _migrateToVariants.getObjectKey)(node)) == null ? void 0 : _getObjectKey.name}-${node.property.name}`;
+  }
+  if (node.type === 'Identifier') {
+    return `--${node.name}`;
+  }
+  return '';
+}
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function sxV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const createBuildStyle = (0, _migrateToVariants.getCreateBuildStyle)(j);
+  const appendPaletteModeStyles = (0, _migrateToVariants.getAppendPaletteModeStyles)(j);
+  const buildArrowFunctionAST = (0, _migrateToVariants.getBuildArrowFunctionAST)(j);
+
+  /**
+   *
+   * @param {import('jscodeshift').Identifier} node
+   */
+  function replaceUndefined(node, replacement = j.nullLiteral()) {
+    if ((node == null ? void 0 : node.type) === 'Identifier' && node.name === 'undefined') {
+      return replacement;
+    }
+    return node;
+  }
+  let shouldTransform = false;
+  root.find(j.JSXAttribute, {
+    name: {
+      name: 'sx'
+    },
+    value: {
+      type: 'JSXExpressionContainer'
+    }
+  }).forEach(path => {
+    /**
+     * @type {[import('jscodeshift').StringLiteral, import('jscodeshift').Expression][]}
+     */
+    const cssVars = [];
+    const conditionalExpressions = []; // for ensuring the sequence of styles
+    let currentIndex = 0;
+    const sxContainer = path.node.value;
+    if (['ArrowFunctionExpression', 'ObjectExpression', 'ArrayExpression'].includes(sxContainer.expression.type)) {
+      shouldTransform = true;
+      (sxContainer.expression.type === 'ArrayExpression' ? sxContainer.expression.elements : [sxContainer.expression]).forEach((item, index) => {
+        currentIndex = index;
+        recurseObjectExpression({
+          root: item,
+          replaceRoot: newRoot => {
+            sxContainer.expression = newRoot;
+          },
+          node: item,
+          buildStyle: createBuildStyle()
+        });
+      });
+      if (cssVars.length) {
+        const cssVarsObject = j.objectExpression(cssVars.map(([varName, value]) => j.objectProperty(varName, value)));
+        if (path.parent.node.type === 'JSXOpeningElement') {
+          const styleAttribute = path.parent.node.attributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'style');
+          const spreadAttribute = path.parent.node.attributes.find(attribute => attribute.type === 'JSXSpreadAttribute');
+          if (styleAttribute) {
+            if (styleAttribute.value.expression.type === 'ObjectExpression') {
+              styleAttribute.value.expression.properties = [...cssVarsObject.properties, ...styleAttribute.value.expression.properties];
+            } else if (styleAttribute.value.expression.type === 'Identifier' || styleAttribute.value.expression.type === 'MemberExpression') {
+              styleAttribute.value.expression = j.objectExpression([...cssVarsObject.properties, j.spreadElement(styleAttribute.value.expression)]);
+            }
+          } else if (spreadAttribute) {
+            path.parent.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('style'), j.jsxExpressionContainer(j.objectExpression([...cssVarsObject.properties, j.spreadElement(j.memberExpression(spreadAttribute.argument, j.identifier('style')))]))));
+          } else {
+            path.parent.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('style'), j.jsxExpressionContainer(cssVarsObject)));
+          }
+        }
+      }
+      if (conditionalExpressions.length && sxContainer.expression.type === 'ArrayExpression') {
+        // insert the conditional expressions in the correct order
+        let cumulativeIndex = 0;
+        conditionalExpressions.forEach(([index, newElement]) => {
+          sxContainer.expression.elements.splice(index + 1 + cumulativeIndex, 0, newElement);
+          cumulativeIndex += 1;
+        });
+      }
+      if (sxContainer.expression.type === 'ArrayExpression') {
+        sxContainer.expression.elements = sxContainer.expression.elements.filter(item => item.type !== 'ObjectExpression' || item.properties.length > 0);
+      }
+    }
+    function wrapSxInArray(newElement) {
+      if (sxContainer.expression.type === 'ObjectExpression' || sxContainer.expression.type === 'ArrowFunctionExpression') {
+        sxContainer.expression = j.arrayExpression([sxContainer.expression]);
+      }
+      if (sxContainer.expression.type === 'ArrayExpression') {
+        // store in a list to be added later to ensure the sequence of styles
+        conditionalExpressions.push([currentIndex, newElement]);
+      }
+    }
+
+    /**
+     *
+     * @param {{ node: import('jscodeshift').Expression }} data
+     */
+    function recurseObjectExpression(data) {
+      if (data.node.type === 'ArrowFunctionExpression') {
+        const returnExpression = (0, _getReturnExpression.default)(data.node);
+        if (returnExpression) {
+          recurseObjectExpression({
+            ...data,
+            node: returnExpression
+          });
+        }
+      }
+      if (data.node.type === 'ObjectExpression') {
+        const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+        data.node.properties.forEach(prop => {
+          if (prop.type === 'ObjectProperty') {
+            recurseObjectExpression({
+              ...data,
+              node: prop.value,
+              parentNode: data.node,
+              key: prop.key,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              replaceValue: newValue => {
+                prop.value = newValue;
+              },
+              deleteSelf: () => {
+                (0, _migrateToVariants.removeProperty)(data.node, prop);
+                if (data.node.properties.length === 0) {
+                  var _data$deleteSelf;
+                  (_data$deleteSelf = data.deleteSelf) == null || _data$deleteSelf.call(data);
+                }
+              },
+              modeStyles
+            });
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: prop,
+              parentNode: data.node,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle)
+            });
+          }
+        });
+        appendPaletteModeStyles(data.node, modeStyles);
+      }
+      if (data.node.type === 'SpreadElement') {
+        if (data.node.argument.type === 'LogicalExpression') {
+          var _getObjectKey2, _getObjectKey3;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey2.name : (_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey3.name;
+          if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
+            if (data.node.argument.right.type === 'ObjectExpression') {
+              const mode = data.node.argument.left.right.value;
+              data.node.argument.right.properties.forEach(prop => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: data.node.argument.right,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                    replaceValue: newValue => {
+                      prop.value = newValue;
+                    }
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: data.node.argument.right,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode)
+                  });
+                }
+              });
+              appendPaletteModeStyles(data.parentNode, {
+                [mode]: data.node.argument.right
+              });
+            }
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+            }
+            return;
+          }
+          if (data.node.argument.right.type === 'ObjectExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument.right,
+              root: data.node.argument.right,
+              replaceRoot: newRoot => {
+                data.node.argument.right = newRoot;
+              }
+            });
+          }
+          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.node.argument.right));
+          if (data.deleteSelf) {
+            data.deleteSelf();
+          } else {
+            (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+          }
+        }
+        if (data.node.argument.type === 'ConditionalExpression') {
+          recurseObjectExpression({
+            ...data,
+            node: data.node.argument,
+            parentNode: data.node
+          });
+          if (data.deleteSelf) {
+            data.deleteSelf();
+          } else {
+            (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+          }
+        }
+      }
+      if (data.node.type === 'ConditionalExpression') {
+        if (data.node.test.type === 'BinaryExpression' || data.node.test.type === 'UnaryExpression' || data.node.test.type === 'Identifier' || data.node.test.type === 'MemberExpression') {
+          var _data$parentNode, _data$node$test, _data$node$test2;
+          if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression' && (((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' || ((_data$node$test2 = data.node.test) == null ? void 0 : _data$node$test2.type) === 'Identifier')) {
+            if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
+              if ((0, _migrateToVariants.isThemePaletteMode)(data.node.test.left)) {
+                var _data$replaceValue;
+                const consequentKey = (0, _migrateToVariants.getObjectKey)(data.node.consequent);
+                if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
+                  const varName = getCssVarName(data.node.consequent);
+                  cssVars.push([j.stringLiteral(varName), data.node.consequent]);
+                  data.node.consequent = j.stringLiteral(`var(${varName})`);
+                }
+                const alternateKey = (0, _migrateToVariants.getObjectKey)(data.node.alternate);
+                if (alternateKey.type === 'Identifier' && alternateKey.name !== 'theme') {
+                  const varName = getCssVarName(data.node.alternate);
+                  cssVars.push([j.stringLiteral(varName), data.node.alternate]);
+                  data.node.alternate = j.stringLiteral(`var(${varName})`);
+                }
+                if (data.modeStyles) {
+                  if (!data.modeStyles[data.node.test.right.value]) {
+                    data.modeStyles[data.node.test.right.value] = [];
+                  }
+                  data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, replaceUndefined(data.node.consequent)));
+                }
+                (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, replaceUndefined(data.node.alternate));
+                if (data.root.type === 'ObjectExpression') {
+                  var _data$replaceRoot;
+                  (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
+                } else if (data.root.type === 'ArrayExpression') {
+                  data.root.elements.forEach((item, index) => {
+                    if (item === data.node) {
+                      data.root.elements[index] = buildArrowFunctionAST([j.identifier('theme')], data.root);
+                    }
+                  });
+                }
+              } else {
+                var _data$buildStyle, _data$buildStyle2;
+                wrapSxInArray(j.conditionalExpression(data.node.test, (_data$buildStyle = data.buildStyle) == null ? void 0 : _data$buildStyle.call(data, replaceUndefined(data.node.consequent)), (_data$buildStyle2 = data.buildStyle) == null ? void 0 : _data$buildStyle2.call(data, replaceUndefined(data.node.alternate))));
+                if (data.deleteSelf) {
+                  data.deleteSelf();
+                } else {
+                  (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+                }
+              }
+            }
+          }
+        }
+      }
+      if (data.node.type === 'TemplateLiteral') {
+        var _data$parentNode2;
+        if (((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression') {
+          const modeStyles = {};
+          data.node.expressions.forEach((expression, index) => {
+            if (expression.type === 'MemberExpression') {
+              const memberKey = (0, _migrateToVariants.getObjectKey)(expression);
+              if (memberKey.type === 'Identifier' && memberKey.name !== 'theme') {
+                const varName = getCssVarName(expression);
+                cssVars.push([j.stringLiteral(varName), expression]);
+                data.node.expressions[index] = j.stringLiteral(`var(${varName})`);
+              }
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: expression,
+                parentNode: data.parentNode,
+                buildStyle: createBuildStyle(data.key, data.buildStyle),
+                replaceValue: newValue => {
+                  data.node.expressions[index] = newValue;
+                },
+                modeStyles
+              });
+            }
+          });
+          if (data.modeStyles) {
+            Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+              const clonedNode = {
+                ...data.node,
+                expressions: data.node.expressions.map(expression => ({
+                  ...expression
+                }))
+              };
+              clonedNode.expressions = objectStyles.map(item => item.value);
+              if (!data.modeStyles[mode]) {
+                data.modeStyles[mode] = [];
+              }
+              data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+            });
+            if (data.key) {
+              var _data$replaceValue2;
+              (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node);
+            }
+          }
+        }
+      }
+    }
+  });
+  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;
+    let spaceMatch;
+    transformed.split('\n').forEach(line => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '') {
+        var _line$match, _spaceMatch;
+        if (spaceMatch && ((_line$match = line.match(/^\s+/)) == null ? void 0 : _line$match[0]) === ((_spaceMatch = spaceMatch) == null ? void 0 : _spaceMatch[0]) && line.endsWith('}')) {
+          isInStyled = false;
+          spaceMatch = null;
+        }
+        lines.push(line);
+      }
+      if (line.includes('sx=')) {
+        isInStyled = true;
+        spaceMatch = line.match(/^\s+/);
+      }
+    });
+    return lines.join('\n');
+  }
+  return transformed;
+}

package/node/v6.0.0/sx-prop/test-cases/basic-sx.actual.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+  variant: "regular",
+  sx: theme => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: theme.palette.mode === 'light' ? 'hsla(220, 60%, 99%, 0.6)' : 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow: theme.palette.mode === 'light' ? '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)' : '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)'
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  component: "main",
+  sx: {
+    backgroundColor: theme => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    borderBottom: theme => `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280
+  }
+});

package/node/v6.0.0/sx-prop/test-cases/basic-sx.expected.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+  variant: "regular",
+  sx: theme => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
+    ...theme.applyStyles("light", {
+      bgcolor: 'hsla(220, 60%, 99%, 0.6)',
+      boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  component: "main",
+  sx: theme => ({
+    backgroundColor: theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100]
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    borderBottom: `1px solid ${'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280,
+    ...theme.applyStyles("light", {
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })
+});

package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: props.style,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    color: 'red',
+    ...props.style
+  },
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${post.image})`
+  }
+});