feature(postcss): Allow custom postcss config

- Search for the nearest postcss config
- Maintain previous defaults if no 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/postcss-kitchen-sink/.postcssrc.yml

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

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

@@ -0,0 +1,3 @@
+import { configure } from '@storybook/html';
+
+configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

examples/postcss-kitchen-sink/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "postcss-kitchen-sink",
+  "version": "5.3.0-alpha.23",
+  "private": true,
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "",
+  "main": "index.js",
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 9006"
+  },
+  "devDependencies": {
+    "@storybook/core": "5.3.0-alpha.23",
+    "@storybook/html": "5.3.0-alpha.23",
+    "postcss-color-rebeccapurple": "^4.0.1"
+  }
+}

examples/postcss-kitchen-sink/stories/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo</title>
+  
+  <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 			"/>
+  <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894 			"/>
+  <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
+  <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
+  <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
+  <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
+  <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
+  <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
+  <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
+  <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
+</svg>

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

@@ -0,0 +1,25 @@
+.main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    background-color: #ffffff;
+}
+
+h1 {
+    color: rebeccapurple;
+}
+
+.logo {
+    width: 256px;
+    margin: 15px;
+}
+
+.code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+}

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

@@ -0,0 +1,29 @@
+<div class="main">
+  <h1>Welcome to Storybook for HTML</h1>
+  <p>This is a UI component dev environment for your plain HTML snippets.</p>
+  <p>
+    We've added some basic stories inside the <code class="code">stories</code> directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample <a class="link" href="#" data-sb-kind="Demo" data-sb-story="button">stories</a>
+  </p>
+  <p><img src=logo.svg class="logo" /></p>
+  <p>
+    Just like that, you can add your own snippets as stories.
+    <br />
+    You can also edit those snippets and see changes right away.
+    <br />
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.<br />
+    Have a look at the
+    <a class="link" href="https://storybook.js.org/basics/writing-stories" target="_blank">
+      Writing Stories
+    </a>
+    section in our documentation.
+  </p>
+</div>

examples/postcss-kitchen-sink/stories/welcome.stories.js

@@ -0,0 +1,8 @@
+import './welcome.css';
+import welcome from './welcome.html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => welcome;

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);
 }