Styled Components + Gatsby Offline Plugin + Google Fonts

Summary

So I have been working on refactoring my TailwindCSS/PostCSS based website to use Styled Components and I came across something strange that I don’t really know how to handle.

In https://github.com/rathesDot/rathes.me/pull/238 I have been implementing the last steps to remove PostCSS/Tailwind and therefore added a Global stylesheet for styled-components.

This also includes importing google fonts by adding

@import url("https://fonts.googleapis.com/css?family=Lato:400,600&display=swap");

to the createGlobalStyle

This, however, clashes with the Offline plugin, the cached styles.js is empty. My assumption is because it caches the file before the response from the google fonts is returned (just a guess) but if I remove the line of code, it seems to work fine.

Relevant information

This issue only occurs on production builds, not on local builds. So gatsby develop works fine while gatsby build && gatsby serve looses all CSS

Environment (if relevant)

System:
    OS: Linux 4.4 Ubuntu 16.04.3 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700T CPU @ 2.80GHz
    Shell: 5.1.1 - /usr/bin/zsh
  Binaries:
    Node: 13.5.0 - /usr/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: ^2.18.21 => 2.18.21
    gatsby-image: ^2.2.37 => 2.2.37
    gatsby-plugin-google-gtag: ^1.1.19 => 1.1.19
    gatsby-plugin-manifest: ^2.2.34 => 2.2.34
    gatsby-plugin-mdx: ^1.0.67 => 1.0.67
    gatsby-plugin-offline: ^3.0.30 => 3.0.30
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
    gatsby-plugin-sharp: ^2.3.10 => 2.3.10
    gatsby-plugin-sitemap: ^2.2.24 => 2.2.24
    gatsby-plugin-styled-components: ^3.1.18 => 3.1.18
    gatsby-plugin-twitter: ^2.1.17 => 2.1.17
    gatsby-remark-images: ^3.1.42 => 3.1.42
    gatsby-remark-prismjs: ^3.3.29 => 3.3.29
    gatsby-source-filesystem: ^2.1.43 => 2.1.43
    gatsby-transformer-remark: ^2.6.45 => 2.6.45
    gatsby-transformer-sharp: ^2.3.9 => 2.3.9

[danabrit]

Closing this issue as the problem is upstream from this repository.

[pieh]

Not much more to add here really: I just tracked it to pretty much confirm that is styled-components issue (at least for production builds)

Just some details I produced in production builds for actual rules that get injected (because they don’t really show in dev tools easily)

With @import:

Without @import:

So there are a lot more rules injected if @import is not used