Autocomplete for Style Properties

[MPiccinato]

Hello! I was wondering if there is something I didn't setup correctly. When using styled or the sx prop there doesn't seem to be support for showing the available options for properties such as justifyContent or alignItems. It currently shows Theme values which are irrelevant to these.

[nandorojo]

hm yeah this is a problem with the types being a bit too aggressively themed. I may need to simplify how they work

[noskovvkirill]

@nandorojo perhaps related to that, I face the issue with those two properties specifically. It suggests to me all the available values from the theme instead. Is there any escape hatch that I'm missing?

[nandorojo]

that one is kinda weird, i assume it's the same issue. sorry about that, this typescript stuff was really hard to add support for, and the existing types were a casualty. i unfortunately don't have the free time to investigate and fix this currently

[noskovvkirill]

Appreciate the quick reply! I will see If I can fix it myself and commit in the meanwhile 🙂

[bennettfrazier]

Wondering if this issue relates to a typescript error being thrown on the variant prop?

It's suggested fix is to change the spelling to "variants" which also brings up the same error:

The <View> component displays with the variant theme styles at least.

Here is the error being thrown in VS Code? Any idea if this is related?

No overload matches this call.
  Overload 1 of 2, '(props: StyledProps<keyof DripsyFinalTheme> & ((ViewProps & RefAttributes<Component<ViewProps, any, any>>) | (ViewProps & { ...; })), context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 2 of 2, '(props: PropsWithChildren<StyledProps<keyof DripsyFinalTheme> & ((ViewProps & RefAttributes<Component<ViewProps, any, any>>) | (ViewProps & { ...; }))>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type 'string' is not assignable to type 'undefined'.ts(2769)
types.d.ts(85, 5): The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & (StyledProps<keyof DripsyFinalTheme> & ((ViewProps & RefAttributes<Component<ViewProps, any, any>>) | (ViewProps & { ...; })))'
types.d.ts(85, 5): The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<StyledProps<keyof DripsyFinalTheme> & ((ViewProps & RefAttributes<Component<ViewProps, any, any>>) | (ViewProps & { ...; }))>'

[nandorojo]

Hmm I think View might specifically not allow variants since it doesn’t have a theme key. You may need to use styled with a themeKey as the second argument to get around that. probably a separate issue

[nandorojo]

Here's a video: https://www.loom.com/share/d3519178c7e24d76b1024b4760bd50c3

I get both theme values as well as row/column etc. It's somewhat accurate since theme values may be usable here. However, it shouldn't be showing all of them, so I know it is slightly incorrect. For example, it showing cyan, which comes from colors.cyan, which should never apply.

All that being said, I don't get errors / missing autocomplete for style properties.

Wondering if this issue relates to a typescript error being thrown on the variant prop?

The View component may have an issue with variants since it doesn't have a defaultVariant set...I'll have to take a look at that.

[nandorojo]

Update, I now see that alignItems doesn't get any autocomplete. I have a long list of things to look at for open source stuff but will try to get into this when I have the chance.

[nandorojo]

I know this has been forever, sorry it's just hard with all the inbound for OS stuff I get. I've tried but this is a tough one.

This does work, though... <View sx={{ alignItems: ['center'] }} /> For some reason, an array fixes it.

[nandorojo]

Fixed in 4.0.0: https://github.com/nandorojo/dripsy/releases/tag/v4.0.0

yarn add dripsy