postcss config for storybook

.storybook

- webpack.config.js
- postcss.config.js
- config.js
- addons.js

config.js

import { configure } from '@storybook/react'

import '../src/styles/main.css'

const req = require.context('../stories', true, /.stories.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

postcss.config.js

module.exports = {
  plugins: {
    // PostCSS Preset Env includes autoprefixer and browsers option will be passed to it automatically.
    'postcss-preset-env': {
      stage: 0,
      browsers: 'last 2 versions'
      // importFrom: 'path/to/file.css'
    },
    'postcss-import': {},
    'postcss-nested': {}
  }
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: './.storybook/'
              }
            }
          }
        ]
      }
    ]
  }
}

Tried this but it's not working...

I get

ERROR in ./src/index.css (./node_modules/react-scripts/node_modules/css-loader??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader??ref--13-0!./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??ref--13-2!./src/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--13-1!../node_modules/postcss-loader/src/index.js??ref--13-2!./index.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

Notes for anyone who stumbles on this gist and fails to get it working like me.
I ended up getting it to work, after tweaking the webpack.config.js file to look something like this:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // Loader for webpack to process CSS with PostCSS
          {
            loader: 'postcss-loader',
            options: {
              /* 
                Enable Source Maps
               */
              sourceMap: true,
              /*
                Set postcss.config.js config path && ctx 
               */
              config: {
                path: './.storybook/',
              },
            },
          },
        ],

        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

I had to delete the first two loaders "style-loader" and "css-loader" and only extend to add "postcss-loader".

Reference from storybook documentation on extending webpack

PS: I'm using storybook version 5.

Thanks @Abramovick .

thanks @Abramovick 👍

Thanks @Abramovick 👍

Thanks @Abramovick :)

Thanks @Abramovick!
This was the only working postcss example for storybook5.

Has anyone tried configuring postcss with scss files?

Anyone has configuration postcss for Angular?

@Abramovick you saved my life 👍