@stylexjs/stylex 0.16.3 → 0.17.1

package/lib/cjs/inject.d.ts

@@ -7,5 +7,10 @@
  *
  */
 
-declare function inject(cssText: string, priority: number): string;
+declare function inject(
+  cssText: string,
+  priority: number,
+  constKey?: string,
+  constVal?: string | number,
+): string;
 export default inject;

package/lib/cjs/inject.js

@@ -9,8 +9,11 @@ function addSpecificityLevel(cssText, index) {
     length: index
   }).map(() => ':not(#\\#)').join('');
   const lastOpenCurly = cssText.includes('::') ? cssText.indexOf('::') : cssText.lastIndexOf('{');
-  const beforeCurly = cssText.slice(0, lastOpenCurly);
+  let beforeCurly = cssText.slice(0, lastOpenCurly);
   const afterCurly = cssText.slice(lastOpenCurly);
+  if (index > 0) {
+    beforeCurly = beforeCurly.trimEnd();
+  }
   return `${beforeCurly}${pseudoSelector}${afterCurly}`;
 }
 
@@ -82,6 +85,74 @@ function createOrderedCSSStyleSheet(sheet) {
     }
     return isInserted;
   }
+  function insert(cssText, groupValue) {
+    const group = Number(groupValue);
+    if (groups[group] == null) {
+      const markerRule = encodeGroupRule(group);
+      groups[group] = {
+        start: null,
+        rules: [markerRule]
+      };
+      if (sheet != null) {
+        sheetInsert(sheet, group, markerRule);
+      }
+    }
+    const key = getSeenRuleKey(cssText);
+    if (key != null && seenRules[key] == null) {
+      seenRules[key] = true;
+      let shouldUpdate = true;
+      if (sheet != null) {
+        const isInserted = sheetInsert(sheet, group, cssText);
+        if (!isInserted) {
+          shouldUpdate = false;
+        }
+      }
+      if (shouldUpdate) {
+        groups[group].rules.push(cssText);
+      }
+    }
+  }
+  function update(oldCssText, newCssText, groupValue) {
+    const group = Number(groupValue);
+    const oldKey = getSeenRuleKey(oldCssText);
+    const newKey = getSeenRuleKey(newCssText);
+    if (oldKey !== newKey || oldKey == null) {
+      insert(newCssText, groupValue);
+      return;
+    }
+    if (seenRules[oldKey]) {
+      if (groups[group] && groups[group].rules) {
+        const rules = groups[group].rules;
+        let foundIndex = -1;
+        for (let i = 0; i < rules.length; i++) {
+          if (getSeenRuleKey(rules[i]) === oldKey) {
+            foundIndex = i;
+            break;
+          }
+        }
+        if (foundIndex !== -1) {
+          rules[foundIndex] = newCssText;
+        }
+      }
+      if (sheet != null) {
+        const cssRules = sheet.cssRules;
+        for (let i = cssRules.length - 1; i >= 0; i--) {
+          const rule = cssRules[i];
+          const ruleCssText = rule.cssText;
+          const ruleKey = getSeenRuleKey(ruleCssText);
+          if (ruleKey === oldKey) {
+            try {
+              sheet.deleteRule(i);
+              sheetInsert(sheet, group, newCssText);
+              break;
+            } catch (e) {}
+          }
+        }
+      }
+    } else {
+      insert(newCssText, groupValue);
+    }
+  }
   const OrderedCSSStyleSheet = {
     getTextContent() {
       return getOrderedGroups(groups).map(group => {
@@ -94,33 +165,8 @@ function createOrderedCSSStyleSheet(sheet) {
         return rules.join('\n');
       }).join('\n');
     },
-    insert(cssText, groupValue) {
-      const group = Number(groupValue);
-      if (groups[group] == null) {
-        const markerRule = encodeGroupRule(group);
-        groups[group] = {
-          start: null,
-          rules: [markerRule]
-        };
-        if (sheet != null) {
-          sheetInsert(sheet, group, markerRule);
-        }
-      }
-      const key = getSeenRuleKey(cssText);
-      if (key != null && seenRules[key] == null) {
-        seenRules[key] = true;
-        let shouldUpdate = true;
-        if (sheet != null) {
-          const isInserted = sheetInsert(sheet, group, cssText);
-          if (!isInserted) {
-            shouldUpdate = false;
-          }
-        }
-        if (shouldUpdate) {
-          groups[group].rules.push(cssText);
-        }
-      }
-    }
+    insert,
+    update
   };
   return OrderedCSSStyleSheet;
 }
