Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 months 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 (about 2 years ago)
- Last Synced: 2024-10-01T03:08:07.502Z (3 months 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.jsmodule.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.jsconst { 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.jsximport 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).