Storybook: Importing css with global styles changes the Storybook UI, workaround?

Created on 18 Feb 2019 · 20Comments · Source: storybookjs/storybook

We are using Storybook together with Create-React-App + TypeScript (sample repo: https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo).

Now in our component library we import a regular .css stylesheet with some global styles like h1,h2,h3,h4 etc.

We import it by just doing:
import './styles.css' from our components.

Now when previewing our components in Storybook the Storybook UI will pickup these global styles (for its headers and other parts) which we don't want since it looks messy/wrong.

I can see that each story is loaded into an iframe but the problem is ofc that all .css global styles will affect everything in this iframe since its added to the iframe <head>.

Is there any workaround for this? I've tried reading through all issues I could find but only found solutions like postcss (to add prefixes) and so on. Also read about preview-head.html but didn't help us either.

Are there any plans of having that iframe wrap just around the component and not the entire story? That would be one way I guess of localizing any global changes. Or are there any other workarounds we can use?

Thanks!

inactive question / support ui

Source

johot

Most helpful comment

@omaracrystal @tnatanael - you can import a sass file inside of your config.js and it will apply to all stories:

import '../src/global/_global.scss';

benrobertsonio on 22 Apr 2019

👍34 ❤10 👎8

All 20 comments

I dunno if it's related, but #4945 has similar issues with the iframe retaining styles between switching stories. CSS rules added to an iframe definitely should not affect the containing DOM.

ozzyogkush on 20 Feb 2019

FYI the info addon is being deprecated and moved into an addons panel in v5. That's probably what's picking up the styles and that's exactly why we're deprecating it.

https://github.com/storybooks/storybook/issues/1147

The issue is old, but it's at the top of my queue as soon as Storybook 5 is released in a couple weeks.

shilman on 20 Feb 2019

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] on 13 Mar 2019

Still looking for an answer on how to properly include global sass files into all iFrames (once) within Storybook. Please let me know!

omaracrystal on 31 Mar 2019

👍16

Same here

tnatanael on 1 Apr 2019

@omaracrystal @tnatanael Have you tried the preview-head.html approach?

shilman on 12 Apr 2019

👍1

@omaracrystal @tnatanael - you can import a sass file inside of your config.js and it will apply to all stories:

import '../src/global/_global.scss';

benrobertsonio on 22 Apr 2019

👍34 ❤10 👎8

Unfortunately i moved out from this package for now, tks for the help

tnatanael on 22 Apr 2019

@omaracrystal @tnatanael - you can import a sass file inside of your config.js and it will apply to all stories:
import '../src/global/_global.scss';

It didn't work for me. I had to create a decorator that has to be included with the center decorator.
But this has some issues too since decorators and props do not work together.

// Global Decorator
// todo: centered decorator and this decorator don't work with props ( only - withKnobs works )
// todo: possible alternative: import global styles into each parent story and target storybook IFrame to center contents

const wrap = (templateFn: any, props: any) => (storyFn: any) => {
  const story = storyFn();
  return {
    ...story,
    props: { ...story.props, ...props },
    template: templateFn(story.template)
  };
};
// todo: this decorator needs at least another decorator to work
const storybookTemplateWrapper =  wrap((content: any) =>
  `<spx-storybook-wrapper>${ content }</spx-storybook-wrapper>`, {});


// Implementation example (order matters)
storiesOf(prod, module)
  .addDecorator(
    moduleMetadata({
      declarations: [ StorybookWrapper, HelloWorld ],
      imports: [ CommonModule, MaterialModule, BrowserAnimationsModule ],
    }))
  .addDecorator(storybookTemplateWrapper)
  .addDecorator(withKnobs)
  .add('Hello World - Placeholder',
  () =>  ({
    template: `<spx-hello-world [firstName]="firstName"></spx-hello-world>`,
    props: {
      firstName: text('name', 'Blas')
    }
  }));

omaracrystal on 22 Apr 2019

Looks like we are probably using different frameworks, which would probably account for the difference.

I'm using storybook with React and CSS Modules with SCSS.

In my .storybook/webpack.config.js, I have this:

// Add SCSS Modules support.
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      require.resolve('sass-loader')
    ]
  });

And in .storybook/config.js, the only CSS related line I have is:

import '../src/global/_global.scss';

I would expect the requirements would vary a lot depending on the framework(s) you are using though.

benrobertsonio on 22 Apr 2019

👍1

In my case, I wanted to have support for both, CSS and LESS.
For the CSS I wanted to have support for CSS Modules, but not for LESS in order to not rewrite my Theme classes.

I have this:

module.exports = async ({ config, mode }) => {
  // In order to not override theme styles, we use CSS Modules only for
  // imported CSS and use LESS only because of the theme
  config.module.rules[2].use[1] = {
    loader: 'css-loader',
    options: {
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  }

  config.module.rules.push({
     test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
  })

  return config
}

almeidarruben on 1 May 2019

stale[bot] on 22 May 2019

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!

stale[bot] on 21 Jun 2019

Any recent update on this?

snyderhaus on 30 Mar 2020

👍5

To load global styles for stories without affecting storybook UI I've created file preview.js in .storybook catalog and inside this file just imported CSS file (import 'path-to-file/file-name.css';).

Note: I use React and CRA. For Angular apps additional steps are probably needed.

piotros on 16 Apr 2020

👍4

hey, I have the same issues with global styles being applied to storybook UI elements.
I have a preview.js where I import the styles, but, for example, buttons from the Docs tab are picking up those styles.

I am using @storybook/angular 5.3.18 with angular 9.

dana-c0914 on 7 May 2020

@dana-c0914 canvas components are completely isolated but unfortunately the docs tab specifically is not. if you have a good repro you can share, maybe file a separate issue and we'll see if we can solve it? it's kind of a game of whack-a-mole, but we'll do our best.

shilman on 7 May 2020

Read this solution.
https://github.com/storybookjs/storybook/issues/6364#issuecomment-640092470