Storybook preset addon to add CSS Modules capabilities.

npm install -D storybook-css-modules

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 with this options:

{ "importLoaders": 1, "modules": { "localIdentName": "[path][name]__[local]--[hash:base64:5]" } }

If you need specific different options, override this in .storybook/main.js using cssModulesLoaderOptions, example:

// .storybook/main.js const { getLocalIdentName } = require("css-loader-shorter-classnames"); const getLocalIdent = getLocalIdentName(); module.exports = { stories: [ // ... ], addons: [ // Other Storybook addons { name: "storybook-css-modules", options: { cssModulesLoaderOptions: { importLoaders: 1, modules: { getLocalIdent, }, }, }, }, ], };

This Storybook addon automatically imports all .modules.css files as CSS Modules using the specified options.

(Code for ReactJs, find your framework in examples)

// Button.stories.jsx import React from "react"; import Button from "./Button.jsx" import styles from "./Button.modules.css" export default { title: "Button", component: Button, }; const Template = (args) => <Button {...args}>Button</Button> export const Default = (args) => <Template {...args} />; // Story using CSS Modules export const WithCSSModules = () => ( <Template {...args} className={styles.Button} // 👈  /> );

/* Button.module.css */ .Button { background: #000; color: #fff; border: 1px solid #000; height: 36px; padding: 5px 10px; }

• React
• Preact
• Vue 3

Storybook CSS Modules preset is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.

Please refer to our Contribution Guidelines and Code of Conduct.

Storybook CSS Modules preset is licensed under the MIT license — see the LICENSE file for details.

Initially created by onWidget and maintained by a community of contributors.