Storybook: Styled Components not working in a Storybook static build?

[moarwick]

Describe the bug
We have a Storybook 5.3.3 running perfectly fine in dev mode, components utilizing React 16.8.6, Styled Components 4.4 (also tried the new 5.0) and Typescript 3.7 (with ts-loader 6.2.1).

When built for static deployment, things work fine except no styles get injected into the head, so all components are unstyled. Class names are generated fine, and no errors are thrown. Somehow, it appears that SC fails to work within Storybook's iframe?

To run the build, tried deploying to Surge as well as npx http-server .out per docs, same result :(

To Reproduce
Yet to repro using a bare-bones project setup... Just curious if it's a known issue?

Expected behavior
Styles should be present inside iframe head's style tag

Screenshots

System:

  System
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
    Yarn: 1.21.1 - ~/Projects/philo-fe/node_modules/.bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 69.0.3
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: ^5.3.3 => 5.3.3 
    @storybook/addon-actions: ^5.3.3 => 5.3.3 
    @storybook/addon-knobs: ^5.3.3 => 5.3.3 
    @storybook/addon-viewport: ^5.3.3 => 5.3.3 
    @storybook/react: ^5.3.3 => 5.3.3 

[shilman]

No, there are a variety of styled-components issues but this is the first time I'm seeing this.

Storybook's own design system uses styled-components and I've just confirmed that it builds fine with the latest 5.3.x. Maybe take a look at how the project is set up?

https://github.com/storybookjs/design-system

[iansan5653]

I'm seeing the same issue with 5.3.8. Elements have the styled-components class names and they have access to the global theme context, but none of the components are styled in any way. No errors in console or on build.

[iansan5653]

I was able to work around this by disabling "speedy" mode in styled-components by adding the following to my webpack.config.js for Storybook:

const path = require("path");
const webpack = require("webpack");

module.exports = function({config}) {

  config.plugins.push(
    new webpack.DefinePlugin({
      SC_DISABLE_SPEEDY: true
    })
  );

  return config;
};

[KrasserTommy]

I have the same issue, disabling "speedy" fix it.... Can you explain, why? :D

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[handonam]

I also ran into this problem. Had to throw it into my storybook/main.js during the official Design Systems tutorial exercise with CRA when i first noticed the bug on netlify.

const webpack = require("webpack");

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs',
  ],
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(
      // Removing Speedy so the static storybook styling doesn't break
      new webpack.DefinePlugin({
        SC_DISABLE_SPEEDY: true
      })
    );

    return config;
  },
};

Confirmed it also broke locally in my storybook-static/ as well.

For reference, I had "styled-components": "^5.1.0" installed.

Kinda wish there was a disclaimer in that doc to add this. It took me a while to even find this issue through github and google search.

[domyen]

I was unable to reproduce this issue with Storybook Design System or Learn Storybook's sample design system.

SDS uses SB 6.0 beta and styled-components 5.1.1. The build-storybook that was published online here is getting styled OK.

Learn Storybook's sample design system also gets styled OK.

[semcelik]

I was also having same issue. I imported google fonts in createGlobalStyle via @import tag. It was not working at all. After i changed it and loaded it via link tag (in index.html and in .storybook/preview-head.html), my fonts and other styles loaded successfully in storybook-static. I didnt understand the reason behind this, if anyone figured it out please let me know

"@storybook/react": "^6.0.16",
"styled-components": "^5.1.1",

[mskec]

I had the same issue, the reason is a bug with styled-components and using @import in createGlobalStyle.

From v5.0.1 of styled-components:
Recommending against usage of css @import inside createGlobalStyle and what to do instead (#2997)

More info:

• https://styled-components.com/releases#v5.0.1
• https://github.com/styled-components/styled-components/issues/3038
• https://github.com/styled-components/styled-components/issues/2997