Accept Marker type in StyleXStyles for passing between component prop boundaries

packages/@stylexjs/stylex/src/stylex.js

@@ -26,6 +26,7 @@ import type {
   StyleX$DefineConsts,
   StyleXArray,
   StyleXClassNameFor,
+  StyleXMarker,
   StyleXStyles,
   StyleXStylesWithout,
   StyleXVar,
@@ -34,7 +35,7 @@ import type {
   PositionTry,
   ViewTransitionClass,
   StyleX$When,
-  MapNamespace,
+  StyleX$DefaultMarker,
   StyleX$DefineMarker,
   StyleX$Env,
 } from './types/StyleXTypes';
@@ -51,6 +52,7 @@ export type {
   StaticStylesWithout,
   StyleXArray,
   StyleXClassNameFor,
+  StyleXMarker,
   StyleXStyles,
   StyleXStylesWithout,
   StyleXVar,
@@ -208,11 +210,7 @@ export const viewTransitionClass = (
   throw errorForFn('viewTransitionClass');
 };
 
-export const defaultMarker = (): MapNamespace<
-  Readonly<{
-    marker: 'default-marker',
-  }>,
-> => {
+export const defaultMarker: StyleX$DefaultMarker = () => {
   throw errorForFn('defaultMarker');
 };
 
@@ -313,11 +311,7 @@ type IStyleX = {
   defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
   env: StyleX$Env,
-  defaultMarker: () => MapNamespace<
-    Readonly<{
-      marker: 'default-marker',
-    }>,
-  >,
+  defaultMarker: StyleX$DefaultMarker,
   defineMarker: StyleX$DefineMarker,
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>

packages/@stylexjs/stylex/src/types/StyleXTypes.d.ts

@@ -230,6 +230,7 @@ export type StyleXStyles<
   | false
   | GenStylePropType<CSS>
   | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+  | StyleXMarker
 >;
 export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
@@ -314,10 +315,14 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
 ) => Theme<TVars, ThemeID>;
 
-export type StyleX$DefineMarker = () => MapNamespace<{
+export type StyleXMarker = MapNamespace<{
   readonly marker: symbol;
 }>;
 
+export type StyleX$DefineMarker = () => StyleXMarker;
+
+export type StyleX$DefaultMarker = () => StyleXMarker;
+
 export type StyleX$When = {
   ancestor: <
     const Pseudo extends `:${string}` | `[${string}]`,

packages/@stylexjs/stylex/src/types/StyleXTypes.js

@@ -188,7 +188,8 @@ export type StyleXStyles<
 > = StyleXArray<
   | ?false
   | GenStylePropType<Readonly<CSS>>
-  | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
+  | Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>
+  | StyleXMarker,
 >;
 
 export type StyleXStylesWithout<
@@ -294,30 +295,34 @@ export type StyleX$CreateTheme = <
   overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
 ) => Theme<BaseTokens, ID>;
 
-export type StyleX$DefineMarker = () => MapNamespace<{
+export type StyleXMarker = MapNamespace<{
   readonly marker: 'custom-marker',
 }>;
 
+export type StyleX$DefineMarker = () => StyleXMarker;
+
+export type StyleX$DefaultMarker = () => StyleXMarker;
+
 export type StyleX$When = {
   ancestor: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
+    _customMarker?: StyleXMarker,
   ) => ':where-ancestor',
   descendant: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
+    _customMarker?: StyleXMarker,
   ) => ':where-descendant',
   siblingBefore: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
+    _customMarker?: StyleXMarker,
   ) => ':where-sibling-before',
   siblingAfter: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
+    _customMarker?: StyleXMarker,
   ) => ':where-sibling-after',
   anySibling: (
     _pseudo?: StringPrefix<':'> | StringPrefix<'['>,
-    _customMarker?: MapNamespace<{ readonly marker: 'custom-marker' }>,
+    _customMarker?: StyleXMarker,
   ) => ':where-any-sibling',
 };
 

packages/typescript-tests/src/typetests.ts

@@ -10,6 +10,7 @@
 import * as stylex from '@stylexjs/stylex';
 import type {
   StaticStyles,
+  StyleXMarker,
   StyleXStyles,
   StaticStylesWithout,
   StyleXStylesWithout,
@@ -317,3 +318,36 @@ const styles9 = stylex.create({
   // @ts-expect-error - `undefined` is not a valid style value
   bar: (height: number, width?: number) => ({ height, width }),
 });
+
+/**
+ * MARKER STYLES
+ *
+ * `stylex.defaultMarker()` and `stylex.defineMarker()` both return a
+ * `StyleXMarker` which `StyleXStyles<T>` accepts for any `T`, so that markers
+ * can be passed across component prop boundaries.
+ */
+
+const defaultMarker = stylex.defaultMarker();
+const customMarker = stylex.defineMarker();
+
+// Markers satisfy StyleXMarker
+defaultMarker satisfies StyleXMarker;
+customMarker satisfies StyleXMarker;
+
+// Marker are accepted by constrained StyleXStyles<T>
+defaultMarker satisfies StyleXStyles<{ margin?: string }>;
+customMarker satisfies StyleXStyles<{ margin?: string }>;
+
+// Mixed array: layout styles + marker token through a constrained prop type
+const layoutStyles = stylex.create({ base: { margin: '8px' } });
+[layoutStyles.base, defaultMarker] satisfies StyleXStyles<{
+  margin?: string;
+}>;
+[layoutStyles.base, customMarker] satisfies StyleXStyles<{
+  margin?: string;
+}>;
+
+// CSS constraints are still enforced — this doesn't weaken StyleXStyles<T>
+const opacityStyle = stylex.create({ foo: { opacity: 0 } });
+// @ts-expect-error — opacity is not in the constraint
+opacityStyle.foo satisfies StyleXStyles<{ margin?: string }>;