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

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

@@ -0,0 +1,109 @@
+"use strict";
+
+const IconRoot = styled('span')(({
+  theme
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // To remove at some point.
+  overflow: 'hidden',
+  // allow overflow hidden to take action
+  display: 'inline-block',
+  // support non-square icon
+  textAlign: 'center',
+  flexShrink: 0,
+  variants: [{
+    props: {
+      fontSize: "inherit"
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: "small"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(20)
+    }
+  }, {
+    props: {
+      fontSize: "medium"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(24)
+    }
+  }, {
+    props: {
+      fontSize: "large"
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(36)
+    }
+  }, {
+    props: {
+      color: "primary"
+    },
+    style: {
+      color: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      color: "secondary"
+    },
+    style: {
+      color: (theme.vars || theme).palette.secondary.main
+    }
+  }, {
+    props: {
+      color: "info"
+    },
+    style: {
+      color: (theme.vars || theme).palette.info.main
+    }
+  }, {
+    props: {
+      color: "success"
+    },
+    style: {
+      color: (theme.vars || theme).palette.success.main
+    }
+  }, {
+    props: {
+      color: "warning"
+    },
+    style: {
+      color: (theme.vars || theme).palette.warning.main
+    }
+  }, {
+    props: {
+      color: "action"
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.active
+    }
+  }, {
+    props: {
+      color: "error"
+    },
+    style: {
+      color: (theme.vars || theme).palette.error.main
+    }
+  }, {
+    props: {
+      color: "disabled"
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: undefined
+    }
+  }]
+}));

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

@@ -0,0 +1,62 @@
+"use strict";
+
+const Test = styled('div')(({
+  theme
+}) => ({
+  color: theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.main,
+  background: `linear-gradient(45deg, ${theme.palette.mode === 'dark' ? theme.palette.primary[400] : theme.palette.primary[600]} 30%, ${theme.palette.mode === 'dark' ? theme.palette.primary[200] : theme.palette.primary[500]} 90%})`
+}));
+const StyledPopper = styled(Popper)(({
+  theme
+}) => ({
+  border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
+  boxShadow: `0 8px 24px ${theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'}`,
+  borderRadius: 6,
+  width: 300,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128'
+}));
+const AntSwitch = styled(Switch)(({
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)'
+    }
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff'
+      }
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200
+    })
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box'
+  }
+}));

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

@@ -0,0 +1,78 @@
+"use strict";
+
+const Test = styled('div')(({
+  theme
+}) => ({
+  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%})`
+  })
+}));
+const StyledPopper = styled(Popper)(({
+  theme
+}) => ({
+  border: `1px solid ${'#30363d'}`,
+  boxShadow: `0 8px 24px ${'rgb(1, 4, 9)'}`,
+  borderRadius: 6,
+  width: 300,
+  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'
+  })
+}));
+const AntSwitch = styled(Switch)(({
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)'
+    }
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: '#1890ff',
+        ...theme.applyStyles("dark", {
+          backgroundColor: '#177ddc'
+        })
+      }
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200
+    })
+  },
+  '& .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)'
+    })
+  }
+}));

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

@@ -0,0 +1,12 @@
+"use strict";
+
+const Component = styled.div(({
+  theme,
+  ownerState
+}) => ({
+  ...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

@@ -0,0 +1,19 @@
+"use strict";
+
+const Component = styled.div(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: (theme.vars || theme).spacing(1),
+      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
+  }
+});