@stylexjs/stylex 0.17.5 → 0.18.0

package/lib/cjs/inject.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-type InjectArgs = $ReadOnly<{
+type InjectArgs = Readonly<{
   ltr: string,
   rtl?: ?string,
   priority: number,

package/lib/cjs/stylesheet/createOrderedCSSStyleSheet.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type OrderedCSSStyleSheet = $ReadOnly<{
+export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
   update: (oldCssText: string, newCssText: string, groupValue: number) => void,

package/lib/cjs/stylesheet/createSheet.js.flow

@@ -9,7 +9,7 @@
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
 
-type Sheet = $ReadOnly<{
+type Sheet = Readonly<{
   ...OrderedCSSStyleSheet,
 }>;
 

package/lib/cjs/stylex.d.ts

@@ -92,6 +92,8 @@ export declare const defaultMarker: () => MapNamespace<
 export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
 export declare type when = typeof when;
+export declare const env: Readonly<{ [$$Key$$: string]: unknown }>;
+export declare type env = typeof env;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -144,6 +146,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme;
   defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
+  env: Readonly<{ [$$Key$$: string]: unknown }>;
   defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
   defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(

package/lib/cjs/stylex.js

@@ -195,6 +195,7 @@ const when = {
     throw errorForFn('when.anySibling');
   }
 };
+const env = Object.freeze({});
 const types = {
   angle: _v => {
     throw errorForType('angle');
@@ -253,6 +254,7 @@ _legacyMerge.props = props;
 _legacyMerge.types = types;
 _legacyMerge.when = when;
 _legacyMerge.viewTransitionClass = viewTransitionClass;
+_legacyMerge.env = env;
 const legacyMerge = _legacyMerge;
 
 exports.create = create;
@@ -261,6 +263,7 @@ exports.defaultMarker = defaultMarker;
 exports.defineConsts = defineConsts;
 exports.defineMarker = defineMarker;
 exports.defineVars = defineVars;
+exports.env = env;
 exports.firstThatWorks = firstThatWorks;
 exports.keyframes = keyframes;
 exports.legacyMerge = legacyMerge;

package/lib/cjs/stylex.js.flow

@@ -63,24 +63,24 @@ declare export const defineVars: StyleX$DefineVars;
 declare export const defineMarker: StyleX$DefineMarker;
 
 declare export const firstThatWorks: <T: string | number>(
-  ..._styles: $ReadOnlyArray<T>
-) => $ReadOnlyArray<T>;
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
 
 declare export const keyframes: (_keyframes: Keyframes) => string;
 
 declare export const positionTry: (_positionTry: PositionTry) => string;
 
 declare export function props(
-  this: ?mixed,
-  ...styles: $ReadOnlyArray<
+  this: ?unknown,
+  ...styles: ReadonlyArray<
     StyleXArray<
-      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
     >,
   >
-): $ReadOnly<{
+): Readonly<{
   className?: string,
   'data-style-src'?: string,
-  style?: $ReadOnly<{ [string]: string | number }>,
+  style?: Readonly<{ [string]: string | number }>,
 }>;
 
 declare export const viewTransitionClass: (
@@ -88,13 +88,15 @@ declare export const viewTransitionClass: (
 ) => string;
 
 declare export const defaultMarker: () => MapNamespace<
-  $ReadOnly<{
+  Readonly<{
     marker: 'default-marker',
   }>,
 >;
 
 declare export const when: StyleX$When;
 
+declare export const env: $ReadOnly<{ [string]: mixed }>;
+
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -130,38 +132,39 @@ declare export const types: {
  */
 
 type IStyleX = {
-  (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
+  (...styles: ReadonlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
   create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
   defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
+  env: $ReadOnly<{ [string]: mixed }>,
   defaultMarker: () => MapNamespace<
-    $ReadOnly<{
+    Readonly<{
       marker: 'default-marker',
     }>,
   >,
   defineMarker: StyleX$DefineMarker,
   firstThatWorks: <T: string | number>(
-    ...v: $ReadOnlyArray<T>
-  ) => $ReadOnlyArray<T>,
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
   positionTry: (positionTry: PositionTry) => string,
   props: (
-    this: ?mixed,
-    ...styles: $ReadOnlyArray<
+    this: ?unknown,
+    ...styles: ReadonlyArray<
       StyleXArray<
-        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+        ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
       >,
     >
-  ) => $ReadOnly<{
+  ) => Readonly<{
     className?: string,
     'data-style-src'?: string,
-    style?: $ReadOnly<{ [string]: string | number }>,
+    style?: Readonly<{ [string]: string | number }>,
   }>,
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,
-  __customProperties?: { [string]: mixed },
+  __customProperties?: { [string]: unknown },
   ...
 };
 

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

@@ -953,14 +953,14 @@ type top = number | string;
 
 type OptionalArray<T> = Array<T> | T;
 
-export type SupportedVendorSpecificCSSProperties = $ReadOnly<{
+export type SupportedVendorSpecificCSSProperties = Readonly<{
   MozOsxFontSmoothing?: null | 'grayscale',
   WebkitAppearance?: null | appearance,
   WebkitFontSmoothing?: null | 'antialiased',
   WebkitTapHighlightColor?: null | color,
 }>;
 
-export type CSSProperties = $ReadOnly<{
+export type CSSProperties = Readonly<{
   // NOTE: adding a non-CSS property here for support themes in Stylex.
   theme?: all | string,
 

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

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

@@ -306,18 +306,23 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
 
+declare const StyleXMarkerTag: unique symbol;
+
 export type StyleX$DefineMarker = () => MapNamespace<{
-  readonly marker: unique symbol;
+  readonly marker: typeof StyleXMarkerTag;
 }>;
 
 export type StyleX$When = {
-  ancestor: <const Pseudo extends string, MarkerSymbol extends symbol = symbol>(
+  ancestor: <
+    const Pseudo extends `:${string}` | `[${string}]`,
+    MarkerSymbol extends symbol = symbol,
+  >(
     _pseudo?: Pseudo,
     _customMarker?: MapNamespace<{ readonly marker: MarkerSymbol }>,
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-ancestor(${Pseudo}, ${MarkerSymbol})`;
   descendant: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -325,7 +330,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-descendant(${Pseudo}, ${MarkerSymbol})`;
   siblingBefore: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -333,7 +338,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-sibling-before(${Pseudo}, ${MarkerSymbol})`;
   siblingAfter: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -341,7 +346,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-sibling-after(${Pseudo}, ${MarkerSymbol})`;
   anySibling: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,

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

@@ -14,14 +14,14 @@ import type { CSSType } from './VarTypes';
 export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
-export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
-export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
-export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
+export type StyleXClassNameForValue<+V> = StyleXClassNameFor<unknown, V>;
+export type StyleXClassNameForKey<+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<+T> = T | ReadonlyArray<StyleXArray<T>>;
 
-type CSSPropertiesWithExtras = $ReadOnly<{
+type CSSPropertiesWithExtras = Readonly<{
   ...CSSProperties,
   '::before'?: CSSProperties,
   '::after'?: CSSProperties,
@@ -45,21 +45,21 @@ type CSSPropertiesWithExtras = $ReadOnly<{
   '::-webkit-search-results-decoration'?: CSSProperties,
 }>;
 
-export type NestedCSSPropTypes = $ReadOnly<{
+export type NestedCSSPropTypes = Readonly<{
   [Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
 }>;
 
 export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
 export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
-  false | ?$ReadOnly<{ ...T, $$css: true }>,
+  false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
-export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: mixed }> =
-  XStyle<$ReadOnly<Omit<NestedCSSPropTypes, $Keys<T>>>>;
+export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: unknown }> =
+  XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
-export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
+export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
 
-export type PositionTry = $ReadOnly<{
+export type PositionTry = Readonly<{
   // Anchor Positioning Properties
   positionAnchor?: CSSProperties['positionAnchor'],
   positionArea?: CSSProperties['positionArea'],
@@ -106,14 +106,14 @@ export type PositionTry = $ReadOnly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
-export type ViewTransitionClass = $ReadOnly<{
+export type ViewTransitionClass = Readonly<{
   group?: CSSProperties,
   imagePair?: CSSProperties,
   old?: CSSProperties,
   new?: CSSProperties,
 }>;
 
-export type LegacyThemeStyles = $ReadOnly<{
+export type LegacyThemeStyles = Readonly<{
   [constantName: string]: string,
   ...
 }>;
@@ -125,85 +125,88 @@ type ComplexStyleValueType<+T> =
       : U
     : T extends string | number | null
       ? T
-      : T extends $ReadOnlyArray<infer U>
+      : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
         : T extends { +default: infer A, +[string]: infer B }
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
-          : $ReadOnly<T>;
+          : Readonly<T>;
 
-type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+type _MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+export type MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
   ..._MapNamespace<CSS>,
   $$css: true,
 }>;
-export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
+export type MapNamespaces<+S: { +[string]: unknown }> = Readonly<{
   [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
-    ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
     : MapNamespace<S[Key]>,
 }>;
 export type StyleX$Create = <const S: { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
-export type CompiledStyles = $ReadOnly<{
+export type CompiledStyles = Readonly<{
   $$css: true,
   [key: string]: StyleXClassName,
 }>;
-export type InlineStyles = $ReadOnly<{
+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]>>
+type _GenStylePropType<+CSS: { +[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]: mixed }> = $ReadOnly<{
+type GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
   ..._GenStylePropType<CSS>,
   $$css: true,
 }>;
 
 // Replace `XStyle` with this.
-export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
-  StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
+export type StaticStyles<
+  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+> = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
-  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+export type StaticStylesWithout<+CSS: { +[string]: unknown }> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>,
 >;
 
-export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
-  StyleXArray<
-    | ?false
-    | GenStylePropType<$ReadOnly<CSS>>
-    | $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
-  >;
+export type StyleXStyles<
+  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | ?false
+  | GenStylePropType<Readonly<CSS>>
+  | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
+>;
 
-export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
-  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+export type StyleXStylesWithout<+CSS: { +[string]: unknown }> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>,
 >;
 
-export type VarGroup<+Tokens: { +[string]: mixed }, +_ID: string = string> = {
+export type VarGroup<+Tokens: { +[string]: unknown }, +_ID: string = string> = {
   +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
-  [Key in keyof T]: UnwrapVar<T[Key]>,
-}>;
+export type TokensFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+  Readonly<{
+    [Key in keyof T]: UnwrapVar<T[Key]>,
+  }>;
 
-type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
-  T extends VarGroup<{ +[string]: mixed }, infer ID> ? ID : empty;
+type IDFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+  T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
 
 type NestedVarObject<+T> =
   | T
-  | $ReadOnly<{
+  | Readonly<{
       default: NestedVarObject<T>,
       [string]: NestedVarObject<T>,
     }>;
 
-type TTokens = $ReadOnly<{
+type TTokens = Readonly<{
   [string]:
     | NestedVarObject<null | string | number>
     | StyleXVar<null | string | number>
@@ -229,21 +232,21 @@ export type StyleX$DefineConsts = <
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
-// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
+// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T: VarGroup<{ +[string]: mixed }, string>,
+  +T: VarGroup<{ +[string]: unknown }, string>,
   +_Tag: string = string,
->: $ReadOnly<{
+>: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config: { +[string]: mixed }> = {
+export type OverridesForTokenType<+Config: { +[string]: unknown }> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: VarGroup<{ +[string]: mixed }>,
+  BaseTokens: VarGroup<{ +[string]: unknown }>,
   ID: string = string,
 >(
   baseTokens: BaseTokens,
@@ -256,23 +259,23 @@ export type StyleX$DefineMarker = () => MapNamespace<{
 
 export type StyleX$When = {
   ancestor: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-ancestor',
   descendant: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-descendant',
   siblingBefore: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-sibling-before',
   siblingAfter: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-sibling-after',
   anySibling: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };

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

@@ -9,7 +9,7 @@
 
 export type ValueWithDefault<+T> =
   | T
-  | $ReadOnly<{
+  | Readonly<{
       default: ValueWithDefault<T>,
       [string]: ValueWithDefault<T>,
     }>;

package/lib/es/inject.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-type InjectArgs = $ReadOnly<{
+type InjectArgs = Readonly<{
   ltr: string,
   rtl?: ?string,
   priority: number,

package/lib/es/stylesheet/createOrderedCSSStyleSheet.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type OrderedCSSStyleSheet = $ReadOnly<{
+export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
   update: (oldCssText: string, newCssText: string, groupValue: number) => void,

package/lib/es/stylesheet/createSheet.js.flow

@@ -9,7 +9,7 @@
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
 
-type Sheet = $ReadOnly<{
+type Sheet = Readonly<{
   ...OrderedCSSStyleSheet,
 }>;
 

package/lib/es/stylex.d.ts

@@ -92,6 +92,8 @@ export declare const defaultMarker: () => MapNamespace<
 export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
 export declare type when = typeof when;
+export declare const env: Readonly<{ [$$Key$$: string]: unknown }>;
+export declare type env = typeof env;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -144,6 +146,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme;
   defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
+  env: Readonly<{ [$$Key$$: string]: unknown }>;
   defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
   defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(

package/lib/es/stylex.js.flow

@@ -63,24 +63,24 @@ declare export const defineVars: StyleX$DefineVars;
 declare export const defineMarker: StyleX$DefineMarker;
 
 declare export const firstThatWorks: <T: string | number>(
-  ..._styles: $ReadOnlyArray<T>
-) => $ReadOnlyArray<T>;
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
 
 declare export const keyframes: (_keyframes: Keyframes) => string;
 
 declare export const positionTry: (_positionTry: PositionTry) => string;
 
 declare export function props(
-  this: ?mixed,
-  ...styles: $ReadOnlyArray<
+  this: ?unknown,
+  ...styles: ReadonlyArray<
     StyleXArray<
-      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
     >,
   >
-): $ReadOnly<{
+): Readonly<{
   className?: string,
   'data-style-src'?: string,
-  style?: $ReadOnly<{ [string]: string | number }>,
+  style?: Readonly<{ [string]: string | number }>,
 }>;
 
 declare export const viewTransitionClass: (
@@ -88,13 +88,15 @@ declare export const viewTransitionClass: (
 ) => string;
 
 declare export const defaultMarker: () => MapNamespace<
-  $ReadOnly<{
+  Readonly<{
     marker: 'default-marker',
   }>,
 >;
 
 declare export const when: StyleX$When;
 
+declare export const env: $ReadOnly<{ [string]: mixed }>;
+
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -130,38 +132,39 @@ declare export const types: {
  */
 
 type IStyleX = {
-  (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
+  (...styles: ReadonlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
   create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
   defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
+  env: $ReadOnly<{ [string]: mixed }>,
   defaultMarker: () => MapNamespace<
-    $ReadOnly<{
+    Readonly<{
       marker: 'default-marker',
     }>,
   >,
   defineMarker: StyleX$DefineMarker,
   firstThatWorks: <T: string | number>(
-    ...v: $ReadOnlyArray<T>
-  ) => $ReadOnlyArray<T>,
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
   positionTry: (positionTry: PositionTry) => string,
   props: (
-    this: ?mixed,
-    ...styles: $ReadOnlyArray<
+    this: ?unknown,
+    ...styles: ReadonlyArray<
       StyleXArray<
-        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+        ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
       >,
     >
-  ) => $ReadOnly<{
+  ) => Readonly<{
     className?: string,
     'data-style-src'?: string,
-    style?: $ReadOnly<{ [string]: string | number }>,
+    style?: Readonly<{ [string]: string | number }>,
   }>,
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,
-  __customProperties?: { [string]: mixed },
+  __customProperties?: { [string]: unknown },
   ...
 };
 

package/lib/es/stylex.mjs

@@ -193,6 +193,7 @@ const when = {
     throw errorForFn('when.anySibling');
   }
 };
+const env = Object.freeze({});
 const types = {
   angle: _v => {
     throw errorForType('angle');
@@ -251,6 +252,7 @@ _legacyMerge.props = props;
 _legacyMerge.types = types;
 _legacyMerge.when = when;
 _legacyMerge.viewTransitionClass = viewTransitionClass;
+_legacyMerge.env = env;
 const legacyMerge = _legacyMerge;
 
-export { create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };
+export { create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };

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

@@ -953,14 +953,14 @@ type top = number | string;
 
 type OptionalArray<T> = Array<T> | T;
 
-export type SupportedVendorSpecificCSSProperties = $ReadOnly<{
+export type SupportedVendorSpecificCSSProperties = Readonly<{
   MozOsxFontSmoothing?: null | 'grayscale',
   WebkitAppearance?: null | appearance,
   WebkitFontSmoothing?: null | 'antialiased',
   WebkitTapHighlightColor?: null | color,
 }>;
 
-export type CSSProperties = $ReadOnly<{
+export type CSSProperties = Readonly<{
   // NOTE: adding a non-CSS property here for support themes in Stylex.
   theme?: all | string,
 

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

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

@@ -306,18 +306,23 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
 
+declare const StyleXMarkerTag: unique symbol;
+
 export type StyleX$DefineMarker = () => MapNamespace<{
-  readonly marker: unique symbol;
+  readonly marker: typeof StyleXMarkerTag;
 }>;
 
 export type StyleX$When = {
-  ancestor: <const Pseudo extends string, MarkerSymbol extends symbol = symbol>(
+  ancestor: <
+    const Pseudo extends `:${string}` | `[${string}]`,
+    MarkerSymbol extends symbol = symbol,
+  >(
     _pseudo?: Pseudo,
     _customMarker?: MapNamespace<{ readonly marker: MarkerSymbol }>,
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-ancestor(${Pseudo}, ${MarkerSymbol})`;
   descendant: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -325,7 +330,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-descendant(${Pseudo}, ${MarkerSymbol})`;
   siblingBefore: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -333,7 +338,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-sibling-before(${Pseudo}, ${MarkerSymbol})`;
   siblingAfter: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,
@@ -341,7 +346,7 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-sibling-after(${Pseudo}, ${MarkerSymbol})`;
   anySibling: <
-    const Pseudo extends string,
+    const Pseudo extends `:${string}` | `[${string}]`,
     MarkerSymbol extends symbol = symbol,
   >(
     _pseudo?: Pseudo,

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

@@ -14,14 +14,14 @@ import type { CSSType } from './VarTypes';
 export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
-export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
-export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
-export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
+export type StyleXClassNameForValue<+V> = StyleXClassNameFor<unknown, V>;
+export type StyleXClassNameForKey<+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<+T> = T | ReadonlyArray<StyleXArray<T>>;
 
-type CSSPropertiesWithExtras = $ReadOnly<{
+type CSSPropertiesWithExtras = Readonly<{
   ...CSSProperties,
   '::before'?: CSSProperties,
   '::after'?: CSSProperties,
@@ -45,21 +45,21 @@ type CSSPropertiesWithExtras = $ReadOnly<{
   '::-webkit-search-results-decoration'?: CSSProperties,
 }>;
 
-export type NestedCSSPropTypes = $ReadOnly<{
+export type NestedCSSPropTypes = Readonly<{
   [Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
 }>;
 
 export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
 export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
-  false | ?$ReadOnly<{ ...T, $$css: true }>,
+  false | ?Readonly<{ ...T, $$css: true }>,
 >;
 
-export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: mixed }> =
-  XStyle<$ReadOnly<Omit<NestedCSSPropTypes, $Keys<T>>>>;
+export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: unknown }> =
+  XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
 
-export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
+export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
 
-export type PositionTry = $ReadOnly<{
+export type PositionTry = Readonly<{
   // Anchor Positioning Properties
   positionAnchor?: CSSProperties['positionAnchor'],
   positionArea?: CSSProperties['positionArea'],
@@ -106,14 +106,14 @@ export type PositionTry = $ReadOnly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
-export type ViewTransitionClass = $ReadOnly<{
+export type ViewTransitionClass = Readonly<{
   group?: CSSProperties,
   imagePair?: CSSProperties,
   old?: CSSProperties,
   new?: CSSProperties,
 }>;
 
-export type LegacyThemeStyles = $ReadOnly<{
+export type LegacyThemeStyles = Readonly<{
   [constantName: string]: string,
   ...
 }>;
@@ -125,85 +125,88 @@ type ComplexStyleValueType<+T> =
       : U
     : T extends string | number | null
       ? T
-      : T extends $ReadOnlyArray<infer U>
+      : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
         : T extends { +default: infer A, +[string]: infer B }
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
-          : $ReadOnly<T>;
+          : Readonly<T>;
 
-type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+type _MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
 }>;
-export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+export type MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
   ..._MapNamespace<CSS>,
   $$css: true,
 }>;
-export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
+export type MapNamespaces<+S: { +[string]: unknown }> = Readonly<{
   [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
-    ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
     : MapNamespace<S[Key]>,
 }>;
 export type StyleX$Create = <const S: { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
-export type CompiledStyles = $ReadOnly<{
+export type CompiledStyles = Readonly<{
   $$css: true,
   [key: string]: StyleXClassName,
 }>;
-export type InlineStyles = $ReadOnly<{
+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]>>
+type _GenStylePropType<+CSS: { +[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]: mixed }> = $ReadOnly<{
+type GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
   ..._GenStylePropType<CSS>,
   $$css: true,
 }>;
 
 // Replace `XStyle` with this.
-export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
-  StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
+export type StaticStyles<
+  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+> = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
 
-export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
-  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+export type StaticStylesWithout<+CSS: { +[string]: unknown }> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>,
 >;
 
-export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
-  StyleXArray<
-    | ?false
-    | GenStylePropType<$ReadOnly<CSS>>
-    | $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
-  >;
+export type StyleXStyles<
+  +CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | ?false
+  | GenStylePropType<Readonly<CSS>>
+  | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
+>;
 
-export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
-  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+export type StyleXStylesWithout<+CSS: { +[string]: unknown }> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>,
 >;
 
-export type VarGroup<+Tokens: { +[string]: mixed }, +_ID: string = string> = {
+export type VarGroup<+Tokens: { +[string]: unknown }, +_ID: string = string> = {
   +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
 };
 
-export type TokensFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
-  [Key in keyof T]: UnwrapVar<T[Key]>,
-}>;
+export type TokensFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+  Readonly<{
+    [Key in keyof T]: UnwrapVar<T[Key]>,
+  }>;
 
-type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
-  T extends VarGroup<{ +[string]: mixed }, infer ID> ? ID : empty;
+type IDFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
+  T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
 
 type NestedVarObject<+T> =
   | T
-  | $ReadOnly<{
+  | Readonly<{
       default: NestedVarObject<T>,
       [string]: NestedVarObject<T>,
     }>;
 
-type TTokens = $ReadOnly<{
+type TTokens = Readonly<{
   [string]:
     | NestedVarObject<null | string | number>
     | StyleXVar<null | string | number>
@@ -229,21 +232,21 @@ export type StyleX$DefineConsts = <
   tokens: DefaultTokens,
 ) => DefaultTokens;
 
-// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
+// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
 declare export opaque type Theme<
-  +T: VarGroup<{ +[string]: mixed }, string>,
+  +T: VarGroup<{ +[string]: unknown }, string>,
   +_Tag: string = string,
->: $ReadOnly<{
+>: Readonly<{
   $$css: true,
   theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<+Config: { +[string]: mixed }> = {
+export type OverridesForTokenType<+Config: { +[string]: unknown }> = {
   [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: VarGroup<{ +[string]: mixed }>,
+  BaseTokens: VarGroup<{ +[string]: unknown }>,
   ID: string = string,
 >(
   baseTokens: BaseTokens,
@@ -256,23 +259,23 @@ export type StyleX$DefineMarker = () => MapNamespace<{
 
 export type StyleX$When = {
   ancestor: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-ancestor',
   descendant: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-descendant',
   siblingBefore: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-sibling-before',
   siblingAfter: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-sibling-after',
   anySibling: (
-    _pseudo?: StringPrefix<':'>,
+    _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };

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

@@ -9,7 +9,7 @@
 
 export type ValueWithDefault<+T> =
   | T
-  | $ReadOnly<{
+  | Readonly<{
       default: ValueWithDefault<T>,
       [string]: ValueWithDefault<T>,
     }>;

package/package.json

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