@@ -196,14 +242,92 @@ function createSheet(root) {
       sheets.forEach(s => {
         s.insert(cssText, groupValue);
       });
+    },
+    update(oldCssText, newCssText, groupValue) {
+      sheets.forEach(s => {
+        s.update(oldCssText, newCssText, groupValue);
+      });
     }
   };
 }
 
 const sheet = createSheet();
-function inject(cssText, priority) {
-  const text = addSpecificityLevel(cssText, Math.floor(priority / 1000));
+const constants = {};
+const dependencies = {};
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function resolveConstants(cssText) {
+  let resolved = cssText;
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  varPattern.lastIndex = 0;
+  const replacements = [];
+  let match = varPattern.exec(cssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      const constVal = constants[constKey];
+      const constValStr = String(constVal);
+      replacements.push([`var(--${constKey})`, constValStr]);
+    }
+    match = varPattern.exec(cssText);
+  }
+  for (const [search, replace] of replacements) {
+    const regex = new RegExp(escapeRegex(search), 'g');
+    resolved = resolved.replace(regex, replace);
+  }
+  return resolved;
+}
+function trackDependencies(originalCssText, priority, resolvedCss) {
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  let match = varPattern.exec(originalCssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      if (!dependencies[constKey]) {
+        dependencies[constKey] = new Map();
+      }
+      dependencies[constKey].set(originalCssText, {
+        priority,
+        resolvedCss
+      });
+    }
+    match = varPattern.exec(originalCssText);
+  }
+}
+function updateDependentRules(constKey) {
+  const deps = dependencies[constKey];
+  if (!deps || deps.size === 0) {
+    return;
+  }
+  deps.forEach(({
+    priority,
+    resolvedCss: oldResolvedCss
+  }, cssText) => {
+    const newResolvedCss = resolveConstants(cssText);
+    const oldText = addSpecificityLevel(oldResolvedCss, Math.floor(priority / 1000));
+    const newText = addSpecificityLevel(newResolvedCss, Math.floor(priority / 1000));
+    deps.set(cssText, {
+      priority,
+      resolvedCss: newResolvedCss
+    });
+    sheet.update(oldText, newText, priority);
+  });
+}
+function inject(cssText, priority, constKey, constVal) {
+  if (constKey !== undefined && constVal !== undefined) {
+    const hadPreviousValue = constants[constKey] !== undefined;
+    const valueChanged = hadPreviousValue && constants[constKey] !== constVal;
+    constants[constKey] = constVal;
+    if (valueChanged) {
+      updateDependentRules(constKey);
+    }
+    return '';
+  }
+  const resolved = resolveConstants(cssText);
+  const text = addSpecificityLevel(resolved, Math.floor(priority / 1000));
   sheet.insert(text, priority);
+  trackDependencies(cssText, priority, resolved);
   return text;
 }
 

package/lib/cjs/inject.js.flow

@@ -10,4 +10,6 @@
 declare export default function inject(
   cssText: string,
   priority: number,
+  constKey?: string,
+  constVal?: string | number,
 ): string;

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

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

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

@@ -10,6 +10,7 @@
 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.d.ts

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

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

@@ -8,6 +8,7 @@
  */
 
 export declare const canUseDOM: boolean;
