How to use css-modules with storybook 6

Question

My css-module is not working with Storybook. There are not any error, it is only not working. I don´t understand what is the problem. This is the image of how storybook is rendering the button:

Button.js file:

import React from "react";
import PropTypes from "prop-types";
import style from "./styles.module.css";

const Button = ({ type, children }) => (
  <button className={style.button}>{children}</button> 
);

Button.propTypes = {
  children: PropTypes.node.isRequired,
  type: PropTypes.string,
};

Button.defaultProps = {
  children: "primary",
  type: "primary",
};

export default Button;

Button.stories.js file:

import React from "react";
import Button from "./Button";

export default {
  component: Button,
  title: "Test/Button",
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: "xx ",
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: "xx ",
  type: "secundary",
};

styles.module.css file:

.button {
  background: yellow;
  border: 1px solid var(--colors-transparent);
}

.test {
  background: red;
  color: var(--colors-white);
}

.type-primary {
  background: red;
  color: var(--colors-white);
}

.type-secundary {
  background: rgb(12, 177, 163);
  color: var(--colors-white);
}

package.json file:

  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "babel-loader": "^8.2.3",
    "classnames": "^2.3.1",
    "react": "^16.14.0",
    "react-scripts": "^4.0.3"
  }

I have tried these other options

<button className={style["button"]}>{children}</button> 

Maybe some idea how to solve it?

Answer 1

@Slava Zoref you can see this video css-modules storybook 6 minute 15:52 into .storybook/main.js you can write this code:

async function supportCssModules(config) {
  // console.log('1=================================')
  // console.log('>>>config', config.module.rules)
  // console.log('1=================================')

  config.module.rules.find(
    (rule) => rule.test.toString() === '/\\.css$/'
  ).exclude = /\.module\.css$/

  config.module.rules.push({
    test: /\.module\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  })

  return config
}

module.exports = {
  stories: [
    '../atomDesign/**/*.stories.@(js|jsx|ts|tsx)',
    // "../ejemplos/**/*.stories.@(js|jsx|ts|tsx)",
    // "../stories/**/*.stories.mdx",
    // "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials', //,'storybook-css-modules-preset',
  ],
  // FIXME: Support CSS Modules for Storybook
  webpackFinal: supportCssModules,
}

Answer 2

Use Storybook preset addon to add CSS Modules capabilities.

Installation

npm install -D storybook-css-modules

Configuration

Next, update .storybook/main.js to the following:

// .storybook/main.js

module.exports = {
  stories: [
    // ...
  ],
  addons: [
    // Other Storybook addons

    "storybook-css-modules", // 👈 The addon registered here
  ],
};

By default this preset configured CSS Modules