Does not work with .stories.mdx files

[goldst]

First of all, thank you very much for this great addon!

When using the theme switcher with *.stories.mdx files, the same problem occurs that was recently reported and solved for the docs page:

The CSS is not applied unless switching to a non-mdx component and then back to the mdx page.

I created an example repo with this bug at https://github.com/goldst/storybug-addon-css-variables-theme, you can try it at https://goldst.dev/storybug-addon-css-variables-theme. The color is not applied to the Introduction page and works for the button. After going back to the introduction, it starts working.

To reproduce: install using npx create-react-app and npx storybook init -N, then go through the steps of the addon's readme and add a CSS class to a tag in the Introduction.stories.mdx file.

If there's any way to avoid or fix this behavior, please let me know. Thank you!

[gavmck]

Interesting! Thanks for the perfect :100: bug report. I'll take a look ASAP.

[goldst]

Hey @gavmck, I had a look at this again, here is what I found:

It seems like storybook doesn't apply decorators to mdx files, only to stories embedded in mdx files using <Story> (Which is what the docs pages do internally). Apparently, it is sufficient to run the decorator of this addon only once, which is why it works after going to a regular story and then going back. The method described in the documentation to apply decorators to the whole mdx file seems to only work when the file contains <Story>s again. So I would say this is a bug in storybook itself. If You can confirm this, You or I can create an issue at the storybook repo.

If anyone else has the same problem: here's a workaround that adds the decorator to all mdx files: In .storybook/preview.js, add the following lines of code:

import { DocsContainer } from '@storybook/addon-docs/blocks';

...

export const parameters = {
  ...,

  docs: {
    container: ({ children, context }) => {
      let newContext;
      cssVariablesTheme(c => newContext = c, context);

      return (
        <DocsContainer context={newContext}>
            {children}
        </DocsContainer>
      );
    },
  }
}

[DanWebb]

I’ve started seeing something similar when inline stories is set to false on the docs tab 😕

Seems like handleStyleSwitch never gets called

[gavmck]

I'm getting this in .mdx stories in Mayflower. Better have a proper peek soon!

[neutraltone]

I have also ran into this issue with .stories.mdx files in the version 7.4.6 of Storybook. I tried the above suggestion but I seem to be running into the following exception:

Cannot destructure property 'files' of 'parameters' as it is undefined.
TypeError: Cannot destructure property 'files' of 'parameters' as it is undefined.
    at wrapper (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:426:7)
    at http://localhost:50554/sb-preview/runtime.js:111:3447
    at http://localhost:50554/sb-preview/runtime.js:111:3560
    at container (http://localhost:50554/main.iframe.bundle.js:166:96)
    at renderWithHooks (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:74923:18)
    at mountIndeterminateComponent (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:78687:13)
    at beginWork (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:80200:16)
    at beginWork$1 (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:86039:14)
    at performUnitOfWork (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:85173:12)
    at workLoopSync (http://localhost:50554/vendors-node_modules_etchteam_storybook-addon-css-variables-theme_dist_index_js-node_modules_-f32372.iframe.bundle.js:85079:5)

My preview.js file:

import { DocsContainer } from '@storybook/addon-docs/blocks';
import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

import main from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/main.css'
import secondary from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/secondary.css'
import dark from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/dark.css'

import './index.css'

export const parameters = {
  layout: 'centered',
  options: {
    storySort: {
      order: ['Get Started', 'Styles', 'Layout', 'Content', 'Forms', 'Components']
    }
  },
  cssVariables: {
    files: {
      Main: main,
      Secondary: secondary,
      Dark: dark
    },
    defaultTheme: 'Main'
  },
  docs: {
    container: ({ children, context }) => {
      let newContext;
      cssVariablesTheme(c => newContext = c, context);

      return (
        <DocsContainer context={newContext}>
          {children}
        </DocsContainer>
      );
    },
  }
}

export const decorators = [cssVariablesTheme]

Has anyone else had success with this particular work around while a fix is pending?

[DanWebb]

A use in mdx section in the readme explains the cause of this issue and the suggested fix.