@mui/codemod 6.0.0-alpha.8 → 6.0.0-beta.0

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,405 @@
+"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) {
+  let varName = '-';
+  while (node.type === 'MemberExpression') {
+    var _node$object, _node$property;
+    varName += `-${((_node$object = node.object) == null ? void 0 : _node$object.name) || ((_node$property = node.property) == null ? void 0 : _node$property.name) || 'unknown'}`;
+    if (node.object.type === 'MemberExpression') {
+      node = node.object;
+    } else {
+      node = node.property;
+    }
+  }
+  varName += `-${node.name || 'unknown'}`;
+  return varName;
+}
+
+/**
+ * @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]);
+      }
+    }
+    function rootThemeCallback(data) {
+      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);
+          }
+        });
+      }
+    }
+
+    /**
+     *
+     * @param {{ node: import('jscodeshift').Expression }} data
+     */
+    function recurseObjectExpression(data) {
+      if (data.node.type === 'ArrowFunctionExpression') {
+        const returnExpression = (0, _getReturnExpression.default)(data.node);
+        if (returnExpression) {
+          var _returnExpression$pro, _getObjectKey, _getObjectKey2, _getObjectKey3, _getObjectKey4;
+          if (returnExpression.type === 'MemberExpression' && ((_returnExpression$pro = returnExpression.property) == null ? void 0 : _returnExpression$pro.type) === 'ConditionalExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: j.conditionalExpression(returnExpression.property.test, {
+                ...returnExpression,
+                property: returnExpression.property.consequent
+              }, {
+                ...returnExpression,
+                property: returnExpression.property.alternate
+              })
+            });
+          } else if (returnExpression.type === 'TemplateLiteral') {
+            const firstExpression = returnExpression.expressions[0];
+            if ((firstExpression == null ? void 0 : firstExpression.type) === 'ConditionalExpression') {
+              recurseObjectExpression({
+                ...data,
+                node: j.conditionalExpression(firstExpression.test, {
+                  ...returnExpression,
+                  expressions: [firstExpression.consequent, ...(returnExpression.expressions || []).slice(1)]
+                }, {
+                  ...returnExpression,
+                  expressions: [firstExpression.alternate, ...(returnExpression.expressions || []).slice(1)]
+                })
+              });
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: returnExpression
+              });
+            }
+          } else if (returnExpression.type === 'CallExpression' && ((_getObjectKey = (0, _migrateToVariants.getObjectKey)(returnExpression.callee)) == null ? void 0 : _getObjectKey.name) === 'theme' || returnExpression.type === 'MemberExpression' && ((_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(returnExpression)) == null ? void 0 : _getObjectKey2.name) === 'theme' || returnExpression.type === 'BinaryExpression' && (((_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(returnExpression.left)) == null ? void 0 : _getObjectKey3.name) === 'theme' || ((_getObjectKey4 = (0, _migrateToVariants.getObjectKey)(returnExpression.right)) == null ? void 0 : _getObjectKey4.name) === 'theme')) {
+            var _data$replaceValue;
+            (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, returnExpression);
+            rootThemeCallback(data);
+          } else {
+            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 _getObjectKey5, _getObjectKey6;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey5 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey5.name : (_getObjectKey6 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey6.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.buildStyle(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$replaceValue2;
+                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$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, replaceUndefined(data.node.alternate));
+                rootThemeCallback(data);
+              } 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, _data$node$expression;
+        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$replaceValue3;
+              (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
+            }
+          }
+        }
+        if ((_data$node$expression = data.node.expressions) != null && _data$node$expression.some(expression => {
+          var _getObjectKey7, _getObjectKey8;
+          return ((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey7.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey8.name) === 'theme';
+        })) {
+          rootThemeCallback(data);
+        }
+      }
+    }
+  });
+  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=') && !line.match(/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,55 @@
+"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})`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${colors[data.role]}.softBg`
+  },
+  children: data.role
+});

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  }),
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
+    color: 'red',
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  }),
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
+    ...props.style
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${"var(--post-image)"})`
+  },
+  style: {
+    "--post-image": post.image
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${"var(--colors-data-role)"}.softBg`
+  },
+  style: {
+    "--colors-data-role": colors[data.role]
+  },
+  children: data.role
+});