Gatsby: Styled-components global style is not inlined

[alexandernanberg]

Description

Styled-components global style (injectGlobal) is not inlined in the html in the production build if it's used in gatsby-browser.js or html.js.

Steps to reproduce

// gatsby-browser.js
const injectMyGlobalStyle = require('./style/myGlobalStyle'); // basically just injectGlobal`some style`

injectMyGlobalStyle()

Expected result

That the global style should be inlined in the HTML when running gatsby build.

Actual result

The style is loaded but you get a FOUC. My current workaround is to inject the style in my Layout component instead, but from what I understand this is not the correct way to do it anymore?

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-beta.17 => 2.0.0-beta.110 
    gatsby-plugin-google-analytics: ^2.0.0-beta.2 => 2.0.0-beta.5 
    gatsby-plugin-manifest: ^2.0.2-beta.2 => 2.0.2-beta.6 
    gatsby-plugin-netlify: ^2.0.0-beta.3 => 2.0.0-beta.6 
    gatsby-plugin-offline: ^2.0.0-beta.2 => 2.0.0-beta.9 
    gatsby-plugin-react-helmet: ^3.0.0-beta.3 => 3.0.0-beta.4 
    gatsby-plugin-sitemap: ^2.0.0-beta.3 => 2.0.0-beta.4 
    gatsby-plugin-styled-components: ^3.0.0-beta.2 => 3.0.0-beta.4 

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pieh]

I might have break this recently. Will have a look

[alexandernanberg]

I'm not sure if this have ever worked in v2 though, just recently tried moving the injectGlobal to the gatsby-browser.js file and noticed this

[pieh]

Oh, that's kinda good news for me that I didnt break it then ;) Will need to research styled-components and how they recommend to do this and then apply it to gatsby then

[Manoz]

They usually recommande to add your injectGlobal at the root of your main component (mostly app.js or index.js, the one that render your app).

With Gatsby I like to have this in a file called GlobalStyles.js and import it inside my Layout component.
For me, everything that needs to be rendered should stay in my ./src folder (mostly all the front-end stuff) while the more « back-end » stuff will be in my ./gatsby-*.js

This is a personal thing tho

[KyleAMathews]

We might have misfired suggesting putting global styles in gatsby-browser.js as this doesn't work for css-in-js as gatsby-browser.js isn't included when server rendering which means styles there aren't extracted and inlined in the generated html files.

It does work to include css as those are extracted when building the js but not for css-in-js.

Including styles in a layout component or a global-styles.js is your best bet generally for css-in-js.

[alexandernanberg]

Oh that makes sense I guess, we might wanna reflect this in the docs also (if it’s not already included). Should I close this or do we want to keep this open?

[Manoz]

@alexandernanberg I created a new issue (#7447) to improve the documentation. Thank you :)