@stylexjs/babel-plugin 0.2.0-beta.12 → 0.2.0-beta.14

package/lib/index.js

@@ -1,8 +1,11 @@
 'use strict';
 
+var path = require('path');
 var t = require('@babel/types');
 var require$$0 = require('postcss-value-parser');
-var path = require('path');
+var core = require('@babel/core');
+var traverse = require('@babel/traverse');
+var fs = require('fs');
 var require$$0$1 = require('invariant');
 var require$$1 = require('styleq');
 
@@ -41,6 +44,8 @@ class StateManager {
   stylexIncludeImport = new Set();
   stylexFirstThatWorksImport = new Set();
   stylexKeyframesImport = new Set();
+  stylexCreateVarsImport = new Set();
+  stylexOverrideVarsImport = new Set();
 
   // `stylex.create` calls
   styleMap = new Map();
@@ -48,6 +53,7 @@ class StateManager {
 
   // resuls of `stylex.create` calls that should be kept
   styleVarsToKeep = new Set();
+  inStyleXCreate = false;
   constructor(state) {
     this._state = state;
     state.file.metadata.stylex = [];
@@ -63,10 +69,16 @@ class StateManager {
       importSources: options.importSources ?? [name, 'stylex'],
       definedStylexCSSVariables: options.definedStylexCSSVariables ?? {},
       genConditionalClasses: !!options.genConditionalClasses,
-      styleResolution: options.styleResolution ?? 'application-order'
+      styleResolution: options.styleResolution ?? 'application-order',
+      unstable_moduleResolution: options.unstable_moduleResolution ?? undefined
     };
     return this._state.opts;
   }
+  get canReferenceTheme() {
+    return !!this.inStyleXCreate;
+    // || this.isStyleXCreateVars
+  }
+
   get metadata() {
     return this._state.file.metadata;
   }
@@ -85,6 +97,59 @@ class StateManager {
   get cssVars() {
     return this.options.definedStylexCSSVariables;
   }
+  get fileNameForHashing() {
+    var _this$options$unstabl;
+    const filename = this.filename;
+    const themeFileExtension = ((_this$options$unstabl = this.options.unstable_moduleResolution) === null || _this$options$unstabl === void 0 ? void 0 : _this$options$unstabl.themeFileExtension) ?? `.stylex`;
+    if (filename == null || !matchesFileSuffix(themeFileExtension)(filename) || this.options.unstable_moduleResolution == null) {
+      return null;
+    }
+    switch (this.options.unstable_moduleResolution.type) {
+      case 'haste':
+        return path.basename(filename);
+      default:
+        const rootDir = this.options.unstable_moduleResolution.rootDir;
+        return path.relative(rootDir, filename);
+    }
+  }
+  importPathResolver(importPath) {
+    var _this$options$unstabl2;
+    const sourceFilePath = this.filename;
+    if (sourceFilePath == null) {
+      return false;
+    }
+    switch ((_this$options$unstabl2 = this.options.unstable_moduleResolution) === null || _this$options$unstabl2 === void 0 ? void 0 : _this$options$unstabl2.type) {
+      case 'commonJS':
+        {
+          this.options.unstable_moduleResolution.rootDir;
+          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? `.stylex`;
+          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
+            return false;
+          }
+          const resolvedFilePath = filePathResolver(importPath, sourceFilePath);
+          return resolvedFilePath ? ['themeNameRef', resolvedFilePath] : false;
+        }
+      case 'haste':
+        {
+          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? `.stylex`;
+          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
+            return false;
+          }
+          return ['themeNameRef', addFileExtension(importPath, sourceFilePath)];
+        }
+      case 'experimental_crossFileParsing':
+        {
+          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? `.stylex`;
+          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
+            return false;
+          }
+          const resolvedFilePath = filePathResolver(importPath, sourceFilePath);
+          return resolvedFilePath ? ['filePath', resolvedFilePath] : false;
+        }
+      default:
+        return false;
+    }
+  }
   addStyle(style) {
     this.metadata.stylex.push(style);
   }
@@ -93,6 +158,26 @@ class StateManager {
   }
 }
 
+// a function that resolves the absolute path of a file when given the
+// relative path of the file from the source file
+const filePathResolver = (relativeFilePath, sourceFilePath) => {
+  const fileToLookFor = addFileExtension(relativeFilePath, sourceFilePath);
+  try {
+    const resolvedFilePath = require.resolve(fileToLookFor, {
+      paths: [path.dirname(sourceFilePath)]
+    });
+    return resolvedFilePath;
+  } catch {}
+};
+const addFileExtension = (importedFilePath, sourceFile) => {
+  if (importedFilePath.endsWith('.js') || importedFilePath.endsWith('.ts') || importedFilePath.endsWith('.tsx') || importedFilePath.endsWith('.jsx') || importedFilePath.endsWith('.mjs') || importedFilePath.endsWith('.cjs')) {
+    return importedFilePath;
+  }
+  const fileExtension = path.extname(sourceFile);
+  return importedFilePath + fileExtension;
+};
+const matchesFileSuffix = allowedSuffix => filename => filename.endsWith(`${allowedSuffix}.js`) || filename.endsWith(`${allowedSuffix}.ts`) || filename.endsWith(`${allowedSuffix}.tsx`) || filename.endsWith(`${allowedSuffix}.jsx`) || filename.endsWith(`${allowedSuffix}.mjs`) || filename.endsWith(`${allowedSuffix}.cjs`) || filename.endsWith(allowedSuffix);
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -131,6 +216,12 @@ function readImportDeclarations(path, state) {
           if (specifier.imported.name === 'firstThatWorks') {
             state.stylexFirstThatWorksImport.add(specifier.local.name);
           }
+          if (specifier.imported.name === 'unstable_createVars') {
+            state.stylexCreateVarsImport.add(specifier.local.name);
+          }
+          if (specifier.imported.name === 'unstable_overrideVars') {
+            state.stylexCreateVarsImport.add(specifier.local.name);
+          }
         }
         if (specifier.imported.type === 'StringLiteral') {
           if (specifier.imported.value === 'create') {
@@ -145,6 +236,12 @@ function readImportDeclarations(path, state) {
           if (specifier.imported.value === 'firstThatWorks') {
             state.stylexFirstThatWorksImport.add(specifier.local.name);
           }
+          if (specifier.imported.value === 'unstable_createVars') {
+            state.stylexCreateVarsImport.add(specifier.local.name);
+          }
+          if (specifier.imported.value === 'unstable_overrideVars  ') {
+            state.stylexCreateVarsImport.add(specifier.local.name);
+          }
         }
       }
     }
