@stylexjs/stylex 0.2.0-beta.19 → 0.2.0-beta.21

package/lib/StyleXTypes.d.ts

@@ -11,8 +11,8 @@ import type { CSSProperties } from './StyleXCSSTypes';
 declare const StyleXClassNameTag: unique symbol;
 export type StyleXClassNameFor<K, V> = string & {
   _opaque: typeof StyleXClassNameTag;
-  key: K;
-  value: V;
+  _key: K;
+  _value: V;
 };
 
 export type StyleXClassNameForValue<V> = StyleXClassNameFor<unknown, V>;
@@ -21,119 +21,174 @@ export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
 // Type for arbitrarily nested Array.
 export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
 
-type CSSPropTypes = {
-  [Key in keyof CSSProperties]: StyleXClassNameFor<Key, CSSProperties[Key]>;
-};
+declare const StyleXVarTag: unique symbol;
+export type StyleXVar<_Val> = string & typeof StyleXVarTag;
+
+// prettier-ignore
+type NonDollarChars =
+  | 'a' | 'A' | 'b' | 'B' | 'c' | 'C' | 'd' | 'D'
+  | 'e' | 'E' | 'f' | 'F' | 'g' | 'G'
+  | 'h' | 'H' | 'i' | 'I' | 'j' | 'J' | 'k' | 'K'
+  | 'l' | 'L' | 'm' | 'M' | 'n' | 'N' | 'o' | 'O' | 'p' | 'P'
+  | 'q' | 'Q' | 'r' | 'R' | 's' | 'S' | 't' | 'T'
+  | 'u' | 'U' | 'v' | 'V' | 'w' | 'W'
+  | 'x' | 'X' | 'y' | 'Y' | 'z' | 'Z'
+  | '-' | '_' | '@' | ':';
+
+// Strings that don't start with a dollar sign.
+// So that we can `&` with {$$css: true} without type errors.
+type NonDollarStr = `${NonDollarChars}${string}`;
+type PseudoClassStr = `:${string}`;
+type AtRuleStr = `@${string}`;
+
+type CondStr = PseudoClassStr | AtRuleStr;
+
+type CSSPropertiesWithExtras = Partial<
+  Readonly<
+    CSSProperties & {
+      '::after': CSSProperties;
+      '::backdrop': CSSProperties;
+      '::before': CSSProperties;
+      '::cue': CSSProperties;
+      '::cue-region': CSSProperties;
+      '::first-letter': CSSProperties;
+      '::first-line': CSSProperties;
+      '::file-selector-button': CSSProperties;
+      '::grammar-error': CSSProperties;
+      '::marker': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::part()': CSSProperties;
+      '::placeholder': CSSProperties;
+      '::selection': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::slotted()': CSSProperties;
+      '::spelling-error': CSSProperties;
+      '::target-text': CSSProperties;
+    }
+  >
+>;
 
-export type NestedCSSPropTypes = CSSPropTypes &
+export type NestedCSSPropTypes = Partial<
   Readonly<{
-    // NOTE: the actual type should be nested objects.
-    // fix after the types in stylex.js are fixed.
-    ':active': StyleXClassName;
-    ':focus': StyleXClassName;
-    ':focus-visible': StyleXClassName;
-    ':hover': StyleXClassName;
-    ':disabled': StyleXClassName;
-    ':empty': StyleXClassName;
-    ':first-child': StyleXClassName;
-    ':last-child': StyleXClassName;
-    '::before': StyleXClassName;
-    '::after': StyleXClassName;
-    '::placeholder': StyleXClassName;
-    '::-webkit-scrollbar': StyleXClassName;
-
-    [key: `@media (max-width: ${number}px)`]: StyleXClassName;
-    [key: `@media (min-width: ${number}px)`]: StyleXClassName;
-    [
-      key: `@media (min-width: ${number}px) and (max-width: ${number}px)`
-    ]: StyleXClassName;
-
-    [key: `@media (max-height: ${number}px)`]: StyleXClassName;
-    [key: `@media (min-height: ${number}px)`]: StyleXClassName;
-    [
-      key: `@media (min-height: ${number}px) and (max-height: ${number}px)`
-    ]: StyleXClassName;
-
-    [
-      key: `@media (-webkit-min-device-pixel-ratio: ${number})`
-    ]: StyleXClassName;
-    '@media print': StyleXClassName;
-
-    // webkit styles used for Search in Safari
-    '::-webkit-search-decoration': StyleXClassName;
-    '::-webkit-search-cancel-button': StyleXClassName;
-    '::-webkit-search-results-button': StyleXClassName;
-    '::-webkit-search-results-decoration': StyleXClassName;
-  }>;
+    [Key in keyof CSSPropertiesWithExtras]: StyleXClassNameFor<
+      Key,
+      CSSPropertiesWithExtras[Key]
+    >;
+  }>
+>;
 
