Use postcss.config.js when present

lib/core/package.json

@@ -55,6 +55,7 @@
     "file-loader": "^2.0.0",
     "file-system-cache": "^1.0.5",
     "find-cache-dir": "^2.0.0",
+    "find-up": "^3.0.0",
     "global": "^4.3.2",
     "html-webpack-plugin": "^4.0.0-beta.2",
     "inquirer": "^6.2.0",

lib/core/src/server/config/style.config.js

@@ -0,0 +1,42 @@
+import { logger } from '@storybook/node-logger';
+import autoprefixer from 'autoprefixer';
+import findUp from 'find-up';
+
+export default function getStyleConfig(baseConfig) {
+  // null if file is not found
+  const customPostcssConfig = findUp.sync('postcss.config.js', {
+    cwd: baseConfig.context,
+  });
+
+  let postcssConfig = {};
+  if (customPostcssConfig) {
+    logger.info('=> Using postcss.config.js');
+    postcssConfig = customPostcssConfig;
+  } else {
+    postcssConfig = {
+      plugins: () => [
+        require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
+        autoprefixer({
+          flexbox: 'no-2009',
+        }),
+      ],
+    };
+  }
+
+  return {
+    test: /\.css$/,
+    use: [
+      require.resolve('style-loader'),
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          importLoaders: 1,
+        },
+      },
+      {
+        loader: require.resolve('postcss-loader'),
+        options: postcssConfig,
+      },
+    ],
+  };
+}

lib/core/src/server/config/webpack.config.default.js

@@ -1,4 +1,4 @@
-import autoprefixer from 'autoprefixer';
+import getStyleConfig from './style.config';
 
 export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
@@ -7,31 +7,7 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
       ...storybookBaseConfig.module,
       rules: [
         ...storybookBaseConfig.module.rules,
-        {
-          test: /\.css$/,
-          use: [
-            require.resolve('style-loader'),
-            {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1,
-              },
-            },
-            {
-              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',
-                  }),
-                ],
-              },
-            },
-          ],
-        },
+        getStyleConfig(storybookBaseConfig),
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),