Add TypeScript types for sx prop

Author: mjames-c

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

@@ -26,6 +26,7 @@ import type {
   StyleX$DefineConsts,
   StyleXArray,
   StyleXClassNameFor,
+  StyleXSxProp,
   StyleXStyles,
   StyleXStylesWithout,
   StyleXVar,
@@ -51,6 +52,7 @@ export type {
   StaticStylesWithout,
   StyleXArray,
   StyleXClassNameFor,
+  StyleXSxProp,
   StyleXStyles,
   StyleXStylesWithout,
   StyleXVar,

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

@@ -235,6 +235,20 @@ export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
 >;
 
+export type StyleXSxProp = StyleXArray<
+  | null
+  | undefined
+  | boolean
+  | CompiledStyles
+  | Readonly<[CompiledStyles, InlineStyles]>
+>;
+
+declare module 'react' {
+  interface DOMAttributes<T> {
+    sx?: StyleXSxProp;
+  }
+}
+
 declare const StyleXVarGroupTag: unique symbol;
 export type VarGroup<
   Tokens extends { [key: string]: any },

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

@@ -195,6 +195,10 @@ export type StyleXStylesWithout<
   out CSS extends { readonly [string]: unknown },
 > = StyleXStyles<Omit<CSSPropertiesWithExtras, keyof CSS>>;
 
+export type StyleXSxProp = StyleXArray<
+  ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
+>;
+
 export type VarGroup<
   out Tokens extends { readonly [string]: unknown },
   out _ID extends string = string,

packages/typescript-tests/src/test1.tsx

@@ -7,11 +7,11 @@
  *
  */
 
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars, react/no-unknown-property */
 
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type { StaticStyles } from '@stylexjs/stylex';
+import type { StaticStyles, StyleXSxProp } from '@stylexjs/stylex';
 
 type Props = {
   xstyle?: StaticStyles;
@@ -21,16 +21,40 @@ function Component({ xstyle }: Props) {
   return <div {...stylex.props(xstyle)} />;
 }
 
+function PlainComponent(_props: {}) {
+  return null;
+}
+
 const styles = stylex.create({
   base: {
     color: 'red',
   },
 });
 
+const sxStyle: StyleXSxProp = styles.base;
+
 function OtherComponent() {
   return <Component xstyle={styles.base} />;
 }
 
 function OtherComponent2() {
   return <Component xstyle={[styles.base, undefined]} />;
 }
+
+function SxComponent() {
+  return <div sx={styles.base} />;
+}
+
+function SxComponentMultiStyle() {
+  return <div sx={[styles.base, undefined]} />;
+}
+
+function InvalidSxValue() {
+  // @ts-expect-error - `sx` only accepts StyleX styles.
+  return <div sx="not-stylex" />;
+}
+
+function CustomComponentSx() {
+  // @ts-expect-error - `sx` is only transformed on lowercase JSX host elements.
+  return <PlainComponent sx={styles.base} />;
+}