Grid gap property not reading theme space values

[sergeylukin]

Describe the bug

Hi, <Grid /> gap property doesn't respect spaces from connected theme while sx does.

To Reproduce
Steps to reproduce the behavior:

1. Setup basic example with theme:

const theme = {
    space: [0, 2, 4, 8, 12, 16, 20, 24, 32, 64, 128, 256, 512],
   ...
}

Expected behavior

<Grid gap={2} /> resulting in grid with gap of 4px

[hasparus]

Hey @sergeylukin, do you maybe have a reproduction repo or CodeSandbox? It seems to work in the docs.

What versions of Theme UI and Emotion do you have? Are you maybe using Theme UI inside of Storybook?

[lachlanjc]

Fwiw, this works fine for me! So more likely a setup issue.

[hasparus]

The problem might be caused by context version mismatch (and serve as another reason for us to move Emotion to peerDeps), so I'd look for the cause in package.json.

[sergeylukin]

Will export my setup to codesandox during today-tomorrow and provide a proof or will prove myself wrong, thank you @lachlanjc @hasparus !

[sergeylukin]

@hasparus you're right, I found 2 versions of @emotion/react in my yarn.lock (I'm using 11.4.0 while theme-ui is using 11.1.1):

...because I've used @emotion/react internals in my project. What's the solution as long as I do want to use @emotion/react in my project? Is it just aligning the version of @emotion/react to the one used by current theme-ui?

[lachlanjc]

Check this out! #1531 (comment) There's some other issues with that label with more conversations as well.

[hasparus]

@sergeylukin, you can either use yarn resolutions to enforce the new Emotion version on Theme UI or downgrade yours (does 11.4 have anything new you're using)?

We're definitely moving Emotion to peerDeps in next bigger release, @lachlanjc :/

[sergeylukin]

@hasparus makes sense, thank you! 🙏