+export declare type canUseDOM = typeof canUseDOM;
 /**
  * Adds :not(#\#) to selectors to increase their specificity.
  * This is used to polyfill @layer

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';
@@ -48,14 +51,23 @@ export type {
   PositionTry,
 };
 export declare const create: StyleX$Create;
+export declare type create = typeof create;
 export declare const createTheme: StyleX$CreateTheme;
+export declare type createTheme = typeof createTheme;
 export declare const defineConsts: StyleX$DefineConsts;
+export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare type defineVars = typeof defineVars;
+export declare const defineMarker: StyleX$DefineMarker;
+export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
+export declare type firstThatWorks = typeof firstThatWorks;
 export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare type keyframes = typeof keyframes;
 export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare type positionTry = typeof positionTry;
 export declare function props(
   this: null | undefined | unknown,
   ...styles: ReadonlyArray<
@@ -73,14 +85,13 @@ 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 type viewTransitionClass = typeof viewTransitionClass;
+export declare const defaultMarker: () => MapNamespace<
+  Readonly<{ marker: 'default-marker' }>
+>;
+export declare type defaultMarker = typeof defaultMarker;
+export declare const when: StyleX$When;
+export declare type when = typeof when;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -114,6 +125,7 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>;
 };
+export declare type types = typeof types;
 /**
  * DO NOT USE. Legacy export for Meta
  */
@@ -132,7 +144,8 @@ type IStyleX = {
   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>;
@@ -158,3 +171,4 @@ type IStyleX = {
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;
+export declare type legacyMerge = typeof legacyMerge;

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');
   }
 };
@@ -240,6 +243,7 @@ function _legacyMerge(...styles) {
 _legacyMerge.create = create;
 _legacyMerge.createTheme = createTheme;
 _legacyMerge.defineConsts = defineConsts;
+_legacyMerge.defineMarker = defineMarker;
 _legacyMerge.defineVars = defineVars;
 _legacyMerge.defaultMarker = defaultMarker;
 _legacyMerge.firstThatWorks = firstThatWorks;
@@ -255,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>(
@@ -132,7 +135,12 @@ type IStyleX = {
   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/inject.d.ts

@@ -7,5 +7,10 @@
  *
  */
 
-declare function inject(cssText: string, priority: number): string;
+declare function inject(
+  cssText: string,
+  priority: number,
+  constKey?: string,
+  constVal?: string | number,
+): string;
 export default inject;

package/lib/es/inject.js.flow

@@ -10,4 +10,6 @@
 declare export default function inject(
   cssText: string,
   priority: number,
+  constKey?: string,
+  constVal?: string | number,
 ): string;

package/lib/es/inject.mjs

@@ -7,8 +7,11 @@ function addSpecificityLevel(cssText, index) {
     length: index
   }).map(() => ':not(#\\#)').join('');
   const lastOpenCurly = cssText.includes('::') ? cssText.indexOf('::') : cssText.lastIndexOf('{');
-  const beforeCurly = cssText.slice(0, lastOpenCurly);
+  let beforeCurly = cssText.slice(0, lastOpenCurly);
   const afterCurly = cssText.slice(lastOpenCurly);
+  if (index > 0) {
+    beforeCurly = beforeCurly.trimEnd();
+  }
   return `${beforeCurly}${pseudoSelector}${afterCurly}`;
 }
 
@@ -80,6 +83,74 @@ function createOrderedCSSStyleSheet(sheet) {
     }
     return isInserted;
   }
