2.0.0 • Published 3 years ago

@storybook/addon-postcss v2.0.0

Weekly downloads
2,254
License
MIT
Repository
github
Last release
3 years ago

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.

alchera-storybookreactcustomlib-acraalchera-test@pasha28198/molequle-web-commonif-my-storybookflighthub-vue@simuratli/tetetepkg-components-parkingibex-components@everything-registry/sub-chunk-875mdx-componentaranghat-reactcomplibgamari-uitailwind-tales-addonwidgetxrwdp-ui-storybook-componentswebcmp-topo-chart-horizontalwx-uidesigntechco-chat-widgetst_dt_11storeberry-ui-componentsstoreberry-ui-components-betastoreberry-ui-components-test-onestory-components-vpstorybook-design-system-rajamanimarantesting-prtexesvelte-component-library-asimedvapor-test-123cccar-components-uiiwish-cdd-frontendjrs-libjenika-ui-reactjord-inc-storybookjord_global_pickers_newkyc-shipfinex-dev-1@infotition/tsisafwan-ui@bbl-digital/snorre-v2stephanie-storybook-tablrstephanie-storybook-tutorialtruixui-v2@america-transparente/ui@asad1381/custom-components@atelypham/webb-ui-components@adox/adox-design-system@alex9923/react-pdf-table@bandit-network/react-ui-kit@azevedoluis2001/my-first-lib@bricksandbraces/designsystem@cheapreats/react-uiz-meitav-libyash-components@dvdcpp/comp-lib@dvdcpp/testsum@greg1880/react-design-system-teste@greg1990/react-design-system2@hovo2003/design-system@hovo2003/gag@farnabaz/storybook@ef2/content-components-react@ef2/react@emdia-devs/emdia-design-system@emdia/react-design-system@genstackio/react-storybook@gokul1630/react@goodrequest/antd-form-fields@leaseotb/ui-components@magicpay/magicpay-js@magicpay/magicpay-js-public@nemethricsi/reach-ui@edgelogistics/web-ui@imj_media/modulo_tareas@saiefelgebali/react-diagrams@onesme/dxui@openbricksandbraces/designsystem@openbricksandbraces/webcomponents@ostoica/core-ui@palanikannan1437/rc4-ui@palanikannan1437/rc4community-timeline@sentrei/storybook@rockinblocks/rockinblocksmx-ui-componentsmevo-componentsotro-publicadonypr-design-system-vueocto-shiny-storybooknx-react-library-uipartikelpanodra_topologyraulrobi-my-storybook-componentsreact-component-library2121raycris-uirayda-uisample-tablrrejolut-ui-componentsrejo-ui-componentsreact-gallery-maelstromnitpick-uinetwork-backgroundplz-ui-kit
3.0.0-alpha.1

3 years ago

3.0.0-alpha.0

3 years ago

2.0.0

4 years ago

1.0.0

4 years ago