@stylexjs/babel-plugin 0.3.0 → 0.4.0

package/lib/index.js

@@ -2,11 +2,11 @@
 
 var t = require('@babel/types');
 var path = require('path');
+var helperModuleImports = require('@babel/helper-module-imports');
 var require$$0 = require('postcss-value-parser');
 var core = require('@babel/core');
 var traverse = require('@babel/traverse');
-var require$$0$1 = require('invariant');
-var require$$1 = require('styleq');
+var require$$0$1 = require('styleq');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -29,6 +29,7 @@ var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 
 var name = "@stylexjs/stylex";
 
+const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
 class StateManager {
   importPaths = new Set();
   stylexImport = new Set();
@@ -40,6 +41,7 @@ class StateManager {
   stylexDefineVarsImport = new Set();
   stylexCreateThemeImport = new Set();
   stylexTypesImport = new Set();
+  injectImportInserted = null;
   styleMap = new Map();
   styleVars = new Map();
   styleVarsToKeep = new Set();
@@ -54,9 +56,9 @@ class StateManager {
       ...options,
       dev: !!options.dev,
       test: !!options.test,
-      runtimeInjection: options.runtimeInjection ?? !!options.dev,
+      runtimeInjection: options.runtimeInjection === true ? DEFAULT_INJECT_PATH : options.runtimeInjection ? options.runtimeInjection : options.dev ? DEFAULT_INJECT_PATH : undefined,
       classNamePrefix: options.classNamePrefix ?? 'x',
-      importSources: options.importSources ?? [name, 'stylex'],
+      importSources: [name, 'stylex', ...(options.importSources ?? [])],
       definedStylexCSSVariables: options.definedStylexCSSVariables ?? {},
       genConditionalClasses: !!options.genConditionalClasses,
       useRemForFontSize: !!options.useRemForFontSize,
@@ -76,6 +78,17 @@ class StateManager {
     }
     return '@stylexjs/stylex';
   }
+  get importSources() {
+    return this.options.importSources.map(source => typeof source === 'string' ? source : source.from);
+  }
+  importAs(source) {
+    for (const importSource of this.options.importSources) {
+      if (typeof importSource !== 'string' && importSource.from === source) {
+        return importSource.as;
+      }
+    }
+    return null;
+  }
   get canReferenceTheme() {
     return !!this.inStyleXCreate;
   }
@@ -83,7 +96,9 @@ class StateManager {
     return this._state.file.metadata;
   }
   get runtimeInjection() {
-    return !!this.options.runtimeInjection;
+    return typeof this.options.runtimeInjection === 'string' ? {
+      from: this.options.runtimeInjection
+    } : this.options.runtimeInjection || null;
   }
   get isDev() {
     return !!this.options.dev;
@@ -197,66 +212,51 @@ function readImportDeclarations(path, state) {
   if (node?.importKind === 'type' || node?.importKind === 'typeof') {
     return;
   }
-  if (state.options.importSources.includes(node.source.value)) {
-    state.importPaths.add(node.source.value);
+  const sourcePath = node.source.value;
+  if (state.importSources.includes(sourcePath)) {
     for (const specifier of node.specifiers) {
-      if (specifier.type === 'ImportDefaultSpecifier') {
+      if (specifier.type === 'ImportDefaultSpecifier' && state.importAs(sourcePath) === null) {
+        state.importPaths.add(sourcePath);
         state.stylexImport.add(specifier.local.name);
       }
-      if (specifier.type === 'ImportNamespaceSpecifier') {
+      if (specifier.type === 'ImportNamespaceSpecifier' && state.importAs(sourcePath) === null) {
+        state.importPaths.add(sourcePath);
         state.stylexImport.add(specifier.local.name);
       }
       if (specifier.type === 'ImportSpecifier') {
-        if (specifier.imported.type === 'Identifier') {
-          if (specifier.imported.name === 'create') {
-            state.stylexCreateImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'props') {
-            state.stylexPropsImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'keyframes') {
-            state.stylexKeyframesImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'include') {
-            state.stylexIncludeImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'firstThatWorks') {
-            state.stylexFirstThatWorksImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'defineVars') {
-            state.stylexDefineVarsImport.add(specifier.local.name);
-          }
-          if (specifier.imported.name === 'createTheme') {
-            state.stylexCreateThemeImport.add(specifier.local.name);
+        if (specifier.imported.type === 'Identifier' || specifier.imported.type === 'StringLiteral') {
+          const importedName = specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value;
+          const localName = specifier.local.name;
+          if (state.importAs(sourcePath) === importedName) {
+            state.importPaths.add(sourcePath);
+            state.stylexImport.add(localName);
           }
-          if (specifier.imported.name === 'types') {
-            state.stylexTypesImport.add(specifier.local.name);
-          }
-        }
-        if (specifier.imported.type === 'StringLiteral') {
-          if (specifier.imported.value === 'create') {
-            state.stylexCreateImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'props') {
-            state.stylexPropsImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'keyframes') {
-            state.stylexKeyframesImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'include') {
-            state.stylexIncludeImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'firstThatWorks') {
-            state.stylexFirstThatWorksImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'defineVars') {
-            state.stylexDefineVarsImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'createTheme') {
-            state.stylexCreateThemeImport.add(specifier.local.name);
-          }
-          if (specifier.imported.value === 'types  ') {
-            state.stylexTypesImport.add(specifier.local.name);
+          if (state.importAs(sourcePath) === null) {
+            state.importPaths.add(sourcePath);
+            if (importedName === 'create') {
+              state.stylexCreateImport.add(localName);
+            }
+            if (importedName === 'props') {
+              state.stylexPropsImport.add(localName);
+            }
+            if (importedName === 'keyframes') {
+              state.stylexKeyframesImport.add(localName);
+            }
+            if (importedName === 'include') {
+              state.stylexIncludeImport.add(localName);
+            }
+            if (importedName === 'firstThatWorks') {
+              state.stylexFirstThatWorksImport.add(localName);
+            }
+            if (importedName === 'defineVars') {
+              state.stylexDefineVarsImport.add(localName);
+            }
+            if (importedName === 'createTheme') {
+              state.stylexCreateThemeImport.add(localName);
+            }
+            if (importedName === 'types') {
+              state.stylexTypesImport.add(localName);
+            }
           }
         }
       }
@@ -268,9 +268,12 @@ function readRequires(path, state) {
     node
   } = path;
   const init = node.init;
-  if (init != null && init.type === 'CallExpression' && init.callee?.type === 'Identifier' && init.callee?.name === 'require' && init.arguments?.length === 1 && init.arguments?.[0].type === 'StringLiteral' && state.options.importSources.includes(init.arguments[0].value)) {
+  if (init != null && init.type === 'CallExpression' && init.callee?.type === 'Identifier' && init.callee?.name === 'require' && init.arguments?.length === 1 && init.arguments?.[0].type === 'StringLiteral' && state.importSources.includes(init.arguments[0].value)) {
     const importPath = init.arguments[0].value;
-    importPath != null && state.importPaths.add(importPath);
+    if (importPath == null) {
+      return;
+    }
+    state.importPaths.add(importPath);
     if (node.id.type === 'Identifier') {
       state.stylexImport.add(node.id.name);
     }
@@ -321,13 +324,16 @@ var messages$3 = {};
 Object.defineProperty(messages$3, "__esModule", {
   value: true
 });
-messages$3.UNKNOWN_PROP_KEY = messages$3.UNKNOWN_NAMESPACE = messages$3.UNEXPECTED_ARGUMENT = messages$3.UNBOUND_STYLEX_CALL_VALUE = messages$3.ONLY_TOP_LEVEL_INLCUDES = messages$3.ONLY_TOP_LEVEL = messages$3.NO_PROJECT_ROOT_DIRECTORY = messages$3.NO_PARENT_PATH = messages$3.NO_CONDITIONAL_SHORTHAND = messages$3.NON_STATIC_VALUE = messages$3.NON_OBJECT_FOR_STYLEX_CALL = messages$3.NON_EXPORT_NAMED_DECLARATION = messages$3.LOCAL_ONLY = messages$3.LINT_UNCLOSED_FUNCTION = messages$3.INVALID_SPREAD = messages$3.INVALID_PSEUDO_OR_AT_RULE = messages$3.INVALID_PSEUDO = messages$3.ILLEGAL_PROP_VALUE = messages$3.ILLEGAL_PROP_ARRAY_VALUE = messages$3.ILLEGAL_NESTED_PSEUDO = messages$3.ILLEGAL_NAMESPACE_VALUE = messages$3.ILLEGAL_NAMESPACE_TYPE = messages$3.ILLEGAL_ARGUMENT_LENGTH = messages$3.EXPECTED_FUNCTION_CALL = messages$3.ESCAPED_STYLEX_VALUE = messages$3.DUPLICATE_CONDITIONAL = messages$3.ANONYMOUS_THEME = void 0;
-messages$3.ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
+messages$3.UNKNOWN_PROP_KEY = messages$3.UNKNOWN_NAMESPACE = messages$3.UNEXPECTED_ARGUMENT = messages$3.UNBOUND_STYLEX_CALL_VALUE = messages$3.ONLY_TOP_LEVEL_INCLUDES = messages$3.ONLY_TOP_LEVEL = messages$3.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages$3.NO_PROJECT_ROOT_DIRECTORY = messages$3.NO_PARENT_PATH = messages$3.NO_CONDITIONAL_SHORTHAND = messages$3.NON_STATIC_VALUE = messages$3.NON_STATIC_KEYFRAME_VALUE = messages$3.NON_OBJECT_KEYFRAME = messages$3.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages$3.NON_OBJECT_FOR_STYLEX_CALL = messages$3.NON_EXPORT_NAMED_DECLARATION = messages$3.LOCAL_ONLY = messages$3.LINT_UNCLOSED_FUNCTION = messages$3.INVALID_SPREAD = messages$3.INVALID_PSEUDO_OR_AT_RULE = messages$3.INVALID_PSEUDO = messages$3.ILLEGAL_PROP_VALUE = messages$3.ILLEGAL_PROP_ARRAY_VALUE = messages$3.ILLEGAL_NESTED_PSEUDO = messages$3.ILLEGAL_NAMESPACE_VALUE = messages$3.ILLEGAL_NAMESPACE_TYPE = messages$3.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = messages$3.ILLEGAL_ARGUMENT_LENGTH = messages$3.EXPECTED_FUNCTION_CALL = messages$3.ESCAPED_STYLEX_VALUE = messages$3.DUPLICATE_CONDITIONAL = messages$3.ANONYMOUS_THEME = void 0;
+messages$3.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
+messages$3.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
 messages$3.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
+messages$3.NON_STATIC_KEYFRAME_VALUE = 'Only static values are allowed inside of a stylex.keyframes() call.';
 messages$3.ESCAPED_STYLEX_VALUE = 'Escaping a stylex.create() value is not allowed.';
 messages$3.UNBOUND_STYLEX_CALL_VALUE = 'stylex.create calls must be bound to a bare variable.';
 messages$3.ONLY_TOP_LEVEL = 'stylex.create() is only allowed at the root of a program.';
 messages$3.NON_OBJECT_FOR_STYLEX_CALL = 'stylex.create() can only accept a style object.';
+messages$3.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = 'stylex.keyframes() can only accept an object.';
 messages$3.UNKNOWN_PROP_KEY = 'Unknown property key';
 messages$3.INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 messages$3.INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
@@ -338,17 +344,19 @@ messages$3.ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one
 messages$3.ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 messages$3.ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
 messages$3.ILLEGAL_NAMESPACE_VALUE = 'A stylex namespace must be an object.';
+messages$3.NON_OBJECT_KEYFRAME = 'Every frame within a stylex.keyframes() call must be an object.';
 messages$3.INVALID_SPREAD = 'Imported styles spread with a stylex.create call must be type cast as `XStyle<>` to verify their type.';
 messages$3.LINT_UNCLOSED_FUNCTION = 'Rule contains an unclosed function';
 messages$3.LOCAL_ONLY = 'The return value of stylex.create() should not be exported.';
 messages$3.UNEXPECTED_ARGUMENT = 'Unexpected argument passed to the stylex() function.';
 messages$3.EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
 messages$3.NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
-messages$3.ONLY_TOP_LEVEL_INLCUDES = 'stylex.include() is only at the top level of a style definition object.';
+messages$3.ONLY_TOP_LEVEL_INCLUDES = 'stylex.include() is only at the top level of a style definition object.';
 messages$3.DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
 messages$3.NO_PROJECT_ROOT_DIRECTORY = 'The project root directory `rootDir` is not configured.';
 messages$3.NON_EXPORT_NAMED_DECLARATION = 'The return value of stylex.defineVars() must be bound to a named export.';
 messages$3.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
+messages$3.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
 
 Object.defineProperty(stylexInclude$2, "__esModule", {
   value: true
@@ -356,8 +364,8 @@ Object.defineProperty(stylexInclude$2, "__esModule", {
 stylexInclude$2.IncludedStyles = void 0;
 stylexInclude$2.default = stylexInclude$1;
 var messages$2 = _interopRequireWildcard$3(messages$3);
-function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$3 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(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; }
+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; }
 let number = 0;
 function uuid() {
   return `__included_${++number}__`;
@@ -486,7 +494,6 @@ Object.defineProperty(defaultOptions, "__esModule", {
 defaultOptions.defaultOptions = void 0;
 defaultOptions.defaultOptions = {
   dev: false,
-  runtimeInjection: false,
   useRemForFontSize: true,
   test: false,
   classNamePrefix: 'x',
@@ -499,46 +506,10 @@ var preprocessRules = {};
 
 var applicationOrder = {};
 
-var splitCssValue = {};
-
-Object.defineProperty(splitCssValue, "__esModule", {
-  value: true
-});
-splitCssValue.default = splitValue;
-var _postcssValueParser$6 = _interopRequireDefault$k(require$$0);
-function _interopRequireDefault$k(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function printNode(node) {
-  switch (node.type) {
-    case 'word':
-    case 'string':
-      return `${node.value}`;
-    case 'function':
-      return `${node.value}(${node.nodes.map(printNode).join('')})`;
-    default:
-      return node.value;
-  }
-}
-function splitValue(str) {
-  if (str == null || typeof str === 'number') {
-    return [str];
-  }
-  if (Array.isArray(str)) {
-    return str;
-  }
-  const parsed = (0, _postcssValueParser$6.default)(str.trim());
-  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
-  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
-    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
-  }
-  return nodes;
-}
-
 Object.defineProperty(applicationOrder, "__esModule", {
   value: true
 });
 applicationOrder.default = void 0;
-var _splitCssValue$1 = _interopRequireDefault$j(splitCssValue);
-function _interopRequireDefault$j(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands$2 = {
   all: _ => {
     throw new Error('all is not supported');
@@ -554,8 +525,8 @@ const shorthands$2 = {
   borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands$2.borderInlineEndWidth(null), ...shorthands$2.borderInlineEndStyle(null), ...shorthands$2.borderInlineEndColor(null)],
   borderRight: rawValue => [['borderRight', rawValue], ...shorthands$2.borderRightWidth(null), ...shorthands$2.borderRightStyle(null), ...shorthands$2.borderRightColor(null)],
   borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
-  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands$2.borderInlineStartWidth(null), ...shorthands$2.borderInlineStartStyle(null), ...shorthands$2.borderInlineStartColor(null)],
-  borderLeft: _rawValue => [['borderLeft', null], ...shorthands$2.borderLeftWidth(null), ...shorthands$2.borderLeftStyle(null), ...shorthands$2.borderLeftColor(null)],
+  borderInlineStart: rawValue => [['borderInlineStart', rawValue], ...shorthands$2.borderInlineStartWidth(null), ...shorthands$2.borderInlineStartStyle(null), ...shorthands$2.borderInlineStartColor(null)],
+  borderLeft: rawValue => [['borderLeft', rawValue], ...shorthands$2.borderLeftWidth(null), ...shorthands$2.borderLeftStyle(null), ...shorthands$2.borderLeftColor(null)],
   borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
   borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
   borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
@@ -622,12 +593,7 @@ const shorthands$2 = {
   outline: value => [['outline', value], ['outlineColor', null], ['outlineOffset', null], ['outlineStyle', null], ['outlineWidth', null]],
   overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
   padding: rawValue => {
-    const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue$1.default)(rawValue);
-    if (values.length === 1) {
-      return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
-    }
-    const [top, right = top, bottom = top, left = right] = values;
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+    return [['padding', rawValue], ...shorthands$2.paddingInline(null), ...shorthands$2.paddingBlock(null)];
   },
   paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
   paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
@@ -727,12 +693,46 @@ applicationOrder.default = expansions$3;
 
 var legacyExpandShorthands = {};
 
+var splitCssValue = {};
+
+Object.defineProperty(splitCssValue, "__esModule", {
+  value: true
+});
+splitCssValue.default = splitValue;
+var _postcssValueParser$6 = _interopRequireDefault$h(require$$0);
+function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function printNode(node) {
+  switch (node.type) {
+    case 'word':
+    case 'string':
+      return `${node.value}`;
+    case 'function':
+      return `${node.value}(${node.nodes.map(printNode).join('')})`;
+    default:
+      return node.value;
+  }
+}
+function splitValue(str) {
+  if (str == null || typeof str === 'number') {
+    return [str];
+  }
+  if (Array.isArray(str)) {
+    return str;
+  }
+  const parsed = (0, _postcssValueParser$6.default)(str.trim());
+  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
+  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
+    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
+  }
+  return nodes;
+}
+
 Object.defineProperty(legacyExpandShorthands, "__esModule", {
   value: true
 });
 legacyExpandShorthands.default = void 0;
-var _splitCssValue = _interopRequireDefault$i(splitCssValue);
-function _interopRequireDefault$i(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue = _interopRequireDefault$g(splitCssValue);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -975,10 +975,10 @@ Object.defineProperty(preprocessRules, "__esModule", {
 });
 preprocessRules.default = flatMapExpandedShorthands;
 preprocessRules.getExpandedKeys = getExpandedKeys;
-var _applicationOrder = _interopRequireDefault$h(applicationOrder);
-var _legacyExpandShorthands = _interopRequireDefault$h(legacyExpandShorthands);
-var _propertySpecificity = _interopRequireDefault$h(propertySpecificity);
-function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,
@@ -1061,8 +1061,8 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
   value: true
 });
 fontSizePxToRem.default = convertFontSizeToRem;
-var _postcssValueParser$5 = _interopRequireDefault$g(require$$0);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$e(require$$0);
+function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ROOT_FONT_SIZE = 16;
 function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -1086,8 +1086,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$4 = _interopRequireDefault$f(require$$0);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeLeadingZero(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1129,8 +1129,8 @@ Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
 timings$1.default = normalizeTimings;
-var _postcssValueParser$3 = _interopRequireDefault$e(require$$0);
-function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeTimings(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1196,8 +1196,8 @@ Object.defineProperty(zeroDimensions, "__esModule", {
   value: true
 });
 zeroDimensions.default = normalizeZeroDimensions;
-var _postcssValueParser$2 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 function normalizeZeroDimensions(ast, _) {
@@ -1227,8 +1227,8 @@ Object.defineProperty(detectUnclosedFns$1, "__esModule", {
 });
 detectUnclosedFns$1.default = detectUnclosedFns;
 var messages$1 = _interopRequireWildcard$2(messages$3);
-function _getRequireWildcardCache$2(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$2 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$2(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$2(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; }
+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 detectUnclosedFns(ast, _) {
   ast.walk(node => {
     if (node.type === 'function' && node.unclosed) {
@@ -1244,8 +1244,8 @@ Object.defineProperty(convertCamelCaseValues, "__esModule", {
   value: true
 });
 convertCamelCaseValues.default = convertCamelCasedValues;
-var _dashify$2 = _interopRequireDefault$c(dashify$1);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _dashify$2 = _interopRequireDefault$a(dashify$1);
+function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function convertCamelCasedValues(ast, key) {
   if (key !== 'transitionProperty' && key !== 'willChange') {
     return ast;
@@ -1266,16 +1266,16 @@ Object.defineProperty(normalizeValue$1, "__esModule", {
   value: true
 });
 normalizeValue$1.default = normalizeValue;
-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);
-var _convertCamelCaseValues = _interopRequireDefault$b(convertCamelCaseValues);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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);
+var _convertCamelCaseValues = _interopRequireDefault$9(convertCamelCaseValues);
+function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
@@ -1297,8 +1297,8 @@ Object.defineProperty(transformValue$1, "__esModule", {
 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$a(normalizeValue$1);
-function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _normalizeValue = _interopRequireDefault$8(normalizeValue$1);
+function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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') {
@@ -1450,8 +1450,8 @@ Object.defineProperty(generateRtl, "__esModule", {
   value: true
 });
 generateRtl.default = generateRTL;
-var _postcssValueParser = _interopRequireDefault$9(require$$0);
-function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser = _interopRequireDefault$7(require$$0);
+function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const cursorFlip = {
   'e-resize': 'w-resize',
   'w-resize': 'e-resize',
@@ -2181,11 +2181,11 @@ Object.defineProperty(generateCssRule, "__esModule", {
   value: true
 });
 generateCssRule.generateRule = generateRule;
-var _generateLtr$1 = _interopRequireDefault$8(generateLtr);
-var _generateRtl$1 = _interopRequireDefault$8(generateRtl);
+var _generateLtr$1 = _interopRequireDefault$6(generateLtr);
+var _generateRtl$1 = _interopRequireDefault$6(generateRtl);
 var _genCSSRule = genCSSRule$1;
-var _propertyPriorities = _interopRequireDefault$8(propertyPriorities);
-function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _propertyPriorities = _interopRequireDefault$6(propertyPriorities);
+function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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);
@@ -2205,13 +2205,13 @@ Object.defineProperty(convertToClassName, "__esModule", {
   value: true
 });
 convertToClassName.convertStyleToClassName = convertStyleToClassName;
-var _hash$4 = _interopRequireDefault$7(hash$1);
-var _dashify$1 = _interopRequireDefault$7(dashify$1);
-var _transformValue$1 = _interopRequireDefault$7(transformValue$1);
+var _hash$4 = _interopRequireDefault$5(hash$1);
+var _dashify$1 = _interopRequireDefault$5(dashify$1);
+var _transformValue$1 = _interopRequireDefault$5(transformValue$1);
 var _generateCssRule = generateCssRule;
 var _defaultOptions$4 = defaultOptions;
 var _objectUtils$5 = objectUtils;
-function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function convertStyleToClassName(objEntry, pseudos, atRules) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions$4.defaultOptions;
   const {
@@ -2322,10 +2322,10 @@ Object.defineProperty(flattenRawStyleObj, "__esModule", {
 });
 flattenRawStyleObj._flattenRawStyleObject = _flattenRawStyleObject;
 flattenRawStyleObj.flattenRawStyleObject = flattenRawStyleObject;
-var _index$1 = _interopRequireDefault$6(preprocessRules);
+var _index$1 = _interopRequireDefault$4(preprocessRules);
 var _PreRule = PreRule$1;
 var _stylexInclude$3 = stylexInclude$2;
-function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function flattenRawStyleObject(style, options) {
   return _flattenRawStyleObject(style, [], [], options);
 }
@@ -2445,8 +2445,8 @@ basicValidation.validateNamespace = validateNamespace;
 var _stylexInclude$2 = stylexInclude$2;
 var messages = _interopRequireWildcard$1(messages$3);
 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; }
+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 validateNamespace(namespace) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   if (!(0, _objectUtils$3.isPlainObject)(namespace)) {
@@ -2471,7 +2471,7 @@ function validateNamespace(namespace) {
       if (conditions.length === 0) {
         continue;
       }
-      throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
+      throw new Error(messages.ONLY_TOP_LEVEL_INCLUDES);
     }
     if ((0, _objectUtils$3.isPlainObject)(val)) {
       if (key.startsWith('@') || key.startsWith(':')) {
@@ -2510,7 +2510,7 @@ function validateConditionalStyles(val) {
       continue;
     }
     if (v instanceof _stylexInclude$2.IncludedStyles) {
-      throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
+      throw new Error(messages.ONLY_TOP_LEVEL_INCLUDES);
     }
     if ((0, _objectUtils$3.isPlainObject)(v)) {
       validateConditionalStyles(v, [...conditions, key]);
@@ -2575,10 +2575,10 @@ Object.defineProperty(stylexDefineVars$1, "__esModule", {
   value: true
 });
 stylexDefineVars$1.default = styleXDefineVars;
-var _hash$3 = _interopRequireDefault$5(hash$1);
+var _hash$3 = _interopRequireDefault$3(hash$1);
 var _objectUtils$1 = objectUtils;
 var _defaultOptions$2 = defaultOptions;
-function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
@@ -2601,45 +2601,46 @@ function styleXDefineVars(variables, options) {
     } = _ref;
     return `var(--${nameHash})`;
   });
-  const cssVariablesString = constructCssVariablesString(variablesMap);
+  const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash);
   return [{
     ...themeVariablesObject,
     __themeName__: themeNameHash
-  }, {
-    css: cssVariablesString
-  }];
-}
-function constructCssVariablesString(variables) {
-  const atRules = {};
-  const varsString = (0, _objectUtils$1.objEntries)(variables).map(_ref2 => {
-    let [key, {
-      nameHash,
-      value
-    }] = _ref2;
+  }, injectableStyles];
+}
+function constructCssVariablesString(variables, themeNameHash) {
+  const ruleByAtRule = {};
+  for (const [key, {
+    nameHash,
+    value
+  }] of (0, _objectUtils$1.objEntries)(variables)) {
     if (value !== null && typeof value === 'object') {
       if (value.default === undefined) {
         throw new Error('Default value is not defined for ' + key + ' variable.');
       }
-      const definedVarString = `--${nameHash}:${value.default};`;
-      Object.keys(value).forEach(key => {
-        if (key.startsWith('@')) {
-          const definedVarStringForAtRule = `--${nameHash}:${value[key]};`;
-          if (atRules[key] == null) {
-            atRules[key] = [definedVarStringForAtRule];
-          } else {
-            atRules[key].push(definedVarStringForAtRule);
-          }
-        }
-      });
-      return definedVarString;
+      const v = value;
+      for (const [key, value] of (0, _objectUtils$1.objEntries)(v)) {
+        ruleByAtRule[key] ??= [];
+        ruleByAtRule[key].push(`--${nameHash}:${value};`);
+      }
+    } else {
+      ruleByAtRule.default ??= [];
+      ruleByAtRule.default.push(`--${nameHash}:${value};`);
     }
-    return `--${nameHash}:${value};`;
-  }).join('');
-  const atRulesString = (0, _objectUtils$1.objEntries)(atRules).map(_ref3 => {
-    let [atRule, varsArr] = _ref3;
-    return `${atRule}{:root{${varsArr.join('')}}}`;
-  }).join('');
-  return `:root{${varsString}}${atRulesString || ''}`;
+  }
+  const result = {};
+  for (const [key, value] of (0, _objectUtils$1.objEntries)(ruleByAtRule)) {
+    const suffix = key === 'default' ? '' : `-${(0, _hash$3.default)(key)}`;
+    let ltr = `:root{${value.join('')}}`;
+    if (key !== 'default') {
+      ltr = `${key}{${ltr}}`;
+    }
+    result[themeNameHash + suffix] = {
+      ltr,
+      rtl: null,
+      priority: key === 'default' ? 0 : 0.1
+    };
+  }
+  return result;
 }
 
 var stylexCreateTheme$1 = {};
@@ -2648,9 +2649,9 @@ Object.defineProperty(stylexCreateTheme$1, "__esModule", {
   value: true
 });
 stylexCreateTheme$1.default = styleXCreateTheme;
-var _hash$2 = _interopRequireDefault$4(hash$1);
+var _hash$2 = _interopRequireDefault$2(hash$1);
 var _defaultOptions$1 = defaultOptions;
-function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXCreateTheme(themeVars, variables, options) {
   if (typeof themeVars.__themeName__ !== 'string') {
     throw new Error('Can only override variables theme created with stylex.defineVars().');
@@ -2690,19 +2691,24 @@ function styleXCreateTheme(themeVars, variables, options) {
     return `${atRule}{${atRules[atRule].sort().join('')}}`;
   }).join('');
   const overrideClassName = classNamePrefix + (0, _hash$2.default)(cssVariablesOverrideString + atRulesStringForHash);
-  const atRulesCss = sortedAtRules.map(atRule => {
-    return `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`;
-  }).join('');
-  return [{
-    $$css: true,
-    [themeVars.__themeName__]: overrideClassName
-  }, {
+  const stylesToInject = {
     [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}${atRulesCss}`,
-      priority: 0.99,
+      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
+      priority: 0.8,
       rtl: undefined
     }
-  }];
+  };
+  for (const atRule of sortedAtRules) {
+    stylesToInject[overrideClassName + '-' + (0, _hash$2.default)(atRule)] = {
+      ltr: `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`,
+      priority: 0.9,
+      rtl: null
+    };
+  }
+  return [{
+    $$css: true,
+    [themeVars.__themeName__]: overrideClassName
+  }, stylesToInject];
 }
 
 var stylexKeyframes = {};
@@ -2711,15 +2717,15 @@ Object.defineProperty(stylexKeyframes, "__esModule", {
   value: true
 });
 stylexKeyframes.default = styleXKeyframes;
-var _hash$1 = _interopRequireDefault$3(hash$1);
-var _index = _interopRequireDefault$3(preprocessRules);
-var _generateLtr = _interopRequireDefault$3(generateLtr);
-var _generateRtl = _interopRequireDefault$3(generateRtl);
-var _transformValue = _interopRequireDefault$3(transformValue$1);
-var _dashify = _interopRequireDefault$3(dashify$1);
+var _hash$1 = _interopRequireDefault$1(hash$1);
+var _index = _interopRequireDefault$1(preprocessRules);
+var _generateLtr = _interopRequireDefault$1(generateLtr);
+var _generateRtl = _interopRequireDefault$1(generateRtl);
+var _transformValue = _interopRequireDefault$1(transformValue$1);
+var _dashify = _interopRequireDefault$1(dashify$1);
 var _objectUtils = objectUtils;
 var _defaultOptions = defaultOptions;
-function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXKeyframes(frames) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {
@@ -2994,20 +3000,20 @@ Object.defineProperty(lib, "__esModule", {
   value: true
 });
 var utils_1 = lib.utils = lib.types = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = defineVars_1 = lib.defineVars = createTheme_1 = lib.createTheme = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
-var _stylexCreate = _interopRequireDefault$2(stylexCreate$1);
-var _stylexDefineVars = _interopRequireDefault$2(stylexDefineVars$1);
-var _stylexCreateTheme = _interopRequireDefault$2(stylexCreateTheme$1);
-var _stylexKeyframes = _interopRequireDefault$2(stylexKeyframes);
+var _stylexCreate = _interopRequireDefault(stylexCreate$1);
+var _stylexDefineVars = _interopRequireDefault(stylexDefineVars$1);
+var _stylexCreateTheme = _interopRequireDefault(stylexCreateTheme$1);
+var _stylexKeyframes = _interopRequireDefault(stylexKeyframes);
 var _stylexInclude = _interopRequireWildcard(stylexInclude$2);
-var _stylexFirstThatWorks = _interopRequireDefault$2(stylexFirstThatWorks$1);
-var _hash = _interopRequireDefault$2(hash$1);
-var _fileBasedIdentifier = _interopRequireDefault$2(fileBasedIdentifier);
+var _stylexFirstThatWorks = _interopRequireDefault(stylexFirstThatWorks$1);
+var _hash = _interopRequireDefault(hash$1);
+var _fileBasedIdentifier = _interopRequireDefault(fileBasedIdentifier);
 var m = _interopRequireWildcard(messages$3);
 var _types = _interopRequireWildcard(types$1);
 lib.types = _types;
-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; }
-function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 create_1 = lib.create = _stylexCreate.default;
 defineVars_1 = lib.defineVars = _stylexDefineVars.default;
 createTheme_1 = lib.createTheme = _stylexCreateTheme.default;
@@ -3029,7 +3035,7 @@ function namespaceToDevClassName(namespace, varName, filename) {
 function injectDevClassNames(obj, varName, state) {
   const result = {};
   for (const [key, value] of Object.entries(obj)) {
-    const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnkownFile');
+    const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnknownFile');
     result[key] = {
       [devClassName]: devClassName,
       ...value
@@ -3040,7 +3046,7 @@ function injectDevClassNames(obj, varName, state) {
 function convertToTestStyles(obj, varName, state) {
   const result = {};
   for (const [key, _value] of Object.entries(obj)) {
-    const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnkownFile');
+    const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnknownFile');
     result[key] = {
       [devClassName]: devClassName,
       $$css: true
@@ -3724,14 +3730,8 @@ function evaluateStyleXCreateArg(path, traversalState) {
     }
     const fnPath = valPath;
     const allParams = fnPath.get('params');
+    validateDynamicStyleParams(allParams);
     const params = allParams.filter(param => isIdentifier(param)).map(param => param.node);
-    if (params.length !== allParams.length) {
-      return {
-        confident: false,
-        deopt: valPath,
-        value: null
-      };
-    }
     const fnBody = fnPath.get('body');
     if (!isObjectExpression(fnBody)) {
       return evaluate(path, traversalState, functions);
@@ -3855,6 +3855,11 @@ function evaluateObjKey(prop, traversalState, functions) {
     value: String(key)
   };
 }
+function validateDynamicStyleParams(params) {
+  if (params.some(param => !isIdentifier(param))) {
+    throw new Error(messages_1.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS);
+  }
+}
 
 function transformStyleXCreate(path, state) {
   const {
@@ -3867,9 +3872,6 @@ function transformStyleXCreate(path, state) {
     validateStyleXCreate(path);
     const args = path.get('arguments');
     const firstArg = args[0];
-    if (!isObjectExpression(firstArg)) {
-      throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
-    }
     state.inStyleXCreate = true;
     const injectedKeyframes = {};
     function keyframes(animation) {
@@ -3970,15 +3972,29 @@ function transformStyleXCreate(path, state) {
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
-    if (state.runtimeInjection) {
-      const statementPath = findNearestStatementAncestor(path);
-      const stylexName = getStylexDefaultImport(path, state);
+    const statementPath = path.getStatementParent();
+    if (state.runtimeInjection != null && statementPath != null) {
+      let injectName;
+      if (state.injectImportInserted != null) {
+        injectName = state.injectImportInserted;
+      } else {
+        const {
+          from,
+          as
+        } = state.runtimeInjection;
+        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+          nameHint: 'inject'
+        }) : helperModuleImports.addDefault(statementPath, from, {
+          nameHint: 'inject'
+        });
+        state.injectImportInserted = injectName;
+      }
       for (const [_key, {
         ltr,
         priority,
         rtl
       }] of Object.entries(injectedStyles)) {
-        statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
+        statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
       }
     }
     for (const [key, {
@@ -4014,19 +4030,6 @@ function findNearestStatementAncestor(path) {
   }
   return findNearestStatementAncestor(path.parentPath);
 }
-function getStylexDefaultImport(path, state) {
-  const statementPath = findNearestStatementAncestor(path);
-  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(state.importPathString)));
-    state.stylexImport.add(stylexName);
-  }
-  return stylexName;
-}
 
 function transformStyleXDefineVars(callExpressionPath, state) {
   const callExpressionNode = callExpressionPath.node;
@@ -4066,9 +4069,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       throw new Error('No filename found for generating theme name.');
     }
     const exportName = varId.name;
-    const [variablesObj, {
-      css
-    }] = defineVars_1(value, {
+    const [variablesObj, injectedStyles] = defineVars_1(value, {
       ...state.options,
       themeName: utils_1.genFileBasedIdentifier({
         fileName,
@@ -4076,28 +4077,41 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       })
     });
     callExpressionPath.replaceWith(convertObjectToAST(variablesObj));
-    if (state.runtimeInjection) {
-      const maybeStatementPath = variableDeclaratorPath.parentPath.parentPath;
-      if (maybeStatementPath == null) {
-        throw new Error('impossible');
-      }
-      const statementPath = maybeStatementPath;
-      if (!isExportNamedDeclaration(statementPath)) {
-        throw new Error('impossible');
+    const statementPath = variableDeclaratorPath.parentPath.parentPath;
+    if (Object.keys(injectedStyles).length === 0) {
+      return;
+    }
+    if (state.runtimeInjection != null && statementPath != null) {
+      let injectName;
+      if (state.injectImportInserted != null) {
+        injectName = state.injectImportInserted;
+      } else {
+        const {
+          from,
+          as
+        } = state.runtimeInjection;
+        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+          nameHint: 'inject'
+        }) : helperModuleImports.addDefault(statementPath, from, {
+          nameHint: 'inject'
+        });
+        state.injectImportInserted = injectName;
       }
-      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(state.importPathString)));
+      for (const [_k, {
+        ltr,
+        priority
+      }] of Object.entries(injectedStyles)) {
+        statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority)])));
       }
-      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]);
+    for (const [key, {
+      priority,
+      ltr
+    }] of Object.entries(injectedStyles)) {
+      state.addStyle([key, {
+        ltr
+      }, priority]);
+    }
   }
 }
 function validateStyleXDefineVars(callExpressionPath) {
@@ -4155,30 +4169,49 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
     if (typeof variables.__themeName__ !== 'string' || variables.__themeName__ === '') {
       throw new Error('Can only override variables theme created with stylex.defineVars().');
     }
-    let [overridesObj, css] = createTheme_1(variables, overrides, state.options);
+    let [overridesObj, injectedStyles] = createTheme_1(variables, overrides, state.options);
     if (state.isDev) {
       overridesObj = {
         ...overridesObj,
         [debugName]: debugName
       };
     }
-    const styleKey = overridesObj[variables.__themeName__];
     callExpressionPath.replaceWith(convertObjectToAST(overridesObj));
-    if (state.runtimeInjection) {
-      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(state.importPathString)));
+    const statementPath = variableDeclaratorPath.parentPath;
+    if (Object.keys(injectedStyles).length === 0) {
+      return;
+    }
+    if (state.runtimeInjection != null && statementPath != null) {
+      let injectName;
+      if (state.injectImportInserted != null) {
+        injectName = state.injectImportInserted;
+      } else {
+        const {
+          from,
+          as
+        } = state.runtimeInjection;
+        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+          nameHint: 'inject'
+        }) : helperModuleImports.addDefault(statementPath, from, {
+          nameHint: 'inject'
+        });
+        state.injectImportInserted = injectName;
+      }
+      for (const [_k, {
+        ltr,
+        priority
+      }] of Object.entries(injectedStyles)) {
+        statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority)])));
       }
-      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]);
+    for (const [key, {
+      priority,
+      ltr
+    }] of Object.entries(injectedStyles)) {
+      state.addStyle([key, {
+        ltr
+      }, priority]);
+    }
   }
 }
 function validateStyleXCreateTheme(callExpressionPath) {
@@ -4207,18 +4240,36 @@ function transformStyleXKeyframes(path, state) {
       throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
     }
     if (nodeInit.arguments[0].type !== 'ObjectExpression') {
-      throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_CALL);
+      throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL);
     }
     const init = path.get('init');
     if (init == null || !isCallExpression(init)) {
-      throw new Error(messages_1.NON_STATIC_VALUE);
+      throw new Error(messages_1.NON_STATIC_KEYFRAME_VALUE);
     }
     const args = init.get('arguments');
     const firstArg = args[0];
+    const identifiers = {};
+    const memberExpressions = {};
+    state.stylexFirstThatWorksImport.forEach(name => {
+      identifiers[name] = {
+        fn: firstThatWorks_1
+      };
+    });
+    state.stylexImport.forEach(name => {
+      if (memberExpressions[name] == null) {
+        memberExpressions[name] = {};
+      }
+      memberExpressions[name].firstThatWorks = {
+        fn: firstThatWorks_1
+      };
+    });
     const {
       confident,
       value
-    } = firstArg.evaluate();
+    } = evaluate(firstArg, state, {
+      identifiers,
+      memberExpressions
+    });
     if (!confident) {
       throw new Error(messages_1.NON_STATIC_VALUE);
     }
@@ -4231,17 +4282,24 @@ function transformStyleXKeyframes(path, state) {
       priority,
       rtl
     } = injectedStyle;
-    if (state.runtimeInjection && isVariableDeclaration(path.parentPath)) {
-      const statementPath = path.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(state.importPathString)));
+    const statementPath = path.getStatementParent();
+    if (statementPath != null && state.runtimeInjection != null) {
+      let injectName;
+      if (state.injectImportInserted != null) {
+        injectName = state.injectImportInserted;
+      } else {
+        const {
+          from,
+          as
+        } = state.runtimeInjection;
+        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+          nameHint: 'inject'
+        }) : helperModuleImports.addDefault(statementPath, from, {
+          nameHint: 'inject'
+        });
+        state.injectImportInserted = injectName;
       }
-      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
+      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
     }
     state.addStyle([animationName, {
       ltr,
@@ -4251,213 +4309,27 @@ function transformStyleXKeyframes(path, state) {
 }
 function assertValidKeyframes(obj) {
   if (typeof obj !== 'object' || Array.isArray(obj) || obj == null) {
-    throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_CALL);
+    throw new Error(messages_1.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL);
   }
   for (const [_key, value] of Object.entries(obj)) {
     if (typeof value !== 'object' || Array.isArray(value)) {
-      throw new Error(messages_1.ILLEGAL_NAMESPACE_VALUE);
+      throw new Error(messages_1.NON_OBJECT_KEYFRAME);
     }
   }
 }
 
 var stylex = {};
 
-var stylexInject = {};
-
-var StyleXSheet$1 = {};
-
-Object.defineProperty(StyleXSheet$1, "__esModule", {
-  value: true
-});
-StyleXSheet$1.styleSheet = StyleXSheet$1.StyleXSheet = void 0;
-var _invariant = _interopRequireDefault$1(require$$0$1);
-function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
-const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
-function buildTheme(selector, theme) {
-  const lines = [];
-  lines.push(`${selector} {`);
-  for (const key in theme) {
-    const value = theme[key];
-    lines.push(`  --${key}: ${value};`);
-  }
-  lines.push('}');
-  return lines.join('\n');
-}
-function makeStyleTag() {
-  const tag = document.createElement('style');
-  tag.setAttribute('type', 'text/css');
-  tag.setAttribute('data-stylex', 'true');
-  const head = document.head || document.getElementsByTagName('head')[0];
-  (0, _invariant.default)(head, 'expected head');
-  head.appendChild(tag);
-  return tag;
-}
-function doesSupportCSSVariables() {
-  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
-}
-const VARIABLE_MATCH = /var\(--(.*?)\)/g;
-class StyleXSheet {
-  static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
-  static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
-  constructor(opts) {
-    this.tag = null;
-    this.injected = false;
-    this.ruleForPriority = new Map();
-    this.rules = [];
-    this.rootTheme = opts.rootTheme;
-    this.rootDarkTheme = opts.rootDarkTheme;
-    this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
-  }
-  getVariableMatch() {
-    return VARIABLE_MATCH;
-  }
-  isHeadless() {
-    return this.tag == null || globalThis?.document?.body == null;
-  }
-  getTag() {
-    const {
-      tag
-    } = this;
-    (0, _invariant.default)(tag != null, 'expected tag');
-    return tag;
-  }
-  getCSS() {
-    return this.rules.join('\n');
-  }
-  getRulePosition(rule) {
-    return this.rules.indexOf(rule);
-  }
-  getRuleCount() {
-    return this.rules.length;
-  }
-  inject() {
-    if (this.injected) {
-      return;
-    }
-    this.injected = true;
-    if (globalThis.document?.body == null) {
-      this.injectTheme();
-      return;
-    }
-    this.tag = makeStyleTag();
-    this.injectTheme();
-  }
-  injectTheme() {
-    if (this.rootTheme != null) {
-      this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
-    }
-    if (this.rootDarkTheme != null) {
-      this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
-    }
-  }
-  __injectCustomThemeForTesting(selector, theme) {
-    if (theme != null) {
-      this.insert(buildTheme(selector, theme), 0);
-    }
-  }
-  delete(rule) {
-    const index = this.rules.indexOf(rule);
-    (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
-    this.rules.splice(index, 1);
-    if (this.isHeadless()) {
-      return;
-    }
-    const tag = this.getTag();
-    const sheet = tag.sheet;
-    (0, _invariant.default)(sheet, 'expected sheet');
-    sheet.deleteRule(index);
-  }
-  normalizeRule(rule) {
-    const {
-      rootTheme
-    } = this;
-    if (this.supportsVariables || rootTheme == null) {
-      return rule;
-    }
-    return rule.replace(VARIABLE_MATCH, (_match, name) => {
-      return rootTheme[name];
-    });
-  }
-  getInsertPositionForPriority(priority) {
-    const priorityRule = this.ruleForPriority.get(priority);
-    if (priorityRule != null) {
-      return this.rules.indexOf(priorityRule) + 1;
-    }
-    const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
-    if (priorities.length === 0) {
-      return this.getRuleCount();
-    }
-    const lastPriority = priorities.pop();
-    return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
-  }
-  insert(rawLTRRule, priority, rawRTLRule) {
-    if (this.injected === false) {
-      this.inject();
-    }
-    if (rawRTLRule != null) {
-      this.insert(addAncestorSelector$1(rawLTRRule, "html:not([dir='rtl'])"), priority);
-      this.insert(addAncestorSelector$1(rawRTLRule, "html[dir='rtl']"), priority);
-      return;
-    }
-    const rawRule = rawLTRRule;
-    if (this.rules.includes(rawRule)) {
-      return;
-    }
-    const rule = this.normalizeRule(rawRule);
-    const insertPos = this.getInsertPositionForPriority(priority);
-    this.rules.splice(insertPos, 0, rule);
-    this.ruleForPriority.set(priority, rule);
-    if (this.isHeadless()) {
-      return;
-    }
-    const tag = this.getTag();
-    const sheet = tag.sheet;
-    if (sheet != null) {
-      try {
-        sheet.insertRule(rule, insertPos);
-      } catch {}
-    }
-  }
-}
-StyleXSheet$1.StyleXSheet = StyleXSheet;
-function addAncestorSelector$1(selector, ancestorSelector) {
-  if (!selector.startsWith('@')) {
-    return `${ancestorSelector} ${selector}`;
-  }
-  const firstBracketIndex = selector.indexOf('{');
-  const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
-  const rest = selector.slice(firstBracketIndex + 1);
-  return `${mediaQueryPart}${ancestorSelector} ${rest}`;
-}
-StyleXSheet$1.styleSheet = new StyleXSheet({
-  supportsVariables: true,
-  rootTheme: {},
-  rootDarkTheme: {}
-});
-
-Object.defineProperty(stylexInject, "__esModule", {
-  value: true
-});
-stylexInject.default = inject$1;
-var _StyleXSheet = StyleXSheet$1;
-function inject$1(ltrRule, priority) {
-  let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);
-}
-
 var default_1;
 
 Object.defineProperty(stylex, "__esModule", {
   value: true
 });
 stylex.__monkey_patch__ = __monkey_patch__;
-stylex.keyframes = stylex.inject = stylex.include = stylex.firstThatWorks = stylex.defineVars = default_1 = stylex.default = stylex.createTheme = stylex.create = void 0;
+stylex.keyframes = stylex.include = stylex.firstThatWorks = stylex.defineVars = default_1 = stylex.default = stylex.createTheme = stylex.create = void 0;
 var props_1 = stylex.props = props;
 stylex.types = stylex.stylex = void 0;
-var _stylexInject = _interopRequireDefault(stylexInject);
-var _styleq = require$$1;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styleq = require$$0$1;
 function props() {
   const options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -4561,7 +4433,6 @@ const firstThatWorks = function () {
   throw new Error('stylex.firstThatWorks should never be called.');
 };
 stylex.firstThatWorks = firstThatWorks;
-const inject = stylex.inject = _stylexInject.default;
 function _stylex() {
   for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     styles[_key2] = arguments[_key2];
@@ -4576,7 +4447,6 @@ _stylex.createTheme = createTheme;
 _stylex.include = include;
 _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
-_stylex.inject = inject;
 _stylex.types = types;
 const __implementations = {};
 function __monkey_patch__(key, implementation) {
@@ -4607,13 +4477,17 @@ function transformStyleXMerge(path, state) {
   }
   let bailOut = false;
   let conditional = 0;
+  let currentIndex = -1;
+  let bailOutIndex = null;
   const resolvedArgs = [];
   for (const arg of node.arguments) {
+    currentIndex++;
     switch (arg.type) {
       case 'MemberExpression':
         {
           const resolved = parseNullableStyle$1(arg, state);
           if (resolved === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push(resolved);
@@ -4630,6 +4504,7 @@ function transformStyleXMerge(path, state) {
           const primary = parseNullableStyle$1(consequent, state);
           const fallback = parseNullableStyle$1(alternate, state);
           if (primary === 'other' || fallback === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push([test, primary, fallback]);
@@ -4640,6 +4515,7 @@ function transformStyleXMerge(path, state) {
       case 'LogicalExpression':
         {
           if (arg.operator !== '&&') {
+            bailOutIndex = currentIndex;
             bailOut = true;
             break;
           }
@@ -4650,6 +4526,7 @@ function transformStyleXMerge(path, state) {
           const leftResolved = parseNullableStyle$1(left, state);
           const rightResolved = parseNullableStyle$1(right, state);
           if (leftResolved !== 'other' || rightResolved === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push([left, rightResolved, null]);
@@ -4658,6 +4535,7 @@ function transformStyleXMerge(path, state) {
           break;
         }
       default:
+        bailOutIndex = currentIndex;
         bailOut = true;
         break;
     }
@@ -4672,8 +4550,12 @@ function transformStyleXMerge(path, state) {
     bailOut = true;
   }
   if (bailOut) {
-    path.traverse({
-      MemberExpression(path) {
+    const argumentPaths = path.get('arguments');
+    let nonNullProps = [];
+    let index = -1;
+    for (const argPath of argumentPaths) {
+      index++;
+      function MemberExpression(path) {
         const object = path.get('object').node;
         const property = path.get('property').node;
         const computed = path.node.computed;
@@ -4688,11 +4570,40 @@ function transformStyleXMerge(path, state) {
             propName = property.value;
           }
         }
+        let styleNonNullProps = [];
+        if (bailOutIndex != null && index > bailOutIndex) {
+          nonNullProps = true;
+          styleNonNullProps = true;
+        }
+        if (nonNullProps === true) {
+          styleNonNullProps = true;
+        } else {
+          const {
+            confident,
+            value: styleValue
+          } = evaluate(path, state);
+          if (!confident) {
+            nonNullProps = true;
+            styleNonNullProps = true;
+          } else {
+            styleNonNullProps = nonNullProps === true ? true : [...nonNullProps];
+            if (nonNullProps !== true) {
+              nonNullProps = [...nonNullProps, ...Object.keys(styleValue).filter(key => styleValue[key] !== null)];
+            }
+          }
+        }
         if (objName != null) {
-          state.styleVarsToKeep.add([objName, propName != null ? String(propName) : null]);
+          state.styleVarsToKeep.add([objName, propName != null ? String(propName) : true, styleNonNullProps]);
         }
       }
-    });
+      if (isMemberExpression(argPath)) {
+        MemberExpression(argPath);
+      } else {
+        argPath.traverse({
+          MemberExpression
+        });
+      }
+    }
   } else {
     path.skip();
     const stringExpression = makeStringExpression$1(resolvedArgs);
@@ -4788,13 +4699,17 @@ function transformStylexProps(path, state) {
   let bailOut = false;
   let conditional = 0;
   const args = node.arguments.flatMap(arg => arg.type === 'ArrayExpression' ? arg.elements : [arg]);
+  let currentIndex = -1;
+  let bailOutIndex = null;
   const resolvedArgs = [];
   for (const arg of args) {
+    currentIndex++;
     switch (arg.type) {
       case 'MemberExpression':
         {
           const resolved = parseNullableStyle(arg, state);
           if (resolved === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push(resolved);
@@ -4811,6 +4726,7 @@ function transformStylexProps(path, state) {
           const primary = parseNullableStyle(consequent, state);
           const fallback = parseNullableStyle(alternate, state);
           if (primary === 'other' || fallback === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push([test, primary, fallback]);
@@ -4821,6 +4737,7 @@ function transformStylexProps(path, state) {
       case 'LogicalExpression':
         {
           if (arg.operator !== '&&') {
+            bailOutIndex = currentIndex;
             bailOut = true;
             break;
           }
@@ -4831,6 +4748,7 @@ function transformStylexProps(path, state) {
           const leftResolved = parseNullableStyle(left, state);
           const rightResolved = parseNullableStyle(right, state);
           if (leftResolved !== 'other' || rightResolved === 'other') {
+            bailOutIndex = currentIndex;
             bailOut = true;
           } else {
             resolvedArgs.push([left, rightResolved, null]);
@@ -4839,6 +4757,7 @@ function transformStylexProps(path, state) {
           break;
         }
       default:
+        bailOutIndex = currentIndex;
         bailOut = true;
         break;
     }
@@ -4853,8 +4772,12 @@ function transformStylexProps(path, state) {
     bailOut = true;
   }
   if (bailOut) {
-    path.traverse({
-      MemberExpression(path) {
+    const argumentPaths = path.get('arguments');
+    let nonNullProps = [];
+    let index = -1;
+    for (const argPath of argumentPaths) {
+      index++;
+      function MemberExpression(path) {
         const object = path.get('object').node;
         const property = path.get('property').node;
         const computed = path.node.computed;
@@ -4869,11 +4792,40 @@ function transformStylexProps(path, state) {
             propName = property.value;
           }
         }
+        let styleNonNullProps = [];
+        if (bailOutIndex != null && index > bailOutIndex) {
+          nonNullProps = true;
+          styleNonNullProps = true;
+        }
+        if (nonNullProps === true) {
+          styleNonNullProps = true;
+        } else {
+          const {
+            confident,
+            value: styleValue
+          } = evaluate(path, state);
+          if (!confident) {
+            nonNullProps = true;
+            styleNonNullProps = true;
+          } else {
+            styleNonNullProps = nonNullProps === true ? true : [...nonNullProps];
+            if (nonNullProps !== true) {
+              nonNullProps = [...nonNullProps, ...Object.keys(styleValue).filter(key => styleValue[key] !== null)];
+            }
+          }
+        }
         if (objName != null) {
-          state.styleVarsToKeep.add([objName, propName != null ? String(propName) : null]);
+          state.styleVarsToKeep.add([objName, propName != null ? String(propName) : true, styleNonNullProps]);
         }
       }
-    });
+      if (isMemberExpression(argPath)) {
+        MemberExpression(argPath);
+      } else {
+        argPath.traverse({
+          MemberExpression
+        });
+      }
+    }
   } else {
     path.skip();
     const stringExpression = makeStringExpression(resolvedArgs);
@@ -5003,12 +4955,77 @@ function styleXTransform() {
               transformStylexProps(path, state);
             }
           });
-          const varsToKeep = new Set([...state.styleVarsToKeep.values()].map(_ref => {
+          const varsToKeep = {};
+          for (const [varName, namespaceName] of state.styleVarsToKeep) {
+            if (varsToKeep[varName] === true) {
+              continue;
+            }
+            if (varsToKeep[varName] == null) {
+              varsToKeep[varName] = namespaceName === true ? true : [namespaceName];
+            } else if (Array.isArray(varsToKeep[varName])) {
+              if (namespaceName === true) {
+                varsToKeep[varName] = true;
+              } else {
+                varsToKeep[varName].push(namespaceName);
+              }
+            }
+          }
+          const varsToKeepOld = new Set([...state.styleVarsToKeep.values()].map(_ref => {
             let [varName, _namespaceName] = _ref;
             return varName;
           }));
           state.styleVars.forEach((path, varName) => {
-            if (!varsToKeep.has(varName) && !isExported(path)) {
+            if (isExported(path)) {
+              return;
+            }
+            if (varsToKeep[varName] === true) {
+              return;
+            }
+            const namespacesToKeep = varsToKeep[varName];
+            if (namespacesToKeep == null) {
+              path.remove();
+              return;
+            }
+            if (isVariableDeclarator(path)) {
+              const init = path.get('init');
+              if (init != null && isObjectExpression(init)) {
+                for (const prop of init.get('properties')) {
+                  if (isObjectProperty(prop)) {
+                    const key = prop.get('key').node;
+                    const keyAsString = key.type === 'Identifier' ? key.name : key.type === 'StringLiteral' ? key.value : key.type === 'NumericLiteral' ? String(key.value) : null;
+                    if (keyAsString != null) {
+                      if (!namespacesToKeep.includes(keyAsString)) {
+                        prop.remove();
+                      } else {
+                        const allNullsToKeep = [...state.styleVarsToKeep.values()].filter(_ref2 => {
+                          let [v, namespaceName] = _ref2;
+                          return v === varName && namespaceName === keyAsString;
+                        }).map(_ref3 => {
+                          let [_v, _namespaceName, nullPropsToKeep] = _ref3;
+                          return nullPropsToKeep;
+                        });
+                        if (!allNullsToKeep.includes(true)) {
+                          const nullsToKeep = new Set(allNullsToKeep.filter(x => x !== true).flat());
+                          const styleObject = prop.get('value');
+                          if (isObjectExpression(styleObject)) {
+                            for (const styleProp of styleObject.get('properties')) {
+                              if (isObjectProperty(styleProp) && isNullLiteral(styleProp.get('value'))) {
+                                const styleKey = styleProp.get('key').node;
+                                const styleKeyAsString = styleKey.type === 'Identifier' ? styleKey.name : styleKey.type === 'StringLiteral' ? styleKey.value : styleKey.type === 'NumericLiteral' ? String(styleKey.value) : null;
+                                if (styleKeyAsString != null && !nullsToKeep.has(styleKeyAsString)) {
+                                  styleProp.remove();
+                                }
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            if (!varsToKeepOld.has(varName) && !isExported(path)) {
               path.remove();
             }
           });
@@ -5031,14 +5048,16 @@ function styleXTransform() {
                 computed
               } = parentPath.node;
               if (property.type === 'Identifier' && !computed) {
-                state.markComposedNamespace([name, property.name]);
-              }
-              if (property.type === 'StringLiteral' && computed) {
-                state.markComposedNamespace([name, property.value]);
+                state.markComposedNamespace([name, property.name, true]);
+              } else if (property.type === 'StringLiteral' && computed) {
+                state.markComposedNamespace([name, property.value, true]);
+              } else if (property.type === 'NumericLiteral' && computed) {
+                state.markComposedNamespace([name, String(property.value), true]);
+              } else {
+                state.markComposedNamespace([name, true, true]);
               }
-              state.markComposedNamespace([name, null]);
             } else {
-              state.markComposedNamespace([name, null]);
+              state.markComposedNamespace([name, true, true]);
             }
           }
         }
@@ -5046,9 +5065,10 @@ function styleXTransform() {
     }
   };
 }
-styleXTransform.withOptions = function stylexPluginWithOptions(options) {
+function stylexPluginWithOptions(options) {
   return [styleXTransform, options];
-};
+}
+styleXTransform.withOptions = stylexPluginWithOptions;
 function isExported(path) {
   if (path == null || isProgram(path)) {
     return false;
@@ -5063,13 +5083,13 @@ function processStylexRules(rules) {
   if (rules.length === 0) {
     return '';
   }
-  const sortedRules = rules.sort((_ref2, _ref3) => {
+  const sortedRules = rules.sort((_ref4, _ref5) => {
     let [_1, {
       ltr: rule1
-    }, firstPriority] = _ref2;
+    }, firstPriority] = _ref4;
     let [_2, {
       ltr: rule2
-    }, secondPriority] = _ref3;
+    }, secondPriority] = _ref5;
     const priorityComparison = firstPriority - secondPriority;
     if (priorityComparison !== 0) return priorityComparison;
     if (rule1.startsWith('@') && !rule2.startsWith('@')) {
@@ -5098,14 +5118,14 @@ function processStylexRules(rules) {
   }, []);
   const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
-    const collectedCSS = Array.from(new Map(group.map(_ref4 => {
-      let [a, b, _c] = _ref4;
+    const collectedCSS = Array.from(new Map(group.map(_ref6 => {
+      let [a, b, _c] = _ref6;
       return [a, b];
-    })).values()).flatMap(_ref5 => {
+    })).values()).flatMap(_ref7 => {
       let {
         ltr,
         rtl
-      } = _ref5;
+      } = _ref7;
       let ltrRule = ltr,
         rtlRule = rtl;
       if (!useLayers) {
@@ -5137,7 +5157,7 @@ function addSpecificityLevel(selector, index) {
     return selector;
   }
   const pseudo = Array.from({
-    length: index + 1
+    length: index
   }).map(() => ':not(#\\#)').join('');
   const lastOpenCurly = selector.includes('::') ? selector.indexOf('::') : selector.lastIndexOf('{');
   const beforeCurly = selector.slice(0, lastOpenCurly);