TS typing for style/xstyle prop on component for custom style application

[mattstyles]

// Component

const styles = stylex.create({
  base: {
    color: 'hotpink'
  }
})

interface Props
  extends Omit<React.HTMLAttributes<HTMLElement>, 'style'>,
    React.PropsWithChildren {
  // This could be xstyle or some other non-clashing name, it doesn't matter here
  style?: StyleXStyles
}

export const Foo = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
  const { style, children } = props

  return (
    <span
      ref={ref}
      {...stylex.props(
        styles.base,
        style,
      )}
    >
      {children}
    </span>
  )
})

// Consuming
const customStyles = stylex.create({
  big: {
    fontSize: 123
  }
})

// ...
<Component style={customStyles.big}>One</Component>
<Component style={[customStyles.big]}>Two</Component>

This follows the pattern from the docs for accepting styles in components, and works great.

However, TS flags an issue with the typing.

style?: StyleXStyles what should this typing be?

[predaytor]

StyleXStyles is already accepts arrays by default, wdym?

export type StyleXStyles<
  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
> = StyleXArray<
  | null
  | undefined
  | false
  | GenStylePropType<CSS>
  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
>;

export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;

[mattstyles]

Thanks @predaytor

Just tried locally and it works perfectly.
I get a TS error when importing a component from a third-party.

Good to clarify I'm typing things correctly.
I think this points at some funkiness in my TS setup.

[mattstyles]

Type 'typeof import("/Users/mattstyles/projects/urban/urban-ui/apps/docs/node_modules/@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameTag' is not assignable to type 'typeof import("/Users/mattstyles/projects/urban/urban-ui/node_modules/@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameTag'.ts(2322)

This is the offender where the .d.ts is installed in multiple places.
I'll fix that and I expect the TS error will go away.

[mattstyles]

Thanks for clarifying I'm typing correctly.

I'll update the original post from:

interface Props
  extends Omit<React.HTMLAttributes<HTMLElement>, 'style'>,
    React.PropsWithChildren {
  // This could be xstyle or some other non-clashing name, it doesn't matter here
  style?: StyleXStyles | Array<StyleXStyles>
}

export const Foo = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
  const { style, children } = props

  return (
    <span
      ref={ref}
      {...stylex.props(
        styles.base,
        ...(Array.isArray(style) ? style : style ? [style] : []),
      )}
    >
      {children}
    </span>
  )
})

to

interface Props
  extends Omit<React.HTMLAttributes<HTMLElement>, 'style'>,
    React.PropsWithChildren {
  // This could be xstyle or some other non-clashing name, it doesn't matter here
  style?: StyleXStyles
}

export const Foo = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
  const { style, children } = props

  return (
    <span
      ref={ref}
      {...stylex.props(
        styles.base,
        style
      )}
    >
      {children}
    </span>
  )
})

as this change was not the problem (funky installation was) and its clearer to have the intended code in the post.

[nmn]

One small correction: You should also disallow className and so the type should be:

interface Props
  extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>,
    React.PropsWithChildren {
  // This could be xstyle or some other non-clashing name, it doesn't matter here
  style?: StyleXStyles
}

export const Foo = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
  const { style, children } = props

  return (
    <span
      ref={ref}
      {...stylex.props(
        styles.base,
        style
      )}
    >
      {children}
    </span>
  )
})

[mattstyles]

Awesome, thanks Naman.

Any advice for a pattern to interop with other libraries, specifically, additionally accepting classnames as props at the component level? (I would like to restrict to only stylex, but, realistically, and pragmatically, probably need to support some level of interop, if only for legacy)

const {style, classname} = props
const styles = stylex.props(styles.base, style)
const css = clsx(...styles.className, classname)

<div className={css} style={styles.style} />

What are the pitfalls here of this sort of approach?

[nmn]

We highly discourage mixing styling libraries on the same element. If you're migrating from an existing styling solution to StyleX we suggest migrating an entire element at a time as much as possible.

If you need to temporarily allow className props on custom components that have been migrated to StyleX, the pattern you used above is the valid approach to do so. I would suggest renaming your className prop to something like className_DEPRECATED so that users of the component know that passing StyleXStyles is preferred.