@@ -176,6 +273,12 @@ function readRequires(path, state) {
           if (prop.key.name === 'firstThatWorks') {
             state.stylexFirstThatWorksImport.add(prop.value.name);
           }
+          if (prop.key.name === 'unstable_createVars') {
+            state.stylexCreateVarsImport.add(prop.value.name);
+          }
+          if (prop.key.name === 'unstable_overrideVars') {
+            state.stylexCreateVarsImport.add(prop.value.name);
+          }
         }
       }
     }
@@ -205,7 +308,7 @@ var messages$4 = {};
 Object.defineProperty(messages$4, "__esModule", {
   value: true
 });
-messages$4.UNKNOWN_PROP_KEY = messages$4.UNKNOWN_NAMESPACE = messages$4.UNEXPECTED_ARGUMENT = messages$4.UNBOUND_STYLEX_CALL_VALUE = messages$4.ONLY_TOP_LEVEL_INLCUDES = messages$4.ONLY_TOP_LEVEL = messages$4.NO_PARENT_PATH = messages$4.NO_CONDITIONAL_SHORTHAND = messages$4.NON_STATIC_VALUE = messages$4.NON_OBJECT_FOR_STYLEX_CALL = messages$4.LOCAL_ONLY = messages$4.LINT_UNCLOSED_FUNCTION = messages$4.INVALID_SPREAD = messages$4.INVALID_PSEUDO_OR_AT_RULE = messages$4.INVALID_PSEUDO = messages$4.ILLEGAL_PROP_VALUE = messages$4.ILLEGAL_PROP_ARRAY_VALUE = messages$4.ILLEGAL_NESTED_PSEUDO = messages$4.ILLEGAL_NAMESPACE_VALUE = messages$4.ILLEGAL_NAMESPACE_TYPE = messages$4.ILLEGAL_ARGUMENT_LENGTH = messages$4.EXPECTED_FUNCTION_CALL = messages$4.ESCAPED_STYLEX_VALUE = messages$4.DUPLICATE_CONDITIONAL = void 0;
+messages$4.UNKNOWN_PROP_KEY = messages$4.UNKNOWN_NAMESPACE = messages$4.UNEXPECTED_ARGUMENT = messages$4.UNBOUND_STYLEX_CALL_VALUE = messages$4.ONLY_TOP_LEVEL_INLCUDES = messages$4.ONLY_TOP_LEVEL = messages$4.NO_PROJECT_ROOT_DIRECTORY = messages$4.NO_PARENT_PATH = messages$4.NO_CONDITIONAL_SHORTHAND = messages$4.NON_STATIC_VALUE = messages$4.NON_OBJECT_FOR_STYLEX_CALL = messages$4.NON_EXPORT_NAMED_DECLARATION = messages$4.LOCAL_ONLY = messages$4.LINT_UNCLOSED_FUNCTION = messages$4.INVALID_SPREAD = messages$4.INVALID_PSEUDO_OR_AT_RULE = messages$4.INVALID_PSEUDO = messages$4.ILLEGAL_PROP_VALUE = messages$4.ILLEGAL_PROP_ARRAY_VALUE = messages$4.ILLEGAL_NESTED_PSEUDO = messages$4.ILLEGAL_NAMESPACE_VALUE = messages$4.ILLEGAL_NAMESPACE_TYPE = messages$4.ILLEGAL_ARGUMENT_LENGTH = messages$4.EXPECTED_FUNCTION_CALL = messages$4.ESCAPED_STYLEX_VALUE = messages$4.DUPLICATE_CONDITIONAL = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
 messages$4.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
 const NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -254,6 +357,10 @@ const ONLY_TOP_LEVEL_INLCUDES = 'stylex.include() is only at the top level of a
 messages$4.ONLY_TOP_LEVEL_INLCUDES = ONLY_TOP_LEVEL_INLCUDES;
 const DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
 messages$4.DUPLICATE_CONDITIONAL = DUPLICATE_CONDITIONAL;
