Google Mobile-Friendly Test Failing for Gatsby with no CSS via styled-components

I am using Gatsby + styled-components for my new VSCode course site. Everything looks fine on Desktop/Mobile but Google Mobile-Friendly test is failing miserably. Which is costing me SEO and more.

I am out of options, searched about it and didn’t find anything. I think I added the webfontloader plugin since then I started having this issue. But not sure. I’ve since removed it. Any help would be appreciated.

This is what I see on Google’s Mobile-friendly test.

Steps to reproduce

Here’s the HTML in case you need it to test. I opened this HTML up and yes, there is actually no CSS to be found. Click this raw file, it’s huge so not adding it here.

Expected result

CSS should be loaded by Google Mobile-Friendly test it is not at the moment. I am out of options so creating this issue to get some pointers on what to do. This is what the site should look like.

Actual result

CSS is not loaded 😦

Even if I try loading this HTML that I got from Google Mobile-friendly test, this is exactly what I see. No CSS.

Environment

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.asdf/shims/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.asdf/shims/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 57.0.1
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.44 => 2.0.44
    gatsby-cli: ^2.4.6 => 2.4.6
    gatsby-image: ^2.0.20 => 2.0.20
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7
    gatsby-plugin-manifest: ^2.0.8 => 2.0.8
    gatsby-plugin-offline: ^2.0.13 => 2.0.13
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^2.0.12 => 2.0.12
    gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.8 => 2.0.8
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8
  npmGlobalPackages:
    gatsby-cli: 2.4.3

Looking forward, peace! ✌️

[mxstbr]

I’m really not sure—that sounds like an issue with the Gatsby plugin!

[rohanbhangui]

I wanted to follow this up, because I think its important to understand what is important in the google crawler. It does not matter that the page is styled correctly, but that the content appears and is parsable. With that said a work around would be to allow for a small css file to be crawlable by google (via a robots.txt) + include a small css file that will quickly load at run time and then is overridden by styled component styles.