Make previously defined styles (typed as ViewStyle, TextStyle, etc...) retro-compatible with UnistylesValues types.

[rrooddooxx]

Hi! Thanks for your amazing work with this library. I'm pushing the usage of unistyles in a big monorepo at my current company, but I've comed across this problem while doing so, specially when trying to "inherit" previously defined styles (typed with the StyleSheet react-native typings, like ViewStyle, TextStyle, etc..), they cannot be spreaded into a StyleSheet.create({}) declaration because the UnistylesValues doesn't seem to overlap with ViewStyle, TextStyle etc to the TS compiler.

Here's an example:

We have a lot of "design semantic tokens" implemented in code, let's say a typography body config:

{
   [TypographyNamesThemeTokens.BODY_3]: {
      fontFamily:
        globalTokens.typography.fontFace[TypographyFaceTokenNames.OPEN_SANS]
          .regular,
      fontSize: globalTokens.typography.fontSize['xs'],
    },
}

This object is of type

export type TypographyThemeTokens = {
  [key in TypographyNamesThemeTokens]?: TextStyle;
};

So when I want to spread this style, like this:

 StyleSheet.create({
    $priceOfferTag: {
      ...tokens.typography.BODY_3
      fontWeight: 700,
    },

I'm getting this TS error:

TS2322: Type
{
  color: string | undefined;
  fontWeight: 700;
  fontFamily?: string | undefined;
  fontSize?: number | undefined;
  fontStyle?: 'normal' | 'italic' | undefined;
  letterSpacing?: number | undefined;
  ... 188 more ...;
  includeFontPadding?: boolean | undefined;
}
is not assignable to type
UnistylesValues | ((...args: any) => UnistylesValues)

Is there a way we can make our previously defined (and ts typed) styles compatible with Unistyles?

Thanks!

[jpudysz]

Thank you for the kind words and I'm happy that another big project will use Unistyles 🦄

After investigation I can say that the issue lies here:

export type TypographyThemeTokens = {
  [key in TypographyNamesThemeTokens]?: TextStyle;
};

You are limiting the type to a generic TextStyle. Even if we could get Unistyles StyleSheet to accept it, no type will be further inferred.

What you need to do is:

1. Remove the generic TextStyle type
2. For your tokens, use something like this (I don't have your exact structure):

-const typographyTokens: TypographyThemeTokens = {
const typographyTokens = {
    [TypographyNamesThemeTokens.BODY_3]: {
        fontFamily: globalTokens.typography.fontFace.openSans.regular,
        fontSize: globalTokens.typography.fontSize.xs,
    }
-}
+} satisfies TypographyThemeTokens

Now, if you check the type of such a construct, it's:

Now you can safely spread it:

const styles = StyleSheet.create(theme => ({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: theme.colors.backgroundColor
    },
    typography: {
        ...typographyTokens[TypographyNamesThemeTokens.BODY_3]
    },
})

and check the type:

type Z = typeof styles['typography']