Gatsby storybook tutorial does not support CSS modules

Description

Following the visual testing tutorial from gatsbyjs.com ends with a storybook setup that does not support CSS modules.

Here is a button component rendering via gatsby develop

And here is the button rendering in storybook - the styles from the css modules are missing

Steps to reproduce

Here is a minimal repo to reproduce, just run gatsby, and storybook to see the differences.

Expected result

The button is styled green in storybook, with the css module’s styles applied.

Actual result

The component in storybook has no styles - the dom structure looks like this, with no class applied. <div>I should be a green button</div>

Where as the dom structure looks like this when gatsby develop <div class="button-module--button--2z6oN">I should be a green button</div>

Environment

 System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1030NG7 CPU @ 1.10GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 79.0
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.24.50 => 2.24.50

I’d love to help to fix this issue, storybook or any visual testing tool would be so handy to help share a UI library I’m working on with the wider design team. Webpack config and babel is just a topic I know very little on, so not really sure where to start 😦

Cheers

[vicnicius]

I did manage to only update the css-loader rule by doing using this trick:

const ruleCssIndex = config.module.rules.findIndex(rule => rule.test.toString() === '/\\.css$/');
config.module.rules[ruleCssIndex].use.map(item => {
  If (item.loader && item.loader.includes('/css-loader/')) {
    item.options.modules = true;
    item.options.importLoaders = 1;
  }
  return item;
})

I don’t think that’s a proper solution, though.

After that, I had to add all global CSS modules imported by components manually to preview.js, as the updated css-loader rule seems to prevent storybook from importing them automatically. In a sense, this last bit was due to a user error, as we were using .module.css and .css indistinctively, but I’d expect either to work inside storybook just like they do outside. It is hard to follow the whole transformation pipeline, though, so I might be missing something.

[EliotSlevin]

Yeah very fragile - I just replicated this approach onto my existing project, and a storybook update has changed their webpack config to add a bunch more rules, making the css-loader move order. Managed to get it working with this snippet.

    config.module.rules[7].use[1].options = { 
      modules: true,
      importLoaders: 1 
    }

When Storybook uses it’s css loader, it looks like this in the config.

//config.module.rules[7]

  {
    loader: '/Users/eliotslevin/Desktop/marketing-website/node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 1 }
  },

All you need to do to get it to work is change that config to look like this

  {
    loader: '/Users/eliotslevin/Desktop/marketing-website/node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js',
    options: { modules: true, importLoaders: 1 }
  },

Would be good if the code explicitly only updated the css-loader rule, no matter where it was in the order…