https://github.com/onwidget/storybook-css-modules

Storybook preset addon to add CSS Modules capabilities
https://github.com/onwidget/storybook-css-modules

addon css css-loader css-modules javascript preset react storybook storybook-addons

Last synced: 1 day ago
JSON representation

Storybook preset addon to add CSS Modules capabilities

• Host: GitHub
• URL: https://github.com/onwidget/storybook-css-modules
• Owner: onwidget
• License: mit
• Created: 2022-05-18T02:35:08.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-02T17:36:06.000Z (almost 2 years ago)
• Last Synced: 2024-09-21T03:31:01.366Z (5 days ago)
• Topics: addon, css, css-loader, css-modules, javascript, preset, react, storybook, storybook-addons
• Language: JavaScript
• Homepage: https://storybook.js.org/addons/storybook-css-modules
• Size: 146 KB
• Stars: 14
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook CSS Modules preset · [![npm package](https://img.shields.io/npm/v/storybook-css-modules?color=green&label=npm&style=flat-square)](https://www.npmjs.com/package/storybook-css-modules) [![npm downloads](https://img.shields.io/npm/dw/storybook-css-modules.svg?style=flat-square)](https://storybook.js.org/addons/storybook-css-modules)

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](#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) => ;

// Story using CSS Modules

export const WithCSSModules = () => (

  

);

```

```css

/* Button.module.css */

.Button {

  background: #000;

  color: #fff;

  border: 1px solid #000;

  height: 36px;

  padding: 5px 10px;

}

```




## Examples

- [React](https://github.com/onwidget/storybook-css-modules/tree/main/examples/react)

- [Preact](https://github.com/onwidget/storybook-css-modules/tree/main/examples/preact)

- [Vue 3](https://github.com/onwidget/storybook-css-modules/tree/main/examples/vue3)




## 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](https://github.com/onwidget/storybook-css-modules/blob/main/CONTRIBUTING.md) and [Code of Conduct](https://github.com/onwidget/storybook-css-modules/blob/main/CODE_OF_CONDUCT.md).

## License

Storybook CSS Modules preset is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/storybook-css-modules/blob/main/LICENSE) file for details.

## Acknowledgements

Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/storybook-css-modules/graphs/contributors).