Gatsby: Styled Components + Gatsby Offline Plugin + Google Fonts

[rathesDot]

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

[pieh]

Confirmed the bug. Investigating now

[pieh]

~Also note, that even after removing that font import I get similar results, so I don't think it's strictly related to that.~

~It seems like just combination of styled-components/gatsby-plugin-styled-components/gatsby-plugin-offline doesn't mix very well now.~

---edited:
seems like I was wrong here

[pieh]

The global styles created in Layout component doesn't seem to get extracted to css file and is just inline in html files. So offline plugin just doesn't see it

[pieh]

Hmm, seems like I was wrong about this not being related to font import

[pieh]

This might be related to https://github.com/styled-components/styled-components/issues/2920#issuecomment-563082377

[rathesDot]

Thanks, @pieh for looking into this. It indeed looks like a bug with @import in styled-components. I found similar reports here: https://github.com/styled-components/styled-components/issues/2670 (also referenced in the issue you linked to)

As a workaround, I'm going to use the gatsby-plugin-prefetch-google-fonts https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts to load the fonts and then remove them from the global stylesheets.

If you, @pieh, don't want to add anything, this issue can be removed, for now, the debugging of the bug should be investigated in the styled-components project.

[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

[danabrit]

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