styled-components: Fonts flashing on v4.3.2 and not loading in v5.0.0-beta.8

I really appreciate the work y’all are doing on this and am super stoked for v5 to come out! I was testing the beta to see if it would fix an issue that got reported to me internally with some fonts flashing (without using font-display: swap), probably because we’re @importing the css file that defines them? In trying this out in a minimal repro, I got it to happen pretty easily based on the next.js with-styled-components example (using their codesandbox link), so hopefully that is familiar ground 😃

From what I can tell, there’s a flashing issue in v4 that’s probably related to a not-loading issue in v5, but I don’t know if we’re doing something wrong with our usage or if there’s a bug. It seems like a bug, since the behavior changed between v4 and v5 but the code in both sandboxes is the same. I’ve looked at a bunch of other issues relating to fonts, and didn’t see any that were the same or recent enough to comment on them instead, such as #1860, #2227, #2704, #2654, #2728, #2074, #2669.

There’s two different fonts being pulled in for the reproduction, both from Google Fonts using an @import for a css file. One is using the pages/_app.js file to load the <Fonts /> createGlobalStyle component, while the other is using a createGlobalStyle component inside the pages/index.js file.

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown --clipboard

## System:
 - OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
 - CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
 - Memory: 8.40 GB / 62.70 GB
 - Container: Yes
 - Shell: 4.4.12 - /bin/bash
## Binaries:
 - Node: 10.16.0 - /usr/local/bin/node
 - Yarn: 1.16.0 - /usr/local/bin/yarn
 - npm: 6.9.0 - /usr/local/bin/npm
## npmPackages:
 - babel-plugin-styled-components: ^1.8.0 => 1.10.0
 - styled-components: ^4.0.0 => 4.1.3

Reproduction

https://codesandbox.io/s/with-styled-components-v4-roboto-flash-xzv4h https://codesandbox.io/s/with-styled-components-v5-fonts-issue-s6mwz

Steps to reproduce

• See reproductions above. Basically import a css file with font-family rules using createGlobalStyle in a next.js environment.

Expected Behavior

@import statements are placed first or even split out in the SSR output so that font-family definitions load early.

Actual Behavior

@import statements are intermingled in the SSR output, causing flashes in v4 and not loading in v5.

Let me know if there’s anything I can do to help with this. I’d love to open a PR, but I wasn’t even sure where to start looking in the code for what might be causing this.