Can `globalTypes` values be read from <head>/<body>? #12091

fgaleano · 2020-08-17T21:02:25Z

fgaleano
Aug 17, 2020

I know environment variables can in fact be read in <head>/<body>, but I'm looking to see if custom globalTypes, like toolbar menu item values, could be read in there too.

The use case I have is a theme switcher that needs to load 2 separate CSS static bundles based on the user's choice. Most ThemeSwitchers I've seen online used CSS-in-JS or Styled Components, that isn't my case. I've been provided with a branded theme and a white label theme as static CSS bundles, so I need to be able to import them conditionally.

I attempted doing this with a custom decorator but the import statements (for each CSS files) are always executed no matter what, which causes both bundles to be included at all times and the last one overrides the first one (if that makes sense).

So, is this possible in the current version? If not, any alternatives? I tried adddon-cssresources but I don't think that's designed to inject 700KB worth of inline CSS.

Thank you!

fgaleano · 2020-08-17T21:12:09Z

fgaleano
Aug 17, 2020
Author

To add a little more context, this is what I tried with the decorator:

addDecorator((story, context) => {
  if(context.globals.themeChoice === 'Brand') {
    return <BrandedWrapper story={story} />
  } else if(context.globals.themeChoice === 'White Label') {
    return <WhiteLabelWrapper story={story} />
  }
});

This works for any markup that I isolate on each wrapper, but the CSS import statements on each are always executed. Which ends up with the White Label bundle being active all the time regardless of which option is selected in the toolbar.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can `globalTypes` values be read from <head>/<body>? #12091

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Can globalTypes values be read from <head>/<body>? #12091

fgaleano Aug 17, 2020

Replies: 1 comment

fgaleano Aug 17, 2020 Author

Can `globalTypes` values be read from <head>/<body>? #12091

fgaleano
Aug 17, 2020

fgaleano
Aug 17, 2020
Author