styled-components v5 global styles is not inlined

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

[jamesgrubb]

Changing to wrapPageElement fixed the issue for me