How to use css-modules with storybook 6 - storybook

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