nandorojo / dripsy

🍷 Responsive, unstyled UI primitives for React Native + Web.
https://dripsy.xyz
MIT License
2.01k stars 80 forks source link

[types] per-value factory function #165

Closed nandorojo closed 2 years ago

nandorojo commented 2 years ago

Currently, this usage doesn't have proper types for factory functions:

<View 
  sx={{ p: theme => theme.space.$2 }}
/>

This usage does have the correct types, on the other hand:

<View 
  sx={theme => ({ p: theme.space.$2 })}
/>

However, this isn't good enough for many use-cases. If you want to create a wrapper component that spreads its sx styles directly on the props, then you can't use the sx prop with a theme:

import { Sx, View } from 'dripsy'
const Box = ({ children, ...sx }: React.PropsWithChildren<Sx>) => <View sx={sx}>{children}</View>

// theme isn't properly typed
<Box p={theme => theme.space.$3} />
nandorojo commented 2 years ago

Opened a PR to fix this: #166