Storybook: Feature: PostCSS config

[marcobiedermann]

Instead of hardcoding the postcss options into the default webpack config, I suggest moving this to a postcss.config.js file.
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/defaults/webpack.config.js#L21

This way it can be overwritten in your own project, similar to the babel.js config.
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/babel.js

https://github.com/storybooks/storybook/blob/585beccafdc4ea320d262b8d4db4b35b959007ef/app/react/src/server/babel_config.js

[igor-dv]

You can override the configuration with the full control mode: https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

[marcobiedermann]

@igor-dv I know but I think it is simpler to move the postcss configs into it's own file.

[danielduan]

I think that most people are happy with the default settings. The extend and full control modes are for people like you who want to add or customize different webpack plugins.

There are many more people who require custom babel configs than postcss configs. We try to keep the code and setup complexity to a minimum. If there is demand for this feature, we'd be happy to add it.

[jpetitcolas]

I encountered the same issue, and I executed the following to use global postconfig.config.js file:

const path = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.entry.styles = path.resolve(__dirname, '../src/styles/style.css');

    const cssRule = defaultConfig.module.rules.find(r => r.test.toString() === /\.css$/.toString());
    const postCssUse = cssRule.use.find(u => u.loader && u.loader.indexOf('postcss-loader') > -1);
    delete postCssUse.options;

    return defaultConfig;
};

I propose to check if we got a postcss.config.js file at root. If not, then we put the default current plugins function. If core team is OK with this change, I can give it a try in a PR. :)

[Hypnosphi]

@jpetitcolas Sounds good. We could also support it in storybook config directory

[IanVS]

Hi @jpetitcolas, do you still think you might make a PR? I think it would be really helpful for storybook to detect/use a postcss config file.

[JordyPouw]

@jpetitcolas Thanks a lot! Good solution. Still works, should really be config for storybook :)

[ndelangen]

So currently we still have this in our webpack.config.default.js:

            {
              loader: require.resolve('postcss-loader'),
              options: {
                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                postcss: {},
                plugins: () => [
                  require('postcss-flexbugs-fixes'), // eslint-disable-line
                  autoprefixer({
                    flexbox: 'no-2009',
                  }),
                ],
              },
            },

Does anyone want to open a PR fixing this issue?

Essentially we should check for the existence of the postcss.config.js file and if present, not set options, Right?

[kylemh]

@ndelangen Im gonna get this.

Was thinking of copying this approach: https://github.com/zeit/next-plugins/blob/master/packages/next-css/css-loader-config.js

Are you okay with adding find-up as a dep?

[ndelangen]

Yeah go for it 👍

[kylemh]

Cool. So, I got postcss.config.js read from the official storybook example! Yay! 🎉

I'd like to discuss more with whoever has been working on presets and webpack configuration as I see a few problems...

The main issue is that postcss-loader exists as the first of many possible other loaders related to style loading, but never by itself. So, while the initial issue reads as: "Do this like you did with custom babel config" it feels as though it's not the same paradigm.

Example would be postcss-loader to sass-loader to css-loader to style-loader (from bottom to top in an array of loaders within module.rules)

Another issue would be that the default storybook config (as for as PostCSS config is concerned) is clearly conducive to React, but not vue-loader although it seems like @pksunkara is resolving that issue in a different manner. The specific example of React vs. Vue isn't the issue though, it's that I'm not aware of whether or not this default webpack config's style-loading rules even get utilized in some frameworks/examples (for example, in the Marko or Angular one).

If the default webpack config is not gonna be leveraged - and custom PostCSS rule loading will only be an aspect of React's preset - maybe we make this change there. If you'd like your postcss.config.js read outside of React, fallback to some of the original issue comments on this being a situation where one should break out into a custom webpack config otherwise.