Storybook CSS Modules preset · 

Storybook preset addon to add _CSS Modules_ capabilities.

Installation

``sh
npm install -D storybook-css-modules
`

Configuration

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

`js
// .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:

`json
{
"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:

`js
// .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)

`js
// 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

export const Default = (args) =>