Fix tests for the Global component

[hasparus]

I've added comments below ⬇️

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
theme-ui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 22, 2023 at 5:57PM (UTC)

[hasparus]

When I launched the Next example, I noticed the hydration warning popping up straight in your face. This component will cause it, because it's using useColorMode without waiting until we're on the client, and we depend on the color scheme value in local storage. (We could render a skeleton for the button on the server instead, but that's not much better UX IMHO.)

[hasparus]

I've read Emotion Global's code to figure it out:

1. This class name shouldn't be there.
2. data-emotion should be css-global, not css.
3. Wait up, original Global uses styles instead of css prop. Eureka moment.
4. We have JSX pragma configured in our tests.
5. sx becomes css, which becomes className

I've changed the name of the prop to styles, because it will happen for the users. They're gonna use <Global> alongside other JSX, in files where JSX goes through jsx function from Theme UI.

Side effect of it is, we now have the same signature that Emotion Global has, just with different type of styles, so the user can just change the import if they need to access their design tokens, and even change it back if they no longer need the theme there.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 78c9019:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration