@stylexjs/babel-plugin 0.5.0 → 0.6.0

package/lib/index.js

@@ -398,17 +398,20 @@ class StateManager {
       return identifier;
     }
     const bodyPath = programPath.get('body');
-    let lastImportIndex = -1;
+    let targetImportIndex = -1;
     for (let i = 0; i < bodyPath.length; i++) {
       const statement = bodyPath[i];
       if (isImportDeclaration(statement)) {
-        lastImportIndex = i;
+        targetImportIndex = i;
+        if (statement.node.specifiers.find(s => s.type === 'ImportSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+          break;
+        }
       }
     }
-    if (lastImportIndex === -1) {
+    if (targetImportIndex === -1) {
       return identifier;
     }
-    const lastImport = bodyPath[lastImportIndex];
+    const lastImport = bodyPath[targetImportIndex];
     if (lastImport == null) {
       return identifier;
     }
@@ -423,17 +426,20 @@ class StateManager {
       return identifier;
     }
     const bodyPath = programPath.get('body');
-    let lastImportIndex = -1;
+    let targetImportIndex = -1;
     for (let i = 0; i < bodyPath.length; i++) {
       const statement = bodyPath[i];
       if (isImportDeclaration(statement)) {
-        lastImportIndex = i;
+        targetImportIndex = i;
+        if (statement.node.specifiers.find(s => s.type === 'ImportDefaultSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+          break;
+        }
       }
     }
-    if (lastImportIndex === -1) {
+    if (targetImportIndex === -1) {
       return identifier;
     }
-    const lastImport = bodyPath[lastImportIndex];
+    const lastImport = bodyPath[targetImportIndex];
     if (lastImport == null) {
       return identifier;
     }
@@ -514,6 +520,38 @@ class StateManager {
   addStyle(style) {
     this.metadata.stylex.push(style);
   }
+  registerStyles(styles, path) {
+    if (styles.length === 0) {
+      return;
+    }
+    styles.forEach(style => this.addStyle(style));
+    if (path == null || this.runtimeInjection == null) {
+      return;
+    }
+    const runtimeInjection = this.runtimeInjection;
+    const statementPath = path.parentPath != null && isProgram(path.parentPath) ? path : getProgramStatement(path);
+    let injectName;
+    if (this.injectImportInserted != null) {
+      injectName = this.injectImportInserted;
+    } else {
+      const {
+        from,
+        as
+      } = runtimeInjection;
+      injectName = as != null ? this.addNamedImport(statementPath, as, from, {
+        nameHint: 'inject'
+      }) : this.addDefaultImport(statementPath, from, {
+        nameHint: 'inject'
+      });
+      this.injectImportInserted = injectName;
+    }
+    for (const [_key, {
+      ltr,
+      rtl
+    }, priority] of styles) {
+      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
+    }
+  }
   markComposedNamespace(memberExpression) {
     this.styleVarsToKeep.add(memberExpression);
   }
@@ -581,6 +619,13 @@ const getProgramPath = path => {
   }
   return programPath;
 };
+const getProgramStatement = path => {
+  let programPath = path;
+  while (programPath.parentPath != null && !isProgram(programPath.parentPath) && programPath.parentPath != null) {
+    programPath = programPath.parentPath;
+  }
+  return programPath;
+};
 
 function readImportDeclarations(path, state) {
   const {
@@ -702,53 +747,54 @@ var objectUtils = {};
 
 var stylexInclude$2 = {};
 
-var messages$3 = {};
+var messages$4 = {};
 
-Object.defineProperty(messages$3, "__esModule", {
+Object.defineProperty(messages$4, "__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_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.';
-messages$3.NO_CONDITIONAL_SHORTHAND = 'You cannot use conditional style values for a shorthand property.';
-messages$3.ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.';
-messages$3.UNKNOWN_NAMESPACE = 'Unknown namespace';
-messages$3.ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep.";
-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_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.';
+messages$4.UNKNOWN_PROP_KEY = messages$4.UNKNOWN_NAMESPACE = messages$4.UNEXPECTED_ARGUMENT = messages$4.UNBOUND_STYLEX_CALL_VALUE = messages$4.ONLY_TOP_LEVEL_INCLUDES = messages$4.ONLY_TOP_LEVEL = messages$4.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages$4.NO_PROJECT_ROOT_DIRECTORY = messages$4.NO_PARENT_PATH = messages$4.NO_CONDITIONAL_SHORTHAND = messages$4.NON_STATIC_VALUE = messages$4.NON_STATIC_KEYFRAME_VALUE = messages$4.NON_OBJECT_KEYFRAME = messages$4.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages$4.NON_OBJECT_FOR_STYLEX_CALL = messages$4.NON_EXPORT_NAMED_DECLARATION = messages$4.NON_CONTIGUOUS_VARS = 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_ARG_LENGTH_FOR_KEYFRAMES = messages$4.ILLEGAL_ARGUMENT_LENGTH = messages$4.EXPECTED_FUNCTION_CALL = messages$4.ESCAPED_STYLEX_VALUE = messages$4.DUPLICATE_CONDITIONAL = messages$4.ANONYMOUS_THEME = void 0;
+messages$4.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
+messages$4.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
+messages$4.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
+messages$4.NON_STATIC_KEYFRAME_VALUE = 'Only static values are allowed inside of a stylex.keyframes() call.';
+messages$4.ESCAPED_STYLEX_VALUE = 'Escaping a stylex.create() value is not allowed.';
+messages$4.UNBOUND_STYLEX_CALL_VALUE = 'stylex.create calls must be bound to a bare variable.';
+messages$4.ONLY_TOP_LEVEL = 'stylex.create() is only allowed at the root of a program.';
+messages$4.NON_OBJECT_FOR_STYLEX_CALL = 'stylex.create() can only accept a style object.';
+messages$4.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = 'stylex.keyframes() can only accept an object.';
+messages$4.UNKNOWN_PROP_KEY = 'Unknown property key';
+messages$4.INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
+messages$4.INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
+messages$4.NO_CONDITIONAL_SHORTHAND = 'You cannot use conditional style values for a shorthand property.';
+messages$4.ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.';
+messages$4.UNKNOWN_NAMESPACE = 'Unknown namespace';
+messages$4.ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep.";
+messages$4.ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
+messages$4.ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
+messages$4.ILLEGAL_NAMESPACE_VALUE = 'A stylex namespace must be an object.';
+messages$4.NON_OBJECT_KEYFRAME = 'Every frame within a stylex.keyframes() call must be an object.';
+messages$4.INVALID_SPREAD = 'Imported styles spread with a stylex.create call must be type cast as `XStyle<>` to verify their type.';
+messages$4.LINT_UNCLOSED_FUNCTION = 'Rule contains an unclosed function';
+messages$4.LOCAL_ONLY = 'The return value of stylex.create() should not be exported.';
+messages$4.UNEXPECTED_ARGUMENT = 'Unexpected argument passed to the stylex() function.';
+messages$4.EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
+messages$4.NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
+messages$4.ONLY_TOP_LEVEL_INCLUDES = 'stylex.include() is only at the top level of a style definition object.';
+messages$4.DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
+messages$4.NO_PROJECT_ROOT_DIRECTORY = 'The project root directory `rootDir` is not configured.';
+messages$4.NON_EXPORT_NAMED_DECLARATION = 'The return value of stylex.defineVars() must be bound to a named export.';
+messages$4.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
+messages$4.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+messages$4.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
 
 Object.defineProperty(stylexInclude$2, "__esModule", {
   value: true
 });
 stylexInclude$2.IncludedStyles = void 0;
 stylexInclude$2.default = stylexInclude$1;
-var messages$2 = _interopRequireWildcard$3(messages$3);
-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; }
+var messages$3 = _interopRequireWildcard$4(messages$4);
+function _getRequireWildcardCache$4(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$4 = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard$4(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$4(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let number = 0;
 function uuid() {
   return `__included_${++number}__`;
@@ -761,7 +807,7 @@ class IncludedStyles {
 stylexInclude$2.IncludedStyles = IncludedStyles;
 function stylexInclude$1(firstArg) {
   if ((arguments.length <= 1 ? 0 : arguments.length - 1) > 0) {
-    throw new Error(messages$2.ILLEGAL_ARGUMENT_LENGTH);
+    throw new Error(messages$3.ILLEGAL_ARGUMENT_LENGTH);
   }
   return {
     [uuid()]: new IncludedStyles(firstArg.node)
@@ -1082,8 +1128,8 @@ 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 }; }
+var _postcssValueParser$5 = _interopRequireDefault$g(require$$0);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function printNode(node) {
   switch (node.type) {
     case 'word':
@@ -1102,7 +1148,7 @@ function splitValue(str) {
   if (Array.isArray(str)) {
     return str;
   }
-  const parsed = (0, _postcssValueParser$6.default)(str.trim());
+  const parsed = (0, _postcssValueParser$5.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');
@@ -1114,8 +1160,8 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
   value: true
 });
 legacyExpandShorthands.default = void 0;
-var _splitCssValue = _interopRequireDefault$g(splitCssValue);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue = _interopRequireDefault$f(splitCssValue);
+function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -1358,10 +1404,10 @@ Object.defineProperty(preprocessRules, "__esModule", {
 });
 preprocessRules.default = flatMapExpandedShorthands;
 preprocessRules.getExpandedKeys = getExpandedKeys;
-var _applicationOrder = _interopRequireDefault$f(applicationOrder);
-var _legacyExpandShorthands = _interopRequireDefault$f(legacyExpandShorthands);
-var _propertySpecificity = _interopRequireDefault$f(propertySpecificity);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,
@@ -1447,8 +1493,8 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
   value: true
 });
 fontSizePxToRem.default = convertFontSizeToRem;
-var _postcssValueParser$5 = _interopRequireDefault$e(require$$0);
-function _interopRequireDefault$e(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 }; }
 const ROOT_FONT_SIZE = 16;
 function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -1458,7 +1504,7 @@ function convertFontSizeToRem(ast, key) {
     if (node.type !== 'word') {
       return;
     }
-    const dimension = _postcssValueParser$5.default.unit(node.value);
+    const dimension = _postcssValueParser$4.default.unit(node.value);
     if (dimension && dimension.unit === 'px') {
       node.value = `${parseFloat(dimension.number) / ROOT_FONT_SIZE}rem`;
     }
@@ -1472,8 +1518,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(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 normalizeLeadingZero(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1483,7 +1529,7 @@ function normalizeLeadingZero(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$4.default.unit(node.value);
+    const dimension = _postcssValueParser$3.default.unit(node.value);
     if (value < 1 && value >= 0) {
       node.value = value.toString().replace('0.', '.') + (dimension ? dimension.unit : '');
     }
@@ -1509,14 +1555,14 @@ function normalizeQuotes(ast, _) {
   return ast;
 }
 
-var timings$1 = {};
+var timings = {};
 
-Object.defineProperty(timings$1, "__esModule", {
+Object.defineProperty(timings, "__esModule", {
   value: true
 });
-timings$1.default = normalizeTimings;
-var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+timings.default = normalizeTimings;
+var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeTimings(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1526,7 +1572,7 @@ function normalizeTimings(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$3.default.unit(node.value);
+    const dimension = _postcssValueParser$2.default.unit(node.value);
     if (!dimension || dimension.unit !== 'ms' || value < 10) {
       return;
     }
@@ -1586,56 +1632,19 @@ function normalizeWhitespace(ast, _) {
   return ast;
 }
 
-var zeroDimensions = {};
-
-Object.defineProperty(zeroDimensions, "__esModule", {
-  value: true
-});
-zeroDimensions.default = normalizeZeroDimensions;
-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, _) {
-  let endFunction = 0;
-  ast.walk(node => {
-    if (node.type === 'function' && !endFunction) {
-      endFunction = node.sourceEndIndex ?? 0;
-    }
-    if (endFunction > 0 && node.sourceIndex > endFunction) {
-      endFunction = 0;
-    }
-    if (node.type !== 'word') {
-      return;
-    }
-    const dimension = _postcssValueParser$2.default.unit(node.value);
-    if (!dimension || dimension.number !== '0') {
-      return;
-    }
-    if (angles.indexOf(dimension.unit) !== -1) {
-      node.value = '0deg';
-    } else if (timings.indexOf(dimension.unit) !== -1) {
-      node.value = '0s';
-    } else if (!endFunction) {
-      node.value = '0';
-    }
-  });
-  return ast;
-}
-
 var detectUnclosedFns$1 = {};
 
 Object.defineProperty(detectUnclosedFns$1, "__esModule", {
   value: true
 });
 detectUnclosedFns$1.default = detectUnclosedFns;
-var messages$1 = _interopRequireWildcard$2(messages$3);
-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; }
+var messages$2 = _interopRequireWildcard$3(messages$4);
+function _getRequireWildcardCache$3(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$3 = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard$3(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$3(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function detectUnclosedFns(ast, _) {
   ast.walk(node => {
     if (node.type === 'function' && node.unclosed) {
-      throw new Error(messages$1.LINT_UNCLOSED_FUNCTION);
+      throw new Error(messages$2.LINT_UNCLOSED_FUNCTION);
     }
   });
   return ast;
@@ -1672,14 +1681,13 @@ 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 _timings = _interopRequireDefault$9(timings);
 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];
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
     useRemForFontSize
@@ -2615,12 +2623,16 @@ Object.defineProperty(convertToClassName, "__esModule", {
   value: true
 });
 convertToClassName.convertStyleToClassName = convertStyleToClassName;
+convertToClassName.default = variableFallbacks;
 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;
+var messages$1 = _interopRequireWildcard$2(messages$4);
+function _getRequireWildcardCache$2(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$2 = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard$2(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$2(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function convertStyleToClassName(objEntry, pseudos, atRules) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions$4.defaultOptions;
@@ -2629,7 +2641,10 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   } = options;
   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, options)) : (0, _transformValue$1.default)(key, rawValue, options);
+  let value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue$1.default)(key, eachValue, options)) : (0, _transformValue$1.default)(key, rawValue, options);
+  if (Array.isArray(value) && value.find(val => val.startsWith('var(') && val.endsWith(')'))) {
+    value = variableFallbacks(value);
+  }
   const sortedPseudos = (0, _objectUtils$5.arraySort)(pseudos ?? []);
   const sortedAtRules = (0, _objectUtils$5.arraySort)(atRules ?? []);
   const atRuleHashString = sortedPseudos.join('');
@@ -2640,6 +2655,31 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
   return [key, className, cssRules];
 }
+function variableFallbacks(values) {
+  const firstVar = values.findIndex(val => val.startsWith('var(') && val.endsWith(')'));
+  const lastVar = values.findLastIndex(val => val.startsWith('var(') && val.endsWith(')'));
+  const valuesBeforeFirstVar = values.slice(0, firstVar);
+  let varValues = values.slice(firstVar, lastVar + 1).reverse();
+  const valuesAfterLastVar = values.slice(lastVar + 1);
+  if (varValues.find(val => !val.startsWith('var(') || !val.endsWith(')'))) {
+    throw new Error(messages$1.NON_CONTIGUOUS_VARS);
+  }
+  varValues = varValues.map(val => val.slice(4, -1));
+  return [...(valuesBeforeFirstVar.length > 0 ? valuesBeforeFirstVar.map(val => composeVars(...varValues, val)) : composeVars(...varValues)), ...valuesAfterLastVar];
+}
+function composeVars() {
+  for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
+    vars[_key] = arguments[_key];
+  }
+  const [first, ...rest] = vars;
+  if (rest.length > 0) {
+    return `var(${first},${composeVars(...rest)})`;
+  } else if (first.startsWith('--')) {
+    return `var(${first})`;
+  } else {
+    return first;
+  }
+}
 
 Object.defineProperty(PreRule$1, "__esModule", {
   value: true
@@ -2853,7 +2893,7 @@ Object.defineProperty(basicValidation, "__esModule", {
 });
 basicValidation.validateNamespace = validateNamespace;
 var _stylexInclude$2 = stylexInclude$2;
-var messages = _interopRequireWildcard$1(messages$3);
+var messages = _interopRequireWildcard$1(messages$4);
 var _objectUtils$3 = objectUtils;
 function _getRequireWildcardCache$1(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache$1 = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard$1(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache$1(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -2981,6 +3021,224 @@ function styleXCreateSet(namespaces) {
 
 var stylexDefineVars$1 = {};
 
+var stylexVarsUtils = {};
+
+Object.defineProperty(stylexVarsUtils, "__esModule", {
+  value: true
+});
+stylexVarsUtils.collectVarsByAtRule = collectVarsByAtRule;
+stylexVarsUtils.getDefaultValue = getDefaultValue;
+stylexVarsUtils.priorityForAtRule = priorityForAtRule;
+stylexVarsUtils.wrapWithAtRules = wrapWithAtRules;
+const SPLIT_TOKEN = '__$$__';
+function collectVarsByAtRule(key, _ref) {
+  let {
+    nameHash,
+    value
+  } = _ref;
+  let collection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let atRules = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  if (typeof value === 'string' || typeof value === 'number') {
+    const val = typeof value === 'number' ? value.toString() : value;
+    const key = atRules.length === 0 ? 'default' : [...atRules].sort().join(SPLIT_TOKEN);
+    collection[key] ??= [];
+    collection[key].push(`--${nameHash}:${val};`);
+    return;
+  }
+  if (value === null) {
+    return;
+  }
+  if (Array.isArray(value)) {
+    throw new Error('Array is not supported in stylex.defineVars');
+  }
+  if (typeof value === 'object') {
+    if (value.default === undefined) {
+      throw new Error('Default value is not defined for ' + key + ' variable.');
+    }
+    for (const atRule of Object.keys(value)) {
+      collectVarsByAtRule(key, {
+        nameHash,
+        value: value[atRule]
+      }, collection, atRule === 'default' ? atRules : [...atRules, atRule]);
+    }
+  }
+}
+function wrapWithAtRules(ltr, atRule) {
+  return atRule.split(SPLIT_TOKEN).reduce((acc, atRule) => `${atRule}{${acc}}`, ltr);
+}
+function priorityForAtRule(atRule) {
+  if (atRule === 'default') {
+    return 0;
+  }
+  return atRule.split(SPLIT_TOKEN).length;
+}
+function getDefaultValue(value) {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value.toString();
+  }
+  if (value == null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    throw new Error('Array is not supported in stylex.defineVars');
+  }
+  if (typeof value === 'object') {
+    if (value.default === undefined) {
+      throw new Error('Default value is not defined for variable.');
+    }
+    return getDefaultValue(value.default);
+  }
+  throw new Error('Invalid value in stylex.defineVars');
+}
+
+var types$1 = {};
+
+Object.defineProperty(types$1, "__esModule", {
+  value: true
+});
+types$1.url = types$1.transformList = types$1.transformFunction = types$1.time = types$1.resolution = types$1.percentage = types$1.number = types$1.lengthPercentage = types$1.length = types$1.isCSSType = types$1.integer = types$1.image = types$1.color = types$1.angle = types$1.Url = types$1.TransformList = types$1.TransformFunction = types$1.Time = types$1.Resolution = types$1.Percentage = types$1.Num = types$1.LengthPercentage = types$1.Length = types$1.Integer = types$1.Image = types$1.Color = types$1.Angle = void 0;
+class BaseCSSType {
+  constructor(value) {
+    this.value = value;
+  }
+}
+const isCSSType = value => {
+  return value instanceof BaseCSSType && value.value != null && typeof value.syntax === 'string';
+};
+types$1.isCSSType = isCSSType;
+class Angle extends BaseCSSType {
+  syntax = '<angle>';
+  static syntax = '<angle>';
+  static create(value) {
+    return new Angle(value);
+  }
+}
+types$1.Angle = Angle;
+types$1.angle = Angle.create;
+class Color extends BaseCSSType {
+  syntax = '<color>';
+  static create(value) {
+    return new Color(value);
+  }
+}
+types$1.Color = Color;
+types$1.color = Color.create;
+class Url extends BaseCSSType {
+  syntax = '<url>';
+  static create(value) {
+    return new Url(value);
+  }
+}
+types$1.Url = Url;
+types$1.url = Url.create;
+class Image extends Url {
+  syntax = '<image>';
+  constructor(value) {
+    super(value);
+    this.value = value;
+  }
+  static create(value) {
+    return new Image(value);
+  }
+}
+types$1.Image = Image;
+types$1.image = Image.create;
+class Integer extends BaseCSSType {
+  syntax = '<integer>';
+  static create(value) {
+    return new Integer(convertNumberToStringUsing(String)(value));
+  }
+}
+types$1.Integer = Integer;
+types$1.integer = Integer.create;
+class LengthPercentage extends BaseCSSType {
+  syntax = '<length-percentage>';
+  static createLength(value) {
+    return new LengthPercentage(convertNumberToLength(value));
+  }
+  static createPercentage(value) {
+    return new LengthPercentage(convertNumberToPercentage(value));
+  }
+}
+types$1.LengthPercentage = LengthPercentage;
+types$1.lengthPercentage = LengthPercentage.createLength;
+class Length extends LengthPercentage {
+  syntax = '<length>';
+  static create(value) {
+    return new Length(convertNumberToLength(value));
+  }
+}
+types$1.Length = Length;
+types$1.length = Length.create;
+class Percentage extends LengthPercentage {
+  syntax = '<percentage>';
+  static create(value) {
+    return new Percentage(convertNumberToPercentage(value));
+  }
+}
+types$1.Percentage = Percentage;
+types$1.percentage = Percentage.create;
+class Num extends BaseCSSType {
+  syntax = '<number>';
+  static create(value) {
+    return new Num(convertNumberToBareString(value));
+  }
+}
+types$1.Num = Num;
+types$1.number = Num.create;
+class Resolution extends BaseCSSType {
+  syntax = '<resolution>';
+  static create(value) {
+    return new Resolution(value);
+  }
+}
+types$1.Resolution = Resolution;
+types$1.resolution = Resolution.create;
+class Time extends BaseCSSType {
+  syntax = '<time>';
+  static create(value) {
+    return new Time(value);
+  }
+}
+types$1.Time = Time;
+types$1.time = Time.create;
+class TransformFunction extends BaseCSSType {
+  syntax = '<transform-function>';
+  static create(value) {
+    return new TransformFunction(value);
+  }
+}
+types$1.TransformFunction = TransformFunction;
+types$1.transformFunction = TransformFunction.create;
+class TransformList extends BaseCSSType {
+  syntax = '<transform-list>';
+  static create(value) {
+    return new TransformList(value);
+  }
+}
+types$1.TransformList = TransformList;
+types$1.transformList = TransformList.create;
+const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
+  if (typeof value === 'number') {
+    return transformNumber(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'object') {
+    const val = value;
+    const result = {};
+    for (const key of Object.keys(val)) {
+      result[key] = convertNumberToStringUsing(transformNumber)(val[key]);
+    }
+    return result;
+  }
+  return value;
+};
+const convertNumberToBareString = convertNumberToStringUsing(value => String(value));
+const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`);
+const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`);
+
 Object.defineProperty(stylexDefineVars$1, "__esModule", {
   value: true
 });
@@ -2988,6 +3246,8 @@ stylexDefineVars$1.default = styleXDefineVars;
 var _hash$3 = _interopRequireDefault$3(hash$1);
 var _objectUtils$1 = objectUtils;
 var _defaultOptions$2 = defaultOptions;
+var _stylexVarsUtils$1 = stylexVarsUtils;
+var _types$2 = types$1;
 function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXDefineVars(variables, options) {
   const {
@@ -2998,8 +3258,20 @@ function styleXDefineVars(variables, options) {
     ...options
   };
   const themeNameHash = classNamePrefix + (0, _hash$3.default)(themeName);
+  const typedVariables = {};
   const variablesMap = (0, _objectUtils$1.objMap)(variables, (value, key) => {
     const nameHash = classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
+    if ((0, _types$2.isCSSType)(value)) {
+      const v = value;
+      typedVariables[nameHash] = {
+        initialValue: (0, _stylexVarsUtils$1.getDefaultValue)(v.value),
+        syntax: v.syntax
+      };
+      return {
+        nameHash,
+        value: v.value
+      };
+    }
     return {
       nameHash,
       value
@@ -3012,42 +3284,47 @@ function styleXDefineVars(variables, options) {
     return `var(--${nameHash})`;
   });
   const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash);
+  const injectableTypes = (0, _objectUtils$1.objMap)(typedVariables, (_ref2, nameHash) => {
+    let {
+      initialValue: iv,
+      syntax
+    } = _ref2;
+    return {
+      ltr: `@property --${nameHash} { syntax: "${syntax}"; inherits: true;${iv != null ? ` initial-value: ${iv}` : ''} }`,
+      rtl: null,
+      priority: 0
+    };
+  });
   return [{
     ...themeVariablesObject,
     __themeName__: themeNameHash
-  }, injectableStyles];
+  }, {
+    ...injectableTypes,
+    ...injectableStyles
+  }];
 }
 function constructCssVariablesString(variables, themeNameHash) {
-  const ruleByAtRule = {};
+  const rulesByAtRule = {};
   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 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};`);
-    }
+  }] of Object.entries(variables)) {
+    (0, _stylexVarsUtils$1.collectVarsByAtRule)(key, {
+      nameHash,
+      value
+    }, rulesByAtRule);
   }
   const result = {};
-  for (const [key, value] of (0, _objectUtils$1.objEntries)(ruleByAtRule)) {
-    const suffix = key === 'default' ? '' : `-${(0, _hash$3.default)(key)}`;
+  for (const [atRule, value] of Object.entries(rulesByAtRule)) {
+    const suffix = atRule === 'default' ? '' : `-${(0, _hash$3.default)(atRule)}`;
     let ltr = `:root{${value.join('')}}`;
-    if (key !== 'default') {
-      ltr = `${key}{${ltr}}`;
+    if (atRule !== 'default') {
+      ltr = (0, _stylexVarsUtils$1.wrapWithAtRules)(ltr, atRule);
     }
     result[themeNameHash + suffix] = {
       ltr,
       rtl: null,
-      priority: key === 'default' ? 0 : 0.1
+      priority: (0, _stylexVarsUtils$1.priorityForAtRule)(atRule) * 0.1
     };
   }
   return result;
@@ -3060,6 +3337,8 @@ Object.defineProperty(stylexCreateTheme$1, "__esModule", {
 });
 stylexCreateTheme$1.default = styleXCreateTheme;
 var _hash$2 = _interopRequireDefault$2(hash$1);
+var _stylexVarsUtils = stylexVarsUtils;
+var _types$1 = types$1;
 var _defaultOptions$1 = defaultOptions;
 function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXCreateTheme(themeVars, variables, options) {
@@ -3072,48 +3351,36 @@ function styleXCreateTheme(themeVars, variables, options) {
     ..._defaultOptions$1.defaultOptions,
     ...options
   };
+  const rulesByAtRule = {};
   const sortedKeys = Object.keys(variables).sort();
-  const atRules = {};
-  const cssVariablesOverrideString = sortedKeys.map(key => {
-    const varNameHash = themeVars[key].slice(4, -1);
-    const value = variables[key];
-    if (varNameHash != null && value !== null && typeof value === 'object') {
-      if (value.default === undefined) {
-        throw new Error('Default value is not defined for ' + key + ' variable.');
-      }
-      const definedVarString = `${varNameHash}:${value.default};`;
-      Object.keys(value).forEach(key => {
-        if (key.startsWith('@')) {
-          const definedVarStringForAtRule = `${varNameHash}:${value[key]};`;
-          if (atRules[key] == null) {
-            atRules[key] = [definedVarStringForAtRule];
-          } else {
-            atRules[key].push(definedVarStringForAtRule);
-          }
-        }
-      });
-      return definedVarString;
-    }
-    return varNameHash != null && typeof value !== 'object' ? `${varNameHash}:${value};` : '';
-  }).join('');
-  const sortedAtRules = Object.keys(atRules).sort();
-  const atRulesStringForHash = sortedAtRules.map(atRule => {
-    return `${atRule}{${atRules[atRule].sort().join('')}}`;
-  }).join('');
-  const overrideClassName = classNamePrefix + (0, _hash$2.default)(cssVariablesOverrideString + atRulesStringForHash);
-  const stylesToInject = {
-    [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
-      priority: 0.8,
-      rtl: undefined
-    }
-  };
+  for (const key of sortedKeys) {
+    const value = (0, _types$1.isCSSType)(variables[key]) ? variables[key].value : variables[key];
+    const nameHash = themeVars[key].slice(6, -1);
+    (0, _stylexVarsUtils.collectVarsByAtRule)(key, {
+      nameHash,
+      value
+    }, rulesByAtRule);
+  }
+  const sortedAtRules = Object.keys(rulesByAtRule).sort((a, b) => a === 'default' ? -1 : b === 'default' ? 1 : a.localeCompare(b));
+  const atRulesStringForHash = sortedAtRules.map(atRule => (0, _stylexVarsUtils.wrapWithAtRules)(rulesByAtRule[atRule].join(''), atRule)).join('');
+  const overrideClassName = classNamePrefix + (0, _hash$2.default)(atRulesStringForHash);
+  const stylesToInject = {};
   for (const atRule of sortedAtRules) {
-    stylesToInject[overrideClassName + '-' + (0, _hash$2.default)(atRule)] = {
-      ltr: `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`,
-      priority: 0.9,
-      rtl: null
-    };
+    const decls = rulesByAtRule[atRule].join('');
+    const rule = `.${overrideClassName}{${decls}}`;
+    if (atRule === 'default') {
+      stylesToInject[overrideClassName] = {
+        ltr: rule,
+        priority: 0.5,
+        rtl: null
+      };
+    } else {
+      stylesToInject[overrideClassName + '-' + (0, _hash$2.default)(atRule)] = {
+        ltr: (0, _stylexVarsUtils.wrapWithAtRules)(rule, atRule),
+        priority: 0.5 + 0.1 * (0, _stylexVarsUtils.priorityForAtRule)(atRule),
+        rtl: null
+      };
+    }
   }
   return [{
     $$css: true,
@@ -3205,198 +3472,6 @@ function genFileBasedIdentifier(_ref) {
   return `${fileName}//${exportName}${key != null ? `.${key}` : ''}`;
 }
 
-var types$1 = {};
-
-Object.defineProperty(types$1, "__esModule", {
-  value: true
-});
-types$1.url = types$1.transformList = types$1.transformFunction = types$1.time = types$1.resolution = types$1.percentage = types$1.number = types$1.lengthPercentage = types$1.length = types$1.integer = types$1.image = types$1.color = types$1.angle = types$1.Url = types$1.TransformList = types$1.TransformFunction = types$1.Time = types$1.Resolution = types$1.Percentage = types$1.Num = types$1.LengthPercentage = types$1.Length = types$1.Integer = types$1.Image = types$1.Color = types$1.CSSType = types$1.Angle = void 0;
-class CSSType {}
-types$1.CSSType = CSSType;
-class Angle extends CSSType {
-  syntax = '<angle>';
-  static syntax = '<angle>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Angle(value);
-  }
-}
-types$1.Angle = Angle;
-types$1.angle = Angle.create;
-class Color extends CSSType {
-  syntax = '<color>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Color(value);
-  }
-}
-types$1.Color = Color;
-types$1.color = Color.create;
-class Url extends CSSType {
-  syntax = '<url>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Url(value);
-  }
-}
-types$1.Url = Url;
-types$1.url = Url.create;
-class Image extends Url {
-  syntax = '<image>';
-  constructor(value) {
-    super(value);
-    this.value = value;
-  }
-  static create(value) {
-    return new Image(value);
-  }
-}
-types$1.Image = Image;
-types$1.image = Image.create;
-class Integer extends CSSType {
-  syntax = '<integer>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Integer(value);
-  }
-}
-types$1.Integer = Integer;
-types$1.integer = Integer.create;
-class LengthPercentage extends CSSType {
-  syntax = '<length-percentage>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static createLength(value) {
-    return new LengthPercentage(convertNumberToLength(value));
-  }
-  static createPercentage(value) {
-    return new LengthPercentage(convertNumberToPercentage(value));
-  }
-}
-types$1.LengthPercentage = LengthPercentage;
-types$1.lengthPercentage = LengthPercentage.createLength;
-class Length extends LengthPercentage {
-  syntax = '<length>';
-  constructor(value) {
-    super(convertNumberToLength(value));
-  }
-  static create(value) {
-    return new Length(value);
-  }
-}
-types$1.Length = Length;
-types$1.length = Length.create;
-class Percentage extends LengthPercentage {
-  syntax = '<percentage>';
-  constructor(value) {
-    super(convertNumberToPercentage(value));
-  }
-  static create(value) {
-    return new Percentage(value);
-  }
-}
-types$1.Percentage = Percentage;
-types$1.percentage = Percentage.create;
-class Num extends CSSType {
-  syntax = '<number>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Num(value);
-  }
-}
-types$1.Num = Num;
-types$1.number = Num.create;
-class Resolution extends CSSType {
-  syntax = '<resolution>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Resolution(value);
-  }
-}
-types$1.Resolution = Resolution;
-types$1.resolution = Resolution.create;
-class Time extends CSSType {
-  syntax = '<time>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new Time(value);
-  }
-}
-types$1.Time = Time;
-types$1.time = Time.create;
-class TransformFunction extends CSSType {
-  syntax = '<transform-function>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new TransformFunction(value);
-  }
-}
-types$1.TransformFunction = TransformFunction;
-types$1.transformFunction = TransformFunction.create;
-class TransformList extends CSSType {
-  syntax = '<transform-list>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  static create(value) {
-    return new TransformList(value);
-  }
-}
-types$1.TransformList = TransformList;
-types$1.transformList = TransformList.create;
-const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
-  if (typeof value === 'number') {
-    return transformNumber(value);
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (typeof value === 'object') {
-    const {
-      default: defaultValue,
-      ...rest
-    } = value;
-    const defaultResult = convertNumberToLength(defaultValue);
-    const result = {
-      default: typeof defaultResult === 'string' ? defaultResult : defaultStr
-    };
-    for (const [key, value] of Object.entries(rest)) {
-      result[key] = convertNumberToLength(value);
-    }
-    return result;
-  }
-  return value;
-};
-const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`, '0px');
-const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`, '0');
-
 var IncludedStyles_1;
 var create_1;
 var createTheme_1;
@@ -3418,7 +3493,7 @@ var _stylexInclude = _interopRequireWildcard(stylexInclude$2);
 var _stylexFirstThatWorks = _interopRequireDefault(stylexFirstThatWorks$1);
 var _hash = _interopRequireDefault(hash$1);
 var _fileBasedIdentifier = _interopRequireDefault(fileBasedIdentifier);
-var m = _interopRequireWildcard(messages$3);
+var m = _interopRequireWildcard(messages$4);
 var _types = _interopRequireWildcard(types$1);
 lib.types = _types;
 var _propertyPriorities = propertyPriorities;
@@ -3475,6 +3550,12 @@ function convertObjectToAST(obj) {
     return value instanceof IncludedStyles_1 ? t__namespace.spreadElement(value.astNode) : t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : typeof value === 'number' ? t__namespace.numericLiteral(value) : typeof value === 'boolean' ? t__namespace.booleanLiteral(value) : value === null ? t__namespace.nullLiteral() : convertObjectToAST(value));
   }));
 }
+function removeObjectsWithSpreads(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(_ref2 => {
+    let [_key, value] = _ref2;
+    return Object.values(value).every(val => !(val instanceof IncludedStyles_1));
+  }).filter(Boolean));
+}
 function canBeIdentifier(str) {
   return str.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/) != null;
 }
@@ -3576,6 +3657,10 @@ function evaluateCached(path, state) {
       resolved: false
     };
     seen.set(node, item);
+    if (node == null) {
+      deopt(path, state);
+      return;
+    }
     const val = _evaluate(path, state);
     if (state.confident) {
       item.resolved = true;
@@ -4251,7 +4336,8 @@ function transformStyleXCreate(path, state) {
       };
     }
     if (varName != null) {
-      state.styleMap.set(varName, compiledStyles);
+      const stylesToRemember = removeObjectsWithSpreads(compiledStyles);
+      state.styleMap.set(varName, stylesToRemember);
       state.styleVars.set(varName, path.parentPath);
     }
     const resultAst = convertObjectToAST(compiledStyles);
@@ -4273,41 +4359,18 @@ function transformStyleXCreate(path, state) {
         return prop;
       });
     }
+    const listOfStyles = Object.entries(injectedStyles).map(_ref2 => {
+      let [key, {
+        priority,
+        ...rest
+      }] = _ref2;
+      return [key, rest, priority];
+    });
+    state.registerStyles(listOfStyles, path);
     path.replaceWith(resultAst);
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
-    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 ? state.addNamedImport(statementPath, as, from, {
-          nameHint: 'inject'
-        }) : state.addDefaultImport(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(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
-      }
-    }
-    for (const [key, {
-      priority,
-      ...rest
-    }] of Object.entries(injectedStyles)) {
-      state.addStyle([key, rest, priority]);
-    }
   }
   state.inStyleXCreate = false;
 }
