gatsby-plugin-styled-components: Styles not updating

[tmatek]

Description

I am not sure if this is an actual bug with styled-components' SSR or just my misunderstanding of how rehydration works. Conditionally applying styles to a button, based on the presence of a query param does not work in production (styles are not applied). It works in development.

Steps to reproduce

Pull down the repository at https://github.com/tmatek/gatsby-styled-components-bug.git. Run npm i && npm run build && npm run serve. Go to http://localhost:9000/test/?disable=1. Inspect the button element for CSS rules.

Expected result

The button should have opacity: 0.5; cursor: not-allowed; CSS rules applied.

Actual result

The button does not have the CSS rules applied. The console log shows that the conditional part in the button styled component was called.

Environment

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.23.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 84.0.1
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.26.1 => 2.26.1 
    gatsby-image: ^2.5.0 => 2.5.0 
    gatsby-plugin-manifest: ^2.6.1 => 2.6.1 
    gatsby-plugin-offline: ^3.4.0 => 3.4.0 
    gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0 
    gatsby-plugin-sharp: ^2.8.0 => 2.8.0 
    gatsby-plugin-styled-components: ^3.7.0 => 3.7.0 
    gatsby-source-filesystem: ^2.5.0 => 2.5.0 
    gatsby-transformer-sharp: ^2.6.0 => 2.6.0 

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[tmatek]

So after further digging it turns out this is another result of hydration mismatches: #17914.

This article has helped in resolving the issue: https://www.joshwcomeau.com/react/the-perils-of-rehydration/

The solution is to check if we are in browser before applying the query param (2-pass rendering):

...

const [client, setClient] = useState(false)
useEffect(() => {
  setClient(true)
}, [])

return (
  <Button type="button" isDisabled={client && !!params.disable}>
    click me
  </Button>
)

This way the class names at compile time and during hydration in browser match.

It would be really helpful if Gatsby reported hydration mismatches during builds.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