@stylexjs/shared 0.5.0 → 0.6.0

package/lib/convert-to-className.d.ts

@@ -9,8 +9,12 @@
 
 import type { TRawValue, StyleRule, StyleXOptions } from './common-types';
 export declare function convertStyleToClassName(
-  objEntry: [string, TRawValue],
+  objEntry: Readonly<[string, TRawValue]>,
   pseudos: ReadonlyArray<string>,
   atRules: ReadonlyArray<string>,
   options: StyleXOptions,
 ): StyleRule;
+declare function variableFallbacks(
+  values: ReadonlyArray<string>,
+): Array<string>;
+export default variableFallbacks;

package/lib/convert-to-className.js

@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertStyleToClassName = convertStyleToClassName;
+exports.default = variableFallbacks;
 var _hash = _interopRequireDefault(require("./hash"));
 var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _transformValue = _interopRequireDefault(require("./transform-value"));
 var _generateCssRule = require("./generate-css-rule");
 var _defaultOptions = require("./utils/default-options");
 var _objectUtils = require("./utils/object-utils");
+var messages = _interopRequireWildcard(require("./messages"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function convertStyleToClassName(objEntry, pseudos, atRules) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions.defaultOptions;
@@ -18,7 +22,10 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   } = options;
   const [key, rawValue] = objEntry;
   const dashedKey = (0, _dashify.default)(key);
-  const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue, options)) : (0, _transformValue.default)(key, rawValue, options);
+  let value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue, options)) : (0, _transformValue.default)(key, rawValue, options);
+  if (Array.isArray(value) && value.find(val => val.startsWith('var(') && val.endsWith(')'))) {
+    value = variableFallbacks(value);
+  }
   const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []);
   const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []);
   const atRuleHashString = sortedPseudos.join('');
@@ -28,4 +35,29 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   const className = classNamePrefix + (0, _hash.default)('<>' + stringToHash);
   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.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;
+  }
 }

package/lib/convert-to-className.js.flow

@@ -16,8 +16,12 @@ import type { TRawValue, StyleRule, StyleXOptions } from './common-types';
 // Hashes to get a className
 // Returns the final key, className a CSS Rule
 declare export function convertStyleToClassName(
-  objEntry: [string, TRawValue],
+  objEntry: $ReadOnly<[string, TRawValue]>,
   pseudos: $ReadOnlyArray<string>,
   atRules: $ReadOnlyArray<string>,
   options: StyleXOptions,
 ): StyleRule;
+
+declare export default function variableFallbacks(
+  values: $ReadOnlyArray<string>,
+): Array<string>;

package/lib/messages.d.ts

@@ -39,3 +39,4 @@ export declare const NO_PROJECT_ROOT_DIRECTORY: 'The project root directory `roo
 export declare const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.defineVars() must be bound to a named export.';
 export declare const ANONYMOUS_THEME: 'stylex.createTheme() must be bound to a named constant.';
 export declare const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+export declare const NON_CONTIGUOUS_VARS: 'All variables passed to `stylex.firstThatWorks` must be contiguous.';

package/lib/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INCLUDES = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0;
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INCLUDES = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.NON_CONTIGUOUS_VARS = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = exports.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
 const ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
 const NON_STATIC_VALUE = exports.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -35,4 +35,5 @@ const DUPLICATE_CONDITIONAL = exports.DUPLICATE_CONDITIONAL = 'The same pseudo s
 const NO_PROJECT_ROOT_DIRECTORY = exports.NO_PROJECT_ROOT_DIRECTORY = 'The project root directory `rootDir` is not configured.';
 const NON_EXPORT_NAMED_DECLARATION = exports.NON_EXPORT_NAMED_DECLARATION = 'The return value of stylex.defineVars() must be bound to a named export.';
 const ANONYMOUS_THEME = exports.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
-const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+const NON_CONTIGUOUS_VARS = exports.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';

package/lib/messages.js.flow

