Gatsby hydration/client-side re-render issue

Describe the bug The first client-side re-render (or hydration?) causes the global styles (styles.global) to get “lost”.

Using:

• gatsby
• reflexjs

To Reproduce

1. Add page

// src/pages/hydration-issue.js
import { Link } from "gatsby"
import * as React from "react"

export default function HydrationIssuePage() {
  return (
    <div sx={{bg: "red"}}>
      <div sx={{variant: "container"}}>
        <h1>Hello</h1>
        <p>World!</p>
        <Link to="/"><span sx={{variant: "text.link"}}>Go home</span></Link>
      </div>
    </div>
  )
}

1. Run gatsby build && gatsby serve
2. Open browser, hover over link in page

Expected behavior The styles remains mostly unchanged when hovering over the link. Only the link hover style should be applied. The global styles should not suddenly get “lost”.

Screenshots See above.

Additional context The issue does not occur in dev mode (gatsby develop).

[ftes]

I’ve since switched tech stacks, so I can’t say if the issue still exists. I suggest closing the bug since nobody else complained and you couldn’t reproduce it.

[ftes]

Update: I narrowed down which prefetched pages cause the bug. Affected: Hovering over a link to any page that executes the @emotion/react keyframes method.

Example:

// src/pages/start-page.js
import * as React from "react"
import {Link} from "gatsby"
const StartPage = () => <Link to="/page-with-keyframes">Go to page with @emotion/react keyframes call</Link>
export default StartPage

// src/pages/page-with-keyframes.js
import * as React from "react"
import {keyframes} from "@emotion/react"

const unused = keyframes``
const PageWithKeyframes = () => <div>Empty</div>
export default PageWithKeyframes

Note that keyframes is called, but the result is not actually consumed anywhere.