@@ -4405,41 +4468,14 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       ...injectedStylesSansKeyframes
     };
     callExpressionPath.replaceWith(convertObjectToAST(variablesObj));
-    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 ? state.addNamedImport(statementPath, as, from, {
-          nameHint: 'inject'
-        }) : state.addDefaultImport(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)])));
-      }
-    }
-    for (const [key, {
-      priority,
-      ltr
-    }] of Object.entries(injectedStyles)) {
-      state.addStyle([key, {
-        ltr
-      }, priority]);
-    }
+    const listOfStyles = Object.entries(injectedStyles).map(_ref => {
+      let [key, {
+        priority,
+        ...rest
+      }] = _ref;
+      return [key, rest, priority];
+    });
+    state.registerStyles(listOfStyles, variableDeclaratorPath);
   }
 }
 function validateStyleXDefineVars(callExpressionPath) {
@@ -4467,13 +4503,11 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
     if (!isVariableDeclarator(variableDeclaratorPath)) {
       return;
     }
-    const varNamePath = variableDeclaratorPath.get('id');
-    let varName = 'UnknownVar';
-    if (varNamePath.isIdentifier()) {
-      varName = varNamePath.node.name;
+    const id = variableDeclaratorPath.get('id');
+    if (!isIdentifier(id)) {
+      return;
     }
-    const fileName = state.fileNameForHashing ?? 'UnknownFile';
-    const debugName = `${fileName}__${varName}`;
+    const variableName = id.node.name;
     const args = callExpressionPath.get('arguments');
     const firstArg = args[0];
     const secondArg = args[1];
@@ -4498,48 +4532,32 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
       throw new Error('Can only override variables theme created with stylex.defineVars().');
     }
     let [overridesObj, injectedStyles] = createTheme_1(variables, overrides, state.options);
-    if (state.isDev) {
+    if (state.isTest) {
+      const fileName = state.filename ?? 'UnknownFile';
+      const basename = path.basename(fileName).split('.')[0];
+      const devClassName = `${basename}__${variableName}`;
+      overridesObj = {
+        [devClassName]: devClassName,
+        $$css: true
+      };
+    } else if (state.isDev) {
+      const fileName = state.filename ?? 'UnknownFile';
+      const basename = path.basename(fileName).split('.')[0];
+      const devClassName = `${basename}__${variableName}`;
       overridesObj = {
-        ...overridesObj,
-        [debugName]: debugName
+        [devClassName]: devClassName,
+        ...overridesObj
       };
     }
     callExpressionPath.replaceWith(convertObjectToAST(overridesObj));
-    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 ? state.addNamedImport(statementPath, as, from, {
-          nameHint: 'inject'
-        }) : state.addDefaultImport(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)])));
-      }
-    }
-    for (const [key, {
-      priority,
-      ltr
-    }] of Object.entries(injectedStyles)) {
-      state.addStyle([key, {
-        ltr
-      }, priority]);
-    }
+    const listOfStyles = Object.entries(injectedStyles).map(_ref => {
+      let [key, {
+        priority,
+        ...rest
+      }] = _ref;
+      return [key, rest, priority];
+    });
+    state.registerStyles(listOfStyles, variableDeclaratorPath);
   }
 }
 function validateStyleXCreateTheme(callExpressionPath) {
@@ -4603,36 +4621,16 @@ function transformStyleXKeyframes(path, state) {
     }
     const plainObject = value;
     assertValidKeyframes(plainObject);
-    const [animationName, injectedStyle] = keyframes_1(plainObject, state.options);
-    init.replaceWith(t__namespace.stringLiteral(animationName));
-    const {
+    const [animationName, {
       ltr,
       priority,
       rtl
-    } = injectedStyle;
-    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 ? state.addNamedImport(statementPath, as, from, {
-          nameHint: 'inject'
-        }) : state.addDefaultImport(statementPath, from, {
-          nameHint: 'inject'
-        });
-        state.injectImportInserted = injectName;
-      }
-      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, {
+    }] = keyframes_1(plainObject, state.options);
+    init.replaceWith(t__namespace.stringLiteral(animationName));
+    state.registerStyles([[animationName, {
       ltr,
       rtl
-    }, priority]);
+    }, priority]], path);
   }
 }
 function assertValidKeyframes(obj) {
@@ -5076,7 +5074,7 @@ function transformStyleXMerge(path, state) {
             confident,
             value: styleValue
           } = evaluate(path, state);
-          if (!confident) {
+          if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
           } else {
@@ -5298,7 +5296,7 @@ function transformStylexProps(path, state) {
             confident,
             value: styleValue
           } = evaluate(path, state);
-          if (!confident) {
+          if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
           } else {
@@ -5533,7 +5531,7 @@ function transformStylexAttrs(path, state) {
             confident,
             value: styleValue
           } = evaluate(path, state);
-          if (!confident) {
+          if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
           } else {