{"id":14990681,"url":"https://github.com/onwidget/storybook-css-modules","last_synced_at":"2025-12-30T04:07:17.735Z","repository":{"id":237571697,"uuid":"493482853","full_name":"onwidget/storybook-css-modules","owner":"onwidget","description":"Storybook preset addon to add CSS Modules capabilities","archived":false,"fork":false,"pushed_at":"2022-12-02T17:36:06.000Z","size":150,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T02:37:53.513Z","etag":null,"topics":["addon","css","css-loader","css-modules","javascript","preset","react","storybook","storybook-addons"],"latest_commit_sha":null,"homepage":"https://storybook.js.org/addons/storybook-css-modules","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onwidget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/onwidget"]}},"created_at":"2022-05-18T02:35:08.000Z","updated_at":"2024-04-15T11:55:59.000Z","dependencies_parsed_at":"2024-05-02T16:26:49.513Z","dependency_job_id":"e6582d6a-426d-48c9-8d5e-b48d8f465591","html_url":"https://github.com/onwidget/storybook-css-modules","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.3125,"last_synced_commit":"8a2fe8320dcbf1468bb53a6fc52372ca35d12098"},"previous_names":["onwidget/storybook-css-modules"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onwidget%2Fstorybook-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onwidget","download_url":"https://codeload.github.com/onwidget/storybook-css-modules/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507101,"owners_count":21115537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","css","css-loader","css-modules","javascript","preset","react","storybook","storybook-addons"],"created_at":"2024-09-24T14:20:35.052Z","updated_at":"2025-04-12T02:38:13.327Z","avatar_url":"https://github.com/onwidget.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/onwidget"],"categories":[],"sub_categories":[],"readme":"# Storybook CSS Modules preset \u0026middot; [![npm package](https://img.shields.io/npm/v/storybook-css-modules?color=green\u0026label=npm\u0026style=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)\n\nStorybook preset addon to add _CSS Modules_ capabilities.\n\n\u003cbr /\u003e\n\n## Installation\n\n```sh\nnpm install -D storybook-css-modules\n```\n\n\u003cbr /\u003e\n\n## Configuration\n\nNext, update `.storybook/main.js` to the following:\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n  stories: [\n    // ...\n  ],\n  addons: [\n    // Other Storybook addons\n\n    \"storybook-css-modules\", // 👈 The addon registered here\n  ],\n};\n```\n\nBy default this preset configured _CSS Modules_ with this options:\n\n```json\n{\n  \"importLoaders\": 1,\n  \"modules\": {\n    \"localIdentName\": \"[path][name]__[local]--[hash:base64:5]\"\n  }\n}\n```\n\nIf you need specific different options, override this in `.storybook/main.js` using _cssModulesLoaderOptions_, example:\n\n```js\n// .storybook/main.js\n\nconst { getLocalIdentName } = require(\"css-loader-shorter-classnames\");\nconst getLocalIdent = getLocalIdentName();\n\nmodule.exports = {\n  stories: [\n    // ...\n  ],\n  addons: [\n    // Other Storybook addons\n\n    {\n      name: \"storybook-css-modules\",\n      options: {\n        cssModulesLoaderOptions: {\n          importLoaders: 1,\n          modules: {\n            getLocalIdent,\n          },\n        },\n      },\n    },\n  ],\n};\n```\n\n\u003cbr /\u003e\n\n## Usage\n\nThis Storybook addon automatically imports all *.modules.css* files as CSS Modules using the specified options. \n\n(Code for ReactJs, find your framework in [examples](#examples))\n\n\u003cbr /\u003e\n\n```js\n// Button.stories.jsx\n\nimport React from \"react\";\nimport Button from \"./Button.jsx\"\nimport styles from \"./Button.modules.css\"\n\nexport default {\n  title: \"Button\",\n  component: Button,\n};\n\nconst Template = (args) =\u003e \u003cButton {...args}\u003eButton\u003c/Button\u003e\n\nexport const Default = (args) =\u003e \u003cTemplate {...args} /\u003e;\n\n// Story using CSS Modules\nexport const WithCSSModules = () =\u003e (\n  \u003cTemplate \n    {...args}\n    className={styles.Button}  // 👈 \n  /\u003e\n);\n\n```\n\n\n```css\n/* Button.module.css */\n\n.Button {\n  background: #000;\n  color: #fff;\n  border: 1px solid #000;\n  height: 36px;\n  padding: 5px 10px;\n}\n```\n\n\u003cbr /\u003e\n\n## Examples\n\n- [React](https://github.com/onwidget/storybook-css-modules/tree/main/examples/react)\n- [Preact](https://github.com/onwidget/storybook-css-modules/tree/main/examples/preact)\n- [Vue 3](https://github.com/onwidget/storybook-css-modules/tree/main/examples/vue3)\n\n\u003cbr /\u003e\n\n## Contributing\n\nStorybook 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.\n\nPlease 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).\n\n## License\n\nStorybook 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.\n\n## Acknowledgements\n\nInitially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/storybook-css-modules/graphs/contributors).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonwidget%2Fstorybook-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonwidget%2Fstorybook-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonwidget%2Fstorybook-css-modules/lists"}