@stylexjs/babel-plugin 0.7.4 → 0.8.0

package/lib/index.js

@@ -298,21 +298,21 @@ const checkRuntimeInjection = unionOf3(boolean(), string(), object({
 }));
 const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
 class StateManager {
-  importPaths = new Set();
-  stylexImport = new Set();
-  stylexPropsImport = new Set();
-  stylexAttrsImport = new Set();
-  stylexCreateImport = new Set();
-  stylexIncludeImport = new Set();
-  stylexFirstThatWorksImport = new Set();
-  stylexKeyframesImport = new Set();
-  stylexDefineVarsImport = new Set();
-  stylexCreateThemeImport = new Set();
-  stylexTypesImport = new Set();
+  importPaths = (() => new Set())();
+  stylexImport = (() => new Set())();
+  stylexPropsImport = (() => new Set())();
+  stylexAttrsImport = (() => new Set())();
+  stylexCreateImport = (() => new Set())();
+  stylexIncludeImport = (() => new Set())();
+  stylexFirstThatWorksImport = (() => new Set())();
+  stylexKeyframesImport = (() => new Set())();
+  stylexDefineVarsImport = (() => new Set())();
+  stylexCreateThemeImport = (() => new Set())();
+  stylexTypesImport = (() => new Set())();
   injectImportInserted = null;
-  styleMap = new Map();
-  styleVars = new Map();
-  styleVarsToKeep = new Set();
+  styleMap = (() => new Map())();
+  styleVars = (() => new Map())();
+  styleVarsToKeep = (() => new Set())();
   inStyleXCreate = false;
   constructor(state) {
     this._state = state;
@@ -794,7 +794,7 @@ stylexInclude$2.IncludedStyles = void 0;
 stylexInclude$2.default = stylexInclude$1;
 var messages$3 = _interopRequireWildcard$4(messages$4);
 function _getRequireWildcardCache$4(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$4 = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard$4(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$4(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard$4(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$4(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let number = 0;
 function uuid() {
   return `__included_${++number}__`;
@@ -1129,7 +1129,7 @@ Object.defineProperty(splitCssValue, "__esModule", {
 });
 splitCssValue.default = splitValue;
 var _postcssValueParser$6 = _interopRequireDefault$h(require$$0);
-function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$h(e) { return e && e.__esModule ? e : { default: e }; }
 function printNode(node) {
   switch (node.type) {
     case 'word':
@@ -1161,7 +1161,7 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
 });
 legacyExpandShorthands.default = void 0;
 var _splitCssValue = _interopRequireDefault$g(splitCssValue);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$g(e) { return e && e.__esModule ? e : { default: e }; }
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -1407,7 +1407,7 @@ preprocessRules.getExpandedKeys = getExpandedKeys;
 var _applicationOrder = _interopRequireDefault$f(applicationOrder);
 var _legacyExpandShorthands = _interopRequireDefault$f(legacyExpandShorthands);
 var _propertySpecificity = _interopRequireDefault$f(propertySpecificity);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$f(e) { return e && e.__esModule ? e : { default: e }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,
@@ -1494,7 +1494,7 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
 });
 fontSizePxToRem.default = convertFontSizeToRem;
 var _postcssValueParser$5 = _interopRequireDefault$e(require$$0);
-function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$e(e) { return e && e.__esModule ? e : { default: e }; }
 const ROOT_FONT_SIZE = 16;
 function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -1519,7 +1519,7 @@ Object.defineProperty(leadingZero, "__esModule", {
 });
 leadingZero.default = normalizeLeadingZero;
 var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$d(e) { return e && e.__esModule ? e : { default: e }; }
 function normalizeLeadingZero(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1562,7 +1562,7 @@ Object.defineProperty(timings$1, "__esModule", {
 });
 timings$1.default = normalizeTimings;
 var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$c(e) { return e && e.__esModule ? e : { default: e }; }
 function normalizeTimings(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1639,7 +1639,7 @@ Object.defineProperty(zeroDimensions, "__esModule", {
 });
 zeroDimensions.default = normalizeZeroDimensions;
 var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$b(e) { return e && e.__esModule ? e : { default: e }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 const fraction = 'fr';
@@ -1683,7 +1683,7 @@ Object.defineProperty(detectUnclosedFns$1, "__esModule", {
 detectUnclosedFns$1.default = detectUnclosedFns;
 var messages$2 = _interopRequireWildcard$3(messages$4);
 function _getRequireWildcardCache$3(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$3 = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard$3(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$3(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard$3(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$3(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function detectUnclosedFns(ast, _) {
   ast.walk(node => {
     if (node.type === 'function' && node.unclosed) {
@@ -1700,7 +1700,7 @@ Object.defineProperty(convertCamelCaseValues, "__esModule", {
 });
 convertCamelCaseValues.default = convertCamelCasedValues;
 var _dashify$2 = _interopRequireDefault$a(dashify$1);
-function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$a(e) { return e && e.__esModule ? e : { default: e }; }
 function convertCamelCasedValues(ast, key) {
   if (key !== 'transitionProperty' && key !== 'willChange') {
     return ast;
@@ -1730,7 +1730,7 @@ var _zeroDimensions = _interopRequireDefault$9(zeroDimensions);
 var _detectUnclosedFns = _interopRequireDefault$9(detectUnclosedFns$1);
 var _postcssValueParser$1 = _interopRequireDefault$9(require$$0);
 var _convertCamelCaseValues = _interopRequireDefault$9(convertCamelCaseValues);
-function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$9(e) { return e && e.__esModule ? e : { default: e }; }
 const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
@@ -1753,7 +1753,7 @@ transformValue$1.default = transformValue;
 var getNumberSuffix_1 = transformValue$1.getNumberSuffix = getNumberSuffix;
 var timeUnits_1 = transformValue$1.timeUnits = lengthUnits_1 = transformValue$1.lengthUnits = void 0;
 var _normalizeValue = _interopRequireDefault$8(normalizeValue$1);
-function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$8(e) { return e && e.__esModule ? e : { default: e }; }
 function transformValue(key, rawValue, options) {
   const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
   if ((key === 'content' || key === 'hyphenateCharacter' || key === 'hyphenate-character') && typeof value === 'string') {
@@ -1768,9 +1768,12 @@ function transformValue(key, rawValue, options) {
   return (0, _normalizeValue.default)(value, key, options);
 }
 function getNumberSuffix(key) {
-  if (unitlessNumberProperties.has(key)) {
+  if (unitlessNumberProperties.has(key) || key.startsWith('--')) {
     return '';
   }
+  if (!(key in numberPropertySuffixes)) {
+    return 'px';
+  }
   const suffix = numberPropertySuffixes[key];
   if (suffix == null) {
     return 'px';
@@ -1778,7 +1781,7 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'counterReset', 'columnCount', 'flex', 'flexGrow', 'flexShrink', 'flexOrder', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridArea', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
 const numberPropertySuffixes = {
   animationDelay: 'ms',
   animationDuration: 'ms',
@@ -1787,7 +1790,7 @@ const numberPropertySuffixes = {
   voiceDuration: 'ms'
 };
 timeUnits_1 = transformValue$1.timeUnits = new Set(Object.keys(numberPropertySuffixes));
-lengthUnits_1 = transformValue$1.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderImageWidth', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);
+lengthUnits_1 = transformValue$1.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);
 
 var generateCssRule = {};
 
@@ -1866,28 +1869,24 @@ const propertyToLTR = {
     let [_key, val] = _ref16;
     return ['border-bottom-right-radius', val];
   },
-  'text-align': _ref17 => {
+  float: _ref17 => {
     let [key, val] = _ref17;
     return [key, logicalToPhysical$1[val] ?? val];
   },
-  float: _ref18 => {
+  clear: _ref18 => {
     let [key, val] = _ref18;
     return [key, logicalToPhysical$1[val] ?? val];
   },
-  clear: _ref19 => {
-    let [key, val] = _ref19;
-    return [key, logicalToPhysical$1[val] ?? val];
-  },
-  start: _ref20 => {
-    let [_key, val] = _ref20;
+  start: _ref19 => {
+    let [_key, val] = _ref19;
     return ['left', val];
   },
-  end: _ref21 => {
-    let [_key, val] = _ref21;
+  end: _ref20 => {
+    let [_key, val] = _ref20;
     return ['right', val];
   },
-  'background-position': _ref22 => {
-    let [key, val] = _ref22;
+  'background-position': _ref21 => {
+    let [key, val] = _ref21;
     return [key, val.split(' ').map(word => word === 'start' ? 'left' : word === 'end' ? 'right' : word).join(' ')];
   }
 };
@@ -1906,7 +1905,7 @@ Object.defineProperty(generateRtl, "__esModule", {
 });
 generateRtl.default = generateRTL;
 var _postcssValueParser = _interopRequireDefault$7(require$$0);
-function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$7(e) { return e && e.__esModule ? e : { default: e }; }
 const cursorFlip = {
   'e-resize': 'w-resize',
   'w-resize': 'e-resize',
@@ -1961,123 +1960,116 @@ function flipShadow(value) {
     return rtl;
   }
 }
-const shadowsFlip = {
-  'box-shadow': _ref => {
-    let [key, val] = _ref;
-    const rtlVal = flipShadow(val);
-    return rtlVal ? [key, rtlVal] : null;
-  },
-  'text-shadow': _ref2 => {
-    let [key, val] = _ref2;
-    const rtlVal = flipShadow(val);
-    return rtlVal ? [key, rtlVal] : null;
-  }
-};
 const logicalToPhysical = {
   start: 'right',
   end: 'left'
 };
 const propertyToRTL = {
-  'margin-start': _ref3 => {
-    let [_key, val] = _ref3;
+  'margin-start': _ref => {
+    let [_key, val] = _ref;
     return ['margin-right', val];
   },
-  'margin-end': _ref4 => {
-    let [_key, val] = _ref4;
+  'margin-end': _ref2 => {
+    let [_key, val] = _ref2;
     return ['margin-left', val];
   },
-  'padding-start': _ref5 => {
-    let [_key, val] = _ref5;
+  'padding-start': _ref3 => {
+    let [_key, val] = _ref3;
     return ['padding-right', val];
   },
-  'padding-end': _ref6 => {
-    let [_key, val] = _ref6;
+  'padding-end': _ref4 => {
+    let [_key, val] = _ref4;
     return ['padding-left', val];
   },
-  'border-start': _ref7 => {
-    let [_key, val] = _ref7;
+  'border-start': _ref5 => {
+    let [_key, val] = _ref5;
     return ['border-right', val];
   },
-  'border-end': _ref8 => {
-    let [_key, val] = _ref8;
+  'border-end': _ref6 => {
+    let [_key, val] = _ref6;
     return ['border-left', val];
   },
-  'border-start-width': _ref9 => {
-    let [_key, val] = _ref9;
+  'border-start-width': _ref7 => {
+    let [_key, val] = _ref7;
     return ['border-right-width', val];
   },
-  'border-end-width': _ref10 => {
-    let [_key, val] = _ref10;
+  'border-end-width': _ref8 => {
+    let [_key, val] = _ref8;
     return ['border-left-width', val];
   },
-  'border-start-color': _ref11 => {
-    let [_key, val] = _ref11;
+  'border-start-color': _ref9 => {
+    let [_key, val] = _ref9;
     return ['border-right-color', val];
   },
-  'border-end-color': _ref12 => {
-    let [_key, val] = _ref12;
+  'border-end-color': _ref10 => {
+    let [_key, val] = _ref10;
     return ['border-left-color', val];
   },
-  'border-start-style': _ref13 => {
-    let [_key, val] = _ref13;
+  'border-start-style': _ref11 => {
+    let [_key, val] = _ref11;
     return ['border-right-style', val];
   },
-  'border-end-style': _ref14 => {
-    let [_key, val] = _ref14;
+  'border-end-style': _ref12 => {
+    let [_key, val] = _ref12;
     return ['border-left-style', val];
   },
-  'border-top-start-radius': _ref15 => {
-    let [_key, val] = _ref15;
+  'border-top-start-radius': _ref13 => {
+    let [_key, val] = _ref13;
     return ['border-top-right-radius', val];
   },
-  'border-bottom-start-radius': _ref16 => {
-    let [_key, val] = _ref16;
+  'border-bottom-start-radius': _ref14 => {
+    let [_key, val] = _ref14;
     return ['border-bottom-right-radius', val];
   },
-  'border-top-end-radius': _ref17 => {
-    let [_key, val] = _ref17;
+  'border-top-end-radius': _ref15 => {
+    let [_key, val] = _ref15;
     return ['border-top-left-radius', val];
   },
-  'border-bottom-end-radius': _ref18 => {
-    let [_key, val] = _ref18;
+  'border-bottom-end-radius': _ref16 => {
+    let [_key, val] = _ref16;
     return ['border-bottom-left-radius', val];
   },
-  'text-align': _ref19 => {
-    let [key, val] = _ref19;
-    return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
-  },
-  float: _ref20 => {
-    let [key, val] = _ref20;
+  float: _ref17 => {
+    let [key, val] = _ref17;
     return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
   },
-  clear: _ref21 => {
-    let [key, val] = _ref21;
+  clear: _ref18 => {
+    let [key, val] = _ref18;
     return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
   },
-  start: _ref22 => {
-    let [_key, val] = _ref22;
+  start: _ref19 => {
+    let [_key, val] = _ref19;
     return ['right', val];
   },
-  end: _ref23 => {
-    let [_key, val] = _ref23;
+  end: _ref20 => {
+    let [_key, val] = _ref20;
     return ['left', val];
   },
-  'background-position': _ref24 => {
-    let [key, val] = _ref24;
+  'background-position': _ref21 => {
+    let [key, val] = _ref21;
     const words = val.split(' ');
     if (!words.includes('start') && !words.includes('end')) {
       return null;
     }
     return [key, words.map(word => word === 'start' ? 'right' : word === 'end' ? 'left' : word).join(' ')];
   },
-  cursor: _ref25 => {
-    let [key, val] = _ref25;
+  cursor: _ref22 => {
+    let [key, val] = _ref22;
     return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
   },
-  ...shadowsFlip
+  'box-shadow': _ref23 => {
+    let [key, val] = _ref23;
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  },
+  'text-shadow': _ref24 => {
+    let [key, val] = _ref24;
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  }
 };
-function generateRTL(_ref26) {
-  let [key, value] = _ref26;
+function generateRTL(_ref25) {
+  let [key, value] = _ref25;
   if (propertyToRTL[key]) {
     return propertyToRTL[key]([key, value]);
   }
@@ -2158,11 +2150,11 @@ longHandLogical.add('border-block-width');
 shorthandsOfLonghands.add('border-block-start');
 shorthandsOfLonghands.add('border-top');
 longHandLogical.add('border-block-start-color');
-longHandLogical.add('border-top-color');
+longHandPhysical.add('border-top-color');
 longHandLogical.add('border-block-start-style');
-longHandLogical.add('border-top-style');
+longHandPhysical.add('border-top-style');
 longHandLogical.add('border-block-start-width');
-longHandLogical.add('border-top-width');
+longHandPhysical.add('border-top-width');
 shorthandsOfLonghands.add('border-block-end');
 shorthandsOfLonghands.add('border-bottom');
 longHandLogical.add('border-block-end-color');
@@ -2647,7 +2639,7 @@ var _generateLtr$1 = _interopRequireDefault$6(generateLtr);
 var _generateRtl$1 = _interopRequireDefault$6(generateRtl);
 var _genCSSRule = genCSSRule$1;
 var _propertyPriorities$1 = _interopRequireDefault$6(propertyPriorities);
-function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$6(e) { return e && e.__esModule ? e : { default: e }; }
 function generateRule(className, key, value, pseudos, atRules) {
   const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
   const ltrPairs = pairs.map(_generateLtr$1.default);
@@ -2676,8 +2668,8 @@ var _defaultOptions$4 = defaultOptions;
 var _objectUtils$5 = objectUtils;
 var messages$1 = _interopRequireWildcard$2(messages$4);
 function _getRequireWildcardCache$2(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$2 = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard$2(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$2(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard$2(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$2(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault$5(e) { return e && e.__esModule ? e : { default: e }; }
 function convertStyleToClassName(objEntry, pseudos, atRules) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions$4.defaultOptions;
   const {
@@ -2819,7 +2811,7 @@ flattenRawStyleObj.flattenRawStyleObject = flattenRawStyleObject;
 var _index$1 = _interopRequireDefault$4(preprocessRules);
 var _PreRule = PreRule$1;
 var _stylexInclude$3 = stylexInclude$2;
-function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$4(e) { return e && e.__esModule ? e : { default: e }; }
 function flattenRawStyleObject(style, options) {
   return _flattenRawStyleObject(style, [], [], options);
 }
@@ -2940,7 +2932,7 @@ var _stylexInclude$2 = stylexInclude$2;
 var messages = _interopRequireWildcard$1(messages$4);
 var _objectUtils$3 = objectUtils;
 function _getRequireWildcardCache$1(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$1 = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard$1(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$1(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard$1(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$1(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function validateNamespace(namespace) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   if (!(0, _objectUtils$3.isPlainObject)(namespace)) {
@@ -3292,7 +3284,7 @@ var _objectUtils$1 = objectUtils;
 var _defaultOptions$2 = defaultOptions;
 var _stylexVarsUtils$1 = stylexVarsUtils;
 var _types$2 = types$2;
-function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$3(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
@@ -3318,7 +3310,7 @@ function styleXDefineVars(variables, options) {
     }
     return {
       nameHash,
-      value
+      value: value
     };
   });
   const themeVariablesObject = (0, _objectUtils$1.objMap)(variablesMap, _ref => {
@@ -3384,7 +3376,7 @@ var _hash$2 = _interopRequireDefault$2(hash$1);
 var _stylexVarsUtils = stylexVarsUtils;
 var _types$1 = types$2;
 var _defaultOptions$1 = defaultOptions;
-function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$2(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXCreateTheme(themeVars, variables, options) {
   if (typeof themeVars.__themeName__ !== 'string') {
     throw new Error('Can only override variables theme created with stylex.defineVars().');
@@ -3411,7 +3403,7 @@ function styleXCreateTheme(themeVars, variables, options) {
   const stylesToInject = {};
   for (const atRule of sortedAtRules) {
     const decls = rulesByAtRule[atRule].join('');
-    const rule = `.${overrideClassName}{${decls}}`;
+    const rule = `.${overrideClassName}, .${overrideClassName}:root{${decls}}`;
     if (atRule === 'default') {
       stylesToInject[overrideClassName] = {
         ltr: rule,
@@ -3446,7 +3438,7 @@ var _transformValue = _interopRequireDefault$1(transformValue$1);
 var _dashify = _interopRequireDefault$1(dashify$1);
 var _objectUtils = objectUtils;
 var _defaultOptions = defaultOptions;
-function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$1(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXKeyframes(frames) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {
@@ -3494,11 +3486,25 @@ Object.defineProperty(stylexFirstThatWorks$1, "__esModule", {
   value: true
 });
 stylexFirstThatWorks$1.default = stylexFirstThatWorks;
+const isVar = arg => typeof arg === 'string' && arg.match(/^var\(--[a-zA-Z0-9-_]+\)$/);
 function stylexFirstThatWorks() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  return [...args].reverse();
+  const firstVar = args.findIndex(isVar);
+  if (firstVar === -1) {
+    return [...args].reverse();
+  }
+  const priorities = args.slice(0, firstVar).reverse();
+  const rest = args.slice(firstVar);
+  const firstNonVar = rest.findIndex(arg => !isVar(arg));
+  const varParts = rest.slice(0, firstNonVar === -1 ? rest.length : firstNonVar + 1).reverse();
+  const vars = varParts.map(arg => isVar(arg) ? arg.slice(4, -1) : arg);
+  const returnValue = [vars.reduce((soFar, varName) => soFar ? `var(${varName}, ${String(soFar)})` : varName.startsWith('--') ? `var(${varName})` : varName, ''), ...priorities];
+  if (returnValue.length === 1) {
+    return returnValue[0];
+  }
+  return returnValue;
 }
 
 var fileBasedIdentifier = {};
@@ -3542,8 +3548,8 @@ var _types = _interopRequireWildcard(types$2);
 var types$1 = lib.types = _types;
 var _propertyPriorities = propertyPriorities;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 create_1 = lib.create = _stylexCreate.default;
 defineVars_1 = lib.defineVars = _stylexDefineVars.default;
 createTheme_1 = lib.createTheme = _stylexCreateTheme.default;
@@ -3660,10 +3666,13 @@ function evaluateImportedFile(filePath, namedExport, state) {
 }
 function evaluateThemeRef(fileName, exportName, state) {
   const resolveKey = key => {
+    if (key.startsWith('--')) {
+      return `var(${key})`;
+    }
     const strToHash = key === '__themeName__' ? utils_1.genFileBasedIdentifier({
       fileName,
       exportName
-    }) : key.startsWith('--') ? `var(${key})` : utils_1.genFileBasedIdentifier({
+    }) : utils_1.genFileBasedIdentifier({
       fileName,
       exportName,
       key
@@ -4059,6 +4068,9 @@ function _evaluate(path, state) {
       if ((isStringLiteral(object) || isNumericLiteral(object)) && isIdentifier(property)) {
         const val = object.node.value;
         func = val[property.node.name];
+        if (typeof val === 'string') {
+          context = object.node.value;
+        }
       }
       if (func == null) {
         const parsedObj = evaluate(object, state.traversalState, state.functions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.7.4",
-    "@stylexjs/stylex": "0.7.4",
+    "@stylexjs/shared": "0.8.0",
+    "@stylexjs/stylex": "0.8.0",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"