Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createGlobalStyle does not hot reload Gatsby app

See original GitHub issue

System:

OS: macOS 10.14.4
CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz
Memory: 404.55 MB / 16.00 GB
Shell: 5.3 - /bin/zsh

Binaries:

Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm

npmPackages:

babel-plugin-styled-components: ^1.10.0 => 1.10.0
styled-components: ^4.2.0 => 4.2.0

Reproduction

Demo: https://codesandbox.io/s/zny06vk49x

Gatsby default theme were installed. Dependencies are installed following the instructions. No extra options are added: https://www.gatsbyjs.org/docs/styled-components/

Steps to reproduce

Using the Gatsby default starter theme, the new createGlobalStyle API does not work with Gatsby hot reload. Not sure if this is Gatsby specific or something else. Every time I change the css property values inside createGlobalStyle, for example in my codesandbox link, changing the values from red to something else, or the background doesn’t hot reload the Gatsby app, and hence no style changes. The page will only get hot reloaded and new styles will only be applied if I refresh the page, or change props in the React component.

In the codesandbox I also created a <Test /> styled component, confirming changing the CSS properties on a regular styled components is working as expected with hot reloading.

Expected Behavior

Changing CSS properties and values inside createGlobalStyle should hot reload the page just like any other regular styled components

Actual Behavior

Changing CSS properties and values inside createGlobalStyle does not hot reload the page. Styles can only get applied if I refresh the page or changing React component props