Gatsby: styled-components v5 global styles is not inlined

[EugeneDraitsev]

Description

Looks like styled-components v5 global styles injection is not working with gatsby 2.18.12 and gatsby-plugin-styled-components 3.1.17.

I have same gatsby-browser and gatsby-ssr

import React from "react"

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    background: slategray;
  }
`

// eslint-disable-next-line react/prop-types
export const wrapRootElement = ({ element }) => (
  // eslint-disable-next-line react/jsx-filename-extension
  <>
    <GlobalStyle />
    {element}
  </>
)

and simple index.js page

import React from "react"

export default () => <div>Hello world!</div>

index.html After build with styled-components 5.0.0

index.html After build with styled-components 4.4.1

Also I noticed that moving GlobalStyle from gatsby-browser and gatsby-ssr to index page fixes this behavior, but unfortunately it's not fit in my case

Steps to reproduce

1. Follow this instructions https://www.gatsbyjs.org/docs/styled-components/ and move GlobalStyles to gatsby-browser and gatsby-ssr. (or just clone this repo: https://github.com/EugeneDraitsev/gatsby-styled-components-5)
2. Run yarn build
3. Check public/index.html

Repo: https://github.com/EugeneDraitsev/gatsby-styled-components-5
Demo v5: https://priceless-mayer-7a8244.netlify.com/
Demo v4: https://deploy-preview-1--priceless-mayer-7a8244.netlify.com/
(Try to update pages in demos to see the difference)

Expected result

Global styles should be injected

Actual result

Global are not injected

Environment

  System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.1 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 79.0.3945.117
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12 
    gatsby-plugin-styled-components: ^3.1.17 => 3.1.17 

[pieh]

If you change wrapRootElement in both gatsby-ssr and gatsby-browser to wrapPageElement it seems to fix that (to at least unblock you).

I'll try to dig up what changed in styled-components v4 <-> v5 that it stopped working

[pieh]

I suspect that when you use wrapRootElement it position your <GlobalStyles> above <StyleSheetManager> (provided by gatsby-plugin-styled-components) in component tree, and therefore we can't extract it (this seems to change in styled-components as in v4 it was working).

Where did you pick up using wrapRootElement to handle global styles? In our docs we recommend using gatsby-plugin-layout (which under the hood uses wrapPageElement) - https://www.gatsbyjs.org/docs/styled-components/#creating-global-styles

[EugeneDraitsev]

@pieh thanks for quick response! Global styles are injected with wrapPageElement, but looks like styled-components v5 have even more weird issue. So with wrapPageElement I have this style tag:

Looks like it finally should work, but no!:

v5:

v4:

If I remove data-styled and data-styled-version attribute, then it works without blinking.
I'll try to use gatsby-plugin-layout a bit later

[pieh]

Interesting. I can't seem to reproduce the flashing part with v5 and using wrapPageElement. I do get exactly same html output (with "empty" data-styled attribute and "styles" for data-styled.g1[id="sc-global-fYJafS1"]

If you are using wraPageElement there shouldn't be any difference with gatsby-plugin-layout (that's just convenience wrapper around that API to not have to use both gatsby-ssr and gatsby-browser)

[pieh]

This is very unlikely, but: what are you using to serve your files? The 5000 port would suggest not using gatsby serve micro server (or maybe using it with explicit port flag). Maybe server thinks you have to html request cached and using that? (probably not the case, but I'm bit out of ideas why I don't see this flashing)

[EugeneDraitsev]

I use https://www.npmjs.com/package/serve to serve build locally and looks like it can be a reason of blinking. I deployed wrapPageElement version to Netlify and it works fine:

Demo v5 wrapPageElement : https://5e1e06113026ba00082b4e11--priceless-mayer-7a8244.netlify.com/

So look like it doesn't work only with wrapRootElement and sometimes with serve)

Edit: I've cleaned caches, retested it with serve and now it stable works without blinking. It 99% was caching issue, so only wrapRootElement issue is relevant.

[pieh]

I feel like issue is resolved at this point, documentation points to using wrapPageElement (indirectly) for this case, so there are no action items we can generate from this?

Shall we close this?

[EugeneDraitsev]

Ok, I don't have any problems with wrapPageElement, let's close it

[jamesgrubb]

Changing to wrapPageElement fixed the issue for me

[senorgeno]

Hey, @pieh I have a large gatsby site I am in the process of upgrading to styled-components v5. I too am having this issue, however, when I change to wrapPageElement from wrapRootElement I still get the same problem in the original issue.

Any other suggestions? Could it be another gatsby plugin using wrapRootElement affecting things?

[Kallirroi]

I'm also running into this issue when using gatsby-plugin-breakpoints. It materializes as a momentary flicker of CSS that should apply to mobile, while I am on desktop. It lasts around a second and then goes away.

I am using Apollo which I suspect might be introducing complexities in how gatsby-ssr and gatsby-browser talk to each other.

Here is what I have:

apollo/wrap-page-element.js

import React from 'react';
import { ApolloProvider, ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import fetch from "isomorphic-fetch"

const httpLink = createHttpLink({
    uri: process.env.NODE_ENV === `development`
        ? `http://localhost:8888/test/graphql`
        : `https://importiv.wordsinspace.net/graphql`
});

const client = new ApolloClient({
    fetch,
    link: httpLink,
    cache: new InMemoryCache(),
});

export const wrapPageElement = ({ element }) => (
  <ApolloProvider client={client}>{element}</ApolloProvider>
);

gatsby-ssr.js
export { wrapPageElement } from './src/apollo/wrap-page-element';

gatsby-browser.js
export { wrapPageElement } from './src/apollo/wrap-page-element';

The above setup is the 'default' gatsby-Apollo setup, as far as I understand.

Any tips would be helpful!

[edoardolunardi]

I would reopen this, since I have the same problem that leads to a content blink in production mode.
Changing to wrapPageElement doesn't solve for me.

The weird thing is that if I inspect the page source, the style tags is correctly filled. I guess something is happening on client and the style tag gets empty.

In gatsby-config.js

    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        pure: true,
        displayName: process.env.NODE_ENV !== "production",
      },
    },

Ingatsby-browser.js

import React from "react"
import GlobalStyles from "./src/styles/Global"
import Theme from "./src/components/theme"

export const wrapPageElement = ({ element }) => (
  <>
    <Theme>
      <GlobalStyles />
      {element}
    </Theme>
  </>

In gatsby-ssr.js

export { wrapPageElement } from "./gatsby-browser"

With

"babel-plugin-styled-components": "^1.11.1"
"gatsby-plugin-styled-components": "^3.3.10",
"styled-components": "^5.1.1",

FYI Theme is just

import React from "react"
import { ThemeProvider } from "styled-components"

const theme = {
  something: "cool"
}

const Theme = ({ children }) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
)

export default Theme

EDIT: even more weird - style tag is still empty, but in Firefox (on Mac) I can't see the content blink. I can only see it in Chrome and Safari 🧐

EDIT2: I deployed to Netlify and solved the blink with gatsby-plugin-netlify, so I guess it was a caching issue? I still see it if I build and serve on local and the style tag is still empty tho