types: improve the types returned by styled

[RJWadley]

improvements, in no particular order:

• style props are filtered from the component props
  if we were to use a style prop that already existed on the component, our type would not reflect it

const Sample= styled('div', ({ onClick }: { onClick: string }) => ({
  color: onClick,
}))

in this example, previously onClick was MouseEventHandler<HTMLDivElement> & string, but because style props are filtered, a more correct type is just string

• style props are not allowed to break the component type
  because style props are filtered, if a required component prop and a style prop share a name we now get a type error

const component = ({
  className,
  color,
}: {
  className: string
  color: number
}) => <div className={className}>{color}</div>

// @ts-expect-error extending with color would make color always undefined, but color must be a number
const extended = styled(component, ({ color }: { color: string }) => ({
  color,
}))

• extra properties are not allowed
  previously, if style props was a function our component props were expanded to Record<string, unknown> which would let us add incorrect props

const Extended = styled(
  Extended2,
  ({ color }: { color: string }) => ({
    color,
  })
)

const test= (
  <Extended
    className="abc"
    // @ts-expect-error name does not exist on type, but previously was allowed anyway
    name="abc"
  />
)

• generic types are preserved
  this also adds support for generic type propagation, so if we style a generic function component the generic will be preserved. do note that generic class components will not be propagated, only generic function components.

const Component = <SomeText extends string>({
  id,
  className,
}: {
  id: `id-${SomeText}`
  className?: string
}) => <div></div>
const Extended = styled(Component, { color: 'red' })

const example= (
  <>
    <Component<'abc'> id="id-abc" />
    {/* our generic is preserved! previously was a type error */}
    <Extended<'abc'> id="id-abc" color="red" />
  </>
)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
restyle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2025 5:33pm

[RJWadley]

test is failing due to some issue related to corepack and the npm registry

I could find some workaround right now but I'd rather just wait for that to settle a bit

EDIT: all good now