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

thclark commented 3 years ago

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.

demeralde commented 3 years ago

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

timhagn commented 3 years ago

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.

timhagn / gatsby-background-image