Stitches and global CSS variables

[MaximeHeckel]

Hi 👋

I'm currently test-driving Stitches as a replacement for Emotion. Some of my projects rely heavily on CSS variables injected at the :root (e.g. https://github.com/MaximeHeckel/blog.maximeheckel.com/blob/main/styles/global.css).
This CSS file is imported in my Next.js projects in the _app.tsx (e.g. https://github.com/MaximeHeckel/blog.maximeheckel.com/blob/main/pages/_app.tsx) and the variables are then used in my styled-components as such:

import {styled} from '@stitches/react';

const Button = styled('button', {
  background: 'var(--maximeheckel-colors-brand)'
});

One full example of such components would be https://github.com/MaximeHeckel/blog.maximeheckel.com/blob/test-sticthes/core/components/Button/Styles.tsx (you'll see I use a lot of local and global CSS variables, which is a pattern I have in many of my projects, 0 theme providers / themes)

This worked like a charm with Emotion, and works well with Stitches as well in dev, however, once I build my Next.js app, for example, my components which depend on these same CSS variables appear "unstyled" for a split second (I think it only concerns the properties that depend on CSS variables):

Screen.Recording.2021-10-10.at.5.40.38.PM.mov

I assume to avoid such an effect I'd have to create a theme with switches token, but I'm still wondering: Is there's a way to make this setup with CSS variables work reliably so I could do the heavy lifting on migrating to Stitches in my components first and then in my token?

No big deal if that's not the case 😄 I'd just have to postpone this migration for later since it would require a bit more work than I originally expected