Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@storybook/addon-postcss
Storybook addon used to run the PostCSS preprocessor against your stories.
npm install @storybook/addon-postcss
Last updated about 3 years ago
263.6k
Downloads per week
Readme View on GitHub

🚨 DEPRECATED: This package is unmaintained and deprecated in favor of @storybook/addon-styling-webpack and @storybook/addon-themes

Storybook Addon PostCSS

The Storybook PostCSS addon can be used to run the PostCSS preprocessor against your stories in Storybook.

Getting Started

Install this addon by adding the @storybook/addon-postcss dependency:

yarn add -D @storybook/addon-postcss

within .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-postcss'],
};

and create a PostCSS config in the base of your project, like postcss.config.js, that contains:

module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};

PostCSS 8+

If your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing postcssLoaderOptions to this addon.

First, you'll need to install PostCSS v8 as a dependency of your project:

yarn add -D postcss@^8

Then, you'll need to update your addons config. Within .storybook/main.js:

module.exports = {
  addons: [
-   '@storybook/addon-postcss',
+   {
+     name: '@storybook/addon-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}

When running Storybook, you'll see the version of PostCSS being used in the logs. For example:

info => Using PostCSS preset with postcss@8.2.4

Loader Options

You can specify loader options for style-loader, css-loader, and postcss-loader by passing options to this addon as styleLoaderOptions, cssLoaderOptions, or postcssLoaderOptions respectively.

You can also configure the loader rule by overriding the rule option.

Join the community
6,560 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI