@stylexjs/stylex 0.16.2 → 0.17.0

package/lib/cjs/stylesheet/createOrderedCSSStyleSheet.d.ts

@@ -7,10 +7,10 @@
  *
  */
 
-export type OrderedCSSStyleSheet = {
+export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string;
   insert: (cssText: string, groupValue: number) => void;
-};
+}>;
 /**
  * Order-based insertion of CSS.
  *

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

@@ -7,10 +7,10 @@
  * @flow strict
  */
 
-export type OrderedCSSStyleSheet = {|
+export type OrderedCSSStyleSheet = $ReadOnly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
-|};
+}>;
 
 /**
  * Order-based insertion of CSS.

package/lib/cjs/stylesheet/createSheet.d.ts

@@ -8,5 +8,5 @@
  */
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
-type Sheet = Omit<OrderedCSSStyleSheet, keyof ({})> & {};
+type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof ({})> & {}>;
 export declare function createSheet(root?: HTMLElement): Sheet;

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

@@ -9,8 +9,8 @@
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
 
-type Sheet = {
+type Sheet = $ReadOnly<{
   ...OrderedCSSStyleSheet,
-};
+}>;
 
 declare export function createSheet(root?: HTMLElement): Sheet;

package/lib/cjs/stylex.d.ts

@@ -27,6 +27,9 @@ import type {
   VarGroup,
   PositionTry,
   ViewTransitionClass,
+  StyleX$When,
+  MapNamespace,
+  StyleX$DefineMarker,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -51,6 +54,7 @@ export declare const create: StyleX$Create;
 export declare const createTheme: StyleX$CreateTheme;
 export declare const defineConsts: StyleX$DefineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare const defineMarker: StyleX$DefineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
@@ -73,14 +77,10 @@ export declare function props(
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
-export declare const defaultMarker: () => StaticStyles;
-export declare const when: {
-  ancestor: (_pseudo?: string) => string;
-  descendant: (_pseudo?: string) => string;
-  siblingBefore: (_pseudo?: string) => string;
-  siblingAfter: (_pseudo?: string) => string;
-  anySibling: (_pseudo?: string) => string;
-};
+export declare const defaultMarker: () => MapNamespace<
+  Readonly<{ marker: 'default-marker' }>
+>;
+export declare const when: StyleX$When;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -130,8 +130,10 @@ type IStyleX = {
   ): string;
   create: StyleX$Create;
   createTheme: StyleX$CreateTheme;
+  defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
-  defaultMarker: () => StaticStyles;
+  defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
+  defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>;

package/lib/cjs/stylex.js

@@ -146,6 +146,9 @@ const defineConsts = function stylexDefineConsts(_styles) {
 const defineVars = function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 };
+const defineMarker = () => {
+  throw errorForFn('defineMarker');
+};
 const firstThatWorks = (..._styles) => {
   throw errorForFn('firstThatWorks');
 };
@@ -176,19 +179,19 @@ const defaultMarker = () => {
   throw errorForFn('defaultMarker');
 };
 const when = {
-  ancestor: _pseudo => {
+  ancestor: _p => {
     throw errorForFn('when.ancestor');
   },
-  descendant: _pseudo => {
+  descendant: _p => {
     throw errorForFn('when.descendant');
   },
-  siblingBefore: _pseudo => {
+  siblingBefore: _p => {
     throw errorForFn('when.siblingBefore');
   },
-  siblingAfter: _pseudo => {
+  siblingAfter: _p => {
     throw errorForFn('when.siblingAfter');
   },
-  anySibling: _pseudo => {
+  anySibling: _p => {
     throw errorForFn('when.anySibling');
   }
 };
@@ -239,6 +242,8 @@ function _legacyMerge(...styles) {
 }
 _legacyMerge.create = create;
 _legacyMerge.createTheme = createTheme;
+_legacyMerge.defineConsts = defineConsts;
+_legacyMerge.defineMarker = defineMarker;
 _legacyMerge.defineVars = defineVars;
 _legacyMerge.defaultMarker = defaultMarker;
 _legacyMerge.firstThatWorks = firstThatWorks;
@@ -254,6 +259,7 @@ exports.create = create;
 exports.createTheme = createTheme;
 exports.defaultMarker = defaultMarker;
 exports.defineConsts = defineConsts;
+exports.defineMarker = defineMarker;
 exports.defineVars = defineVars;
 exports.firstThatWorks = firstThatWorks;
 exports.keyframes = keyframes;

package/lib/cjs/stylex.js.flow

@@ -27,6 +27,9 @@ import type {
   VarGroup,
   PositionTry,
   ViewTransitionClass,
+  StyleX$When,
+  MapNamespace,
+  StyleX$DefineMarker,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -57,6 +60,8 @@ declare export const defineConsts: StyleX$DefineConsts;
 
 declare export const defineVars: StyleX$DefineVars;
 
+declare export const defineMarker: StyleX$DefineMarker;
+
 declare export const firstThatWorks: <T: string | number>(
   ..._styles: $ReadOnlyArray<T>
 ) => $ReadOnlyArray<T>;
@@ -82,15 +87,13 @@ declare export const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
 
-declare export const defaultMarker: () => StaticStyles<>;
+declare export const defaultMarker: () => MapNamespace<
+  $ReadOnly<{
+    marker: 'default-marker',
+  }>,
+>;
 
-declare export const when: {
-  ancestor: (_pseudo?: string) => string,
-  descendant: (_pseudo?: string) => string,
-  siblingBefore: (_pseudo?: string) => string,
-  siblingAfter: (_pseudo?: string) => string,
-  anySibling: (_pseudo?: string) => string,
-};
+declare export const when: StyleX$When;
 
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
@@ -130,8 +133,14 @@ type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
   create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
+  defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
-  defaultMarker: () => StaticStyles<>,
+  defaultMarker: () => MapNamespace<
+    $ReadOnly<{
+      marker: 'default-marker',
+    }>,
+  >,
+  defineMarker: StyleX$DefineMarker,
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,

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

@@ -153,7 +153,7 @@ type ComplexStyleValueType<T> =
     ? U extends CSSType<infer V>
       ? V
       : U
-    : T extends string | number | null
+    : T extends string | number | null | symbol
       ? T
       : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
@@ -199,12 +199,13 @@ export type InlineStyles = {
 
 type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
-}>;
+}> &
+  Partial<{
+    [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
+  }>;
+
 type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
-  _GenStylePropType<CSS> &
-    Partial<{
-      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
-    }>
+  _GenStylePropType<CSS>
 >;
 
 // Replace `XStyle` with this.
@@ -301,3 +302,47 @@ export type StyleX$CreateTheme = <
   baseTokens: TVars,
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
+
+export type StyleX$DefineMarker = () => MapNamespace<{
+  readonly marker: unique symbol;
+}>;
+
+export type StyleX$When = {
+  ancestor: <const Pseudo extends 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,
+    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-descendant(${Pseudo}, ${MarkerSymbol})`;
+  siblingBefore: <
+    const Pseudo extends 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-sibling-before(${Pseudo}, ${MarkerSymbol})`;
+  siblingAfter: <
+    const Pseudo extends 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-sibling-after(${Pseudo}, ${MarkerSymbol})`;
+  anySibling: <
+    const Pseudo extends 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-any-sibling(${Pseudo}, ${MarkerSymbol})`;
+};

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

@@ -143,7 +143,7 @@ export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
     ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
     : MapNamespace<S[Key]>,
 }>;
-export type StyleX$Create = <S: { +[string]: { ... } }>(
+export type StyleX$Create = <const S: { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -224,7 +224,7 @@ export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  DefaultTokens: { +[string]: number | string },
+  const DefaultTokens: { +[string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
@@ -249,3 +249,30 @@ export type StyleX$CreateTheme = <
   baseTokens: BaseTokens,
   overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
 ) => Theme<BaseTokens, ID>;
+
+export type StyleX$DefineMarker = () => MapNamespace<{
+  +marker: 'custom-marker',
+}>;
+
+export type StyleX$When = {
+  ancestor: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-ancestor',
+  descendant: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-descendant',
+  siblingBefore: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-sibling-before',
+  siblingAfter: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-sibling-after',
+  anySibling: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-any-sibling',
+};

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

@@ -46,7 +46,7 @@ export declare class Image<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Integer<T extends number> implements ICSSType<T> {
+export declare class Integer<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
@@ -64,7 +64,7 @@ export declare class Percentage<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Num<T extends number> implements ICSSType<T> {
+export declare class Num<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }

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

@@ -49,7 +49,7 @@ declare export class Image<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Integer<+T: number> implements ICSSType<T> {
+declare export class Integer<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
@@ -65,7 +65,7 @@ declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Num<+T: number> implements ICSSType<T> {
+declare export class Num<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }

package/lib/es/stylesheet/createOrderedCSSStyleSheet.d.ts

@@ -7,10 +7,10 @@
  *
  */
 
-export type OrderedCSSStyleSheet = {
+export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string;
   insert: (cssText: string, groupValue: number) => void;
-};
+}>;
 /**
  * Order-based insertion of CSS.
  *

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

@@ -7,10 +7,10 @@
  * @flow strict
  */
 
-export type OrderedCSSStyleSheet = {|
+export type OrderedCSSStyleSheet = $ReadOnly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
-|};
+}>;
 
 /**
  * Order-based insertion of CSS.

package/lib/es/stylesheet/createSheet.d.ts

@@ -8,5 +8,5 @@
  */
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
-type Sheet = Omit<OrderedCSSStyleSheet, keyof ({})> & {};
+type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof ({})> & {}>;
 export declare function createSheet(root?: HTMLElement): Sheet;

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

@@ -9,8 +9,8 @@
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
 
-type Sheet = {
+type Sheet = $ReadOnly<{
   ...OrderedCSSStyleSheet,
-};
+}>;
 
 declare export function createSheet(root?: HTMLElement): Sheet;

package/lib/es/stylex.d.ts

@@ -27,6 +27,9 @@ import type {
   VarGroup,
   PositionTry,
   ViewTransitionClass,
+  StyleX$When,
+  MapNamespace,
+  StyleX$DefineMarker,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -51,6 +54,7 @@ export declare const create: StyleX$Create;
 export declare const createTheme: StyleX$CreateTheme;
 export declare const defineConsts: StyleX$DefineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare const defineMarker: StyleX$DefineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
@@ -73,14 +77,10 @@ export declare function props(
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
-export declare const defaultMarker: () => StaticStyles;
-export declare const when: {
-  ancestor: (_pseudo?: string) => string;
-  descendant: (_pseudo?: string) => string;
-  siblingBefore: (_pseudo?: string) => string;
-  siblingAfter: (_pseudo?: string) => string;
-  anySibling: (_pseudo?: string) => string;
-};
+export declare const defaultMarker: () => MapNamespace<
+  Readonly<{ marker: 'default-marker' }>
+>;
+export declare const when: StyleX$When;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -130,8 +130,10 @@ type IStyleX = {
   ): string;
   create: StyleX$Create;
   createTheme: StyleX$CreateTheme;
+  defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
-  defaultMarker: () => StaticStyles;
+  defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
+  defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>;

package/lib/es/stylex.js.flow

@@ -27,6 +27,9 @@ import type {
   VarGroup,
   PositionTry,
   ViewTransitionClass,
+  StyleX$When,
+  MapNamespace,
+  StyleX$DefineMarker,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -57,6 +60,8 @@ declare export const defineConsts: StyleX$DefineConsts;
 
 declare export const defineVars: StyleX$DefineVars;
 
+declare export const defineMarker: StyleX$DefineMarker;
+
 declare export const firstThatWorks: <T: string | number>(
   ..._styles: $ReadOnlyArray<T>
 ) => $ReadOnlyArray<T>;
@@ -82,15 +87,13 @@ declare export const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
 
-declare export const defaultMarker: () => StaticStyles<>;
+declare export const defaultMarker: () => MapNamespace<
+  $ReadOnly<{
+    marker: 'default-marker',
+  }>,
+>;
 
-declare export const when: {
-  ancestor: (_pseudo?: string) => string,
-  descendant: (_pseudo?: string) => string,
-  siblingBefore: (_pseudo?: string) => string,
-  siblingAfter: (_pseudo?: string) => string,
-  anySibling: (_pseudo?: string) => string,
-};
+declare export const when: StyleX$When;
 
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
@@ -130,8 +133,14 @@ type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
   create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
+  defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
-  defaultMarker: () => StaticStyles<>,
+  defaultMarker: () => MapNamespace<
+    $ReadOnly<{
+      marker: 'default-marker',
+    }>,
+  >,
+  defineMarker: StyleX$DefineMarker,
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,

package/lib/es/stylex.mjs

@@ -144,6 +144,9 @@ const defineConsts = function stylexDefineConsts(_styles) {
 const defineVars = function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 };
+const defineMarker = () => {
+  throw errorForFn('defineMarker');
+};
 const firstThatWorks = (..._styles) => {
   throw errorForFn('firstThatWorks');
 };
@@ -174,19 +177,19 @@ const defaultMarker = () => {
   throw errorForFn('defaultMarker');
 };
 const when = {
-  ancestor: _pseudo => {
+  ancestor: _p => {
     throw errorForFn('when.ancestor');
   },
-  descendant: _pseudo => {
+  descendant: _p => {
     throw errorForFn('when.descendant');
   },
-  siblingBefore: _pseudo => {
+  siblingBefore: _p => {
     throw errorForFn('when.siblingBefore');
   },
-  siblingAfter: _pseudo => {
+  siblingAfter: _p => {
     throw errorForFn('when.siblingAfter');
   },
-  anySibling: _pseudo => {
+  anySibling: _p => {
     throw errorForFn('when.anySibling');
   }
 };
@@ -237,6 +240,8 @@ function _legacyMerge(...styles) {
 }
 _legacyMerge.create = create;
 _legacyMerge.createTheme = createTheme;
+_legacyMerge.defineConsts = defineConsts;
+_legacyMerge.defineMarker = defineMarker;
 _legacyMerge.defineVars = defineVars;
 _legacyMerge.defaultMarker = defaultMarker;
 _legacyMerge.firstThatWorks = firstThatWorks;
@@ -248,4 +253,4 @@ _legacyMerge.when = when;
 _legacyMerge.viewTransitionClass = viewTransitionClass;
 const legacyMerge = _legacyMerge;
 
-export { create, createTheme, defaultMarker, defineConsts, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };
+export { create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };

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

@@ -153,7 +153,7 @@ type ComplexStyleValueType<T> =
     ? U extends CSSType<infer V>
       ? V
       : U
-    : T extends string | number | null
+    : T extends string | number | null | symbol
       ? T
       : T extends ReadonlyArray<infer U>
         ? ComplexStyleValueType<U>
@@ -199,12 +199,13 @@ export type InlineStyles = {
 
 type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
-}>;
+}> &
+  Partial<{
+    [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
+  }>;
+
 type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
-  _GenStylePropType<CSS> &
-    Partial<{
-      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
-    }>
+  _GenStylePropType<CSS>
 >;
 
 // Replace `XStyle` with this.
@@ -301,3 +302,47 @@ export type StyleX$CreateTheme = <
   baseTokens: TVars,
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
+
+export type StyleX$DefineMarker = () => MapNamespace<{
+  readonly marker: unique symbol;
+}>;
+
+export type StyleX$When = {
+  ancestor: <const Pseudo extends 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,
+    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-descendant(${Pseudo}, ${MarkerSymbol})`;
+  siblingBefore: <
+    const Pseudo extends 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-sibling-before(${Pseudo}, ${MarkerSymbol})`;
+  siblingAfter: <
+    const Pseudo extends 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-sibling-after(${Pseudo}, ${MarkerSymbol})`;
+  anySibling: <
+    const Pseudo extends 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-any-sibling(${Pseudo}, ${MarkerSymbol})`;
+};

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

@@ -143,7 +143,7 @@ export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
     ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
     : MapNamespace<S[Key]>,
 }>;
-export type StyleX$Create = <S: { +[string]: { ... } }>(
+export type StyleX$Create = <const S: { +[string]: { ... } }>(
   styles: S,
 ) => MapNamespaces<S>;
 
@@ -224,7 +224,7 @@ export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
 export type StyleX$DefineConsts = <
-  DefaultTokens: { +[string]: number | string },
+  const DefaultTokens: { +[string]: number | string },
 >(
   tokens: DefaultTokens,
 ) => DefaultTokens;
@@ -249,3 +249,30 @@ export type StyleX$CreateTheme = <
   baseTokens: BaseTokens,
   overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
 ) => Theme<BaseTokens, ID>;
+
+export type StyleX$DefineMarker = () => MapNamespace<{
+  +marker: 'custom-marker',
+}>;
+
+export type StyleX$When = {
+  ancestor: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-ancestor',
+  descendant: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-descendant',
+  siblingBefore: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-sibling-before',
+  siblingAfter: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-sibling-after',
+  anySibling: (
+    _pseudo?: StringPrefix<':'>,
+    _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
+  ) => ':where-any-sibling',
+};

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

@@ -46,7 +46,7 @@ export declare class Image<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Integer<T extends number> implements ICSSType<T> {
+export declare class Integer<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
@@ -64,7 +64,7 @@ export declare class Percentage<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Num<T extends number> implements ICSSType<T> {
+export declare class Num<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }

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

@@ -49,7 +49,7 @@ declare export class Image<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Integer<+T: number> implements ICSSType<T> {
+declare export class Integer<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
@@ -65,7 +65,7 @@ declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Num<+T: number> implements ICSSType<T> {
+declare export class Num<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
   "types": "./lib/cjs/stylex.d.ts",
   "exports": {
     ".": {
+      "types": "./lib/es/stylex.d.ts",
       "import": "./lib/es/stylex.mjs",
-      "require": "./lib/cjs/stylex.js",
-      "types": "./lib/es/stylex.d.ts"
+      "require": "./lib/cjs/stylex.js"
     },
     "./lib/stylex-inject": {
+      "types": "./lib/es/inject.d.ts",
       "import": "./lib/es/inject.mjs",
-      "require": "./lib/cjs/inject.js",
-      "types": "./lib/es/inject.d.ts"
+      "require": "./lib/cjs/inject.js"
     },
     "./lib/types/StyleXTypes": {
+      "types": "./lib/es/types/StyleXTypes.d.ts",
       "import": "./lib/es/types/StyleXTypes.mjs",
-      "require": "./lib/cjs/types/StyleXTypes.js",
-      "types": "./lib/es/types/StyleXTypes.d.ts"
+      "require": "./lib/cjs/types/StyleXTypes.js"
     },
     "./package.json": "./package.json"
   },
@@ -61,7 +61,7 @@
     "cross-env": "^7.0.3",
     "rimraf": "^5.0.10",
     "rollup": "^4.24.0",
-    "scripts": "0.16.2"
+    "scripts": "0.17.0"
   },
   "files": [
     "lib/*"