@stylexjs/shared 0.17.5 → 0.18.0

package/lib/stylex-defaultMarker.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { StyleXOptions } from './common-types';
+declare function stylexDefaultMarker(options?: StyleXOptions): {
+  [$$Key$$: string]: string | true;
+};
+export default stylexDefaultMarker;

package/lib/stylex-defaultMarker.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = stylexDefaultMarker;
+var _defaultOptions = require("./utils/default-options");
+function stylexDefaultMarker(options = _defaultOptions.defaultOptions) {
+  const prefix = options.classNamePrefix != null ? `${options.classNamePrefix}-` : '';
+  return {
+    [`${prefix}default-marker`]: `${prefix}default-marker`,
+    $$css: true
+  };
+}

package/lib/stylex-defaultMarker.js.flow

@@ -0,0 +1,13 @@
+/**
+ * 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 { StyleXOptions } from './common-types';
+declare export default function stylexDefaultMarker(options?: StyleXOptions): {
+  [string]: string | true,
+};

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

@@ -0,0 +1,23 @@
+/**
+ * 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 { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+declare function styleXDefineConsts<Vars extends ConstsConfig>(
+  constants: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof { exportId: string }> & {
+      exportId: string;
+    }
+  >,
+): [
+  { [$$Key$$: string]: string | number },
+  { [$$Key$$: string]: InjectableConstStyle },
+];
+export default styleXDefineConsts;

package/lib/stylex-define-consts.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXDefineConsts;
+var _defaultOptions = require("./utils/default-options");
+var messages = _interopRequireWildcard(require("./messages"));
+var _hash = _interopRequireDefault(require("./hash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function styleXDefineConsts(constants, options) {
+  const {
+    classNamePrefix,
+    exportId,
+    debug,
+    enableDebugClassNames
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const jsOutput = {};
+  const injectableStyles = {};
+  for (const [key, value] of Object.entries(constants)) {
+    if (key.startsWith('--')) {
+      throw new Error(messages.INVALID_CONST_KEY);
+    }
+    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
+    const constKey = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${(0, _hash.default)(`${exportId}.${key}`)}` : `${classNamePrefix}${(0, _hash.default)(`${exportId}.${key}`)}`;
+    jsOutput[key] = value;
+    injectableStyles[constKey] = {
+      constKey,
+      constVal: value,
+      priority: 0,
+      ltr: '',
+      rtl: null
+    };
+  }
+  return [jsOutput, injectableStyles];
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 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 { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+
+declare export default function styleXDefineConsts<Vars: ConstsConfig>(
+  constants: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
+): [
+  { [string]: string | number }, // jsOutput JS output
+  { [string]: InjectableConstStyle }, // metadata for registerinjectableStyles
+];

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+import type { VarsConfig } from './stylex-vars-utils';
+type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
+  [$$Key$$ in keyof Vars]: string;
+}>;
+type VarsObject<Vars extends VarsConfig> = Readonly<
+  Omit<VarsKeysWithStringValues<Vars>, keyof { __varGroupHash__: string }> & {
+    __varGroupHash__: string;
+  }
+>;
+declare function styleXDefineVars<Vars extends VarsConfig>(
+  variables: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof { exportId: string }> & {
+      exportId: string;
+    }
+  >,
+): [VarsObject<Vars>, { [$$Key$$: string]: InjectableStyle }];
+export default styleXDefineVars;

package/lib/stylex-define-vars.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXDefineVars;
+var _types = require("./types");
+var _hash = _interopRequireDefault(require("./hash"));
+var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
+var _stylexVarsUtils = require("./stylex-vars-utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function styleXDefineVars(variables, options) {
+  const {
+    classNamePrefix,
+    exportId,
+    debug,
+    enableDebugClassNames
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const varGroupHash = classNamePrefix + (0, _hash.default)(exportId);
+  const typedVariables = {};
+  const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
+    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
+    const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + (0, _hash.default)(`${exportId}.${key}`) : classNamePrefix + (0, _hash.default)(`${exportId}.${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: value
+    };
+  });
+  const themeVariablesObject = (0, _objectUtils.objMap)(variablesMap, ({
+    nameHash
+  }) => `var(--${nameHash})`);
+  const injectableStyles = constructCssVariablesString(variablesMap, varGroupHash);
+  const injectableTypes = (0, _objectUtils.objMap)(typedVariables, ({
+    initialValue: iv,
+    syntax
+  }, nameHash) => ({
+    ltr: `@property --${nameHash} { syntax: "${syntax}"; inherits: true;${iv != null ? ` initial-value: ${iv}` : ''} }`,
+    rtl: null,
+    priority: 0
+  }));
+  return [{
+    ...themeVariablesObject,
+    __varGroupHash__: varGroupHash
+  }, {
+    ...injectableTypes,
+    ...injectableStyles
+  }];
+}
+function constructCssVariablesString(variables, varGroupHash) {
+  const rulesByAtRule = {};
+  for (const [key, {
+    nameHash,
+    value
+  }] of Object.entries(variables)) {
+    (0, _stylexVarsUtils.collectVarsByAtRule)(key, {
+      nameHash,
+      value
+    }, rulesByAtRule);
+  }
+  const result = {};
+  for (const [atRule, value] of Object.entries(rulesByAtRule)) {
+    const suffix = atRule === 'default' ? '' : `-${(0, _hash.default)(atRule)}`;
+    const selector = `:root, .${varGroupHash}`;
+    let ltr = `${selector}{${value.join('')}}`;
+    if (atRule !== 'default') {
+      ltr = (0, _stylexVarsUtils.wrapWithAtRules)(ltr, atRule);
+    }
+    result[varGroupHash + suffix] = {
+      ltr,
+      rtl: null,
+      priority: (0, _stylexVarsUtils.priorityForAtRule)(atRule) / 10
+    };
+  }
+  return result;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+import type { VarsConfig } from './stylex-vars-utils';
+type VarsKeysWithStringValues<Vars: VarsConfig> = $ReadOnly<{
+  [$Keys<Vars>]: string,
+}>;
+
+type VarsObject<Vars: VarsConfig> = $ReadOnly<{
+  ...VarsKeysWithStringValues<Vars>,
+  __varGroupHash__: string,
+}>;
+
+// Similar to `stylex.create` it takes an object of variables with their values
+// and returns a string after hashing it.
+declare export default function styleXDefineVars<Vars: VarsConfig>(
+  variables: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
+): [VarsObject<Vars>, { [string]: InjectableStyle }];

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+declare function stylexFirstThatWorks(
+  ...args: ReadonlyArray<string>
+): ReadonlyArray<string> | string;
+export default stylexFirstThatWorks;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = stylexFirstThatWorks;
+const isVar = arg => typeof arg === 'string' && arg.match(/^var\(--[a-zA-Z0-9-_]+\)$/);
+function stylexFirstThatWorks(...args) {
+  const firstVar = args.findIndex(isVar);
+  if (firstVar === -1) {
+    return [...args].reverse();
+  }
+  const priorities = args.slice(0, firstVar).reverse();
+  const rest = args.slice(firstVar);
+  const firstNonVar = rest.findIndex(arg => !isVar(arg));
+  const varParts = rest.slice(0, firstNonVar === -1 ? rest.length : firstNonVar + 1).reverse();
+  const vars = varParts.map(arg => isVar(arg) ? arg.slice(4, -1) : arg);
+  const returnValue = [vars.reduce((soFar, varName) => soFar ? `var(${varName}, ${String(soFar)})` : varName.startsWith('--') ? `var(${varName})` : varName, ''), ...priorities];
+  if (returnValue.length === 1) {
+    return returnValue[0];
+  }
+  return returnValue;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+declare export default function stylexFirstThatWorks(
+  ...args: $ReadOnlyArray<string>
+): $ReadOnlyArray<string> | string;

package/lib/stylex-keyframes.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXKeyframes(
+  frames: {
+    readonly [$$Key$$: string]: { readonly [$$Key$$: string]: string | number };
+  },
+  options?: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXKeyframes;

package/lib/stylex-keyframes.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXKeyframes;
+var _hash = _interopRequireDefault(require("./hash"));
+var _index = _interopRequireDefault(require("./preprocess-rules/index"));
+var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
+var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
+var _transformValue = _interopRequireDefault(require("./utils/transform-value"));
+var _dashify = _interopRequireDefault(require("./utils/dashify"));
+var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function styleXKeyframes(frames, options = _defaultOptions.defaultOptions) {
+  const {
+    classNamePrefix = 'x'
+  } = options;
+  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value, options))).done());
+  const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateLtr.default)(entry, options)));
+  const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry, options) ?? entry));
+  const stableStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
+  const ltrString = constructKeyframesObj(ltrStyles);
+  const rtlString = constructKeyframesObj(rtlStyles);
+  const stableString = constructKeyframesObj(stableStyles);
+  const animationName = classNamePrefix + (0, _hash.default)('<>' + stableString) + '-B';
+  const ltr = `@keyframes ${animationName}{${ltrString}}`;
+  const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
+  return [animationName, {
+    ltr,
+    rtl,
+    priority: 0
+  }];
+}
+function expandFrameShorthands(frame, options) {
+  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(([key, value]) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean)).filter(([_key, value]) => value != null));
+}
+function constructKeyframesObj(frames) {
+  return (0, _objectUtils.objEntries)(frames).map(([key, value]) => `${key}{${(0, _objectUtils.objEntries)(value).map(([k, v]) => `${k}:${v};`).join('')}}`).join('');
+}

package/lib/stylex-keyframes.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+// Similar to `stylex.create` it takes an object of keyframes
+// and returns a string after hashing it.
+//
+// It also expands shorthand properties to maintain parity with
+// `stylex.create`.
+declare export default function styleXKeyframes(
+  frames: { +[string]: { +[string]: string | number } },
+  options?: StyleXOptions,
+): [string, InjectableStyle];

package/lib/stylex-position-try.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXPositionTry(
+  styles: { readonly [$$Key$$: string]: string | number },
+  options?: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXPositionTry;

package/lib/stylex-position-try.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXPositionTry;
+var _hash = _interopRequireDefault(require("./hash"));
+var _index = _interopRequireDefault(require("./preprocess-rules/index"));
+var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
+var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
+var _transformValue = _interopRequireDefault(require("./utils/transform-value"));
+var _dashify = _interopRequireDefault(require("./utils/dashify"));
+var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function styleXPositionTry(styles, options = _defaultOptions.defaultOptions) {
+  const {
+    classNamePrefix = 'x'
+  } = options;
+  const expandedObject = _objectUtils.Pipe.create(styles).pipe(styles => preprocessProperties(styles, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value, options))).done();
+  const ltrStyles = (0, _objectUtils.objMap)(expandedObject, (value, key) => (0, _generateLtr.default)([key, value]));
+  const rtlStyles = (0, _objectUtils.objMap)(expandedObject, (value, key) => (0, _generateRtl.default)([key, value]) ?? value);
+  const ltrString = constructPositionTryObj(ltrStyles);
+  const rtlString = constructPositionTryObj(rtlStyles);
+  const positionTryName = '--' + classNamePrefix + (0, _hash.default)(ltrString);
+  const ltr = `@position-try ${positionTryName} {${ltrString}}`;
+  const rtl = ltrString === rtlString ? null : `@position-try ${positionTryName} {${rtlString}}`;
+  return [positionTryName, {
+    ltr,
+    rtl,
+    priority: 0
+  }];
+}
+function preprocessProperties(styles, options) {
+  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(styles).flatMap(pair => (0, _index.default)(pair, options).map(([key, value]) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean)).filter(([_key, value]) => value != null));
+}
+function constructPositionTryObj(styles) {
+  return Object.keys(styles).sort().map(k => {
+    const v = styles[k];
+    return (Array.isArray(v) ? v : [v]).map(val => `${k}:${val};`).join('');
+  }).join('');
+}

package/lib/stylex-position-try.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+// Similar to `stylex.keyframes` but for position-try-fallbacks
+// Takes an object of positioning properties and returns a string after hashing it
+// The generated string must be prefixed with -- for anchor positioning
+declare export default function styleXPositionTry(
+  styles: { +[string]: string | number },
+  options?: StyleXOptions,
+): [string, InjectableStyle];

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,66 @@
+"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, {
+  nameHash,
+  value
+}, collection = {}, atRules = []) {
+  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 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 1;
+  }
+  return 1 + 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 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 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,
+  $$PARAM_1$$: { +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;

package/lib/stylex-view-transition-class.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+type StyleValue = { readonly [$$Key$$: string]: string | number };
+type StyleObj = {
+  group?: StyleValue;
+  imagePair?: StyleValue;
+  old?: StyleValue;
+  new?: StyleValue;
+};
+declare function styleXViewTransitionClass(
+  styles: StyleObj,
+  options?: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXViewTransitionClass;