Types not working correctly

[mtt87]

EDIT: sorry I accidentally pressed enter and created the empty issue 😆

First of all thanks for creating this library, I'm testing it and I found this issue where types are not working.

It should suggest fontFamily, fontSize etc but it's not

That said, once I write fontFamily: " then I get the correct autocomplete based on my tokens.

"react-native": "0.65.1",
"typescript": "^4.4.4"
"stitches-native": "^0.0.1-4"

EDIT: I just realised I can also do this but still the issue is there

import { Text as TextComponent } from 'react-native'
const Text = styled(TextComponent, {
// same as
const Text = styled('Text', {

[mtt87]

Second issue related to types, in the compound variant it's not happy

variants: {
  color: {
    red: {
       backgroundColor: theme.colors.red500, // ✅  all good here
   } 
  }
},
compoundVariants: [
    {
      color: 'red',
      variant: 'solid',
      css: {
        backgroundColor: theme.colors.red500, // ❌  TS error here
      },
    },
]

TS error:

Property 'backgroundColor' is incompatible with index signature.
            Type 'Token<"red500", string, "colors">' is not assignable to type 'string | number | boolean | WideObject'.
              Type 'Token<"red500", string, "colors">' is not assignable to type 'WideObject'.
                Index signature for type 'string' is missing in type 'Token<"red500", string, "colors">'.

But if I use theme.colors.red500.value it doesn't throw an error

[mtt87]

Using the shortcut for theme token with ${value} doesn't work for fontWeight but it works for fontFamily and other properties.

const Heading = styled(TextComponent, {
  fontFamily: '$inter', // ✅ 
  fontWeight: '$700', // ❌ 
})

const Heading = styled(TextComponent, {
  fontFamily: '$inter', // ✅ 
  fontWeight: theme.fontWeights[700], // ✅ 
})

[mtt87]

Another issue, negative token values don't seem to work they are treated as positive.

const View = styled('View');

<View css={{ marginLeft: '$2' }}> 
<View css={{ marginLeft: '-$2' }}>

They both have the same output

[Temzasse]

Using the shortcut for theme token with ${value} doesn't work for fontWeight but it works for fontFamily and other properties.

const Heading = styled(TextComponent, {
  fontFamily: '$inter', // ✅ 
  fontWeight: '$700', // ❌ 
})

const Heading = styled(TextComponent, {
  fontFamily: '$inter', // ✅ 
  fontWeight: theme.fontWeights[700], // ✅ 
})

This issue should be fixed in the latest canary version. I had a typo in the default theme map which caused fontWeight not getting the autocomplete results for theme tokens 😅

[Temzasse]

EDIT: sorry I accidentally pressed enter and created the empty issue 😆

First of all thanks for creating this library, I'm testing it and I found this issue where types are not working.

It should suggest fontFamily, fontSize etc but it's not

That said, once I write fontFamily: " then I get the correct autocomplete based on my tokens.

"react-native": "0.65.1",
"typescript": "^4.4.4"
"stitches-native": "^0.0.1-4"

EDIT: I just realised I can also do this but still the issue is there

import { Text as TextComponent } from 'react-native'
const Text = styled(TextComponent, {
// same as
const Text = styled('Text', {

Hmm I can't seem to reproduce this issue locally 🤔 Does this still happen in the latest canary version?

[Temzasse]

Another issue, negative token values don't seem to work they are treated as positive.

const View = styled('View');

<View css={{ marginLeft: '$2' }}> 
<View css={{ marginLeft: '-$2' }}>

They both have the same output

This should be now fixed in v0.0.1-7 🙂

[mtt87]

Thanks for the update! This is what I can see so far:
✅ negative properties working now marginLeft: "-$2"
✅ intellisense on css prop

❌ intellisense on styled('Component') still not working for me

❌ correct suggestion of properties not working, which btw works fine with the react native types

"react-native": "0.65.1",
"@types/react": "^17.0.31",
"@types/react-native": "^0.66.0",
"typescript": "^4.4.4"

[Temzasse]

❌ correct suggestion of properties not working, which btw works fine with the react native types

This is related to the currently unsolved issue of having all Text + View + Image style properties shown in the autocomplete: #18

I would love to fix this but it's quite complicated since the types are so complex 😅

[Temzasse]

❌ intellisense on styled('Component') still not working for me

This is an odd one since I can't reproduce this locally with the dev version or the one released on npm 🤔 For me it works fine:

Could you create a repro in a Github repo so that I could try it out?

[mtt87]

Sure, this is what I've done and the issue is still there:

$ npx react-native init MyApp --template react-native-template-typescript
$ cd MyApp
$ yarn add stitches-native@0.0.1-7

I tested with different versions of Typescript (v3 an but doesn't make any difference.

Here is the repo, I just changed App.tsx and added stitches.config.ts, everything else is standard RN template.

[Temzasse]

@mtt87 I followed your instructions and everything works just fine for me 😅

Maybe you have misconfigured the Stitches config?

Here's the config I used for testing:

export const { styled, theme } = createStitches({
  theme: {
    colors: {
      // Palette
      blue100: '#ab9cf7',
      blue500: '#301b96',
      blue900: '#0D0630',
      black: '#222',
      white: '#fff',

      primary: '$blue500',
      primaryDark: '$blue900',
      primaryLight: '$blue100',
      secondary: '#8BBEB2',
      secondaryDark: '#384d48',
      secondaryLight: '#d9fff6',
      background: '$white',
      text: '$black',
    },
    space: {
      1: 4,
      2: 8,
      3: 16,
      4: 24,
      5: 32,
      6: 40,
      7: 56,
      8: 72,
      9: 96,
    },
    sizes: {
      hairlineWidth: StyleSheet.hairlineWidth,
    },
    radii: {
      sm: 4,
      md: 8,
      lg: 24,
      full: 999,
    },
  },
  utils: {
    size: (value: number) => ({
      width: value,
      height: value,
    }),
    flexCenter: (value?: Stitches.PropertyValue<'flexDirection'>) => ({
      flexDirection: value || 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }),
    absoluteFill: () => ({
      ...StyleSheet.absoluteFillObject,
    }),
  },
});

[mtt87]

That's interesting 🤔

Could you try with my repo https://github.com/mtt87/debug-stitches-native-typescript ?
I just realised that I didn't paste the link in my previous message sorry.

Can you also double check what typescript are you using?

Thank you!

[Temzasse]

Okay now I'm getting the typing issue when I changed the TypeScript version. I think my example app was using the TypeScript of the stitches-native repo which was part of the same vscode workspace. Thanks for the tip 👍🏻

Now I just need to figure out why on earth the types are not working properly 😭

[Temzasse]

@mtt87 I think I found the source of the TS bug 🐛🕵🏻‍♂️

The typings for styled component's CSS properties should work correctly now. Can you test the latest canary version (v0.0.1-8)? 🙂

About all the remaining TS problems that have been commented under this issue: it would be better to move them to separate issues so that they can be tackled one by one more easily (and nothing gets lost in the sea of comments).

[mtt87]

🎉 great it's working now 😄

Tomorrow when I have a moment I create separate issues, we can close this one, thank you for fixing it! 🙏