@@ -42,3 +42,4 @@ declare export const NO_PROJECT_ROOT_DIRECTORY: 'The project root directory `roo
 declare export const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.defineVars() must be bound to a named export.';
 declare export const ANONYMOUS_THEME: 'stylex.createTheme() must be bound to a named constant.';
 declare export const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+declare export const NON_CONTIGUOUS_VARS: 'All variables passed to `stylex.firstThatWorks` must be contiguous.';

package/lib/stylex-create-theme.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = styleXCreateTheme;
 var _hash = _interopRequireDefault(require("./hash"));
+var _stylexVarsUtils = require("./stylex-vars-utils");
+var _types = require("./types");
 var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXCreateTheme(themeVars, variables, options) {
@@ -17,48 +19,36 @@ function styleXCreateTheme(themeVars, variables, options) {
     ..._defaultOptions.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.default)(cssVariablesOverrideString + atRulesStringForHash);
-  const stylesToInject = {
-    [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
-      priority: 0.8,
-      rtl: undefined
-    }
-  };
+  for (const key of sortedKeys) {
+    const value = (0, _types.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.default)(atRulesStringForHash);
+  const stylesToInject = {};
   for (const atRule of sortedAtRules) {
-    stylesToInject[overrideClassName + '-' + (0, _hash.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.default)(atRule)] = {
+        ltr: (0, _stylexVarsUtils.wrapWithAtRules)(rule, atRule),
+        priority: 0.5 + 0.1 * (0, _stylexVarsUtils.priorityForAtRule)(atRule),
+        rtl: null
+      };
+    }
   }
   return [{
     $$css: true,

package/lib/stylex-define-vars.d.ts

@@ -8,13 +8,9 @@
  */
 
 import type { InjectableStyle, StyleXOptions } from './common-types';
-type VarsConfig = Readonly<{
-  [$$Key$$: string]:
-    | string
-    | Readonly<{ default: string; [$$Key$$: string]: string }>;
-}>;
+import type { VarsConfig } from './stylex-vars-utils';
 type VarsObject<Vars extends VarsConfig> = Readonly</**
- * > 17 |   ...$ObjMapConst<Vars, string>,
+ * > 14 |   ...$ObjMapConst<Vars, string>,
  *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;

package/lib/stylex-define-vars.js

@@ -7,6 +7,8 @@ exports.default = styleXDefineVars;
 var _hash = _interopRequireDefault(require("./hash"));
 var _objectUtils = require("./utils/object-utils");
 var _defaultOptions = require("./utils/default-options");
+var _stylexVarsUtils = require("./stylex-vars-utils");
+var _types = require("./types");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXDefineVars(variables, options) {
   const {
@@ -17,8 +19,20 @@ function styleXDefineVars(variables, options) {
     ...options
   };
   const themeNameHash = classNamePrefix + (0, _hash.default)(themeName);
+  const typedVariables = {};
   const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
     const nameHash = classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
+    if ((0, _types.isCSSType)(value)) {
+      const v = value;
+      typedVariables[nameHash] = {
+        initialValue: (0, _stylexVarsUtils.getDefaultValue)(v.value),
+        syntax: v.syntax
+      };
+      return {
+        nameHash,
+        value: v.value
+      };
+    }
     return {
       nameHash,
       value
@@ -31,42 +45,47 @@ function styleXDefineVars(variables, options) {
     return `var(--${nameHash})`;
   });
   const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash);
+  const injectableTypes = (0, _objectUtils.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.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.objEntries)(v)) {
-        ruleByAtRule[key] ??= [];
-        ruleByAtRule[key].push(`--${nameHash}:${value};`);
-      }
-    } else {
-      ruleByAtRule.default ??= [];
-      ruleByAtRule.default.push(`--${nameHash}:${value};`);
-    }
+  }] of Object.entries(variables)) {
+    (0, _stylexVarsUtils.collectVarsByAtRule)(key, {
+      nameHash,
+      value
+    }, rulesByAtRule);
   }
   const result = {};
-  for (const [key, value] of (0, _objectUtils.objEntries)(ruleByAtRule)) {
-    const suffix = key === 'default' ? '' : `-${(0, _hash.default)(key)}`;
+  for (const [atRule, value] of Object.entries(rulesByAtRule)) {
+    const suffix = atRule === 'default' ? '' : `-${(0, _hash.default)(atRule)}`;
     let ltr = `:root{${value.join('')}}`;
-    if (key !== 'default') {
-      ltr = `${key}{${ltr}}`;
+    if (atRule !== 'default') {
+      ltr = (0, _stylexVarsUtils.wrapWithAtRules)(ltr, atRule);
     }
     result[themeNameHash + suffix] = {
       ltr,
       rtl: null,
-      priority: key === 'default' ? 0 : 0.1
+      priority: (0, _stylexVarsUtils.priorityForAtRule)(atRule) * 0.1
     };
   }
   return result;

package/lib/stylex-define-vars.js.flow

@@ -8,10 +8,7 @@
  */
 
 import type { InjectableStyle, StyleXOptions } from './common-types';
-
-type VarsConfig = $ReadOnly<{
-  [string]: string | $ReadOnly<{ default: string, [string]: string }>,
-}>;
+import type { VarsConfig } from './stylex-vars-utils';
 
 type VarsObject<Vars: VarsConfig> = $ReadOnly<{
   ...$ObjMapConst<Vars, string>,

package/lib/stylex-first-that-works.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-declare function stylexFirstThatWorks<T>(
+declare function stylexFirstThatWorks<T extends string>(
   ...args: ReadonlyArray<T>
 ): ReadonlyArray<T>;
 export default stylexFirstThatWorks;

package/lib/stylex-first-that-works.js.flow

@@ -7,6 +7,6 @@
  * @flow strict
  */
 
-declare export default function stylexFirstThatWorks<T>(
+declare export default function stylexFirstThatWorks<T: string>(
   ...args: $ReadOnlyArray<T>
 ): $ReadOnlyArray<T>;

package/lib/stylex-vars-utils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { CSSType } from './types';
+export type VarsConfigValue =
+  | string
+  | Readonly<{ default: VarsConfigValue; [$$Key$$: string]: VarsConfigValue }>;
+export type VarsConfig = Readonly<{
+  [$$Key$$: string]: VarsConfigValue | CSSType;
+}>;
+export declare function collectVarsByAtRule(
+  key: string,
+  $$PARAM_1$$: { readonly nameHash: string; readonly value: VarsConfigValue },
+  collection: { [$$Key$$: string]: Array<string> },
+  atRules: Array<string>,
+): void;
+export declare function wrapWithAtRules(ltr: string, atRule: string): string;
+export declare function priorityForAtRule(atRule: string): number;
+export declare function getDefaultValue(
+  value: VarsConfigValue,
+): null | undefined | string;

package/lib/stylex-vars-utils.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectVarsByAtRule = collectVarsByAtRule;
+exports.getDefaultValue = getDefaultValue;
+exports.priorityForAtRule = priorityForAtRule;
+exports.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');
+}

package/lib/stylex-vars-utils.js.flow

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { CSSType } from './types';
+
+export type VarsConfigValue =
+  | string
+  | $ReadOnly<{ default: VarsConfigValue, [string]: VarsConfigValue }>;
+
+export type VarsConfig = $ReadOnly<{
+  [string]: VarsConfigValue | CSSType<>,
+}>;
+
+declare export function collectVarsByAtRule(
+  key: string,
+  { +nameHash: string, +value: VarsConfigValue },
+  collection: { [string]: Array<string> },
+  atRules: Array<string>,
+): void;
+
+declare export function wrapWithAtRules(ltr: string, atRule: string): string;
+
+declare export function priorityForAtRule(atRule: string): number;
+
+declare export function getDefaultValue(value: VarsConfigValue): ?string;