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

[souporserious]

Thank you so much for fixing these types up and adding tests 🙏 just a question about the package manager change, but otherwise this looks great!

[souporserious]

I haven't seen this before, does this get added from --typecheck?

[RJWadley]

yeah, it's a temporary file that only exists while tests are running. as soon as the tests are finished it will be deleted.
I've added it here mainly so it doesn't show up in git commands or the vscode ui

[souporserious]

Is there a reason we need to pin to a sha?

[RJWadley]

it works either way. corepack adds it by default because it makes installation less prone to supply chain attacks if e.g. a registry server was compromised. on the other hand, it's a bit annoying to have a massive hash in the package file.

if you prefer without lmk and I'll rebase it out of existence (or you can)

[souporserious]

Ah, didn't realize corepack did that by default, makes sense! Yeah, I can update it and keep a simple version for now.