+const NO_PROJECT_ROOT_DIRECTORY = 'The project root directory `rootDir` is not configured.';
+messages$4.NO_PROJECT_ROOT_DIRECTORY = NO_PROJECT_ROOT_DIRECTORY;
+const NON_EXPORT_NAMED_DECLARATION = 'The return value of stylex.createVars() must be bound to a named export.';
+messages$4.NON_EXPORT_NAMED_DECLARATION = NON_EXPORT_NAMED_DECLARATION;
 
 Object.defineProperty(stylexInclude$1, "__esModule", {
   value: true
@@ -453,8 +560,8 @@ Object.defineProperty(splitCssValue, "__esModule", {
   value: true
 });
 splitCssValue.default = splitValue;
-var _postcssValueParser$6 = _interopRequireDefault$i(require$$0);
-function _interopRequireDefault$i(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$6 = _interopRequireDefault$k(require$$0);
+function _interopRequireDefault$k(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -499,8 +606,8 @@ Object.defineProperty(applicationOrder, "__esModule", {
   value: true
 });
 applicationOrder.default = void 0;
-var _splitCssValue$2 = _interopRequireDefault$h(splitCssValue);
-function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue$2 = _interopRequireDefault$j(splitCssValue);
+function _interopRequireDefault$j(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -759,8 +866,8 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
   value: true
 });
 legacyExpandShorthands.default = void 0;
-var _splitCssValue$1 = _interopRequireDefault$g(splitCssValue);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue$1 = _interopRequireDefault$i(splitCssValue);
+function _interopRequireDefault$i(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -840,8 +947,8 @@ Object.defineProperty(propertySpecificity, "__esModule", {
   value: true
 });
 propertySpecificity.default = void 0;
-var _splitCssValue = _interopRequireDefault$f(splitCssValue);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue = _interopRequireDefault$h(splitCssValue);
+function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -975,10 +1082,10 @@ Object.defineProperty(preprocessRules, "__esModule", {
 });
 preprocessRules.default = flatMapExpandedShorthands;
 preprocessRules.getExpandedKeys = getExpandedKeys;
-var _applicationOrder = _interopRequireDefault$e(applicationOrder);
-var _legacyExpandShorthands = _interopRequireDefault$e(legacyExpandShorthands);
-var _propertySpecificity = _interopRequireDefault$e(propertySpecificity);
-function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _applicationOrder = _interopRequireDefault$g(applicationOrder);
+var _legacyExpandShorthands = _interopRequireDefault$g(legacyExpandShorthands);
+var _propertySpecificity = _interopRequireDefault$g(propertySpecificity);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1042,7 +1149,8 @@ hash$1.default = void 0;
  * @param {number} seed Positive integer only
  * @return {number} 32-bit positive integer hash
  */
-function murmurhash2_32_gc(str, seed) {
+function murmurhash2_32_gc(str) {
+  let seed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   let l = str.length,
     h = seed ^ l,
     i = 0,
@@ -1111,8 +1219,8 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
   value: true
 });
 fontSizePxToRem.default = convertFontSizeToRem;
-var _postcssValueParser$5 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$f(require$$0);
+function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ROOT_FONT_SIZE = 16;
 
 /**
@@ -1151,8 +1259,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$4 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$e(require$$0);
+function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Remove leading zeros from numbers
  */
@@ -1220,8 +1328,8 @@ Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
 timings$1.default = normalizeTimings;
-var _postcssValueParser$3 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$3 = _interopRequireDefault$d(require$$0);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Turn millisecond values to seconds (shorter), except when < 10ms
  */
@@ -1315,8 +1423,8 @@ Object.defineProperty(zeroDimensions, "__esModule", {
   value: true
 });
 zeroDimensions.default = normalizeZeroDimensions;
-var _postcssValueParser$2 = _interopRequireDefault$a(require$$0);
-function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$2 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 
@@ -1389,15 +1497,15 @@ Object.defineProperty(normalizeValue$1, "__esModule", {
   value: true
 });
 normalizeValue$1.default = normalizeValue;
-var _fontSizePxToRem = _interopRequireDefault$9(fontSizePxToRem);
-var _leadingZero = _interopRequireDefault$9(leadingZero);
-var _quotes = _interopRequireDefault$9(quotes);
-var _timings = _interopRequireDefault$9(timings$1);
-var _whitespace = _interopRequireDefault$9(whitespace);
-var _zeroDimensions = _interopRequireDefault$9(zeroDimensions);
-var _detectUnclosedFns = _interopRequireDefault$9(detectUnclosedFns$1);
-var _postcssValueParser$1 = _interopRequireDefault$9(require$$0);
-function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _fontSizePxToRem = _interopRequireDefault$b(fontSizePxToRem);
+var _leadingZero = _interopRequireDefault$b(leadingZero);
+var _quotes = _interopRequireDefault$b(quotes);
+var _timings = _interopRequireDefault$b(timings$1);
+var _whitespace = _interopRequireDefault$b(whitespace);
+var _zeroDimensions = _interopRequireDefault$b(zeroDimensions);
+var _detectUnclosedFns = _interopRequireDefault$b(detectUnclosedFns$1);
+var _postcssValueParser$1 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // `Timings` should be before `LeadingZero`, because it
 // changes 500ms to 0.5s, then `LeadingZero` makes it .5s
 const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
@@ -1413,8 +1521,8 @@ Object.defineProperty(transformValue$1, "__esModule", {
   value: true
 });
 transformValue$1.default = transformValue;
-var _normalizeValue = _interopRequireDefault$8(normalizeValue$1);
-function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _normalizeValue = _interopRequireDefault$a(normalizeValue$1);
+function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1610,8 +1718,8 @@ Object.defineProperty(generateRtl, "__esModule", {
   value: true
 });
 generateRtl.default = generateRTL;
-var _postcssValueParser = _interopRequireDefault$7(require$$0);
-function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser = _interopRequireDefault$9(require$$0);
+function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1968,11 +2076,11 @@ Object.defineProperty(generateCssRule, "__esModule", {
   value: true
 });
 generateCssRule.generateRule = generateRule;
-var _generateLtr$1 = _interopRequireDefault$6(generateLtr);
-var _generateRtl$1 = _interopRequireDefault$6(generateRtl);
+var _generateLtr$1 = _interopRequireDefault$8(generateLtr);
+var _generateRtl$1 = _interopRequireDefault$8(generateRtl);
 var _genCSSRule = genCSSRule$1;
-var _propertyPriorities = _interopRequireDefault$6(propertyPriorities);
-function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _propertyPriorities = _interopRequireDefault$8(propertyPriorities);
+function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -2003,13 +2111,13 @@ Object.defineProperty(convertToClassName, "__esModule", {
   value: true
 });
 convertToClassName.convertStyleToClassName = convertStyleToClassName;
-var _hash$1 = _interopRequireDefault$5(hash$1);
-var _dashify$1 = _interopRequireDefault$5(dashify$1);
-var _transformValue$1 = _interopRequireDefault$5(transformValue$1);
+var _hash$4 = _interopRequireDefault$7(hash$1);
+var _dashify$1 = _interopRequireDefault$7(dashify$1);
+var _transformValue$1 = _interopRequireDefault$7(transformValue$1);
 var _generateCssRule = generateCssRule;
-var _defaultOptions$2 = defaultOptions$1;
-var _objectUtils$4 = objectUtils;
-function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _defaultOptions$4 = defaultOptions$1;
+var _objectUtils$5 = objectUtils;
+function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -2030,17 +2138,17 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   let {
     stylexSheetName = '<>',
     classNamePrefix = 'x'
-  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions$2.defaultOptions;
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions$4.defaultOptions;
   const [key, rawValue] = objEntry;
   const dashedKey = (0, _dashify$1.default)(key);
   const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue$1.default)(key, eachValue)) : (0, _transformValue$1.default)(key, rawValue);
-  const sortedPseudos = (0, _objectUtils$4.arraySort)(pseudos ?? []);
-  const sortedAtRules = (0, _objectUtils$4.arraySort)(atRules ?? []);
+  const sortedPseudos = (0, _objectUtils$5.arraySort)(pseudos ?? []);
+  const sortedAtRules = (0, _objectUtils$5.arraySort)(atRules ?? []);
   const atRuleHashString = sortedPseudos.join('');
   const pseudoHashString = sortedAtRules.join('');
   const modifierHashString = atRuleHashString + pseudoHashString || 'null';
   const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString;
-  const className = classNamePrefix + (0, _hash$1.default)(stylexSheetName + stringToHash);
+  const className = classNamePrefix + (0, _hash$4.default)(stylexSheetName + stringToHash);
   const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
   return [key, className, cssRules];
 }
@@ -2050,7 +2158,7 @@ Object.defineProperty(PreRule$1, "__esModule", {
 });
 PreRule$1.PreRuleSet = PreRule$1.PreRule = PreRule$1.PreIncludedStylesRule = PreRule$1.NullPreRule = void 0;
 var _convertToClassName = convertToClassName;
-var _objectUtils$3 = objectUtils;
+var _objectUtils$4 = objectUtils;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -2099,8 +2207,8 @@ class PreRule {
   constructor(property, value, pseudos, atRules) {
     this.property = property;
     this.value = value;
-    this.pseudos = pseudos ? (0, _objectUtils$3.arraySort)(pseudos, stringComparator) : [];
-    this.atRules = atRules ? (0, _objectUtils$3.arraySort)(atRules) : [];
+    this.pseudos = pseudos ? (0, _objectUtils$4.arraySort)(pseudos, stringComparator) : [];
+    this.atRules = atRules ? (0, _objectUtils$4.arraySort)(atRules) : [];
   }
   compiled(options) {
     const [_key, className, rule] = (0, _convertToClassName.convertStyleToClassName)([this.property, this.value], this.pseudos ?? [], this.atRules ?? [], options);
@@ -2110,8 +2218,8 @@ class PreRule {
     if (!(other instanceof PreRule)) {
       return false;
     }
-    const valuesEqual = Array.isArray(this.value) && Array.isArray(other.value) ? (0, _objectUtils$3.arrayEquals)(this.value, other.value) : this.value === other.value;
-    return this.property === other.property && valuesEqual && (0, _objectUtils$3.arrayEquals)(this.pseudos, other.pseudos) && (0, _objectUtils$3.arrayEquals)(this.atRules, other.atRules);
+    const valuesEqual = Array.isArray(this.value) && Array.isArray(other.value) ? (0, _objectUtils$4.arrayEquals)(this.value, other.value) : this.value === other.value;
+    return this.property === other.property && valuesEqual && (0, _objectUtils$4.arrayEquals)(this.pseudos, other.pseudos) && (0, _objectUtils$4.arrayEquals)(this.atRules, other.atRules);
   }
 }
 PreRule$1.PreRule = PreRule;
@@ -2140,7 +2248,7 @@ class PreRuleSet {
     if (this.rules.length !== other.rules.length) {
       return false;
     }
-    return (0, _objectUtils$3.arrayEquals)(this.rules, other.rules, (a, b) => a.equals(b));
+    return (0, _objectUtils$4.arrayEquals)(this.rules, other.rules, (a, b) => a.equals(b));
   }
 }
 PreRule$1.PreRuleSet = PreRuleSet;
@@ -2150,10 +2258,10 @@ Object.defineProperty(flattenRawStyleObj, "__esModule", {
 });
 flattenRawStyleObj._flattenRawStyleObject = _flattenRawStyleObject;
 flattenRawStyleObj.flattenRawStyleObject = flattenRawStyleObject;
-var _index$1 = _interopRequireDefault$4(preprocessRules);
+var _index$1 = _interopRequireDefault$6(preprocessRules);
 var _PreRule = PreRule$1;
 var _stylexInclude$3 = stylexInclude$1;
-function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -2300,7 +2408,7 @@ Object.defineProperty(basicValidation, "__esModule", {
 basicValidation.validateNamespace = validateNamespace;
 var _stylexInclude$2 = stylexInclude$1;
 var messages$1 = _interopRequireWildcard$1(messages$4);
-var _objectUtils$2 = objectUtils;
+var _objectUtils$3 = objectUtils;
 function _getRequireWildcardCache$1(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$1 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard$1(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$1(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -2314,7 +2422,7 @@ function _interopRequireWildcard$1(obj, nodeInterop) { if (!nodeInterop && obj &
 
 function validateNamespace(namespace) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  if (!(0, _objectUtils$2.isPlainObject)(namespace)) {
+  if (!(0, _objectUtils$3.isPlainObject)(namespace)) {
     throw new Error(messages$1.ILLEGAL_NAMESPACE_VALUE);
   }
   const ns = namespace;
@@ -2338,7 +2446,7 @@ function validateNamespace(namespace) {
       }
       throw new Error(messages$1.ONLY_TOP_LEVEL_INLCUDES);
     }
-    if ((0, _objectUtils$2.isPlainObject)(val)) {
+    if ((0, _objectUtils$3.isPlainObject)(val)) {
       if (key.startsWith('@') || key.startsWith(':')) {
         if (conditions.includes(key)) {
           throw new Error(messages$1.DUPLICATE_CONDITIONAL);
@@ -2377,7 +2485,7 @@ function validateConditionalStyles(val) {
     if (v instanceof _stylexInclude$2.IncludedStyles) {
       throw new Error(messages$1.ONLY_TOP_LEVEL_INLCUDES);
     }
-    if ((0, _objectUtils$2.isPlainObject)(v)) {
+    if ((0, _objectUtils$3.isPlainObject)(v)) {
       validateConditionalStyles(v, [...conditions, key]);
       continue;
     }
@@ -2389,9 +2497,9 @@ Object.defineProperty(stylexCreate$1, "__esModule", {
   value: true
 });
 stylexCreate$1.default = styleXCreateSet;
-var _objectUtils$1 = objectUtils;
+var _objectUtils$2 = objectUtils;
 var _stylexInclude$1 = stylexInclude$1;
-var _defaultOptions$1 = defaultOptions$1;
+var _defaultOptions$3 = defaultOptions$1;
 var _flattenRawStyleObj = flattenRawStyleObj;
 var _basicValidation = basicValidation;
 /**
@@ -2414,7 +2522,7 @@ var _basicValidation = basicValidation;
 //
 // Before returning, it ensures that there are no duplicate styles being injected.
 function styleXCreateSet(namespaces) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions$1.defaultOptions;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions$3.defaultOptions;
   const resolvedNamespaces = {};
   const injectedStyles = {};
   for (const namespaceName of Object.keys(namespaces)) {
@@ -2425,7 +2533,7 @@ function styleXCreateSet(namespaces) {
       let [key, value] = _ref;
       return [key, value.compiled(options)];
     });
-    const compiledNamespace = (0, _objectUtils$1.objFromEntries)(compiledNamespaceTuples);
+    const compiledNamespace = (0, _objectUtils$2.objFromEntries)(compiledNamespaceTuples);
     const namespaceObj = {};
     for (const key of Object.keys(compiledNamespace)) {
       const value = compiledNamespace[key];
@@ -2453,13 +2561,122 @@ function styleXCreateSet(namespaces) {
   return [resolvedNamespaces, injectedStyles];
 }
 
+var stylexCreateVars$1 = {};
+
+Object.defineProperty(stylexCreateVars$1, "__esModule", {
+  value: true
+});
+stylexCreateVars$1.default = styleXCreateVars;
+var _hash$3 = _interopRequireDefault$5(hash$1);
+var _objectUtils$1 = objectUtils;
+var _defaultOptions$2 = defaultOptions$1;
+function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+// Similar to `stylex.create` it takes an object of variables with their values
+// and returns a string after hashing it.
+function styleXCreateVars(variables, options) {
+  const {
+    classNamePrefix,
+    themeName
+  } = {
+    ..._defaultOptions$2.defaultOptions,
+    ...options
+  };
+  const themeNameHash = classNamePrefix + (0, _hash$3.default)(themeName);
+  const variablesMap = (0, _objectUtils$1.objMap)(variables, (value, key) => {
+    // Created hashed variable names with fileName//themeName//key
+    const nameHash = classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
+    return {
+      nameHash,
+      value
+    };
+  });
+  const themeVariablesObject = (0, _objectUtils$1.objMap)(variablesMap, _ref => {
+    let {
+      nameHash
+    } = _ref;
+    return `var(--${nameHash})`;
+  });
+  const cssVariablesString = constructCssVariablesString(variablesMap);
+  return [{
+    ...themeVariablesObject,
+    __themeName__: themeNameHash
+  }, {
+    css: cssVariablesString
+  }];
+}
+function constructCssVariablesString(variables) {
+  const vars = (0, _objectUtils$1.objEntries)(variables).map(_ref2 => {
+    let [_, value] = _ref2;
+    return `--${value.nameHash}:${value.value};`;
+  }).join('');
+  return `:root{${vars}}`;
+}
+
+var stylexOverrideVars$1 = {};
+
+Object.defineProperty(stylexOverrideVars$1, "__esModule", {
+  value: true
+});
+stylexOverrideVars$1.default = styleXOverrideVars;
+var _hash$2 = _interopRequireDefault$4(hash$1);
+var _defaultOptions$1 = defaultOptions$1;
+function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+// It takes an object of variables with their values and the original set of variables to override
+// and returns a hashed className with variables overrides.
+//
+function styleXOverrideVars(themeVars, variables, options) {
+  if (typeof themeVars.__themeName__ !== 'string') {
+    throw new Error('Can only override variables theme created with stylex.unstable_createVars().');
+  }
+  const {
+    classNamePrefix
+  } = {
+    ..._defaultOptions$1.defaultOptions,
+    ...options
+  };
+  const sortedKeys = Object.keys(variables).sort();
+  const cssVariablesOverrideString = sortedKeys.map(key => {
+    const varNameHash = themeVars[key].slice(4, -1);
+    return varNameHash != null ? `${varNameHash}:${variables[key]};` : '';
+  }).join('');
+  const overrideClassName = classNamePrefix + (0, _hash$2.default)(cssVariablesOverrideString);
+  return [{
+    $$css: true,
+    [themeVars.__themeName__]: overrideClassName
+  }, {
+    [overrideClassName]: {
+      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
+      priority: 0.99,
+      rtl: undefined
+    }
+  }];
+}
+
 var stylexKeyframes = {};
 
 Object.defineProperty(stylexKeyframes, "__esModule", {
   value: true
 });
 stylexKeyframes.default = styleXKeyframes;
-var _hash = _interopRequireDefault$3(hash$1);
+var _hash$1 = _interopRequireDefault$3(hash$1);
 var _index = _interopRequireDefault$3(preprocessRules);
 var _generateLtr = _interopRequireDefault$3(generateLtr);
 var _generateRtl = _interopRequireDefault$3(generateRtl);
@@ -2495,7 +2712,7 @@ function styleXKeyframes(frames) {
   const rtlString = constructKeyframesObj(rtlStyles);
 
   // This extra `-B` is kept for some idiosyncratic legacy compatibility for now.
-  const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + '-B';
+  const animationName = classNamePrefix + (0, _hash$1.default)(stylexSheetName + ltrString) + '-B';
   const ltr = `@keyframes ${animationName}{${ltrString}}`;
   const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
   return [animationName, {
@@ -2553,14 +2770,41 @@ function stylexFirstThatWorks() {
   return [...args].reverse();
 }
 
+var fileBasedIdentifier = {};
+
+Object.defineProperty(fileBasedIdentifier, "__esModule", {
+  value: true
+});
+fileBasedIdentifier.default = genFileBasedIdentifier;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * 
+ */
+
+function genFileBasedIdentifier(_ref) {
+  let {
+    fileName,
+    exportName,
+    key
+  } = _ref;
+  return `${fileName}//${exportName}${key != null ? `.${key}` : ''}`;
+}
+
 Object.defineProperty(lib, "__esModule", {
   value: true
 });
-var messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
+var utils_1 = lib.utils = overrideVars_1 = lib.overrideVars = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = createVars_1 = lib.createVars = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
 var _stylexCreate = _interopRequireDefault$2(stylexCreate$1);
+var _stylexCreateVars = _interopRequireDefault$2(stylexCreateVars$1);
+var _stylexOverrideVars = _interopRequireDefault$2(stylexOverrideVars$1);
 var _stylexKeyframes = _interopRequireDefault$2(stylexKeyframes);
 var _stylexInclude = _interopRequireWildcard(stylexInclude$1);
 var _stylexFirstThatWorks = _interopRequireDefault$2(stylexFirstThatWorks$1);
+var _hash = _interopRequireDefault$2(hash$1);
+var _fileBasedIdentifier = _interopRequireDefault$2(fileBasedIdentifier);
 var m = _interopRequireWildcard(messages$4);
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -2581,12 +2825,21 @@ function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : {
 
 const create$1 = _stylexCreate.default;
 var create_1 = lib.create = create$1;
+const createVars = _stylexCreateVars.default;
+var createVars_1 = lib.createVars = createVars;
+const overrideVars = _stylexOverrideVars.default;
+var overrideVars_1 = lib.overrideVars = overrideVars;
 const keyframes$1 = _stylexKeyframes.default;
 var keyframes_1 = lib.keyframes = keyframes$1;
 const include$1 = _stylexInclude.default;
 var include_1 = lib.include = include$1;
+const utils = {
+  hash: _hash.default,
+  genFileBasedIdentifier: _fileBasedIdentifier.default
+};
+utils_1 = lib.utils = utils;
 const messages = m;
-messages_1 = lib.messages = messages;
+var messages_1 = lib.messages = messages;
 const IncludedStyles = _stylexInclude.IncludedStyles;
 var IncludedStyles_1 = lib.IncludedStyles = IncludedStyles;
 const firstThatWorks$1 = _stylexFirstThatWorks.default;
@@ -2654,20 +2907,6 @@ function canBeIdentifier(str) {
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * This is a extended version of the path evaluation code from Babel.
- *
- * The original can be found at:
- * https://github.com/babel/babel/blob/main/packages/babel-traverse/src/path/evaluation.ts
- *
- * The following extensions were made:
- * - It can accept a mapping from variable names to functions
- *   which when encountered will be evaluated instead of deopting.
- *   - The functions can be configured to accept the raw path instead of
- *     static values to handle dynamic values.
- * - It can handle object spreads when the spread value itself is statically evaluated.
- */
-
 // This file contains Babels metainterpreter that can evaluate static code.
 
 const VALID_CALLEES = ['String', 'Number', 'Math'];
@@ -2686,6 +2925,74 @@ function deopt(path, state) {
   state.deoptPath = path;
   state.confident = false;
 }
+function evaluateImportedFile(filePath, namedExport, state) {
+  const fileContents = fs.readFileSync(filePath, 'utf8');
+  // It's safe to use `.babelrc` here because we're only
+  // interested in the JS runtime, and not the CSS.
+  // TODO: in environments where `.babelrc` is not available,
+  // we need to find a way to decide whether to use Flow or TS syntax extensions.
+  const ast = core.parseSync(fileContents, {
+    babelrc: true
+  });
+  if (!ast) {
+    state.confident = false;
+    return;
+  }
+  let result;
+  traverse(ast, {
+    ExportNamedDeclaration(path) {
+      const declaration = path.get('declaration');
+      if (declaration.isVariableDeclaration()) {
+        const decls = declaration.get('declarations');
+        const finder = decl => {
+          if (decl.isVariableDeclarator()) {
+            const id = decl.get('id');
+            const init = decl.get('init');
+            if (id.isIdentifier() && id.node.name === namedExport && init != null && init.isExpression()) {
+              result = evaluateCached(init, state);
+            }
+          }
+        };
+        if (Array.isArray(decls)) {
+          decls.forEach(finder);
+        } else {
+          finder(decls);
+        }
+      }
+    }
+  });
+  if (state.confident) {
+    return result;
+  } else {
+    state.confident = false;
+    return;
+  }
+}
+function evaluateThemeRef(fileName, exportName, state) {
+  const resolveKey = key => {
+    let strToHash = key === '__themeName__' ? utils_1.genFileBasedIdentifier({
+      fileName,
+      exportName
+    }) : utils_1.genFileBasedIdentifier({
+      fileName,
+      exportName,
+      key
+    });
+    const varName = state.traversalState.options.classNamePrefix + utils_1.hash(strToHash);
+    return `var(--${varName})`;
+  };
+
+  // A JS proxy that uses the key to generate a string value using the `resolveKey` function
+  const proxy = new Proxy({}, {
+    get(_, key) {
+      return resolveKey(key);
+    },
+    set(_, key, value) {
+      throw new Error(`Cannot set value ${value} to key ${key} in theme ${fileName}`);
+    }
+  });
+  return proxy;
+}
 
 /**
  * We wrap the _evaluate method so we can track `seen` nodes, we push an item
@@ -2772,19 +3079,47 @@ function _evaluate(path, state) {
   if (path.isMemberExpression() && !path.parentPath.isCallExpression({
     callee: path.node
   })) {
-    const property = path.get('property');
-    const object = path.get('object');
-    if (object.isLiteral() && property.isIdentifier()) {
-      // @ts-expect-error todo(flow->ts): instead of typeof - would it be better to check type of ast node?
-      const value = object.node.value;
-      const type = typeof value;
-      if (type === 'number' || type === 'string') {
-        return value[property.node.name];
+    const object = evaluateCached(path.get('object'), state);
+    if (!state.confident) {
+      return;
+    }
+    const propPath = path.get('property');
+    let property;
+    if (path.node.computed) {
+      property = evaluateCached(propPath, state);
+      if (!state.confident) {
+        return;
       }
+    } else if (propPath.isIdentifier()) {
+      property = propPath.node.name;
+    } else if (propPath.isStringLiteral()) {
+      property = propPath.node.value;
+    } else {
+      return deopt(propPath, state);
     }
+    return object[property];
   }
   if (path.isReferencedIdentifier()) {
     const binding = path.scope.getBinding(path.node.name);
+    if (binding && binding.path.isImportSpecifier() && !binding.path.isImportDefaultSpecifier()) {
+      // const localName = binding.path.node.local.name;
+      const imported = binding.path.node.imported;
+      const importedName = imported.type === 'Identifier' ? imported.name : imported.value;
+      const importPath = binding.path.parentPath;
+      if (importPath.isImportDeclaration()) {
+        const absPath = state.traversalState.importPathResolver(importPath.node.source.value);
+        if (!absPath) {
+          return deopt(binding.path, state);
+        }
+        const [type, value] = absPath;
+        const returnValue = type === 'themeNameRef' ? evaluateThemeRef(value, importedName, state) : evaluateImportedFile(value, importedName, state);
+        if (state.confident) {
+          return returnValue;
+        } else {
+          deopt(binding.path, state);
+        }
+      }
+    }
     if (binding && binding.constantViolations.length > 0) {
       return deopt(binding.path, state);
     }
@@ -2839,7 +3174,7 @@ function _evaluate(path, state) {
     const arr = [];
     const elems = path.get('elements');
     for (const elem of elems) {
-      const elemValue = evaluate(elem, state.functions);
+      const elemValue = evaluate(elem, state.traversalState, state.functions);
       if (elemValue.confident) {
         arr.push(elemValue.value);
       } else {
@@ -2866,7 +3201,7 @@ function _evaluate(path, state) {
       const keyPath = prop.get('key');
       let key = keyPath;
       if (prop.node.computed) {
-        key = evaluate(key);
+        key = evaluate(key, state.traversalState, state.functions);
         if (!key.confident) {
           return deopt(key.deopt, state);
         }
@@ -2878,7 +3213,7 @@ function _evaluate(path, state) {
       }
       // todo(flow->ts): remove typecast
       const valuePath = prop.get('value');
-      let value = evaluate(valuePath, state.functions);
+      let value = evaluate(valuePath, state.traversalState, state.functions);
       if (!value.confident) {
         return deopt(value.deopt, state);
       }
@@ -3061,8 +3396,8 @@ function evaluateQuasis(path, quasis, state) {
  *
  */
 
-function evaluate(path) {
-  let functions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+function evaluate(path, traversalState) {
+  let functions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     identifiers: {},
     memberExpressions: {}
   };
@@ -3070,7 +3405,8 @@ function evaluate(path) {
     confident: true,
     deoptPath: null,
     seen: new Map(),
-    functions
+    functions,
+    traversalState
   };
   let value = evaluateCached(path, state);
   if (!state.confident) value = undefined;
@@ -3110,7 +3446,11 @@ function transformStyleXCreate(path, state) {
     if (firstArg == null || !firstArg.isObjectExpression()) {
       throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
     }
+
+    // TODO: This should be removed soon since we should disallow spreads without
+    // `stylex.include` in the future.
     preProcessStyleArg(firstArg, state);
+    state.inStyleXCreate = true;
     const injectedKeyframes = {};
     function keyframes(animation) {
       const [animationName, injectedStyle] = keyframes_1(animation, state.options);
@@ -3153,7 +3493,7 @@ function transformStyleXCreate(path, state) {
     const {
       confident,
       value
-    } = evaluate(firstArg, {
+    } = evaluate(firstArg, state, {
       identifiers,
       memberExpressions
     });
@@ -3204,6 +3544,7 @@ function transformStyleXCreate(path, state) {
       state.addStyle([key, rest, priority]);
     }
   }
+  state.inStyleXCreate = false;
 }
 
 // Validates the first argument to `stylex.create`.
@@ -3277,6 +3618,186 @@ function getStylexDefaultImport(path, state) {
   return stylexName;
 }
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// This function looks for `stylex.createVars` calls and transforms them.
+//. 1. It finds the first argument to `stylex.createVars` and validates it.
+/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 4. It uses the `stylexCreateVars` from `@stylexjs/shared` to transform the JS
+///    object and to get a list of injected styles.
+/// 5. It converts the resulting Object back into an AST and replaces the call with it.
+/// 6. It also inserts `stylex.inject` calls above the current statement as needed.
+function transformStyleXCreateVars(callExpressionPath, state) {
+  const callExpressionNode = callExpressionPath.node;
+  if (callExpressionNode.type !== 'CallExpression') {
+    return;
+  }
+  if (callExpressionNode.callee.type === 'Identifier' && state.stylexCreateVarsImport.has(callExpressionNode.callee.name) || callExpressionNode.callee.type === 'MemberExpression' && callExpressionNode.callee.object.type === 'Identifier' && callExpressionNode.callee.property.type === 'Identifier' && state.stylexImport.has(callExpressionNode.callee.object.name) && callExpressionNode.callee.property.name === 'unstable_createVars') {
+    validateStyleXCreateVars(callExpressionPath);
+
+    // We know that parent is a variable declaration
+    const variableDeclaratorPath = callExpressionPath.parentPath;
+    if (!variableDeclaratorPath.isVariableDeclarator()) {
+      return;
+    }
+    const variableDeclaratorNode = variableDeclaratorPath.node;
+    if (variableDeclaratorNode.id.type !== 'Identifier') {
+      return;
+    }
+    const args = callExpressionPath.get('arguments');
+    const firstArg = args[0];
+    const {
+      confident,
+      value
+    } = evaluate(firstArg, state);
+    if (!confident) {
+      throw new Error(messages_1.NON_STATIC_VALUE);
+    }
+    const fileName = state.fileNameForHashing;
+    if (fileName == null) {
+      throw new Error('No filename found for generating theme name.');
+    }
+    const exportName = variableDeclaratorNode.id.name;
+    let [variablesObj, {
+      css
+    }] = createVars_1(value, {
+      ...state.options,
+      themeName: utils_1.genFileBasedIdentifier({
+        fileName,
+        exportName
+      })
+    });
+
+    // This should be a transformed variables object
+    callExpressionPath.replaceWith(convertObjectToAST(variablesObj));
+    if (state.isDev || state.stylexSheetName == null) {
+      // We know that the top level parent path is an export named declaration
+      const statementPath = variableDeclaratorPath.parentPath.parentPath;
+      let stylexName;
+      state.stylexImport.forEach(importName => {
+        stylexName = importName;
+      });
+      if (stylexName == null) {
+        stylexName = '__stylex__';
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+      }
+      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css), t__namespace.numericLiteral(0)])));
+    }
+    state.addStyle([variablesObj.__themeName__, {
+      ltr: css
+    }, 0]);
+  }
+}
+
+// Validates the call of `stylex.createVars`.
+function validateStyleXCreateVars(callExpressionPath) {
+  var _variableDeclaratorPa;
+  const variableDeclaratorPath = callExpressionPath.parentPath;
+  const exportNamedDeclarationPath = (_variableDeclaratorPa = variableDeclaratorPath.parentPath) === null || _variableDeclaratorPa === void 0 ? void 0 : _variableDeclaratorPa.parentPath;
+  if (variableDeclaratorPath == null || variableDeclaratorPath.isExpressionStatement() || !variableDeclaratorPath.isVariableDeclarator() || variableDeclaratorPath.node.id.type !== 'Identifier') {
+    throw new Error(messages_1.UNBOUND_STYLEX_CALL_VALUE);
+  }
+  if (exportNamedDeclarationPath == null || !exportNamedDeclarationPath.isExportNamedDeclaration()) {
+    throw new Error(messages_1.NON_EXPORT_NAMED_DECLARATION);
+  }
+  if (callExpressionPath.node.arguments.length !== 1) {
+    throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
+  }
+  if (callExpressionPath.node.arguments[0].type !== 'ObjectExpression') {
+    throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_CALL);
+  }
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// This function looks for `stylex.unstable_overrideVars` calls and transforms them.
+//. 1. It finds the first two arguments to `stylex.unstable_overrideVars` and validates those.
+/// 2. This handles local constants automatically.
+/// 4. It uses the `stylexOverrideVars` from `@stylexjs/shared` to transform the JS
+///    object and to get a list of injected styles.
+/// 5. It converts the resulting Object back into an AST and replaces the call with it.
+/// 6. It also inserts `stylex.inject` calls above the current statement as needed.
+function transformStyleXOverrideVars(callExpressionPath, state) {
+  const callExpressionNode = callExpressionPath.node;
+  if (callExpressionNode.type !== 'CallExpression') {
+    return;
+  }
+  if (callExpressionNode.callee.type === 'Identifier' && state.stylexOverrideVarsImport.has(callExpressionNode.callee.name) || callExpressionNode.callee.type === 'MemberExpression' && callExpressionNode.callee.object.type === 'Identifier' && callExpressionNode.callee.property.type === 'Identifier' && state.stylexImport.has(callExpressionNode.callee.object.name) && callExpressionNode.callee.property.name === 'unstable_overrideVars') {
+    validateStyleXOverrideVars(callExpressionPath);
+
+    // We know that parent is a variable declaration
+    const variableDeclaratorPath = callExpressionPath.parentPath;
+    if (!variableDeclaratorPath.isVariableDeclarator()) {
+      return;
+    }
+    const args = callExpressionPath.get('arguments');
+    const firstArg = args[0];
+    const secondArg = args[1];
+    const {
+      confident: confident1,
+      value: variables
+    } = evaluate(firstArg, state);
+    if (!confident1) {
+      throw new Error(messages_1.NON_STATIC_VALUE);
+    }
+    const {
+      confident: confident2,
+      value: overrides
+    } = evaluate(secondArg, state);
+    if (!confident2) {
+      throw new Error(messages_1.NON_STATIC_VALUE);
+    }
+
+    // Check that first arg has __themeName__ set
+    if (typeof variables.__themeName__ !== 'string' || variables.__themeName__ === '') {
+      throw new Error('Can only override variables theme created with stylex.unstable_createVars().');
+    }
+    const [overridesObj, css] = overrideVars_1(variables, overrides, state.options);
+    const styleKey = overridesObj[variables.__themeName__];
+
+    // This should be a transformed variables object
+    callExpressionPath.replaceWith(convertObjectToAST(overridesObj));
+    if (state.isDev || state.stylexSheetName == null) {
+      // We know that the top level parent path is an variable declarator
+      const statementPath = variableDeclaratorPath.parentPath;
+      let stylexName;
+      state.stylexImport.forEach(importName => {
+        stylexName = importName;
+      });
+      if (stylexName == null) {
+        stylexName = '__stylex__';
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+      }
+      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css[styleKey].ltr), t__namespace.numericLiteral(css[styleKey].priority)])));
+    }
+    state.addStyle([styleKey, {
+      ltr: css[styleKey].ltr
+    }, css[styleKey].priority]);
+  }
+}
+
+// Validates the call of `stylex.overrideVars`.
+function validateStyleXOverrideVars(callExpressionPath) {
+  const variableDeclaratorPath = callExpressionPath.parentPath;
+  if (variableDeclaratorPath == null || variableDeclaratorPath.isExpressionStatement() || !variableDeclaratorPath.isVariableDeclarator() || variableDeclaratorPath.node.id.type !== 'Identifier') {
+    throw new Error(messages_1.UNBOUND_STYLEX_CALL_VALUE);
+  }
+  if (callExpressionPath.node.arguments.length !== 2) {
+    throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
+  }
+  if (callExpressionPath.node.arguments[1].type !== 'ObjectExpression') {
+    throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_CALL);
+  }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -3688,7 +4209,7 @@ Object.defineProperty(stylex$1, "__esModule", {
 });
 stylex$1.keyframes = stylex$1.inject = stylex$1.include = stylex$1.firstThatWorks = default_1 = stylex$1.default = stylex$1.create = stylex$1.UNSUPPORTED_PROPERTY = void 0;
 stylex$1.spread = spread;
-stylex$1.stylex = void 0;
+stylex$1.unstable_overrideVars = stylex$1.unstable_createVars = stylex$1.stylex = void 0;
 var _stylexInject = _interopRequireDefault(stylexInject);
 var _styleq = require$$1;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -3702,11 +4223,21 @@ function spread(styles, _options) {
 function stylexCreate(_styles) {
   throw new Error('stylex.create should never be called. It should be compiled away.');
 }
+function stylexCreateVars(_styles) {
+  throw new Error('stylex.createVars should never be called. It should be compiled away.');
+}
+function stylexOverrideVars(_styles) {
+  throw new Error('stylex.overrideVars should never be called. It should be compiled away.');
+}
 function stylexIncludes(_styles) {
   throw new Error('stylex.extends should never be called. It should be compiled away.');
 }
 const create = stylexCreate;
 stylex$1.create = create;
+const unstable_createVars = stylexCreateVars;
+stylex$1.unstable_createVars = unstable_createVars;
+const unstable_overrideVars = stylexOverrideVars;
+stylex$1.unstable_overrideVars = unstable_overrideVars;
 const include = stylexIncludes;
 stylex$1.include = include;
 const keyframes = _keyframes => {
@@ -3732,6 +4263,8 @@ function _stylex() {
 }
 _stylex.spread = spread;
 _stylex.create = create;
+_stylex.unstable_createVars = unstable_createVars;
+_stylex.unstable_overrideVars = unstable_overrideVars;
 _stylex.include = include;
 _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
@@ -3999,6 +4532,8 @@ function styleXTransform() {
                 //   may use the generated animation name.
                 transformStyleXKeyframes(path.parentPath, state);
               }
+              transformStyleXCreateVars(path, state);
+              transformStyleXOverrideVars(path, state);
               transformStyleXCreate(path, state);
             }
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.14",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -11,7 +11,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.12"
+    "@stylexjs/shared": "0.2.0-beta.14"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",