+type UserAuthoredStyles = { [key: NonDollarStr]: unknown };
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
-export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
-  false | (null | undefined | T)
->;
-export type XStyleWithout<T extends { [$$Key$$: string]: void }> = XStyle<
+export type XStyle<T extends UserAuthoredStyles = NestedCSSPropTypes> =
+  StyleXArray<false | (null | undefined | Readonly<T & { $$css: true }>)>;
+export type XStyleWithout<T extends UserAuthoredStyles> = XStyle<
   Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
 >;
 
-export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+export type Keyframes = Readonly<{ [name: NonDollarStr]: CSSProperties }>;
+export type LegacyTheme = Readonly<{ [constantName: NonDollarStr]: string }>;
+
+type ComplexStyleValueType<T> = T extends string | number | null
+  ? T
+  : T extends StyleXVar<infer U>
+  ? U
+  : T extends ReadonlyArray<infer U>
+  ? U
+  : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
+  ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+  : T;
+
+type _MapNamespace<CSS> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
+}>;
 
-type RawStyles = {
-  [key: string]: null | string | number | Array<string | number> | RawStyles;
-};
+export type MapNamespace<CSS> = Readonly<
+  _MapNamespace<CSS> & Readonly<{ $$css: true }>
+>;
 
-type CompiledNamespace<N extends RawStyles> = {
-  [K in keyof N]: N[K] extends string | number | null
-    ? StyleXClassNameFor<K, N[K]>
-    : N[K] extends ReadonlyArray<infer T>
-    ? StyleXClassNameFor<K, T>
-    : K extends `:${string}` | `@${string}`
-    ? N[K] extends RawStyles
-      ? CompiledNamespace<N[K]>
-      : StyleXClassNameFor<K, N[K]>
-    : N[K] extends { [key: string]: infer T }
-    ? StyleXClassNameFor<K, T> // TODO: Handle nested objects
-    : never;
-};
+export type MapNamespaces<
+  S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+> = Readonly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>;
+}>;
 
-export type Stylex$Create = <const S extends { [n: string]: RawStyles }>(
+export type Stylex$Create = <
+  const S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+>(
   styles: S,
-) => Readonly<{
-  [N in keyof S]: CompiledNamespace<S[N]>;
-}>;
+) => MapNamespaces<S>;
+
+export type CompiledStyles = Readonly<
+  {
+    [key: NonDollarStr]:
+      | StyleXClassName
+      | Readonly<{ [key: NonDollarStr]: StyleXClassName }>;
+  } & { $$css: true }
+>;
+
+export type InlineStyles = Readonly<
+  { [key: NonDollarStr]: string } & { $$css?: void }
+>;
 
-export type CompiledStyles = Readonly<{
-  [key: string]: StyleXClassName | Readonly<{ [key: string]: StyleXClassName }>;
+type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
 }>;
+type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
+  _GenStylePropType<CSS> & { $$css: true } & Partial<{
+      [Key in Exclude<
+        keyof CSSPropertiesWithExtras,
+        keyof CSS | '$$css'
+      >]: never;
+    }>
+>;
 
-type TTokens = {
-  [key: string]: string | { default: string; [key: string]: string };
-};
+// Replace `XStyle` with this.
+export type StaticStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<false | null | void | GenStylePropType<CSS>>;
+export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
 
