@stylexjs/stylex 0.18.3 → 0.19.0

package/lib/cjs/stylex.d.ts

@@ -8,6 +8,7 @@
  */
 
 import type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -38,6 +39,7 @@ import type {
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
 export type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,

package/lib/cjs/stylex.js.flow

@@ -8,6 +8,7 @@
  */
 
 import type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -39,6 +40,7 @@ import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
 
 export type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -65,26 +67,26 @@ declare export const defineConsts: StyleX$DefineConsts;
 declare export const defineVars: StyleX$DefineVars;
 
 declare export const unstable_conditional: <
-  const T extends { +default: unknown, +[string]: unknown },
+  const T extends { readonly default: unknown, readonly [string]: unknown },
 >(
   _value: T,
 ) => T;
 
 declare export const unstable_defineVarsNested: <
-  const T extends { +[string]: NestedVarsValue },
+  const T extends { readonly [string]: NestedVarsValue },
 >(
   _styles: T,
 ) => T;
 
 declare export const unstable_defineConstsNested: <
-  const T extends { +[string]: NestedConstsValue },
+  const T extends { readonly [string]: NestedConstsValue },
 >(
   _styles: T,
 ) => T;
 
 declare export const unstable_createThemeNested: (
-  _baseTokens: { +[string]: NestedStringValue },
-  _overrides: { +[string]: NestedVarsValue },
+  _baseTokens: { readonly [string]: NestedStringValue },
+  _overrides: { readonly [string]: NestedVarsValue },
 ) => CompiledStyles;
 
 declare export const defineMarker: StyleX$DefineMarker;
@@ -221,21 +223,23 @@ type IStyleX = {
   types: typeof types,
   when: typeof when,
   unstable_conditional: <
-    const T extends { +default: unknown, +[string]: unknown },
+    const T extends { readonly default: unknown, readonly [string]: unknown },
   >(
     value: T,
   ) => T,
-  unstable_defineVarsNested: <const T extends { +[string]: NestedVarsValue }>(
+  unstable_defineVarsNested: <
+    const T extends { readonly [string]: NestedVarsValue },
+  >(
     tokens: T,
   ) => T,
   unstable_defineConstsNested: <
-    const T extends { +[string]: NestedConstsValue },
+    const T extends { readonly [string]: NestedConstsValue },
   >(
     tokens: T,
   ) => T,
   unstable_createThemeNested: (
-    baseTokens: { +[string]: NestedStringValue },
-    overrides: { +[string]: NestedVarsValue },
+    baseTokens: { readonly [string]: NestedStringValue },
+    overrides: { readonly [string]: NestedVarsValue },
   ) => CompiledStyles,
   __customProperties?: { [string]: unknown },
   ...

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

@@ -1461,7 +1461,7 @@ export type CSSProperties = Readonly<{
   textTransform?: all | textTransform;
   textUnderlineOffset?: all | number | string;
   textUnderlinePosition?: all | textUnderlinePosition;
-  textWrap?: all | 'wrap' | 'nowrap' | 'balance';
+  textWrap?: all | 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
   timelineScope?: all | string;
   top?: all | top;
   touchAction?: all | touchAction;

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

@@ -1548,7 +1548,7 @@ export type CSSProperties = Readonly<{
   textTransform?: all | textTransform,
   textUnderlineOffset?: all | number | string,
   textUnderlinePosition?: all | textUnderlinePosition,
-  textWrap?: all | 'wrap' | 'nowrap' | 'balance',
+  textWrap?: all | 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable',
 
   timelineScope?: all | string,
   top?: all | top,

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 extends unknown>: string;
+declare export opaque type StyleXVar<out _Val extends unknown>: string;
 
-declare export opaque type StyleXClassNameFor<+_K, +_V>: string;
+declare export opaque type StyleXClassNameFor<out _K, out _V>: string;

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

@@ -8,6 +8,8 @@
 import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
 
+export type { CSSProperties } from './StyleXCSSTypes';
+
 // Using an opaque type to declare ClassNames generated by stylex.
 declare const StyleXClassNameTag: unique symbol;
 export type StyleXClassNameFor<K, V> = string & {
@@ -312,10 +314,8 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
 
-declare const StyleXMarkerTag: unique symbol;
-
 export type StyleX$DefineMarker = () => MapNamespace<{
-  readonly marker: typeof StyleXMarkerTag;
+  readonly marker: symbol;
 }>;
 
 export type StyleX$When = {

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

@@ -11,15 +11,16 @@ import type { CSSProperties } from './StyleXCSSTypes';
 import type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 import type { CSSType } from './VarTypes';
 
+export type { CSSProperties } from './StyleXCSSTypes';
 export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
-export type StyleXClassNameForValue<+V> = StyleXClassNameFor<unknown, V>;
-export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, unknown>;
+export type StyleXClassNameForValue<out V> = StyleXClassNameFor<unknown, V>;
+export type StyleXClassNameForKey<out K> = StyleXClassNameFor<K, unknown>;
 export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
 
 // Type for arbitrarily nested Array.
-export type StyleXArray<+T> = T | ReadonlyArray<StyleXArray<T>>;
+export type StyleXArray<out T> = T | ReadonlyArray<StyleXArray<T>>;
 
 type CSSPropertiesWithExtras = Readonly<{
   ...CSSProperties,
@@ -50,12 +51,12 @@ export type NestedCSSPropTypes = Readonly<{
 }>;
 
 export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
-export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
+export type XStyle<out T = NestedCSSPropTypes> = StyleXArray<
   false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
 export type XStyleWithout<
-  +T extends { +[_K in keyof NestedCSSPropTypes]?: unknown },
+  out T extends { readonly [_K in keyof NestedCSSPropTypes]?: unknown },
 > = XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
@@ -119,7 +120,7 @@ export type LegacyThemeStyles = Readonly<{
   ...
 }>;
 
-type ComplexStyleValueType<+T> =
+type ComplexStyleValueType<out T> =
   T extends StyleXVar<infer U>
     ? U extends CSSType<infer V>
       ? V
@@ -128,23 +129,25 @@ type ComplexStyleValueType<+T> =
       ? T
       : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
-        : T extends { +default: infer A, +[string]: infer B }
+        : T extends { readonly default: infer A, readonly [string]: infer B }
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : Readonly<T>;
 
-type _MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
+type _MapNamespace<out CSS extends { readonly [string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
-  ..._MapNamespace<CSS>,
-  $$css: true,
-}>;
-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 extends { +[string]: { ... } }>(
+export type MapNamespace<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    ..._MapNamespace<CSS>,
+    $$css: true,
+  }>;
+export type MapNamespaces<out S extends { readonly [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 extends { readonly [string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -157,51 +160,56 @@ export type InlineStyles = Readonly<{
   [key: string]: string,
 }>;
 
-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 extends { +[string]: unknown }> = Readonly<{
-  ..._GenStylePropType<CSS>,
-  $$css: true,
-}>;
+type _GenStylePropType<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    [Key in keyof CSS]: CSS[Key] extends { readonly [string]: unknown }
+      ? StyleXClassNameFor<Key, Readonly<CSS[Key]>>
+      : StyleXClassNameFor<Key, CSS[Key]>,
+  }>;
+type GenStylePropType<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    ..._GenStylePropType<CSS>,
+    $$css: true,
+  }>;
 
 // Replace `XStyle` with this.
 export type StaticStyles<
-  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
+  out CSS extends { readonly [string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS extends { +[string]: unknown }> =
-  StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
+export type StaticStylesWithout<
+  out CSS extends { readonly [string]: unknown },
+> = StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type StyleXStyles<
-  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
+  out CSS extends { readonly [string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<
   | ?false
   | GenStylePropType<Readonly<CSS>>
   | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
 >;
 
-export type StyleXStylesWithout<+CSS extends { +[string]: unknown }> =
-  StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
+export type StyleXStylesWithout<
+  out CSS extends { readonly [string]: unknown },
+> = StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type VarGroup<
-  +Tokens extends { +[string]: unknown },
-  +_ID extends string = string,
+  out Tokens extends { readonly [string]: unknown },
+  out _ID extends string = string,
 > = {
-  +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
+  readonly [Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
-  Readonly<{
-    [Key in keyof T]: UnwrapVar<T[Key]>,
-  }>;
+export type TokensFromVarGroup<
+  out T extends VarGroup<{ readonly [string]: unknown }>,
+> = Readonly<{
+  [Key in keyof T]: UnwrapVar<T[Key]>,
+}>;
 
-type IDFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
-  T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
+type IDFromVarGroup<out T extends VarGroup<{ readonly [string]: unknown }>> =
+  T extends VarGroup<{ readonly [string]: unknown }, infer ID> ? ID : empty;
 
-type NestedVarObject<+T> =
+type NestedVarObject<out T> =
   | T
   | (() => T)
   | Readonly<{
@@ -220,25 +228,27 @@ type TTokens = Readonly<{
 export type NestedVarsValue =
   | string
   | CSSType<string | number>
-  | { +[string]: NestedVarsValue };
+  | { readonly [string]: NestedVarsValue };
 
 export type NestedConstsValue =
   | string
   | number
-  | { +[string]: NestedConstsValue };
+  | { readonly [string]: NestedConstsValue };
 
-export type NestedStringValue = string | { +[string]: NestedStringValue };
+export type NestedStringValue =
+  | string
+  | { readonly [string]: NestedStringValue };
 
-type UnwrapVar<+T> = T extends () => infer U
+type UnwrapVar<out 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>
+export type FlattenTokens<out T extends TTokens> = {
+  readonly [Key in keyof T]: T[Key] extends CSSType<string | number>
     ? UnwrapVar<T[Key]>
-    : T[Key] extends { +default: infer X, +[string]: infer Y }
+    : T[Key] extends { readonly default: infer X, readonly [string]: infer Y }
       ? UnwrapVar<X | Y>
       : UnwrapVar<T[Key]>,
 };
@@ -251,26 +261,28 @@ export type StyleX$DefineVars = <
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  const DefaultTokens extends { +[string]: number | string },
+  const DefaultTokens extends { readonly [string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
-// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
+// opaque type ThemeKey<+_VG: VarGroup<{ readonly [string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T extends VarGroup<{ +[string]: unknown }, string>,
-  +_Tag extends string = string,
+  out T extends VarGroup<{ readonly [string]: unknown }, string>,
+  out _Tag extends string = string,
 >: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config extends { +[string]: unknown }> = {
+export type OverridesForTokenType<
+  out Config extends { readonly [string]: unknown },
+> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens extends VarGroup<{ +[string]: unknown }>,
+  BaseTokens extends VarGroup<{ readonly [string]: unknown }>,
   ID extends string = string,
 >(
   baseTokens: BaseTokens,
@@ -278,29 +290,29 @@ export type StyleX$CreateTheme = <
 ) => Theme<BaseTokens, ID>;
 
 export type StyleX$DefineMarker = () => MapNamespace<{
-  +marker: 'custom-marker',
+  readonly marker: 'custom-marker',
 }>;
 
 export type StyleX$When = {
   ancestor: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-ancestor',
   descendant: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-descendant',
   siblingBefore: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-sibling-before',
   siblingAfter: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-sibling-after',
   anySibling: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };
 

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

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type ValueWithDefault<+T> =
+export type ValueWithDefault<out T> =
   | T
   | Readonly<{
       default: ValueWithDefault<T>,

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

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

package/lib/es/stylex.d.ts

@@ -8,6 +8,7 @@
  */
 
 import type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -38,6 +39,7 @@ import type {
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
 export type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,

package/lib/es/stylex.js.flow

@@ -8,6 +8,7 @@
  */
 
 import type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -39,6 +40,7 @@ import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
 
 export type {
+  CSSProperties,
   CompiledStyles,
   InlineStyles,
   Keyframes,
@@ -65,26 +67,26 @@ declare export const defineConsts: StyleX$DefineConsts;
 declare export const defineVars: StyleX$DefineVars;
 
 declare export const unstable_conditional: <
-  const T extends { +default: unknown, +[string]: unknown },
+  const T extends { readonly default: unknown, readonly [string]: unknown },
 >(
   _value: T,
 ) => T;
 
 declare export const unstable_defineVarsNested: <
-  const T extends { +[string]: NestedVarsValue },
+  const T extends { readonly [string]: NestedVarsValue },
 >(
   _styles: T,
 ) => T;
 
 declare export const unstable_defineConstsNested: <
-  const T extends { +[string]: NestedConstsValue },
+  const T extends { readonly [string]: NestedConstsValue },
 >(
   _styles: T,
 ) => T;
 
 declare export const unstable_createThemeNested: (
-  _baseTokens: { +[string]: NestedStringValue },
-  _overrides: { +[string]: NestedVarsValue },
+  _baseTokens: { readonly [string]: NestedStringValue },
+  _overrides: { readonly [string]: NestedVarsValue },
 ) => CompiledStyles;
 
 declare export const defineMarker: StyleX$DefineMarker;
@@ -221,21 +223,23 @@ type IStyleX = {
   types: typeof types,
   when: typeof when,
   unstable_conditional: <
-    const T extends { +default: unknown, +[string]: unknown },
+    const T extends { readonly default: unknown, readonly [string]: unknown },
   >(
     value: T,
   ) => T,
-  unstable_defineVarsNested: <const T extends { +[string]: NestedVarsValue }>(
+  unstable_defineVarsNested: <
+    const T extends { readonly [string]: NestedVarsValue },
+  >(
     tokens: T,
   ) => T,
   unstable_defineConstsNested: <
-    const T extends { +[string]: NestedConstsValue },
+    const T extends { readonly [string]: NestedConstsValue },
   >(
     tokens: T,
   ) => T,
   unstable_createThemeNested: (
-    baseTokens: { +[string]: NestedStringValue },
-    overrides: { +[string]: NestedVarsValue },
+    baseTokens: { readonly [string]: NestedStringValue },
+    overrides: { readonly [string]: NestedVarsValue },
   ) => CompiledStyles,
   __customProperties?: { [string]: unknown },
   ...

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

@@ -1461,7 +1461,7 @@ export type CSSProperties = Readonly<{
   textTransform?: all | textTransform;
   textUnderlineOffset?: all | number | string;
   textUnderlinePosition?: all | textUnderlinePosition;
-  textWrap?: all | 'wrap' | 'nowrap' | 'balance';
+  textWrap?: all | 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
   timelineScope?: all | string;
   top?: all | top;
   touchAction?: all | touchAction;

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

@@ -1548,7 +1548,7 @@ export type CSSProperties = Readonly<{
   textTransform?: all | textTransform,
   textUnderlineOffset?: all | number | string,
   textUnderlinePosition?: all | textUnderlinePosition,
-  textWrap?: all | 'wrap' | 'nowrap' | 'balance',
+  textWrap?: all | 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable',
 
   timelineScope?: all | string,
   top?: all | top,

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 extends unknown>: string;
+declare export opaque type StyleXVar<out _Val extends unknown>: string;
 
-declare export opaque type StyleXClassNameFor<+_K, +_V>: string;
+declare export opaque type StyleXClassNameFor<out _K, out _V>: string;

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

@@ -8,6 +8,8 @@
 import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
 
+export type { CSSProperties } from './StyleXCSSTypes';
+
 // Using an opaque type to declare ClassNames generated by stylex.
 declare const StyleXClassNameTag: unique symbol;
 export type StyleXClassNameFor<K, V> = string & {
@@ -312,10 +314,8 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
 
-declare const StyleXMarkerTag: unique symbol;
-
 export type StyleX$DefineMarker = () => MapNamespace<{
-  readonly marker: typeof StyleXMarkerTag;
+  readonly marker: symbol;
 }>;
 
 export type StyleX$When = {

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

@@ -11,15 +11,16 @@ import type { CSSProperties } from './StyleXCSSTypes';
 import type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 import type { CSSType } from './VarTypes';
 
+export type { CSSProperties } from './StyleXCSSTypes';
 export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
-export type StyleXClassNameForValue<+V> = StyleXClassNameFor<unknown, V>;
-export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, unknown>;
+export type StyleXClassNameForValue<out V> = StyleXClassNameFor<unknown, V>;
+export type StyleXClassNameForKey<out K> = StyleXClassNameFor<K, unknown>;
 export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
 
 // Type for arbitrarily nested Array.
-export type StyleXArray<+T> = T | ReadonlyArray<StyleXArray<T>>;
+export type StyleXArray<out T> = T | ReadonlyArray<StyleXArray<T>>;
 
 type CSSPropertiesWithExtras = Readonly<{
   ...CSSProperties,
@@ -50,12 +51,12 @@ export type NestedCSSPropTypes = Readonly<{
 }>;
 
 export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
-export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
+export type XStyle<out T = NestedCSSPropTypes> = StyleXArray<
   false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
 export type XStyleWithout<
-  +T extends { +[_K in keyof NestedCSSPropTypes]?: unknown },
+  out T extends { readonly [_K in keyof NestedCSSPropTypes]?: unknown },
 > = XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
@@ -119,7 +120,7 @@ export type LegacyThemeStyles = Readonly<{
   ...
 }>;
 
-type ComplexStyleValueType<+T> =
+type ComplexStyleValueType<out T> =
   T extends StyleXVar<infer U>
     ? U extends CSSType<infer V>
       ? V
@@ -128,23 +129,25 @@ type ComplexStyleValueType<+T> =
       ? T
       : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
-        : T extends { +default: infer A, +[string]: infer B }
+        : T extends { readonly default: infer A, readonly [string]: infer B }
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : Readonly<T>;
 
-type _MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
+type _MapNamespace<out CSS extends { readonly [string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS extends { +[string]: unknown }> = Readonly<{
-  ..._MapNamespace<CSS>,
-  $$css: true,
-}>;
-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 extends { +[string]: { ... } }>(
+export type MapNamespace<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    ..._MapNamespace<CSS>,
+    $$css: true,
+  }>;
+export type MapNamespaces<out S extends { readonly [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 extends { readonly [string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -157,51 +160,56 @@ export type InlineStyles = Readonly<{
   [key: string]: string,
 }>;
 
-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 extends { +[string]: unknown }> = Readonly<{
-  ..._GenStylePropType<CSS>,
-  $$css: true,
-}>;
+type _GenStylePropType<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    [Key in keyof CSS]: CSS[Key] extends { readonly [string]: unknown }
+      ? StyleXClassNameFor<Key, Readonly<CSS[Key]>>
+      : StyleXClassNameFor<Key, CSS[Key]>,
+  }>;
+type GenStylePropType<out CSS extends { readonly [string]: unknown }> =
+  Readonly<{
+    ..._GenStylePropType<CSS>,
+    $$css: true,
+  }>;
 
 // Replace `XStyle` with this.
 export type StaticStyles<
-  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
+  out CSS extends { readonly [string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS extends { +[string]: unknown }> =
-  StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
+export type StaticStylesWithout<
+  out CSS extends { readonly [string]: unknown },
+> = StaticStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type StyleXStyles<
-  +CSS extends { +[string]: unknown } = CSSPropertiesWithExtras,
+  out CSS extends { readonly [string]: unknown } = CSSPropertiesWithExtras,
 > = StyleXArray<
   | ?false
   | GenStylePropType<Readonly<CSS>>
   | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
 >;
 
-export type StyleXStylesWithout<+CSS extends { +[string]: unknown }> =
-  StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
+export type StyleXStylesWithout<
+  out CSS extends { readonly [string]: unknown },
+> = StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
 export type VarGroup<
-  +Tokens extends { +[string]: unknown },
-  +_ID extends string = string,
+  out Tokens extends { readonly [string]: unknown },
+  out _ID extends string = string,
 > = {
-  +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
+  readonly [Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
-  Readonly<{
-    [Key in keyof T]: UnwrapVar<T[Key]>,
-  }>;
+export type TokensFromVarGroup<
+  out T extends VarGroup<{ readonly [string]: unknown }>,
+> = Readonly<{
+  [Key in keyof T]: UnwrapVar<T[Key]>,
+}>;
 
-type IDFromVarGroup<+T extends VarGroup<{ +[string]: unknown }>> =
-  T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
+type IDFromVarGroup<out T extends VarGroup<{ readonly [string]: unknown }>> =
+  T extends VarGroup<{ readonly [string]: unknown }, infer ID> ? ID : empty;
 
-type NestedVarObject<+T> =
+type NestedVarObject<out T> =
   | T
   | (() => T)
   | Readonly<{
@@ -220,25 +228,27 @@ type TTokens = Readonly<{
 export type NestedVarsValue =
   | string
   | CSSType<string | number>
-  | { +[string]: NestedVarsValue };
+  | { readonly [string]: NestedVarsValue };
 
 export type NestedConstsValue =
   | string
   | number
-  | { +[string]: NestedConstsValue };
+  | { readonly [string]: NestedConstsValue };
 
-export type NestedStringValue = string | { +[string]: NestedStringValue };
+export type NestedStringValue =
+  | string
+  | { readonly [string]: NestedStringValue };
 
-type UnwrapVar<+T> = T extends () => infer U
+type UnwrapVar<out 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>
+export type FlattenTokens<out T extends TTokens> = {
+  readonly [Key in keyof T]: T[Key] extends CSSType<string | number>
     ? UnwrapVar<T[Key]>
-    : T[Key] extends { +default: infer X, +[string]: infer Y }
+    : T[Key] extends { readonly default: infer X, readonly [string]: infer Y }
       ? UnwrapVar<X | Y>
       : UnwrapVar<T[Key]>,
 };
@@ -251,26 +261,28 @@ export type StyleX$DefineVars = <
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  const DefaultTokens extends { +[string]: number | string },
+  const DefaultTokens extends { readonly [string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
-// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
+// opaque type ThemeKey<+_VG: VarGroup<{ readonly [string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T extends VarGroup<{ +[string]: unknown }, string>,
-  +_Tag extends string = string,
+  out T extends VarGroup<{ readonly [string]: unknown }, string>,
+  out _Tag extends string = string,
 >: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config extends { +[string]: unknown }> = {
+export type OverridesForTokenType<
+  out Config extends { readonly [string]: unknown },
+> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens extends VarGroup<{ +[string]: unknown }>,
+  BaseTokens extends VarGroup<{ readonly [string]: unknown }>,
   ID extends string = string,
 >(
   baseTokens: BaseTokens,
@@ -278,29 +290,29 @@ export type StyleX$CreateTheme = <
 ) => Theme<BaseTokens, ID>;
 
 export type StyleX$DefineMarker = () => MapNamespace<{
-  +marker: 'custom-marker',
+  readonly marker: 'custom-marker',
 }>;
 
 export type StyleX$When = {
   ancestor: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-ancestor',
   descendant: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-descendant',
   siblingBefore: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-sibling-before',
   siblingAfter: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-sibling-after',
   anySibling: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };
 

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

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type ValueWithDefault<+T> =
+export type ValueWithDefault<out T> =
   | T
   | Readonly<{
       default: ValueWithDefault<T>,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -57,10 +57,10 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "babel-plugin-syntax-hermes-parser": "^0.32.1",
+    "babel-plugin-syntax-hermes-parser": "^0.36.1",
     "cross-env": "^10.1.0",
     "rollup": "^4.59.0",
-    "scripts": "0.18.3"
+    "scripts": "0.19.0"
   },
   "files": [
     "lib/*"