dripsy: Missing intellisense for variants

Hey, I tried following your guides to set up variants for my Text component, but it TypeScript refuses to acknowledge the keys under text in MyTheme.

I noticed that Text gets the prop type StyledProps<'text', never> & TextProps Manually updating never to DripsyVariant<'text'> solves the issue, and gives me correct suggestions. When looking at the source for createThemeComponent, then it seems like that is also the intention: https://github.com/nandorojo/dripsy/blob/798c6819c01ce4203e585739235b37b7f5b7efe9/packages/core/src/css/create-themed-component.tsx#L20 https://github.com/nandorojo/dripsy/blob/798c6819c01ce4203e585739235b37b7f5b7efe9/packages/core/src/css/types.ts#L287-L290 Has it been built wrong?

I have dumped my files for a repro into a gist: https://gist.github.com/Jomik/faa0f1ca6c7f46ba179c3bdfb60b1d0c

Versions:

{
    "dripsy": "^3.2.1",
    "typescript": "~4.4.4"
}

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 31 (23 by maintainers)

Most upvoted comments

3.5.3 should also fix this prop for components without a themeKey, such as View. Man, this was a tough one. all done though 🥳

nandorojo on Nov 13, 2021

Hm weird, it’s working for me. Could you try reproducing on CodeSandbox maybe?

Do you also have @dripsy/gradient installed? If so, make sure to update that too.

nandorojo on Nov 16, 2021

Yeah, definitely a unique use case. There isn’t much content out there for this kind of thing haha. But I know for next time.

nandorojo on Nov 13, 2021

From my app (not the example app):

nandorojo on Nov 13, 2021

yeah that fixes it for me. fixed in 3.5.2. thanks for peaking in the built version.

nandorojo on Nov 12, 2021

omgggggggg i think (hope) I got it. fucking typescript haha. if this is it, i’ll be quite happy haha.

Before:

export type StyledProps<ThemeKey extends keyof DripsyFinalTheme, Variant = DripsyVariant<ThemeKey>> = {
  as?: ComponentType<any>
  variant?: Variant
  themeKey?: ThemeKey
  sx?: SxProp
  variants?: Variant[]
}

After:

export type StyledProps<ThemeKey extends keyof DripsyFinalTheme> = {
  as?: ComponentType<any>
  variant?: DripsyVariant<ThemeKey>
  themeKey?: ThemeKey
  sx?: SxProp
  variants?: DripsyVariant<ThemeKey>[]
}

I think putting a value that gets generated later (DripsyVariant<ThemeKey>) as a generic makes it get evaluated upfront, thus resolving in never? 🧐

There’s a lesson to not try to “memoize” TS generics, and instead compute them inline.

nandorojo on Nov 12, 2021

I’ll look when I’m at my computer at this thanks

nandorojo on Nov 12, 2021

I think I found the issue

nandorojo on Nov 11, 2021

Ah got it, I left this undocumented I think

nandorojo on Nov 11, 2021