-export type FlattenTokens<
-  T extends {
-    [key: string]: string | { default: string; [key: string]: string };
-  },
-> = {
-  [Key in keyof T]: T[Key] extends { default: infer X } & {
-    [key: Exclude<string, 'default'>]: infer Y;
-  }
-    ? X | Y
-    : T[Key];
-};
+export type StyleXStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | null
+  | void
+  | false
+  | GenStylePropType<CSS>
+  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+>;
+export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
 
+declare const StyleXThemeTag: unique symbol;
 export type Theme<
-  Tokens extends { [key: string]: unknown },
+  Tokens extends { [key: NonDollarStr]: unknown },
   ID extends symbol = symbol,
-> = Readonly<{
-  [_Key in Exclude<keyof Tokens, '_opaque' | '_tokens'>]: string;
-}> & {
-  _opaque: ID;
-  _tokens: Tokens;
-};
+> = Readonly<{ [_Key in keyof Tokens]: string }> & {
+  $opaqueId: ID;
+  $tokens: Tokens;
+} & typeof StyleXThemeTag;
 
-export type TokensFromTheme<T extends Theme<TTokens>> = T['_tokens'];
+export type TokensFromTheme<T extends Theme<TTokens>> = T['$tokens'];
 
-export type IDFromTheme<T extends Theme<TTokens>> = T['_opaque'];
+export type IDFromTheme<T extends Theme<TTokens>> = T['$opaqueId'];
+
+type TTokens = {
+  [key: NonDollarStr]: string | { default: string; [key: AtRuleStr]: string };
+};
+
+export type FlattenTokens<T extends TTokens> = Readonly<{
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X } ? X : T[Key];
+}>;
 
 export type StyleX$CreateVars = <
   DefaultTokens extends TTokens,
@@ -146,14 +201,15 @@ export type Variant<
   T extends Theme<TTokens, symbol>,
   // eslint-disable-next-line no-unused-vars
   Tag extends symbol = symbol,
-> = Readonly<{
-  [Key: symbol]: StyleXClassNameFor<string, IDFromTheme<T>>;
-}> & { _opaque: Tag };
+> = Tag &
+  Readonly<{
+    theme: StyleXClassNameFor<string, IDFromTheme<T>>;
+  }>;
 
-type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+type OverridesForTokenType<Config extends { [key: string]: any }> = {
   [Key in keyof Config]:
     | Config[Key]
-    | { default: Config[Key]; [atRule: string]: Config[Key] };
+    | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
 };
 
 export type StyleX$OverrideVars = <

package/lib/StyleXTypes.js.flow

@@ -18,75 +18,78 @@ export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
 // Type for arbitrarily nested Array.
 export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
 