+  function insert(cssText, groupValue) {
+    const group = Number(groupValue);
+    if (groups[group] == null) {
+      const markerRule = encodeGroupRule(group);
+      groups[group] = {
+        start: null,
+        rules: [markerRule]
+      };
+      if (sheet != null) {
+        sheetInsert(sheet, group, markerRule);
+      }
+    }
+    const key = getSeenRuleKey(cssText);
+    if (key != null && seenRules[key] == null) {
+      seenRules[key] = true;
+      let shouldUpdate = true;
+      if (sheet != null) {
+        const isInserted = sheetInsert(sheet, group, cssText);
+        if (!isInserted) {
+          shouldUpdate = false;
+        }
+      }
+      if (shouldUpdate) {
+        groups[group].rules.push(cssText);
+      }
+    }
+  }
+  function update(oldCssText, newCssText, groupValue) {
+    const group = Number(groupValue);
+    const oldKey = getSeenRuleKey(oldCssText);
+    const newKey = getSeenRuleKey(newCssText);
+    if (oldKey !== newKey || oldKey == null) {
+      insert(newCssText, groupValue);
+      return;
+    }
+    if (seenRules[oldKey]) {
+      if (groups[group] && groups[group].rules) {
+        const rules = groups[group].rules;
+        let foundIndex = -1;
+        for (let i = 0; i < rules.length; i++) {
+          if (getSeenRuleKey(rules[i]) === oldKey) {
+            foundIndex = i;
+            break;
+          }
+        }
+        if (foundIndex !== -1) {
+          rules[foundIndex] = newCssText;
+        }
+      }
+      if (sheet != null) {
+        const cssRules = sheet.cssRules;
+        for (let i = cssRules.length - 1; i >= 0; i--) {
+          const rule = cssRules[i];
+          const ruleCssText = rule.cssText;
+          const ruleKey = getSeenRuleKey(ruleCssText);
+          if (ruleKey === oldKey) {
+            try {
+              sheet.deleteRule(i);
+              sheetInsert(sheet, group, newCssText);
+              break;
+            } catch (e) {}
+          }
+        }
+      }
+    } else {
+      insert(newCssText, groupValue);
+    }
+  }
   const OrderedCSSStyleSheet = {
     getTextContent() {
       return getOrderedGroups(groups).map(group => {
@@ -92,33 +163,8 @@ function createOrderedCSSStyleSheet(sheet) {
         return rules.join('\n');
       }).join('\n');
     },
-    insert(cssText, groupValue) {
-      const group = Number(groupValue);
-      if (groups[group] == null) {
-        const markerRule = encodeGroupRule(group);
-        groups[group] = {
-          start: null,
-          rules: [markerRule]
-        };
-        if (sheet != null) {
-          sheetInsert(sheet, group, markerRule);
-        }
-      }
-      const key = getSeenRuleKey(cssText);
-      if (key != null && seenRules[key] == null) {
-        seenRules[key] = true;
-        let shouldUpdate = true;
-        if (sheet != null) {
-          const isInserted = sheetInsert(sheet, group, cssText);
-          if (!isInserted) {
-            shouldUpdate = false;
-          }
-        }
-        if (shouldUpdate) {
-          groups[group].rules.push(cssText);
-        }
-      }
-    }
+    insert,
+    update
   };
   return OrderedCSSStyleSheet;
 }
@@ -194,14 +240,92 @@ function createSheet(root) {
       sheets.forEach(s => {
         s.insert(cssText, groupValue);
       });
+    },
+    update(oldCssText, newCssText, groupValue) {
+      sheets.forEach(s => {
+        s.update(oldCssText, newCssText, groupValue);
+      });
     }
   };
 }
 
 const sheet = createSheet();
-function inject(cssText, priority) {
-  const text = addSpecificityLevel(cssText, Math.floor(priority / 1000));
+const constants = {};
+const dependencies = {};
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function resolveConstants(cssText) {
+  let resolved = cssText;
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  varPattern.lastIndex = 0;
+  const replacements = [];
+  let match = varPattern.exec(cssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      const constVal = constants[constKey];
+      const constValStr = String(constVal);
+      replacements.push([`var(--${constKey})`, constValStr]);
+    }
+    match = varPattern.exec(cssText);
+  }
+  for (const [search, replace] of replacements) {
+    const regex = new RegExp(escapeRegex(search), 'g');
+    resolved = resolved.replace(regex, replace);
+  }
+  return resolved;
+}
+function trackDependencies(originalCssText, priority, resolvedCss) {
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  let match = varPattern.exec(originalCssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      if (!dependencies[constKey]) {
+        dependencies[constKey] = new Map();
+      }
+      dependencies[constKey].set(originalCssText, {
+        priority,
+        resolvedCss
+      });
+    }
+    match = varPattern.exec(originalCssText);
+  }
+}
+function updateDependentRules(constKey) {
+  const deps = dependencies[constKey];
+  if (!deps || deps.size === 0) {
+    return;
+  }
+  deps.forEach(({
+    priority,
+    resolvedCss: oldResolvedCss
+  }, cssText) => {
+    const newResolvedCss = resolveConstants(cssText);
+    const oldText = addSpecificityLevel(oldResolvedCss, Math.floor(priority / 1000));
+    const newText = addSpecificityLevel(newResolvedCss, Math.floor(priority / 1000));
+    deps.set(cssText, {
+      priority,
+      resolvedCss: newResolvedCss
+    });
+    sheet.update(oldText, newText, priority);
+  });
+}
+function inject(cssText, priority, constKey, constVal) {
+  if (constKey !== undefined && constVal !== undefined) {
+    const hadPreviousValue = constants[constKey] !== undefined;
+    const valueChanged = hadPreviousValue && constants[constKey] !== constVal;
+    constants[constKey] = constVal;
+    if (valueChanged) {
+      updateDependentRules(constKey);
+    }
+    return '';
+  }
+  const resolved = resolveConstants(cssText);
+  const text = addSpecificityLevel(resolved, Math.floor(priority / 1000));
   sheet.insert(text, priority);
+  trackDependencies(cssText, priority, resolved);
   return text;
 }
 

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

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

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

