Fix autoprefixer with storybook

.playground/webpack.config.js

@@ -27,7 +27,6 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               plugins: [require('autoprefixer')],
-              debug: true,
             },
           },
           'sass-loader',

.storybook/addons.ts

@@ -1,4 +1,2 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
-import '@storybook/addon-options/register';
-import '@storybook/addon-storysource/register';

.storybook/config.ts

@@ -1,24 +1,30 @@
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withOptions } from '@storybook/addon-options';
-import { addDecorator, configure } from '@storybook/react';
+import { addDecorator, configure, addParameters } from '@storybook/react';
 import { switchTheme } from './theme_service';
 switchTheme('light');
 import './style.scss';
 
-addDecorator(
-  withOptions({
-    name: 'Elastic Charts',
-    url: 'https://github.com/elastic/elastic-charts',
-    addonPanelInRight: true,
+import { create } from '@storybook/theming';
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Elastic Charts',
+      brandUrl: 'https://github.com/elastic/elastic-charts',
+      brandImage:
+        'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt6ae3d6980b5fd629/5bbca1d1af3a954c36f95ed3/logo-elastic.svg',
+    }),
+    panelPosition: 'right',
     sidebarAnimations: true,
-  }),
-);
+  },
+});
+
 addDecorator(withKnobs);
 addDecorator(
   withInfo({
     inline: true,
-    source: false,
+    source: true,
     styles: {
       infoBody: {
         marginTop: 0,

.storybook/theme_service.ts

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-unresolved */
 // @ts-ignore
-import themeDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_dark.scss';
+import themeDark from '../src/theme_dark.scss?lazy';
 // @ts-ignore
-import themeLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_light.scss';
+import themeLight from '../src/theme_light.scss?lazy';
 
 export function switchTheme(theme: string) {
   switch (theme) {

.storybook/webpack.config.js

@@ -1,15 +1,31 @@
 // eslint-disable-next-line
 const path = require('path');
 
-module.exports = (baseConfig, env, config) => {
-  if (env === 'DEVELOPMENT') {
+const nonce = 'Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ=';
+const scssLoaders = [
+  {
+    loader: 'css-loader',
+    options: { importLoaders: 1 },
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      plugins: [require('autoprefixer')],
+    },
+  },
+  'sass-loader',
+];
+
+module.exports = async ({ config, mode }) => {
+  if (mode === 'DEVELOPMENT') {
     config.devtool = 'inline-source-map';
   } else {
     config.devtool = 'source-map';
   }
+
   config.module.rules.push({
     test: /\.tsx?$/,
-    loader: require.resolve('ts-loader'),
+    loader: 'ts-loader',
     exclude: /node_modules/,
     options: {
       configFile: 'tsconfig.json',
@@ -20,46 +36,60 @@ module.exports = (baseConfig, env, config) => {
     loader: require.resolve('react-docgen-typescript-loader'),
     exclude: /node_modules/,
   });
+
+  // Replace default css rules with nonce
+  config.module.rules = config.module.rules.filter(({ test }) => !test.test('.css'));
   config.module.rules.push({
-    test: /\.tsx?$/,
-    include: [path.resolve(__dirname, '../stories')],
-    loaders: [
+    test: /\.css$/,
+    use: [
       {
-        loader: require.resolve('@storybook/addon-storysource/loader'),
+        loader: 'style-loader',
         options: {
-          parser: 'typescript',
+          attrs: {
+            nonce,
+          },
         },
       },
+      {
+        loader: 'css-loader',
+        options: { importLoaders: 1 },
+      },
     ],
-    enforce: 'pre',
   });
+
   config.module.rules.push({
     test: /\.scss$/,
+    include: [path.resolve(__dirname, '../.storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
     use: [
       {
         loader: 'style-loader',
         options: {
           attrs: {
-            nonce: 'Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ=',
+            nonce,
           },
         },
       },
+      ...scssLoaders,
+    ],
+  });
+
+  // Used for lazy loaded scss files
+  config.module.rules.push({
+    test: /\.scss$/,
+    resourceQuery: /^\?lazy$/,
+    use: [
       {
-        loader: 'css-loader',
-        options: { importLoaders: 1 },
-      },
-      {
-        loader: 'postcss-loader',
+        loader: 'style-loader/useable',
         options: {
-          plugins: [require('autoprefixer')],
-          debug: true,
+          attrs: {
+            nonce,
+          },
         },
       },
-      {
-        loader: 'sass-loader',
-      },
+      ...scssLoaders,
     ],
   });
+
   config.resolve.extensions.push('.ts', '.tsx');
 
   return config;

package.json

@@ -54,12 +54,10 @@
     "@semantic-release/github": "^5.2.10",
     "@semantic-release/npm": "^5.1.4",
     "@semantic-release/release-notes-generator": "^7.1.4",
-    "@storybook/addon-actions": "^4.1.13",
-    "@storybook/addon-info": "^4.1.13",
-    "@storybook/addon-knobs": "^4.1.13",
-    "@storybook/addon-options": "^4.1.13",
-    "@storybook/addon-storysource": "^4.1.13",
-    "@storybook/react": "^4.1.13",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-info": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/react": "^5.1.9",
     "@types/classnames": "^2.2.7",
     "@types/d3-array": "^1.2.6",
     "@types/d3-collection": "^1.0.8",
@@ -71,11 +69,10 @@
     "@types/lodash": "^4.14.121",
     "@types/react": "^16.8.5",
     "@types/react-dom": "^16.8.2",
-    "@types/storybook__addon-actions": "^3.4.2",
-    "@types/storybook__addon-info": "^4.0.1",
-    "@types/storybook__addon-knobs": "^4.0.1",
-    "@types/storybook__addon-options": "^4.0.1",
-    "@types/storybook__react": "^4.0.0",
+    "@types/storybook__addon-actions": "^3.4.3",
+    "@types/storybook__addon-info": "^4.1.2",
+    "@types/storybook__addon-knobs": "^5.0.3",
+    "@types/storybook__react": "^4.0.2",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",

src/specs/settings.tsx

@@ -47,10 +47,10 @@ export interface SettingSpecProps {
   showLegendDisplayValue: boolean;
   onElementClick?: ElementClickListener;
   onElementOver?: ElementOverListener;
-  onElementOut?: () => undefined;
+  onElementOut?: () => undefined | void;
   onBrushEnd?: BrushEndListener;
   onLegendItemOver?: LegendItemListener;
-  onLegendItemOut?: () => undefined;
+  onLegendItemOut?: () => undefined | void;
   onLegendItemClick?: LegendItemListener;
   onLegendItemPlusClick?: LegendItemListener;
   onLegendItemMinusClick?: LegendItemListener;

src/state/chart_state.ts

@@ -185,10 +185,10 @@ export class ChartStore {
 
   onElementClickListener?: ElementClickListener;
   onElementOverListener?: ElementOverListener;
-  onElementOutListener?: () => undefined;
+  onElementOutListener?: () => undefined | void;
   onBrushEndListener?: BrushEndListener;
   onLegendItemOverListener?: LegendItemListener;
-  onLegendItemOutListener?: () => undefined;
+  onLegendItemOutListener?: () => undefined | void;
   onLegendItemClickListener?: LegendItemListener;
   onLegendItemPlusClickListener?: LegendItemListener;
   onLegendItemMinusClickListener?: LegendItemListener;
@@ -636,7 +636,7 @@ export class ChartStore {
   setOnElementOverListener(listener: ElementOverListener) {
     this.onElementOverListener = listener;
   }
-  setOnElementOutListener(listener: () => undefined) {
+  setOnElementOutListener(listener: () => undefined | void) {
     this.onElementOutListener = listener;
   }
   setOnBrushEndListener(listener: BrushEndListener) {
@@ -645,7 +645,7 @@ export class ChartStore {
   setOnLegendItemOverListener(listener: LegendItemListener) {
     this.onLegendItemOverListener = listener;
   }
-  setOnLegendItemOutListener(listener: () => undefined) {
+  setOnLegendItemOutListener(listener: () => undefined | void) {
     this.onLegendItemOutListener = listener;
   }
   setOnLegendItemClickListener(listener: LegendItemListener) {