-type CSSPropTypes = $ReadOnly<$ObjMap<CSSProperties, () => StyleXClassName>>;
-export type NestedCSSPropTypes = $ReadOnly<{
-  ...$Exact<CSSPropTypes>,
-  // NOTE: the actual type should be nested objects.
-  // fix after the types in stylex.js are fixed.
-  ':active'?: StyleXClassName,
-  ':focus'?: StyleXClassName,
-  ':focus-visible'?: StyleXClassName,
-  ':hover'?: StyleXClassName,
-  ':disabled'?: StyleXClassName,
-  ':empty'?: StyleXClassName,
-  ':first-child'?: StyleXClassName,
-  ':last-child'?: StyleXClassName,
-  '::before'?: StyleXClassName,
-  '::after'?: StyleXClassName,
-  '::placeholder'?: StyleXClassName,
-  '::-webkit-scrollbar'?: StyleXClassName,
+type CSSPropertiesWithExtras = $ReadOnly<{
+  ...CSSProperties,
+  ':active'?: CSSProperties,
+  ':focus'?: CSSProperties,
+  ':focus-visible'?: CSSProperties,
+  ':hover'?: CSSProperties,
+  ':disabled'?: CSSProperties,
+  ':empty'?: CSSProperties,
+  ':first-child'?: CSSProperties,
+  ':last-child'?: CSSProperties,
+  '::before'?: CSSProperties,
+  '::after'?: CSSProperties,
+  '::placeholder'?: CSSProperties,
+  '::-webkit-scrollbar'?: CSSProperties,
   // Find a better way to do this. Being forced to add every media query.
-  '@media (max-width: 564px)'?: StyleXClassName,
-  '@media (min-height: 700px)'?: StyleXClassName,
-  '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName,
-  '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName,
-  '@media (min-height: 790px)'?: StyleXClassName,
-  '@media (max-width: 648px)'?: StyleXClassName,
-  '@media (max-width: 899px)'?: StyleXClassName,
-  '@media (max-width: 900px)'?: StyleXClassName,
-  '@media (min-width: 900px)'?: StyleXClassName,
-  '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName,
-  '@media (max-width: 1099px)'?: StyleXClassName,
-  '@media (max-width: 1199px)'?: StyleXClassName,
-  '@media (max-width: 1259px)'?: StyleXClassName,
-  '@media (min-width: 1290px)'?: StyleXClassName,
-  '@media (max-width: 420px)'?: StyleXClassName,
-  '@media (max-width: 500px)'?: StyleXClassName,
-  '@media (pointer: coarse)'?: StyleXClassName,
-  '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName,
-  '@media print'?: StyleXClassName,
+  '@media (max-width: 564px)'?: CSSProperties,
+  '@media (min-height: 700px)'?: CSSProperties,
+  '@media (min-height: 700px) and (max-height: 789px)'?: CSSProperties,
+  '@media (min-height: 753px) and (max-height: 789px)'?: CSSProperties,
+  '@media (min-height: 790px)'?: CSSProperties,
+  '@media (max-width: 648px)'?: CSSProperties,
+  '@media (max-width: 899px)'?: CSSProperties,
+  '@media (max-width: 900px)'?: CSSProperties,
+  '@media (min-width: 900px)'?: CSSProperties,
+  '@media (min-width: 900px) and (max-width: 1259px)'?: CSSProperties,
+  '@media (max-width: 1099px)'?: CSSProperties,
+  '@media (max-width: 1199px)'?: CSSProperties,
+  '@media (max-width: 1259px)'?: CSSProperties,
+  '@media (min-width: 1290px)'?: CSSProperties,
+  '@media (max-width: 420px)'?: CSSProperties,
+  '@media (max-width: 500px)'?: CSSProperties,
+  '@media (pointer: coarse)'?: CSSProperties,
+  '@media (-webkit-min-device-pixel-ratio: 0)'?: CSSProperties,
+  '@media print'?: CSSProperties,
   // Media queries used for Oculus Web Design Systems (OCDS components).
-  '@media (max-width: 767px)'?: StyleXClassName,
-  '@media (min-width: 768px)'?: StyleXClassName,
-  '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName,
-  '@media (max-width: 1024px)'?: StyleXClassName,
-  '@media (min-width: 1025px)'?: StyleXClassName,
-  '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName,
-  '@media (max-width: 1920px)'?: StyleXClassName,
-  '@media (min-width: 1921px)'?: StyleXClassName,
+  '@media (max-width: 767px)'?: CSSProperties,
+  '@media (min-width: 768px)'?: CSSProperties,
+  '@media (min-width: 768px) and (max-width: 1024px)'?: CSSProperties,
+  '@media (max-width: 1024px)'?: CSSProperties,
+  '@media (min-width: 1025px)'?: CSSProperties,
+  '@media (min-width: 1025px) and (max-width: 1920px)'?: CSSProperties,
+  '@media (max-width: 1920px)'?: CSSProperties,
+  '@media (min-width: 1921px)'?: CSSProperties,
   // Media queries used for Intern Data Products
-  '@media (min-width: 1500px)'?: StyleXClassName,
-  '@media (min-width: 1800px)'?: StyleXClassName,
-  '@media (min-width: 2250px)'?: StyleXClassName,
+  '@media (min-width: 1500px)'?: CSSProperties,
+  '@media (min-width: 1800px)'?: CSSProperties,
+  '@media (min-width: 2250px)'?: CSSProperties,
   // webkit styles used for Search in Safari
-  '::-webkit-search-decoration'?: StyleXClassName,
-  '::-webkit-search-cancel-button'?: StyleXClassName,
-  '::-webkit-search-results-button'?: StyleXClassName,
-  '::-webkit-search-results-decoration'?: StyleXClassName,
+  '::-webkit-search-decoration'?: CSSProperties,
+  '::-webkit-search-cancel-button'?: CSSProperties,
+  '::-webkit-search-results-button'?: CSSProperties,
+  '::-webkit-search-results-decoration'?: CSSProperties,
   // Media queries used for the logged out header
-  '@media (min-width: 950px)'?: StyleXClassName,
+  '@media (min-width: 950px)'?: CSSProperties,
   // Media queries used for bizweb
-  '@media (min-width: 1440px)'?: StyleXClassName,
-  '@media (min-width: 1920px)'?: StyleXClassName,
+  '@media (min-width: 1440px)'?: CSSProperties,
+  '@media (min-width: 1920px)'?: CSSProperties,
   // Media queries used for fbai
-  '@media (min-width: 800px)'?: StyleXClassName,
+  '@media (min-width: 800px)'?: CSSProperties,
   // Media queries used for messengerkidsdotcom
-  '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName,
+  '@media (max-width: 1024px) and (min-width: 501px)'?: CSSProperties,
+}>;
+
+export type NestedCSSPropTypes = $ReadOnly<{
+  [Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
 }>;
 
 export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
-export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<false | ?T>;
-export type XStyleWithout<+T: { [string]: void, ... }> = XStyle<
+export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
+  false | ?$ReadOnly<{ ...T, $$css: true }>,
+>;
+export type XStyleWithout<+T: { +[string]: mixed }> = XStyle<
   $ReadOnly<$Rest<NestedCSSPropTypes, $Exact<T>>>,
 >;
 
@@ -94,24 +97,31 @@ export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
 export type LegacyTheme = $ReadOnly<{ [constantName: string]: string, ... }>;
 
-// type CSSValue = string | number | $ReadOnlyArray<mixed>;
-type MapCSSValueToClassName = <K, V>(K, V) => StyleXClassNameFor<K, V>;
-
-export type MapNamespace<CSS: { ... }> = $ReadOnly<{
-  ...$ObjMapi<CSS, MapCSSValueToClassName>,
+type ComplexStyleValueType<+T> = T extends string | number | null
+  ? T
+  : T extends StyleXVar<infer U>
+  ? U
+  : T extends $ReadOnlyArray<infer U>
+  ? U
+  : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
+  ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+  : T;
+
+type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
+}>;
+export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._MapNamespace<CSS>,
   $$css: true,
 }>;
-// NOTE: Flow was confused by nested ObjMap so for now, nested styles
-// are typed incorrectly to be a string. This won't matter for the time being.
-// type MapStyleToClassName = (<Rule: {}>(
-//   Rule,
-// ) => $ObjMap<Rule, MapCSSValueToClassName>) &
-//   MapCSSValueToClassName;
-export type MapNamespaces = <CSS: { ... }>(CSS) => MapNamespace<CSS>;
-
-export type Stylex$Create = <S: { ... }>(
+export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>,
+}>;
+export type Stylex$Create = <S: { +[string]: mixed }>(
   styles: S,
-) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
+) => MapNamespaces<S>;
 
 export type CompiledStyles = $ReadOnly<{
   $$css: true,
@@ -120,15 +130,47 @@ export type CompiledStyles = $ReadOnly<{
     | $ReadOnly<{ [key: string]: StyleXClassName, ... }>,
   ...
 }>;
+export type InlineStyles = $ReadOnly<{
+  $$css?: void,
+  [key: string]: string,
+}>;
 
+type _GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: CSS[Key] extends { +[string]: mixed }
+    ? StyleXClassNameFor<Key, $ReadOnly<CSS[Key]>>
+    : StyleXClassNameFor<Key, CSS[Key]>,
+}>;
+type GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._GenStylePropType<CSS>,
+  $$css: true,
+}>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
+
+export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
+  $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
+>;
+
+export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<
+    | ?false
+    | GenStylePropType<$ReadOnly<CSS>>
+    | $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
+  >;
+
+export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
+  $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
+>;
 // This is the type for the variables object
