Use postcss.config.js when present

examples/cra-kitchen-sink/package.json

@@ -37,6 +37,7 @@
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
     "jest": "^23.6.0",
+    "postcss-color-rebeccapurple": "^4.0.1",
     "react-scripts": "^2.0.5"
   }
 }

examples/cra-kitchen-sink/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'postcss-color-rebeccapurple': {},
+};

examples/cra-kitchen-sink/src/App.css

@@ -1,4 +1,4 @@
-@import "./base.css";
+@import './base.css';
 
 .App {
   text-align: center;
@@ -13,14 +13,18 @@
   background-color: #222;
   height: 150px;
   padding: 20px;
-  color: white;
+  color: rebeccapurple;
 }
 
 .App-intro {
   font-size: large;
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

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,47 @@
+import { logger } from '@storybook/node-logger';
+import autoprefixer from 'autoprefixer';
+import findUp from 'find-up';
+
+export default async function getStyleConfig(baseConfig) {
+  // null if file is not found
+  const customPostcssConfig = await findUp.sync('postcss.config.js', {
+    cwd: baseConfig.context,
+  });
+
+  let postcssConfig = {};
+  if (customPostcssConfig) {
+    logger.info('=> Using postcss.config.js');
+    postcssConfig = {
+      config: {
+        path: customPostcssConfig,
+      },
+    };
+  } else {
+    postcssConfig = {
+      plugins: () => [
+        // eslint-disable-next-line global-require
+        require('postcss-flexbugs-fixes'),
+        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,37 +1,13 @@
-import autoprefixer from 'autoprefixer';
+import getStyleConfig from './style.config';
 
-export function createDefaultWebpackConfig(storybookBaseConfig) {
+export async function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
     ...storybookBaseConfig,
     module: {
       ...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',
-                  }),
-                ],
-              },
-            },
-          ],
-        },
+        await getStyleConfig(storybookBaseConfig),
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),

lib/core/src/server/core-preset-webpack-custom.js

@@ -19,7 +19,7 @@ function wrapPresets(presets) {
 }
 
 async function createFinalDefaultConfig(presets, config, options) {
-  const defaultConfig = createDefaultWebpackConfig(config);
+  const defaultConfig = await createDefaultWebpackConfig(config);
   return presets.webpackFinal(defaultConfig, options);
 }