Core: Allow custom postcss config

docs/src/pages/configurations/custom-postcss-config/index.md

@@ -0,0 +1,30 @@
+---
+id: 'custom-postcss-config'
+title: 'Custom Postcss Config'
+---
+
+Storybook can load your custom postcss configuration. 
+
+It searches for the first postcss config file in the parents directories of your loaded file : 
+- `.postcssrc`
+- `.postcssrc.json`
+- `.postcssrc.yml`
+- `.postcssrc.js`
+- `postcss.config.js`
+
+If no postcss config file is found, it applies a default configuration which is : 
+
+```js
+{
+    ident: 'postcss',
+    postcss: {},
+    plugins: () => [
+        require('postcss-flexbugs-fixes'),
+        autoprefixer({
+            flexbox: 'no-2009',
+        }),
+    ],
+}
+```
+
+> Currently we do **not** support loading the Babel config from the `package.json` neither in the Storybook config directory (by default, it's `.storybook`).

examples/html-kitchen-sink/.postcssrc.yml

@@ -0,0 +1,2 @@
+plugins:
+  postcss-color-rebeccapurple: {}

examples/html-kitchen-sink/package.json

@@ -35,6 +35,7 @@
     "@storybook/source-loader": "5.3.0-alpha.23",
     "eventemitter3": "^4.0.0",
     "format-json": "^1.0.3",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "postcss-color-rebeccapurple": "^4.0.1"
   }
 }

examples/html-kitchen-sink/stories/welcome.css

@@ -5,6 +5,10 @@
     background-color: #ffffff;
 }
 
+h1 {
+    color: rebeccapurple;
+}
+
 .logo {
     width: 256px;
     margin: 15px;

lib/core/package.json

@@ -63,6 +63,7 @@
     "file-loader": "^4.2.0",
     "file-system-cache": "^1.0.5",
     "find-cache-dir": "^3.0.0",
+    "find-up": "^3.0.0",
     "fs-extra": "^8.0.1",
     "global": "^4.3.2",
     "html-webpack-plugin": "^4.0.0-beta.2",

lib/core/src/server/preview/base-webpack.config.js

@@ -1,6 +1,38 @@
 import autoprefixer from 'autoprefixer';
+import findUp from 'find-up';
+import path from 'path';
+
+export async function createDefaultWebpackConfig(storybookBaseConfig) {
+  const postcssConfigFiles = [
+    '.postcssrc',
+    '.postcssrc.json',
+    '.postcssrc.yml',
+    '.postcssrc.js',
+    'postcss.config.js',
+  ];
+  const customPostcssConfig = await findUp(postcssConfigFiles);
+
+  let postcssOptions = {};
+  if (customPostcssConfig) {
+    console.log(`=> Using custom ${path.basename(customPostcssConfig)}`);
+    postcssOptions = {
+      config: {
+        path: path.dirname(customPostcssConfig),
+      },
+    };
+  } else {
+    postcssOptions = {
+      ident: 'postcss',
+      postcss: {},
+      plugins: () => [
+        require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
+        autoprefixer({
+          flexbox: 'no-2009',
+        }),
+      ],
+    };
+  }
 
-export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
     ...storybookBaseConfig,
     module: {
@@ -20,16 +52,7 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
             },
             {
               loader: require.resolve('postcss-loader'),
-              options: {
-                ident: 'postcss',
-                postcss: {},
-                plugins: () => [
-                  require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
-                  autoprefixer({
-                    flexbox: 'no-2009',
-                  }),
-                ],
-              },
+              options: postcssOptions,
             },
           ],
         },

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

@@ -6,7 +6,7 @@ import mergeConfigs from '../utils/merge-webpack-config';
 import { createDefaultWebpackConfig } from './base-webpack.config';
 
 async function createFinalDefaultConfig(presets, config, options) {
-  const defaultConfig = createDefaultWebpackConfig(config);
+  const defaultConfig = await createDefaultWebpackConfig(config);
   return presets.apply('webpackFinal', defaultConfig, options);
 }