Hydration mismatch when targeting existing Stitches component?!

[J Paul Lescouzères]

Bug report

Describe the bug

As I was refactoring my personal website using Stitches v1.2.8 and NextJS v12, I got a classic Warning: Prop className did not match. Server: "c-golZua" Client: "c-boJmFo" message, which means hydration error... But there is no use of window or anything fancy in my component, except maybe the fact that it targets another Stitches component...:

// styles.ts
import { styled, theme } from 'stitches.config'

import { Text } from '@components/content'

export const ArticleLink = styled('a', {
  position: 'relative',
  display: 'grid',
  gridTemplateColumns: 'auto max-content',
  borderTop: '1px solid',
  borderBottom: '1px solid',
  borderColor: theme.colors.border,
  textDecoration: 'none',
  py: theme.space[1],
  marginTop: '-1px',

  [`${Text}`]: { transition: 'color 300ms' },

  [`&:hover ${Text}`]: { color: theme.colors.primary },
})

// index.tsx
import type { ReactElement } from 'react'
import NextLink, { LinkProps as NextLinkProps } from 'next/link'

import { Text } from '@components/content'

import { ArticleLink, Aside } from './styles'

interface ArticleProps extends Pick<NextLinkProps, 'href'> {
  title?: string
  body?: string
  metas?: string[]
}

const Article = ({ title, body, metas, href }: ArticleProps): ReactElement => (
  <NextLink href={href} passHref>
    <ArticleLink title={title} tabIndex={0} role="link">
      {...}
    </ArticleLink>
  </NextLink>
)

export default Article

Expected behavior

Styling targeting Stitches components should not be a problem ❓ 😕

Screenshots

System information

• OS: Ubuntu 22.04
• Browser (if applies) Firefox (latest), Brave (latest)
• Version of Stitches: 1.2.8
• Version of Node.js: 14.21.1

Additional context

As I was looking for some explanation, I tried removing the references to the other Stitches component, and hydration mismatch error were gone! This is why I'm guessing it could be related, even if I don't understand the reason... 🤯

Also in case it could help, here is a link to my WIP branch: https://gitlab.com/soykje/soykje.gitlab.io/-/blob/reboot-with-stitches/src/components/content/Article/styles.ts#L16

Thx in advance for your help 🙏

[Jacek Nowacki]

just had the same, but this may not be a stiches bug

there is a chance with import { Text } from '@components/content' you are creating a circular imports in your code (can't really tell, I don't see all of your files) try using relative import here first (you can also replace it in few other places too it it didn't help, just to make sure that there is no such situation)

[J Paul Lescouzères]

Oh crap, you're right @dzek69! Didn't noticed that (circular imports are still not always clear to me...) but moving as suggested into a relative import fixed my issue! 🎉
Thx again, and sorry for late answer... 🙏