@@ -10,6 +10,7 @@
 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.d.ts

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

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

@@ -8,6 +8,7 @@
  */
 
 export declare const canUseDOM: boolean;
+export declare type canUseDOM = typeof canUseDOM;
 /**
  * Adds :not(#\#) to selectors to increase their specificity.
  * This is used to polyfill @layer

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';
@@ -48,14 +51,23 @@ export type {
   PositionTry,
 };
 export declare const create: StyleX$Create;
+export declare type create = typeof create;
 export declare const createTheme: StyleX$CreateTheme;
+export declare type createTheme = typeof createTheme;
 export declare const defineConsts: StyleX$DefineConsts;
+export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare type defineVars = typeof defineVars;
+export declare const defineMarker: StyleX$DefineMarker;
+export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
+export declare type firstThatWorks = typeof firstThatWorks;
 export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare type keyframes = typeof keyframes;
 export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare type positionTry = typeof positionTry;
 export declare function props(
   this: null | undefined | unknown,
   ...styles: ReadonlyArray<
@@ -73,14 +85,13 @@ 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 type viewTransitionClass = typeof viewTransitionClass;
+export declare const defaultMarker: () => MapNamespace<
+  Readonly<{ marker: 'default-marker' }>
+>;
+export declare type defaultMarker = typeof defaultMarker;
+export declare const when: StyleX$When;
+export declare type when = typeof when;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -114,6 +125,7 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>;
 };
+export declare type types = typeof types;
 /**
  * DO NOT USE. Legacy export for Meta
  */
@@ -132,7 +144,8 @@ type IStyleX = {
   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>;
@@ -158,3 +171,4 @@ type IStyleX = {
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;
+export declare type legacyMerge = typeof legacyMerge;

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>(
@@ -132,7 +135,12 @@ type IStyleX = {
   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');
   }
 };
@@ -238,6 +241,7 @@ function _legacyMerge(...styles) {
 _legacyMerge.create = create;
 _legacyMerge.createTheme = createTheme;
 _legacyMerge.defineConsts = defineConsts;
+_legacyMerge.defineMarker = defineMarker;
 _legacyMerge.defineVars = defineVars;
 _legacyMerge.defaultMarker = defaultMarker;
 _legacyMerge.firstThatWorks = firstThatWorks;
@@ -249,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.3",
+  "version": "0.17.1",
   "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"
   },
@@ -57,11 +57,11 @@
     "@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.26.0",
-    "cross-env": "^7.0.3",
-    "rimraf": "^5.0.10",
+    "babel-plugin-syntax-hermes-parser": "^0.32.1",
+    "cross-env": "^10.1.0",
+    "rimraf": "^6.1.2",
     "rollup": "^4.24.0",
-    "scripts": "0.16.3"
+    "scripts": "0.17.1"
   },
   "files": [
     "lib/*"