-declare export opaque type StyleXVarsTheme<+Vars: { +[string]: string }>: Vars;
+declare export opaque type StyleXVar<+_Val: mixed>;
 
 declare export opaque type Theme<
   +Tokens: { +[string]: mixed },
   // eslint-disable-next-line no-unused-vars
   +ID: string = string,
->: $ReadOnly<{ [$Keys<Tokens>]: string }>;
+>: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
 
 export type TokensFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
   infer Tokens,
@@ -142,22 +184,17 @@ type IDFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
   ? ID
   : empty;
 
-export type FlattenTokens<
-  T: {
-    +[string]: string | { +default: string, +[string]: string },
-  },
-> = {
+type TTokens = $ReadOnly<{
+  [string]: string | $ReadOnly<{ default: string, [string]: string }>,
+}>;
+
+export type FlattenTokens<T: TTokens> = {
   +[Key in keyof T]: T[Key] extends { +default: infer X, +[string]: infer Y }
     ? X | Y
     : T[Key],
 };
 
-export type StyleX$CreateVars = <
-  +DefaultTokens: {
-    +[string]: string | { default: string, +[string]: string },
-  },
-  +ID: string = string,
->(
+export type StyleX$CreateVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
 ) => Theme<FlattenTokens<DefaultTokens>, ID>;
 
@@ -176,8 +213,8 @@ export type OverridesForTokenType<Config: { +[string]: mixed }> = {
 };
 
 export type StyleX$OverrideVars = <
-  +BaseTokens: Theme<{ +[string]: mixed }>,
-  +ID: string = string,
+  BaseTokens: Theme<{ +[string]: mixed }>,
+  ID: string = string,
 >(
   baseTokens: BaseTokens,
   overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,

package/lib/native/CSSCustomPropertyValue.d.ts

@@ -7,8 +7,20 @@
  *
  */
 
-export declare function isCustomPropertyValue(value: unknown): boolean;
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+export declare function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
 export declare class CSSCustomPropertyValue {
   name: string;
-  constructor(value: string);
+  defaultValue: unknown;
+  constructor(kebabCasePropName: string, fallback: unknown);
 }

package/lib/native/CSSCustomPropertyValue.js

@@ -4,22 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CSSCustomPropertyValue = void 0;
-exports.isCustomPropertyValue = isCustomPropertyValue;
-const CUSTOM_PROPERTY_REGEX = /^var\(--(.+)\)$/;
+exports.createCSSCustomPropertyValue = createCSSCustomPropertyValue;
+const CUSTOM_PROPERTY_REGEX = /^var\(--([\w-]+) *(?:\)|, *(.+)\))$/;
 function camelize(s) {
   return s.replace(/-./g, x => x.toUpperCase()[1]);
 }
-function isCustomPropertyValue(value) {
-  return typeof value === "string" && CUSTOM_PROPERTY_REGEX.test(value);
+function createCSSCustomPropertyValue(value) {
+  if (typeof value === "string") {
+    const match = CUSTOM_PROPERTY_REGEX.exec(value);
+    if (match) {
+      return new CSSCustomPropertyValue(match[1], match[2]);
+    }
+  }
+  return null;
 }
 class CSSCustomPropertyValue {
-  constructor(value) {
-    const found = value.match(CUSTOM_PROPERTY_REGEX);
-    if (found == null) {
-      throw new Error("[stylex]: Unable to find custom property reference in input string");
-    }
-    const [, kebabCasePropName] = found;
+  constructor(kebabCasePropName, fallback) {
     this.name = camelize(kebabCasePropName);
+    this.defaultValue = fallback ?? null;
   }
 }
 exports.CSSCustomPropertyValue = CSSCustomPropertyValue;

package/lib/native/CSSCustomPropertyValue.js.flow

@@ -7,9 +7,21 @@
  * @flow strict
  */
 
-declare export function isCustomPropertyValue(value: mixed): boolean;
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+declare export function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
 
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
 declare export class CSSCustomPropertyValue {
   name: string;
-  constructor(value: string): void;
+  defaultValue: mixed;
+  constructor(kebabCasePropName: string, fallback: mixed): void;
 }