{"id":15284392,"url":"https://github.com/0xtheprodev/storybook-addon-sass-postcss","last_synced_at":"2026-03-16T17:36:26.841Z","repository":{"id":57371490,"uuid":"428399189","full_name":"0xTheProDev/storybook-addon-sass-postcss","owner":"0xTheProDev","description":"Storybook AddOn that incorporates PostCSS Preprocessor over CSS Modules with Sass support","archived":false,"fork":false,"pushed_at":"2025-04-11T19:14:30.000Z","size":28107,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-12T23:33:55.863Z","etag":null,"topics":["css-modules","postcss","sass","storybook","storybook-addon","webpack"],"latest_commit_sha":null,"homepage":"https://storybook.js.org/addons/storybook-addon-sass-postcss","language":"TypeScript","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/0xTheProDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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":{"github":"Progyan1997"}},"created_at":"2021-11-15T19:41:33.000Z","updated_at":"2025-04-11T05:42:39.000Z","dependencies_parsed_at":"2024-06-18T18:39:13.111Z","dependency_job_id":"b7e2f918-2efe-4b93-8964-c61adc4b120b","html_url":"https://github.com/0xTheProDev/storybook-addon-sass-postcss","commit_stats":null,"previous_names":["progyan1997/storybook-addon-sass-postcss"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fstorybook-addon-sass-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fstorybook-addon-sass-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fstorybook-addon-sass-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fstorybook-addon-sass-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xTheProDev","download_url":"https://codeload.github.com/0xTheProDev/storybook-addon-sass-postcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647259,"owners_count":21139081,"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":["css-modules","postcss","sass","storybook","storybook-addon","webpack"],"created_at":"2024-09-30T14:55:43.294Z","updated_at":"2026-03-16T17:36:26.807Z","avatar_url":"https://github.com/0xTheProDev.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Progyan1997","https://github.com/sponsors/0xTheProDev"],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Sass PostCSS\n\n[![Sponsor](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge\u0026logo=GitHub-Sponsors\u0026logoColor=#white)](https://github.com/sponsors/0xTheProDev)\n[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/addons/storybook-addon-sass-postcss)\n[![Npm Version](https://img.shields.io/npm/v/storybook-addon-sass-postcss?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-sass-postcss)\n[![Weekly Downloads](https://img.shields.io/npm/dw/storybook-addon-sass-postcss?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-sass-postcss)\n[![Minified Zipped Size](https://img.shields.io/bundlephobia/minzip/storybook-addon-sass-postcss?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-sass-postcss)\n[![License](https://img.shields.io/npm/l/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/LICENSE)\n[![Dependencies](https://img.shields.io/librariesio/release/npm/storybook-addon-sass-postcss?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-sass-postcss)\n[![Dependents](https://img.shields.io/librariesio/dependents/npm/storybook-addon-sass-postcss?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-sass-postcss)\n[![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/security)\n[![Open Issues](https://img.shields.io/github/issues-raw/0xTheProDev/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/issues)\n[![Closed Issues](https://img.shields.io/github/issues-closed-raw/0xTheProDev/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/issues?q=is%3Aissue+is%3Aclosed)\n[![Stars](https://img.shields.io/github/stars/0xTheProDev/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/stargazers)\n[![Forks](https://img.shields.io/github/forks/0xTheProDev/storybook-addon-sass-postcss?style=for-the-badge)](https://github.com/0xTheProDev/storybook-addon-sass-postcss/network/members)\n\n## Description\n\nThe Storybook PostCSS addon can be used to run the PostCSS preprocessor with Sass support against your stories in [Storybook](https://storybook.js.org).\n\n\u003e :beginner: **Use of Storybook v8 is strongly suggested with this addon since v0.2; The addon might be compatible with older Storybook versions as well but will no longer be extensively tested against.**\n\n## Getting Started\n\nInstall this addon by adding the `storybook-addon-sass-postcss` dependency:\n\n```sh\nyarn add -D storybook-addon-sass-postcss\n```\n\nThen within `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-sass-postcss'],\n};\n```\n\nAnd create a PostCSS config in the base of your project, like `postcss.config.js`, that contains:\n\n```js\nmodule.exports = {\n  // Add your installed PostCSS plugins here:\n  plugins: [\n    // require('autoprefixer'),\n    // require('postcss-color-rebeccapurple'),\n  ],\n};\n```\n\n## PostCSS 8+\n\nIf your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing `postcssLoaderOptions` to this addon.\n\nFirst, you'll need to install PostCSS v8 as a dependency of your project:\n\n```sh\nyarn add -D postcss@^8\n```\n\nThen, you'll need to update your addons config. Within `.storybook/main.js`:\n\n```diff\nmodule.exports = {\n  addons: [\n-   'storybook-addon-sass-postcss',\n+   {\n+     name: 'storybook-addon-sass-postcss',\n+     options: {\n+       postcssLoaderOptions: {\n+         implementation: require('postcss'),\n+       },\n+     },\n+   },\n  ]\n}\n```\n\nWhen running Storybook, you'll see the version of PostCSS being used in the logs. For example:\n\n```sh\ninfo =\u003e Using PostCSS preset with postcss@8.2.4\n```\n\n## Dart Sass\n\nSimilar to above, you can provide reference to your local Sass transpiler to invoke Dart Sass.\n\nFirst, you'll need to install PostCSS v8 as a dependency of your project:\n\n```sh\nyarn add -D sass\n```\n\nThen, you'll need to update your addons config. Within `.storybook/main.js`:\n\n```diff\nmodule.exports = {\n  addons: [\n-   'storybook-addon-sass-postcss',\n+   {\n+     name: 'storybook-addon-sass-postcss',\n+     options: {\n+       sassLoaderOptions: {\n+         implementation: require('sass'),\n+       },\n+     },\n+   },\n  ]\n}\n```\n\n## Sass Only\n\nBe default, this plugin will try to transform both CSS and SASS modules. You can change this behaviour by passing _optional_ argument `rule`.\n\n```diff\nmodule.exports = {\n  addons: [\n-   'storybook-addon-sass-postcss',\n+   {\n+     name: 'storybook-addon-sass-postcss',\n+     options: {\n+       rule: {\n+         test: /\\.(scss|sass)$/i,\n+       },\n+     },\n+   },\n  ]\n}\n```\n\n### Using with TailwindCSS\n\nBy default, Sass loading is done before PostCSS preprocessing. But this does not work well with TailwindCSS. As it relies on classnames and non-standard behaviours that are only exposed via PostCSS plugin. So to overcome this, Sass must be loaded after preprocessing has been done.\n\n```diff\nmodule.exports = {\n  addons: [\n-   'storybook-addon-sass-postcss',\n+   {\n+     name: 'storybook-addon-sass-postcss',\n+     options: {\n+       loadSassAfterPostCSS: true,\n+     },\n+   },\n  ]\n}\n```\n\n## Loader Options\n\nYou can specify loader options for `style-loader`, `css-loader`, `sass-loader` and `postcss-loader` by passing options to this addon as `styleLoaderOptions`, `cssLoaderOptions`, `sassLoaderOptions` or `postcssLoaderOptions` respectively.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Fstorybook-addon-sass-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xtheprodev%2Fstorybook-addon-sass-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Fstorybook-addon-sass-postcss/lists"}