@stylexjs/stylex 0.18.2 → 0.18.3

package/lib/cjs/stylex.d.ts

@@ -12,6 +12,9 @@ import type {
   InlineStyles,
   Keyframes,
   MapNamespaces,
+  NestedConstsValue,
+  NestedStringValue,
+  NestedVarsValue,
   StaticStyles,
   StaticStylesWithout,
   StyleX$Create,
@@ -59,6 +62,32 @@ export declare const defineConsts: StyleX$DefineConsts;
 export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
 export declare type defineVars = typeof defineVars;
+export declare const unstable_conditional: <
+  T extends { readonly default: unknown; readonly [$$Key$$: string]: unknown },
+>(
+  _value: T,
+) => T;
+export declare type unstable_conditional = typeof unstable_conditional;
+export declare const unstable_defineVarsNested: <
+  T extends { readonly [$$Key$$: string]: NestedVarsValue },
+>(
+  _styles: T,
+) => T;
+export declare type unstable_defineVarsNested =
+  typeof unstable_defineVarsNested;
+export declare const unstable_defineConstsNested: <
+  T extends { readonly [$$Key$$: string]: NestedConstsValue },
+>(
+  _styles: T,
+) => T;
+export declare type unstable_defineConstsNested =
+  typeof unstable_defineConstsNested;
+export declare const unstable_createThemeNested: (
+  _baseTokens: { readonly [$$Key$$: string]: NestedStringValue },
+  _overrides: { readonly [$$Key$$: string]: NestedVarsValue },
+) => CompiledStyles;
+export declare type unstable_createThemeNested =
+  typeof unstable_createThemeNested;
 export declare const defineMarker: StyleX$DefineMarker;
 export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
@@ -192,6 +221,28 @@ type IStyleX = {
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   when: typeof when;
+  unstable_conditional: <
+    T extends {
+      readonly default: unknown;
+      readonly [$$Key$$: string]: unknown;
+    },
+  >(
+    value: T,
+  ) => T;
+  unstable_defineVarsNested: <
+    T extends { readonly [$$Key$$: string]: NestedVarsValue },
+  >(
+    tokens: T,
+  ) => T;
+  unstable_defineConstsNested: <
+    T extends { readonly [$$Key$$: string]: NestedConstsValue },
+  >(
+    tokens: T,
+  ) => T;
+  unstable_createThemeNested: (
+    baseTokens: { readonly [$$Key$$: string]: NestedStringValue },
+    overrides: { readonly [$$Key$$: string]: NestedVarsValue },
+  ) => CompiledStyles;
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;

package/lib/cjs/stylex.js

@@ -146,6 +146,18 @@ const defineConsts = function stylexDefineConsts(_styles) {
 const defineVars = function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 };
+const unstable_conditional = function stylexConditional(_value) {
+  throw errorForFn('unstable_conditional');
+};
+const unstable_defineVarsNested = function stylexDefineVarsNested(_styles) {
+  throw errorForFn('unstable_defineVarsNested');
+};
+const unstable_defineConstsNested = function stylexDefineConstsNested(_styles) {
+  throw errorForFn('unstable_defineConstsNested');
+};
+const unstable_createThemeNested = (_baseTokens, _overrides) => {
+  throw errorForFn('unstable_createThemeNested');
+};
 const defineMarker = () => {
   throw errorForFn('defineMarker');
 };
@@ -256,26 +268,32 @@ const types = {
     throw errorForType('transformList');
   }
 };
-function _legacyMerge(...styles) {
-  const [className] = styleqExports.styleq(styles);
-  return className;
-}
-_legacyMerge.create = create;
-_legacyMerge.createTheme = createTheme;
-_legacyMerge.defineConsts = defineConsts;
-_legacyMerge.defineMarker = defineMarker;
-_legacyMerge.defineVars = defineVars;
-_legacyMerge.defaultMarker = defaultMarker;
-_legacyMerge.firstThatWorks = firstThatWorks;
-_legacyMerge.keyframes = keyframes;
-_legacyMerge.positionTry = positionTry;
-_legacyMerge.props = props;
-_legacyMerge.attrs = attrs;
-_legacyMerge.types = types;
-_legacyMerge.when = when;
-_legacyMerge.viewTransitionClass = viewTransitionClass;
-_legacyMerge.env = env;
-const legacyMerge = _legacyMerge;
+const legacyMerge = /*@__PURE__*/ function () {
+  function _legacyMerge(...styles) {
+    const [className] = styleqExports.styleq(styles);
+    return className;
+  }
+  _legacyMerge.create = create;
+  _legacyMerge.createTheme = createTheme;
+  _legacyMerge.defineConsts = defineConsts;
+  _legacyMerge.defineMarker = defineMarker;
+  _legacyMerge.defineVars = defineVars;
+  _legacyMerge.defaultMarker = defaultMarker;
+  _legacyMerge.firstThatWorks = firstThatWorks;
+  _legacyMerge.keyframes = keyframes;
+  _legacyMerge.positionTry = positionTry;
+  _legacyMerge.props = props;
+  _legacyMerge.attrs = attrs;
+  _legacyMerge.types = types;
+  _legacyMerge.when = when;
+  _legacyMerge.viewTransitionClass = viewTransitionClass;
+  _legacyMerge.env = env;
+  _legacyMerge.unstable_conditional = unstable_conditional;
+  _legacyMerge.unstable_defineVarsNested = unstable_defineVarsNested;
+  _legacyMerge.unstable_defineConstsNested = unstable_defineConstsNested;
+  _legacyMerge.unstable_createThemeNested = unstable_createThemeNested;
+  return _legacyMerge;
+}();
 
 exports.attrs = attrs;
 exports.create = create;
@@ -291,5 +309,9 @@ exports.legacyMerge = legacyMerge;
 exports.positionTry = positionTry;
 exports.props = props;
 exports.types = types;
+exports.unstable_conditional = unstable_conditional;
+exports.unstable_createThemeNested = unstable_createThemeNested;
+exports.unstable_defineConstsNested = unstable_defineConstsNested;
+exports.unstable_defineVarsNested = unstable_defineVarsNested;
 exports.viewTransitionClass = viewTransitionClass;
 exports.when = when;

package/lib/cjs/stylex.js.flow

@@ -12,6 +12,9 @@ import type {
   InlineStyles,
   Keyframes,
   MapNamespaces,
+  NestedConstsValue,
+  NestedStringValue,
+  NestedVarsValue,
   StaticStyles,
   StaticStylesWithout,
   StyleX$Create,
@@ -61,9 +64,32 @@ declare export const defineConsts: StyleX$DefineConsts;
 
 declare export const defineVars: StyleX$DefineVars;
 
+declare export const unstable_conditional: <
+  const T extends { +default: unknown, +[string]: unknown },
+>(
+  _value: T,
+) => T;
+
+declare export const unstable_defineVarsNested: <
+  const T extends { +[string]: NestedVarsValue },
+>(
+  _styles: T,
+) => T;
+
+declare export const unstable_defineConstsNested: <
+  const T extends { +[string]: NestedConstsValue },
+>(
+  _styles: T,
+) => T;
+
+declare export const unstable_createThemeNested: (
+  _baseTokens: { +[string]: NestedStringValue },
+  _overrides: { +[string]: NestedVarsValue },
+) => CompiledStyles;
+
 declare export const defineMarker: StyleX$DefineMarker;
 
-declare export const firstThatWorks: <T: string | number>(
+declare export const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
 
@@ -112,31 +138,35 @@ declare export const when: StyleX$When;
 declare export const env: StyleX$Env;
 
 declare export const types: {
-  angle: <T: string | 0 = string | 0>(
+  angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
   ) => Types.Angle<T>,
-  color: <T: string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
-  url: <T: string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
-  image: <T: string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
-  integer: <T: number = number>(_v: ValueWithDefault<T>) => Types.Integer<T>,
-  lengthPercentage: <T: number | string = number | string>(
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
+  integer: <T extends number = number>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Integer<T>,
+  lengthPercentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.LengthPercentage<T>,
-  length: <T: number | string = number | string>(
+  length: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.Length<T>,
-  percentage: <T: number | string = number | string>(
+  percentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.Percentage<T>,
-  number: <T: number = number>(_v: ValueWithDefault<T>) => Types.Num<T>,
-  resolution: <T: string = string>(
+  number: <T extends number = number>(_v: ValueWithDefault<T>) => Types.Num<T>,
+  resolution: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.Resolution<T>,
-  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Types.Time<T>,
-  transformFunction: <T: string = string>(
+  time: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Time<T>,
+  transformFunction: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.TransformFunction<T>,
-  transformList: <T: string = string>(
+  transformList: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>,
 };
@@ -158,7 +188,7 @@ type IStyleX = {
     }>,
   >,
   defineMarker: StyleX$DefineMarker,
-  firstThatWorks: <T: string | number>(
+  firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
@@ -190,6 +220,23 @@ type IStyleX = {
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,
+  unstable_conditional: <
+    const T extends { +default: unknown, +[string]: unknown },
+  >(
+    value: T,
+  ) => T,
+  unstable_defineVarsNested: <const T extends { +[string]: NestedVarsValue }>(
+    tokens: T,
+  ) => T,
+  unstable_defineConstsNested: <
+    const T extends { +[string]: NestedConstsValue },
+  >(
+    tokens: T,
+  ) => T,
+  unstable_createThemeNested: (
+    baseTokens: { +[string]: NestedStringValue },
+    overrides: { +[string]: NestedVarsValue },
+  ) => CompiledStyles,
   __customProperties?: { [string]: unknown },
   ...
 };

package/lib/cjs/types/StyleXOpaqueTypes.js.flow

@@ -11,6 +11,6 @@
 //   value: T;
 // }
 // This is the type for the variables object
-declare export opaque type StyleXVar<+_Val: unknown>: string;
+declare export opaque type StyleXVar<+_Val extends unknown>: string;
 
 declare export opaque type StyleXClassNameFor<+_K, +_V>: string;

package/lib/cjs/types/StyleXTypes.d.ts

@@ -252,12 +252,17 @@ export type IDFromVarGroup<T extends VarGroup<{}>> = T['__opaqueId'];
 
 type TTokens = Readonly<{
   [key: string]:
-    | NestedVarObject<null | string | number>
-    | StyleXVar<null | string | number>
+    | NestedVarObject<
+        null | string | number | StyleXVar<null | string | number>
+      >
     | CSSType<null | string | number>;
 }>;
 
-type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+type UnwrapVars<T> = T extends () => infer U
+  ? UnwrapVars<U>
+  : T extends StyleXVar<infer U>
+    ? U
+    : T;
 export type FlattenTokens<T extends TTokens> = Readonly<{
   [Key in keyof T]: T[Key] extends { [key: string]: infer X }
     ? UnwrapVars<X>
@@ -266,6 +271,7 @@ export type FlattenTokens<T extends TTokens> = Readonly<{
 
 type NestedVarObject<T> =
   | T
+  | (() => T)
   | Readonly<{
       default: NestedVarObject<T>;
       [key: AtRuleStr]: NestedVarObject<T>;
@@ -360,3 +366,50 @@ export interface Register {}
 export type StyleX$Env = Register extends { env: infer TEnv }
   ? TEnv
   : Readonly<{ [key: string]: unknown }>;
+
+// === Nested API Types ===
+
+export type NestedVarsValue =
+  | string
+  | CSSType<string | number>
+  | { readonly [key: string]: NestedVarsValue };
+
+export type NestedConstsValue =
+  | string
+  | number
+  | { readonly [key: string]: NestedConstsValue };
+
+export type NestedStringValue =
+  | string
+  | { readonly [key: string]: NestedStringValue };
+
+// unstable_defineVarsNested: preserves nested key structure in output.
+// Uses generic <T> to give consumers key-level autocomplete.
+// Leaf values are replaced with var(--hash) strings at compile time.
+export type StyleX$DefineVarsNested = <
+  const T extends { [key: string]: NestedVarsValue },
+>(
+  tokens: T,
+) => T;
+
+// unstable_defineConstsNested: same as input — values inlined at compile time.
+export type StyleX$DefineConstsNested = <
+  const T extends { [key: string]: NestedConstsValue },
+>(
+  tokens: T,
+) => T;
+
+// unstable_createThemeNested: returns a flat theme object like createTheme.
+export type StyleX$CreateThemeNested = (
+  baseTokens: { readonly [key: string]: NestedStringValue },
+  overrides: { readonly [key: string]: NestedVarsValue },
+) => CompiledStyles;
+
+// unstable_conditional: identity function for type disambiguation.
+// Marks a conditional @media/@supports value so the type system can
+// distinguish it from namespace objects in nested token definitions.
+export type StyleX$Conditional = <
+  const T extends { default: unknown; [key: `@${string}`]: unknown },
+>(
+  value: T,
+) => T;

package/lib/cjs/types/StyleXTypes.js.flow

@@ -54,8 +54,9 @@ export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
   false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
-export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: unknown }> =
-  XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
+export type XStyleWithout<
+  +T extends { +[_K in keyof NestedCSSPropTypes]?: unknown },
+> = XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
 
@@ -131,19 +132,19 @@ type ComplexStyleValueType<+T> =
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : Readonly<T>;
 
-type _MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
+type _MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
+export type MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
   ..._MapNamespace<CSS>,
   $$css: true,
 }>;
-export type MapNamespaces<+S: { +[string]: unknown }> = Readonly<{
+export type MapNamespaces<+S extends { +[string]: unknown }> = 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: { +[string]: { ... } }>(
+export type StyleX$Create = <const S extends { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -156,51 +157,53 @@ export type InlineStyles = Readonly<{
   [key: string]: string,
 }>;
 
-type _GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
+type _GenStylePropType<+CSS extends { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: CSS[Key] extends { +[string]: unknown }
     ? StyleXClassNameFor<Key, Readonly<CSS[Key]>>
     : StyleXClassNameFor<Key, CSS[Key]>,
 }>;
-type GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
+type GenStylePropType<+CSS extends { +[string]: unknown }> = Readonly<{
   ..._GenStylePropType<CSS>,
   $$css: true,
 }>;
 
 // Replace `XStyle` with this.
 export type StaticStyles<
-  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS: { +[string]: unknown }> = StaticStyles<
-  Omit<CSSPropertiesWithExtras, keyof CSS>,
->;
+export type StaticStylesWithout<+CSS extends { +[string]: unknown }> =
+  StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type StyleXStyles<
-  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<
   | ?false
   | GenStylePropType<Readonly<CSS>>
   | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
 >;
 
-export type StyleXStylesWithout<+CSS: { +[string]: unknown }> = StyleXStyles<
-  Omit<CSSPropertiesWithExtras, keyof CSS>,
->;
+export type StyleXStylesWithout<+CSS extends { +[string]: unknown }> =
+  StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
-export type VarGroup<+Tokens: { +[string]: unknown }, +_ID: string = string> = {
+export type VarGroup<
+  +Tokens extends { +[string]: unknown },
+  +_ID extends string = string,
+> = {
   +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+export type TokensFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
   Readonly<{
     [Key in keyof T]: UnwrapVar<T[Key]>,
   }>;
 
-type IDFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+type IDFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
   T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
 
 type NestedVarObject<+T> =
   | T
+  | (() => T)
   | Readonly<{
       default: NestedVarObject<T>,
       [string]: NestedVarObject<T>,
@@ -208,13 +211,31 @@ type NestedVarObject<+T> =
 
 type TTokens = Readonly<{
   [string]:
-    | NestedVarObject<null | string | number>
-    | StyleXVar<null | string | number>
+    | NestedVarObject<
+        null | string | number | StyleXVar<null | string | number>,
+      >
     | CSSType<null | string | number>,
 }>;
 
-type UnwrapVar<+T> = T extends StyleXVar<infer U> ? U : T;
-export type FlattenTokens<+T: TTokens> = {
+export type NestedVarsValue =
+  | string
+  | CSSType<string | number>
+  | { +[string]: NestedVarsValue };
+
+export type NestedConstsValue =
+  | string
+  | number
+  | { +[string]: NestedConstsValue };
+
+export type NestedStringValue = string | { +[string]: NestedStringValue };
+
+type UnwrapVar<+T> = T extends () => infer U
+  ? UnwrapVar<U>
+  : T extends StyleXVar<infer U>
+    ? U
+    : T;
+
+export type FlattenTokens<+T extends TTokens> = {
   +[Key in keyof T]: T[Key] extends CSSType<string | number>
     ? UnwrapVar<T[Key]>
     : T[Key] extends { +default: infer X, +[string]: infer Y }
@@ -222,32 +243,35 @@ export type FlattenTokens<+T: TTokens> = {
       : UnwrapVar<T[Key]>,
 };
 
-export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
+export type StyleX$DefineVars = <
+  DefaultTokens extends TTokens,
+  ID extends string = string,
+>(
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  const DefaultTokens: { +[string]: number | string },
+  const DefaultTokens extends { +[string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
 // opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T: VarGroup<{ +[string]: unknown }, string>,
-  +_Tag: string = string,
+  +T extends VarGroup<{ +[string]: unknown }, string>,
+  +_Tag extends string = string,
 >: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config: { +[string]: unknown }> = {
+export type OverridesForTokenType<+Config extends { +[string]: unknown }> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: VarGroup<{ +[string]: unknown }>,
-  ID: string = string,
+  BaseTokens extends VarGroup<{ +[string]: unknown }>,
+  ID extends string = string,
 >(
   baseTokens: BaseTokens,
   overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
@@ -280,4 +304,4 @@ export type StyleX$When = {
   ) => ':where-any-sibling',
 };
 
-export type StyleX$Env = $ReadOnly<{ [string]: mixed }>;
+export type StyleX$Env = Readonly<{ [string]: unknown }>;

package/lib/cjs/types/VarTypes.js.flow

@@ -29,64 +29,70 @@ export type CSSSyntax =
 type CSSSyntaxType = CSSSyntax;
 type InnerValue = null | string | number;
 
-interface ICSSType<+_T: InnerValue> {
+interface ICSSType<+_T extends InnerValue> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Angle<+T: InnerValue> implements ICSSType<T> {
+declare export class Angle<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Color<+T: InnerValue> implements ICSSType<T> {
+declare export class Color<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Url<+T: InnerValue> implements ICSSType<T> {
+declare export class Url<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Image<+T: InnerValue> implements ICSSType<T> {
+declare export class Image<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Integer<+T: InnerValue> implements ICSSType<T> {
+declare export class Integer<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class LengthPercentage<+T: InnerValue> implements ICSSType<T> {
+declare export class LengthPercentage<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Length<+T: InnerValue> implements ICSSType<T> {
+declare export class Length<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
+declare export class Percentage<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Num<+T: InnerValue> implements ICSSType<T> {
+declare export class Num<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Resolution<+T: InnerValue> implements ICSSType<T> {
+declare export class Resolution<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Time<+T: InnerValue> implements ICSSType<T> {
+declare export class Time<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformFunction<+T: InnerValue> implements ICSSType<T> {
+declare export class TransformFunction<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformList<+T: InnerValue> implements ICSSType<T> {
+declare export class TransformList<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
 
-export type CSSType<+T: InnerValue> =
+export type CSSType<+T extends InnerValue> =
   | Angle<T>
   | Color<T>
   | Url<T>

package/lib/es/stylex.d.ts

@@ -12,6 +12,9 @@ import type {
   InlineStyles,
   Keyframes,
   MapNamespaces,
+  NestedConstsValue,
+  NestedStringValue,
+  NestedVarsValue,
   StaticStyles,
   StaticStylesWithout,
   StyleX$Create,
@@ -59,6 +62,32 @@ export declare const defineConsts: StyleX$DefineConsts;
 export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
 export declare type defineVars = typeof defineVars;
+export declare const unstable_conditional: <
+  T extends { readonly default: unknown; readonly [$$Key$$: string]: unknown },
+>(
+  _value: T,
+) => T;
+export declare type unstable_conditional = typeof unstable_conditional;
+export declare const unstable_defineVarsNested: <
+  T extends { readonly [$$Key$$: string]: NestedVarsValue },
+>(
+  _styles: T,
+) => T;
+export declare type unstable_defineVarsNested =
+  typeof unstable_defineVarsNested;
+export declare const unstable_defineConstsNested: <
+  T extends { readonly [$$Key$$: string]: NestedConstsValue },
+>(
+  _styles: T,
+) => T;
+export declare type unstable_defineConstsNested =
+  typeof unstable_defineConstsNested;
+export declare const unstable_createThemeNested: (
+  _baseTokens: { readonly [$$Key$$: string]: NestedStringValue },
+  _overrides: { readonly [$$Key$$: string]: NestedVarsValue },
+) => CompiledStyles;
+export declare type unstable_createThemeNested =
+  typeof unstable_createThemeNested;
 export declare const defineMarker: StyleX$DefineMarker;
 export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
@@ -192,6 +221,28 @@ type IStyleX = {
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   when: typeof when;
+  unstable_conditional: <
+    T extends {
+      readonly default: unknown;
+      readonly [$$Key$$: string]: unknown;
+    },
+  >(
+    value: T,
+  ) => T;
+  unstable_defineVarsNested: <
+    T extends { readonly [$$Key$$: string]: NestedVarsValue },
+  >(
+    tokens: T,
+  ) => T;
+  unstable_defineConstsNested: <
+    T extends { readonly [$$Key$$: string]: NestedConstsValue },
+  >(
+    tokens: T,
+  ) => T;
+  unstable_createThemeNested: (
+    baseTokens: { readonly [$$Key$$: string]: NestedStringValue },
+    overrides: { readonly [$$Key$$: string]: NestedVarsValue },
+  ) => CompiledStyles;
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;

package/lib/es/stylex.js.flow

@@ -12,6 +12,9 @@ import type {
   InlineStyles,
   Keyframes,
   MapNamespaces,
+  NestedConstsValue,
+  NestedStringValue,
+  NestedVarsValue,
   StaticStyles,
   StaticStylesWithout,
   StyleX$Create,
@@ -61,9 +64,32 @@ declare export const defineConsts: StyleX$DefineConsts;
 
 declare export const defineVars: StyleX$DefineVars;
 
+declare export const unstable_conditional: <
+  const T extends { +default: unknown, +[string]: unknown },
+>(
+  _value: T,
+) => T;
+
+declare export const unstable_defineVarsNested: <
+  const T extends { +[string]: NestedVarsValue },
+>(
+  _styles: T,
+) => T;
+
+declare export const unstable_defineConstsNested: <
+  const T extends { +[string]: NestedConstsValue },
+>(
+  _styles: T,
+) => T;
+
+declare export const unstable_createThemeNested: (
+  _baseTokens: { +[string]: NestedStringValue },
+  _overrides: { +[string]: NestedVarsValue },
+) => CompiledStyles;
+
 declare export const defineMarker: StyleX$DefineMarker;
 
-declare export const firstThatWorks: <T: string | number>(
+declare export const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
 
@@ -112,31 +138,35 @@ declare export const when: StyleX$When;
 declare export const env: StyleX$Env;
 
 declare export const types: {
-  angle: <T: string | 0 = string | 0>(
+  angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
   ) => Types.Angle<T>,
-  color: <T: string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
-  url: <T: string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
-  image: <T: string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
-  integer: <T: number = number>(_v: ValueWithDefault<T>) => Types.Integer<T>,
-  lengthPercentage: <T: number | string = number | string>(
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
+  integer: <T extends number = number>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Integer<T>,
+  lengthPercentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.LengthPercentage<T>,
-  length: <T: number | string = number | string>(
+  length: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.Length<T>,
-  percentage: <T: number | string = number | string>(
+  percentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
   ) => Types.Percentage<T>,
-  number: <T: number = number>(_v: ValueWithDefault<T>) => Types.Num<T>,
-  resolution: <T: string = string>(
+  number: <T extends number = number>(_v: ValueWithDefault<T>) => Types.Num<T>,
+  resolution: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.Resolution<T>,
-  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Types.Time<T>,
-  transformFunction: <T: string = string>(
+  time: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Time<T>,
+  transformFunction: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.TransformFunction<T>,
-  transformList: <T: string = string>(
+  transformList: <T extends string = string>(
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>,
 };
@@ -158,7 +188,7 @@ type IStyleX = {
     }>,
   >,
   defineMarker: StyleX$DefineMarker,
-  firstThatWorks: <T: string | number>(
+  firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
@@ -190,6 +220,23 @@ type IStyleX = {
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,
+  unstable_conditional: <
+    const T extends { +default: unknown, +[string]: unknown },
+  >(
+    value: T,
+  ) => T,
+  unstable_defineVarsNested: <const T extends { +[string]: NestedVarsValue }>(
+    tokens: T,
+  ) => T,
+  unstable_defineConstsNested: <
+    const T extends { +[string]: NestedConstsValue },
+  >(
+    tokens: T,
+  ) => T,
+  unstable_createThemeNested: (
+    baseTokens: { +[string]: NestedStringValue },
+    overrides: { +[string]: NestedVarsValue },
+  ) => CompiledStyles,
   __customProperties?: { [string]: unknown },
   ...
 };

package/lib/es/stylex.mjs

@@ -144,6 +144,18 @@ const defineConsts = function stylexDefineConsts(_styles) {
 const defineVars = function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 };
+const unstable_conditional = function stylexConditional(_value) {
+  throw errorForFn('unstable_conditional');
+};
+const unstable_defineVarsNested = function stylexDefineVarsNested(_styles) {
+  throw errorForFn('unstable_defineVarsNested');
+};
+const unstable_defineConstsNested = function stylexDefineConstsNested(_styles) {
+  throw errorForFn('unstable_defineConstsNested');
+};
+const unstable_createThemeNested = (_baseTokens, _overrides) => {
+  throw errorForFn('unstable_createThemeNested');
+};
 const defineMarker = () => {
   throw errorForFn('defineMarker');
 };
@@ -254,25 +266,31 @@ const types = {
     throw errorForType('transformList');
   }
 };
-function _legacyMerge(...styles) {
-  const [className] = styleqExports.styleq(styles);
-  return className;
-}
-_legacyMerge.create = create;
-_legacyMerge.createTheme = createTheme;
-_legacyMerge.defineConsts = defineConsts;
-_legacyMerge.defineMarker = defineMarker;
-_legacyMerge.defineVars = defineVars;
-_legacyMerge.defaultMarker = defaultMarker;
-_legacyMerge.firstThatWorks = firstThatWorks;
-_legacyMerge.keyframes = keyframes;
-_legacyMerge.positionTry = positionTry;
-_legacyMerge.props = props;
-_legacyMerge.attrs = attrs;
-_legacyMerge.types = types;
-_legacyMerge.when = when;
-_legacyMerge.viewTransitionClass = viewTransitionClass;
-_legacyMerge.env = env;
-const legacyMerge = _legacyMerge;
+const legacyMerge = /*@__PURE__*/ function () {
+  function _legacyMerge(...styles) {
+    const [className] = styleqExports.styleq(styles);
+    return className;
+  }
+  _legacyMerge.create = create;
+  _legacyMerge.createTheme = createTheme;
+  _legacyMerge.defineConsts = defineConsts;
+  _legacyMerge.defineMarker = defineMarker;
+  _legacyMerge.defineVars = defineVars;
+  _legacyMerge.defaultMarker = defaultMarker;
+  _legacyMerge.firstThatWorks = firstThatWorks;
+  _legacyMerge.keyframes = keyframes;
+  _legacyMerge.positionTry = positionTry;
+  _legacyMerge.props = props;
+  _legacyMerge.attrs = attrs;
+  _legacyMerge.types = types;
+  _legacyMerge.when = when;
+  _legacyMerge.viewTransitionClass = viewTransitionClass;
+  _legacyMerge.env = env;
+  _legacyMerge.unstable_conditional = unstable_conditional;
+  _legacyMerge.unstable_defineVarsNested = unstable_defineVarsNested;
+  _legacyMerge.unstable_defineConstsNested = unstable_defineConstsNested;
+  _legacyMerge.unstable_createThemeNested = unstable_createThemeNested;
+  return _legacyMerge;
+}();
 
-export { attrs, create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };
+export { attrs, create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, unstable_conditional, unstable_createThemeNested, unstable_defineConstsNested, unstable_defineVarsNested, viewTransitionClass, when };

package/lib/es/types/StyleXOpaqueTypes.js.flow

@@ -11,6 +11,6 @@
 //   value: T;
 // }
 // This is the type for the variables object
-declare export opaque type StyleXVar<+_Val: unknown>: string;
+declare export opaque type StyleXVar<+_Val extends unknown>: string;
 
 declare export opaque type StyleXClassNameFor<+_K, +_V>: string;

package/lib/es/types/StyleXTypes.d.ts

@@ -252,12 +252,17 @@ export type IDFromVarGroup<T extends VarGroup<{}>> = T['__opaqueId'];
 
 type TTokens = Readonly<{
   [key: string]:
-    | NestedVarObject<null | string | number>
-    | StyleXVar<null | string | number>
+    | NestedVarObject<
+        null | string | number | StyleXVar<null | string | number>
+      >
     | CSSType<null | string | number>;
 }>;
 
-type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+type UnwrapVars<T> = T extends () => infer U
+  ? UnwrapVars<U>
+  : T extends StyleXVar<infer U>
+    ? U
+    : T;
 export type FlattenTokens<T extends TTokens> = Readonly<{
   [Key in keyof T]: T[Key] extends { [key: string]: infer X }
     ? UnwrapVars<X>
@@ -266,6 +271,7 @@ export type FlattenTokens<T extends TTokens> = Readonly<{
 
 type NestedVarObject<T> =
   | T
+  | (() => T)
   | Readonly<{
       default: NestedVarObject<T>;
       [key: AtRuleStr]: NestedVarObject<T>;
@@ -360,3 +366,50 @@ export interface Register {}
 export type StyleX$Env = Register extends { env: infer TEnv }
   ? TEnv
   : Readonly<{ [key: string]: unknown }>;
+
+// === Nested API Types ===
+
+export type NestedVarsValue =
+  | string
+  | CSSType<string | number>
+  | { readonly [key: string]: NestedVarsValue };
+
+export type NestedConstsValue =
+  | string
+  | number
+  | { readonly [key: string]: NestedConstsValue };
+
+export type NestedStringValue =
+  | string
+  | { readonly [key: string]: NestedStringValue };
+
+// unstable_defineVarsNested: preserves nested key structure in output.
+// Uses generic <T> to give consumers key-level autocomplete.
+// Leaf values are replaced with var(--hash) strings at compile time.
+export type StyleX$DefineVarsNested = <
+  const T extends { [key: string]: NestedVarsValue },
+>(
+  tokens: T,
+) => T;
+
+// unstable_defineConstsNested: same as input — values inlined at compile time.
+export type StyleX$DefineConstsNested = <
+  const T extends { [key: string]: NestedConstsValue },
+>(
+  tokens: T,
+) => T;
+
+// unstable_createThemeNested: returns a flat theme object like createTheme.
+export type StyleX$CreateThemeNested = (
+  baseTokens: { readonly [key: string]: NestedStringValue },
+  overrides: { readonly [key: string]: NestedVarsValue },
+) => CompiledStyles;
+
+// unstable_conditional: identity function for type disambiguation.
+// Marks a conditional @media/@supports value so the type system can
+// distinguish it from namespace objects in nested token definitions.
+export type StyleX$Conditional = <
+  const T extends { default: unknown; [key: `@${string}`]: unknown },
+>(
+  value: T,
+) => T;

package/lib/es/types/StyleXTypes.js.flow

@@ -54,8 +54,9 @@ export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
   false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
-export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: unknown }> =
-  XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
+export type XStyleWithout<
+  +T extends { +[_K in keyof NestedCSSPropTypes]?: unknown },
+> = XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
 
@@ -131,19 +132,19 @@ type ComplexStyleValueType<+T> =
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : Readonly<T>;
 
-type _MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
+type _MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
+export type MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
   ..._MapNamespace<CSS>,
   $$css: true,
 }>;
-export type MapNamespaces<+S: { +[string]: unknown }> = Readonly<{
+export type MapNamespaces<+S extends { +[string]: unknown }> = 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: { +[string]: { ... } }>(
+export type StyleX$Create = <const S extends { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -156,51 +157,53 @@ export type InlineStyles = Readonly<{
   [key: string]: string,
 }>;
 
-type _GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
+type _GenStylePropType<+CSS extends { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: CSS[Key] extends { +[string]: unknown }
     ? StyleXClassNameFor<Key, Readonly<CSS[Key]>>
     : StyleXClassNameFor<Key, CSS[Key]>,
 }>;
-type GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
+type GenStylePropType<+CSS extends { +[string]: unknown }> = Readonly<{
   ..._GenStylePropType<CSS>,
   $$css: true,
 }>;
 
 // Replace `XStyle` with this.
 export type StaticStyles<
-  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS: { +[string]: unknown }> = StaticStyles<
-  Omit<CSSPropertiesWithExtras, keyof CSS>,
->;
+export type StaticStylesWithout<+CSS extends { +[string]: unknown }> =
+  StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type StyleXStyles<
-  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<
   | ?false
   | GenStylePropType<Readonly<CSS>>
   | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
 >;
 
-export type StyleXStylesWithout<+CSS: { +[string]: unknown }> = StyleXStyles<
-  Omit<CSSPropertiesWithExtras, keyof CSS>,
->;
+export type StyleXStylesWithout<+CSS extends { +[string]: unknown }> =
+  StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
-export type VarGroup<+Tokens: { +[string]: unknown }, +_ID: string = string> = {
+export type VarGroup<
+  +Tokens extends { +[string]: unknown },
+  +_ID extends string = string,
+> = {
   +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+export type TokensFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
   Readonly<{
     [Key in keyof T]: UnwrapVar<T[Key]>,
   }>;
 
-type IDFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+type IDFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
   T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
 
 type NestedVarObject<+T> =
   | T
+  | (() => T)
   | Readonly<{
       default: NestedVarObject<T>,
       [string]: NestedVarObject<T>,
@@ -208,13 +211,31 @@ type NestedVarObject<+T> =
 
 type TTokens = Readonly<{
   [string]:
-    | NestedVarObject<null | string | number>
-    | StyleXVar<null | string | number>
+    | NestedVarObject<
+        null | string | number | StyleXVar<null | string | number>,
+      >
     | CSSType<null | string | number>,
 }>;
 
-type UnwrapVar<+T> = T extends StyleXVar<infer U> ? U : T;
-export type FlattenTokens<+T: TTokens> = {
+export type NestedVarsValue =
+  | string
+  | CSSType<string | number>
+  | { +[string]: NestedVarsValue };
+
+export type NestedConstsValue =
+  | string
+  | number
+  | { +[string]: NestedConstsValue };
+
+export type NestedStringValue = string | { +[string]: NestedStringValue };
+
+type UnwrapVar<+T> = T extends () => infer U
+  ? UnwrapVar<U>
+  : T extends StyleXVar<infer U>
+    ? U
+    : T;
+
+export type FlattenTokens<+T extends TTokens> = {
   +[Key in keyof T]: T[Key] extends CSSType<string | number>
     ? UnwrapVar<T[Key]>
     : T[Key] extends { +default: infer X, +[string]: infer Y }
@@ -222,32 +243,35 @@ export type FlattenTokens<+T: TTokens> = {
       : UnwrapVar<T[Key]>,
 };
 
-export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
+export type StyleX$DefineVars = <
+  DefaultTokens extends TTokens,
+  ID extends string = string,
+>(
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  const DefaultTokens: { +[string]: number | string },
+  const DefaultTokens extends { +[string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
 // opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T: VarGroup<{ +[string]: unknown }, string>,
-  +_Tag: string = string,
+  +T extends VarGroup<{ +[string]: unknown }, string>,
+  +_Tag extends string = string,
 >: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config: { +[string]: unknown }> = {
+export type OverridesForTokenType<+Config extends { +[string]: unknown }> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: VarGroup<{ +[string]: unknown }>,
-  ID: string = string,
+  BaseTokens extends VarGroup<{ +[string]: unknown }>,
+  ID extends string = string,
 >(
   baseTokens: BaseTokens,
   overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
@@ -280,4 +304,4 @@ export type StyleX$When = {
   ) => ':where-any-sibling',
 };
 
-export type StyleX$Env = $ReadOnly<{ [string]: mixed }>;
+export type StyleX$Env = Readonly<{ [string]: unknown }>;

package/lib/es/types/VarTypes.js.flow

@@ -29,64 +29,70 @@ export type CSSSyntax =
 type CSSSyntaxType = CSSSyntax;
 type InnerValue = null | string | number;
 
-interface ICSSType<+_T: InnerValue> {
+interface ICSSType<+_T extends InnerValue> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Angle<+T: InnerValue> implements ICSSType<T> {
+declare export class Angle<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Color<+T: InnerValue> implements ICSSType<T> {
+declare export class Color<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Url<+T: InnerValue> implements ICSSType<T> {
+declare export class Url<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Image<+T: InnerValue> implements ICSSType<T> {
+declare export class Image<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Integer<+T: InnerValue> implements ICSSType<T> {
+declare export class Integer<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class LengthPercentage<+T: InnerValue> implements ICSSType<T> {
+declare export class LengthPercentage<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Length<+T: InnerValue> implements ICSSType<T> {
+declare export class Length<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
+declare export class Percentage<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Num<+T: InnerValue> implements ICSSType<T> {
+declare export class Num<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Resolution<+T: InnerValue> implements ICSSType<T> {
+declare export class Resolution<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Time<+T: InnerValue> implements ICSSType<T> {
+declare export class Time<+T extends InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformFunction<+T: InnerValue> implements ICSSType<T> {
+declare export class TransformFunction<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformList<+T: InnerValue> implements ICSSType<T> {
+declare export class TransformList<+T extends InnerValue>
+  implements ICSSType<T>
+{
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
 
-export type CSSType<+T: InnerValue> =
+export type CSSType<+T extends InnerValue> =
   | Angle<T>
   | Color<T>
   | Url<T>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -60,9 +60,10 @@
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "cross-env": "^10.1.0",
     "rollup": "^4.59.0",
-    "scripts": "0.18.2"
+    "scripts": "0.18.3"
   },
   "files": [
     "lib/*"
-  ]
+  ],
+  "sideEffects": false
 }