Gatsby: [gatsby-plugin-styled-components]: Plugin not working properly with styled components v5 with SSR

Created on 22 May 2020 · 4Comments · Source: gatsbyjs/gatsby

Description

Using the newest version of [email protected] with [email protected] (any 5.x version) renders no CSS created with createGlobalStyles to the <head>. It works only with JavaScript enabled. I upgraded from [email protected] with the same plugin version and it stopped working.

Steps to reproduce

Repository to reproducible demo. Two branches:

styled-components-4.4.1 (working)
styled-components-5.1.0 (not working)

Checkout branches and run yarn build && yarn serve.

More details

I’m using wrapRootElement to add the ThemeProvider, Normalize and my GlobalStyles.

/** gatsby-ssr.js */
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Normalize } from 'styled-normalize';

import { GlobalStyles } from './src/components/layout';
import { lightTheme } from './src/themes';

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={lightTheme}>
    <Normalize />
    <GlobalStyles />
    {element}
  </ThemeProvider>
);

I’m adding some CSS inside the createGlobalStyle method and also additionally load two external CSS Stylesheets at the end. The only CSS appearing in the <head> of the SSR html is the one from the two statically included files. All other styles disappear.

/** global-styles.ts */
import { createGlobalStyle } from 'styled-components';

import { ThemeType, ThemeProps } from '../../typings/theme';
import { lightColors, darkColors } from '../../themes/tokens/colors';

import globalCSS from './styles/global.css';
import highlightCodeLine from './styles/highlight-code-line.css';

export const GlobalStyles = createGlobalStyle<{
  theme: ThemeType & ThemeProps;
}>`
  /* ↓ All these styles disappear */
  .light {
    --colorBackground: ${lightColors.background};
    --colorText: ${lightColors.text};
  }

  .dark {
    --colorBackground: ${darkColors.background};
    --colorText: ${darkColors.text};
  }

  /* ↓ The imported CSS of these files is still there */
  ${globalCSS}
  ${highlightCodeLine}
`;

Expected result

What should happen?

A <style> tag holding all styles of styled-components should be in the <head> after SSR is completed:

<style data-styled="xoFJR bLdpD …" data-styled-version="4.4.1">
/* a lot of CSS styles */
</style>

styled-components-4 4 1

Actual result

<style data-styled data-styled-version="5.1.0">
/* only a fraction of the CSS appears, only the one from static CSS files imported. */
</style>

styled-components-5 1 0

Environment

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
    Yarn: 1.19.0 - ~/.yarn/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v11.12.0/bin/npm
  Languages:
    Python: 3.6.1 - /Users/stefan.imhoff/.pyenv/shims/python
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 72.0.2
    Safari: 13.1
  npmPackages:
    gatsby: ^2.20.29 => 2.20.29 
    gatsby-image: ^2.3.4 => 2.3.4 
    gatsby-plugin-manifest: ^2.3.6 => 2.3.6 
    gatsby-plugin-mdx: ^1.1.10 => 1.1.10 
    gatsby-plugin-offline: ^3.1.4 => 3.1.4 
    gatsby-plugin-react-helmet: ^3.2.4 => 3.2.4 
    gatsby-plugin-sharp: ^2.5.6 => 2.5.6 
    gatsby-plugin-styled-components: ^3.3.2 => 3.3.2 
    gatsby-plugin-typescript: ^2.3.3 => 2.3.3 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-remark-acronyms: ^1.1.0 => 1.1.0 
    gatsby-remark-autolink-headers: ^2.2.3 => 2.2.3 
    gatsby-remark-copy-linked-files: ^2.2.3 => 2.2.3 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.2.5 => 3.2.5 
    gatsby-remark-numbered-footnotes: ^1.0.1 => 1.0.1 
    gatsby-remark-reading-time: ^1.1.0 => 1.1.0 
    gatsby-remark-responsive-iframe: ^2.3.3 => 2.3.3 
    gatsby-remark-smartypants: ^2.2.3 => 2.2.3 
    gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2 
    gatsby-remark-vscode: ^2.0.3 => 2.0.3 
    gatsby-source-filesystem: ^2.2.4 => 2.2.4 
    gatsby-transformer-json: ^2.3.3 => 2.3.3 
    gatsby-transformer-sharp: ^2.4.6 => 2.4.6 
    gatsby-transformer-yaml: ^2.3.3 => 2.3.3 
  npmGlobalPackages:
    gatsby-cli: 2.8.29

styled-components bug

Source

kogakure

👍1

Most helpful comment

FYI -- faced this same issue today, resolved by using wrapPageElement instead of wrapRootElement. Layout-related CSS should go in wrapPageElement, global state-y stuff should go in wrapRootElement. This is inferred based on the example in the docs, so don't take my word for it.

I validated locally with your repo @kogakure

Not sure if this is indeed a bug or expected behavior of the plugin.