storybook-css-modules

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

• React
• Preact
• Vue 3

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.