How are CSS Modules imported as ES Modules?

[tibbes]

Question

In the v2 to v3 migration guide it says to update lines that import CSS modules from something like:

import styles from "./widget.module.scss";

to:

import {box} from "./widget.module.scss";

Or (less desirable because tree-shaking won't be as good):

import * as styles from "./widget.modules.scss";

My question is: please can you point me to the change in Gatsby that caused this?

Why do I want to know?

I have a repository set up with Gatsby, but also Storybook (in order to test the components that are used in the Gatsby site). Currently, I have an annoying situation where Gatsby will only work if I do

import * as styles from "./widget.modules.scss";

and Storybook will only work if I do

import styles from "./widget.module.scss";

I'm hoping to learn what the change was in Gatsby, so that I can replicate it in my Storybook config.

[LekoArts]

We've set the option namedExport to true (https://github.com/webpack-contrib/mini-css-extract-plugin#namedexport) and esModule is true by default (https://github.com/webpack-contrib/mini-css-extract-plugin#esmodule).

The PR itself is here: #29145 -- relevant bit:

remove style-loader and move to minicssextract plugin to handle both prod & dev

[tibbes]

Thanks very much @LekoArts, that was just what I needed to know!

More description of problem and solution

So that other people can find this discussion via Google, if they are having the same problem, what I was trying to do is get css-loader (and sass-loader) working with both Storybook and Gatsby in the same repository.

When I used this syntax:

import * as styles from "./mycomponent.modules.scss";

The error message I was getting from Storybook was:

WARNING in ./src/components/mycomponent.tsx 22:42-60
"export 'mycssclass' (imported as 'styles') was not found in './mycomponent.module.scss'

At the time of writing this comment, Storybook uses webpack 4, and trying to use mini-css-extract-plugin with Storybook did not work (I believe because mini-css-extract-plugin doesn't work right when you have mixed webpack versions). It gave the error:

TypeError: The 'compilation' argument must be an instance of Compilation

However, the namedExport option that @LekoArts mentioned above is also available in style-loader (and css-loader), so I could stick with using style-loader with Storybook.

The configuration I ended up with (in .storybook/webpack.config.js, although I think the new way of doing this is to use .storybook/main.js) is:

  config.module.rules.push({
    test: /\.scss$/,
    loaders: [
      {
        loader: require.resolve('style-loader'),
        options: {
          esModule: true,
          modules: {
            namedExport: true
          }
        }
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          esModule: true,
          modules: {
            namedExport: true
          }
        },
      },
      require.resolve('sass-loader')
    ]
  });

That causes the Storybook behaviour to match the Gatsby behaviour, so the two can live happily together.

[chris-erickson]

We still see this even with that bit added - is there a more comprehensive guide to getting this working again? Seems like few support tools around Gatsby just work once moving to V3 (storybook, Jest, mini-css-extract-plugin warnings silencer). ☹️

[michaelbrewer]

Seems like a very premature choice from Gatsby with no clear upgrade paths.

[mosesoak]

Another broken thing is trying to use CSS Modules with Typescript, two things Gatsby supports - just not together (although no mention of incompatibility in the docs). I posted a discussion on it here #31662

[michaelbrewer]

I have no clue how to import CSS variables, which was working before?