gridGap property incorrect type

[panzelva]

Bug report

Describe the bug

When trying to use gridGap: theme.space.someSpace, TypeScript throws error:

Type 'Token<"someSpace", string, "space", "">' is not assignable to type 'Globals | Index | undefined'.
  Type 'Token<"someSpace", string, "space", "">' is not assignable to type 'number & Record<never, never>'.
    Type 'Token<"someSpace", string, "space", "">' is not assignable to type 'number'.ts(2322)

To workaround, user can use columnGap + rowGap (both work fine).

To Reproduce

See this sandbox: https://codesandbox.io/s/naughty-pond-1rvogt?file=/src/App.tsx

Expected behavior

gridGap does not throw TS error.

System information

• OS: macOS
• Version of Stitches: 1.2.8
• Version of Node.js: 16

[ubmit]

I think this isn't a bug actually. What you get from theme.space.someSpace isn't a string, but actually a Token. You can access the value of it using the value property, so that would be theme.space.someSpace.value.

Here is the forked version from your Codesandbox: https://codesandbox.io/s/modulz-stitches-gridgap-property-incorrect-type-1021-forked-05sb6x?file=/src/App.tsx

[hadihallak]

@GuilhermedeAndrade is right. the two types are simply incompatible.
for the recommended way to do theming, please reference the docs

[ubmit]

@hadihalla maybe we should improve the documentation, though. It doesn't explain this situation and maybe more people have been passing through the same problem. What do you think?

[hadihallak]

Just re-checked and this might be a bug so I'm re-opening it

[panzelva]

I think this isn't a bug actually. What you get from theme.space.someSpace isn't a string, but actually a Token. You can access the value of it using the value property, so that would be theme.space.someSpace.value.

Here is the forked version from your Codesandbox: https://codesandbox.io/s/modulz-stitches-gridgap-property-incorrect-type-1021-forked-05sb6x?file=/src/App.tsx

That seems wierd to me, because in docs there is section with tips for stricter Typescript experience, and using Token directly is there as an option.

And it works for every other property other than gridGap, so it looks like to me this is indeed a bug (or not ideal documentation).

[ubmit]

I think this isn't a bug actually. What you get from theme.space.someSpace isn't a string, but actually a Token. You can access the value of it using the value property, so that would be theme.space.someSpace.value.
Here is the forked version from your Codesandbox: codesandbox.io/s/modulz-stitches-gridgap-property-incorrect-type-1021-forked-05sb6x?file=/src/App.tsx

That seems wierd to me, because in docs there is section with tips for stricter Typescript experience, and using Token directly is there as an option.

And it works for every other property other than gridGap, so it looks like to me this is indeed a bug (or not ideal documentation).

That's true! Sorry, it looks like a bug indeed.