Class applied by the `className` prop is not updated on hot module reload

[thclark]

Description

Hi @timhagn, thanks for this library, it's very cool :)

This issue is a quirk, rather than armageddon, and see below for a workaround - but I thought it worth mentioning as it foxed me for 20 minutes until it dawned on me that the styles weren't updating 😭 ...

The class applied by the className prop is not updated on hot module reload.

Steps to reproduce

• Clone the MRE from my fork of the demo project
• yarn install && yarn start to get gatsby hot reloading
• Open Chrome devtools
• Comment/uncomment this line and save your changes. In devtools, you'll see the hot reload occur but the page css doesn't update.
• hard reload the page and you'll see the CSS update.

Expected result

I expected the view to update during hot reloading.

Actual result

The CSS from the initial pageload persists in the BackgroundImage until the page is reloaded

Environment

This appeared for me using Material UI's styling, and has reproduced with styled-components.

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.4 - /usr/local/opt/node@12/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/opt/node@12/bin/npm
Languages:
Python: 2.7.17 - /Users/thc29/.pyenv/shims/python
Browsers:
Chrome: 88.0.4324.182
Firefox: 81.0.2
Safari: 14.0.3
npmPackages:
gatsby: ^2.32.3 => 2.32.3
gatsby-background-image: ^1.4.1 => 1.4.1
gatsby-image: ^2.11.0 => 2.11.0
gatsby-plugin-manifest: ^2.12.0 => 2.12.0
gatsby-plugin-offline: ^3.10.0 => 3.10.0
gatsby-plugin-react-helmet: 3.10.0 => 3.10.0
gatsby-plugin-sharp: ^2.14.1 => 2.14.1
gatsby-plugin-styled-components: ^3.10.0 => 3.10.0
gatsby-source-filesystem: ^2.11.0 => 2.11.0
gatsby-transformer-sharp: ^2.12.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.19.1

WORKAROUND

It's evidently fine for the actual build. So I'm developing the styles using the style={{ ... }} prop, which always get applied on hot reload. I'll then either leave the styles there or put them into the classes elsewhere once I'm done developing on them.

[dreamawakening]

Experiencing the same problem. I'm using Tailwind to style, so I can't really use the style prop.

[timhagn]

Hi @thclark & @dspacejs,

this probably cuts in the same direction as styling with props. No state change within the BackgroundImage, thus no update, which seems to include hot reloading... : /. No quick fix comes to my mind, or could you think of one?

Best,

Tim.