Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

gridGap property incorrect type

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

1reaction

panzelvacommented, Jun 7, 2022

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).

1reaction

ubmitcommented, Jun 1, 2022

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

Top Results From Across the Web

gap - CSS: Cascading Style Sheets - MDN Web Docs

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

gap | CSS-Tricks

The gap property in CSS is a shorthand for row-gap and column-gap , specifying the size of gutters, which is the space between...

Property 'grid-gap' doesn't exist in CSS - Stack Overflow

Just stumbled upon this problem myself and so logging the answer here. This can be achieved with 'column-gap' and 'row-gap'. Visual studio code ......

css ( grid-gap is replaced by gap ) · Issue #54688 - GitHub

In the verbage it says " Property is Obsolete. Avoid using it." Well thanks for letting me know, BUT you do not tell...

Grid Cheatsheet

The three properties grid-template-rows, grid-template-columns, ... size of the grid is not purely the sum of the track sizes, as row-gap, column-gap and ......