Storybook CSS Modules preset · 
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 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,
},
},
},
},
],
};
Usage
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;
}
Examples
Contributing
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.
License
Storybook CSS Modules preset is licensed under the MIT license — see the LICENSE file for details.
Acknowledgements
Initially created by onWidget and maintained by a community of contributors.
