Problem with hot module reloading & createGlobalStyle

System:

• OS: macOS Sierra 10.12.6
• CPU: x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz
• Memory: 105.95 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node
• Yarn: 1.6.0 - /usr/local/bin/yarn
• npm: 6.1.0 - ~/.nvm/versions/node/v10.1.0/bin/npm
• Watchman: 4.7.0 - /usr/local/bin/watchman

npmPackages:

• styled-components: ^4.0.0-beta.10 => 4.0.0-beta.10

Hi there, not sure if I would call this a bug but thought it was worth pointing out.

I have started using the createGlobalStyle function in v4, but have run into some issues relating to Hot Module Reloading. Whenever a reload is triggered by something outside the createGlobalStyle function, all of its comprising css rules are lost. Here is a simple project which demonstrates this: https://github.com/frednomoon/styled-hot-reload

It seems from this behaviour that its necessary to reload the module containing the global styles every time the page changes. But, of course, this doesn’t happen unless you actually change something inside that module.

I’m guessing its probably possible to solve this with some additional config in my bundler, but obviously would be great to avoid things like that.

[3nvi]

Yup, can verify that it’s not working in v5.0.0-beta.8.

[jdahdah]

FYI: while it’s fixed in 4.3.2, it seems to persist in v5.0.0-beta.8 (both in conjunction with GatsbyJS).