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

johot · 2019-02-18T14:15:13Z

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!

The text was updated successfully, but these errors were encountered:

ozzyogkush · 2019-02-19T23:11:26Z

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.

shilman · 2019-02-20T02:55:59Z

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.

#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.

stale · 2019-03-13T03:43:36Z

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!

omaracrystal · 2019-03-31T01:04:31Z

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

tnatanael · 2019-04-01T13:19:24Z

Same here

shilman · 2019-04-12T04:35:48Z

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

benrobertsonio · 2019-04-22T15:04:15Z

@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';

tnatanael · 2019-04-22T17:17:50Z

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

omaracrystal · 2019-04-22T18:10:15Z

@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')
    }
  }));

benrobertsonio · 2019-04-22T21:52:30Z

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.

almeidarruben · 2019-05-01T08:02:34Z

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
}

stale · 2019-05-22T08:42:22Z

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 · 2019-06-21T09:38:20Z

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!

snyderhaus · 2020-03-30T18:12:46Z

Any recent update on this?

piotros · 2020-04-16T13:10:17Z

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.

dana-c0914 · 2020-05-07T10:59:01Z

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.

shilman · 2020-05-07T18:44:52Z

@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.

nirus · 2020-06-06T17:52:28Z

Read this solution.
#6364 (comment)

od-nikola-mitic · 2020-08-14T14:21:06Z

@nirus This work BUT my chrome dev tool it really slow. Anyone have the same issue?

nirus · 2020-08-16T19:23:00Z

@od-nikola-mitic are you using TypeScript?

TDMarko · 2022-02-02T11:18:28Z

Any updates on this? We have few project with different :root styles, and they've all persisted in the story that should not have them.

shilman added question / support ui labels Feb 20, 2019

stale bot added the inactive label Mar 13, 2019

stale bot removed the inactive label Mar 31, 2019

stale bot added the inactive label May 22, 2019

stale bot closed this as completed Jun 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

johot commented Feb 18, 2019 •

edited

Loading

ozzyogkush commented Feb 19, 2019

shilman commented Feb 20, 2019

stale bot commented Mar 13, 2019

omaracrystal commented Mar 31, 2019 •

edited

Loading

tnatanael commented Apr 1, 2019

shilman commented Apr 12, 2019

benrobertsonio commented Apr 22, 2019

tnatanael commented Apr 22, 2019

omaracrystal commented Apr 22, 2019

benrobertsonio commented Apr 22, 2019

almeidarruben commented May 1, 2019 •

edited

Loading

stale bot commented May 22, 2019

stale bot commented Jun 21, 2019

snyderhaus commented Mar 30, 2020

piotros commented Apr 16, 2020 •

edited

Loading

dana-c0914 commented May 7, 2020 •

edited

Loading

shilman commented May 7, 2020

nirus commented Jun 6, 2020

od-nikola-mitic commented Aug 14, 2020

nirus commented Aug 16, 2020

TDMarko commented Feb 2, 2022

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

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

Comments

johot commented Feb 18, 2019 • edited Loading

ozzyogkush commented Feb 19, 2019

shilman commented Feb 20, 2019

stale bot commented Mar 13, 2019

omaracrystal commented Mar 31, 2019 • edited Loading

tnatanael commented Apr 1, 2019

shilman commented Apr 12, 2019

benrobertsonio commented Apr 22, 2019

tnatanael commented Apr 22, 2019

omaracrystal commented Apr 22, 2019

benrobertsonio commented Apr 22, 2019

almeidarruben commented May 1, 2019 • edited Loading

stale bot commented May 22, 2019

stale bot commented Jun 21, 2019

snyderhaus commented Mar 30, 2020

piotros commented Apr 16, 2020 • edited Loading

dana-c0914 commented May 7, 2020 • edited Loading

shilman commented May 7, 2020

nirus commented Jun 6, 2020

od-nikola-mitic commented Aug 14, 2020

nirus commented Aug 16, 2020

TDMarko commented Feb 2, 2022

johot commented Feb 18, 2019 •

edited

Loading

omaracrystal commented Mar 31, 2019 •

edited

Loading

almeidarruben commented May 1, 2019 •

edited

Loading

piotros commented Apr 16, 2020 •

edited

Loading

dana-c0914 commented May 7, 2020 •

edited

Loading