feat(storybook-config): add scss config to preset webpack (#7471)

carbon-design-system · Dec 17, 2020 · 22c1411 · 22c1411
1 parent 00ad3fe
commit 22c1411
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 83 deletions.
diff --git a/config/storybook-preset-carbon/index.js b/config/storybook-preset-carbon/index.js
@@ -7,6 +7,20 @@
 
 'use strict';
 
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const customProperties = require('postcss-custom-properties');
+const rtlcss = require('rtlcss');
+
+const {
+  CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
+  CARBON_REACT_STORYBOOK_USE_RTL,
+  NODE_ENV = 'development',
+} = process.env;
+
+const useExternalCss = NODE_ENV === 'production';
+const useRtl = CARBON_REACT_STORYBOOK_USE_RTL === 'true';
+
 module.exports = {
   addons: [
     '@storybook/addon-storysource',
@@ -17,14 +31,40 @@ module.exports = {
     '@storybook/addon-notes/register',
     'storybook-readme/register',
 
-    // Phase 2: port over webpack config for Sass
     // Phase 3: port over custom panels/add-ons
   ],
 
   webpack(config) {
-    // Configure sass
-    // sass-loader
-    // css-loader, style-loader, postcss-loader, ...
+    const sassLoader = {
+      loader: 'sass-loader',
+      options: {
+        prependData() {
+          return `
+            $feature-flags: (
+              ui-shell: true,
+              enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+            );
+          `;
+        },
+        sassOptions: {
+          includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+        },
+        sourceMap: true,
+      },
+    };
+
+    const fastSassLoader = {
+      loader: 'fast-sass-loader',
+      options: {
+        data: `
+          $feature-flags: (
+            ui-shell: true,
+            enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+          );
+        `,
+      },
+    };
+
     config.module.rules.push({
       test: /-story\.jsx?$/,
       loaders: [
@@ -45,6 +85,48 @@ module.exports = {
       enforce: 'pre',
     });
 
+    config.module.rules.push({
+      test: /\.scss$/,
+      sideEffects: true,
+      use: [
+        {
+          loader: useExternalCss ? MiniCssExtractPlugin.loader : 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 2,
+            sourceMap: true,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            plugins: () => {
+              const autoPrefixer = require('autoprefixer')({
+                overrideBrowserslist: ['last 1 version', 'ie >= 11'],
+              });
+              return [
+                customProperties(),
+                autoPrefixer,
+                ...(useRtl ? [rtlcss] : []),
+              ];
+            },
+            sourceMap: true,
+          },
+        },
+        NODE_ENV === 'production' ? sassLoader : fastSassLoader,
+      ],
+    });
+
+    if (useExternalCss) {
+      config.plugins.push(
+        new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+        })
+      );
+    }
+
     return config;
   },
 };
diff --git a/packages/react/.storybook/webpack.config.js b/packages/react/.storybook/webpack.config.js
@@ -6,23 +6,16 @@
  */
 
 const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const rtlcss = require('rtlcss');
-const customProperties = require('postcss-custom-properties');
 
 const {
-  CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
   CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS,
   CARBON_REACT_USE_CONTROLLED_STATE_WITH_EVENT_LISTENER,
-  CARBON_REACT_STORYBOOK_USE_RTL,
   NODE_ENV = 'development',
 } = process.env;
 
-const useExternalCss = NODE_ENV === 'production';
 const useControlledStateWithEventListener =
   CARBON_REACT_USE_CONTROLLED_STATE_WITH_EVENT_LISTENER === 'true';
-const useRtl = CARBON_REACT_STORYBOOK_USE_RTL === 'true';
 
 const replaceTable = {
   useControlledStateWithEventListener,
@@ -74,78 +67,6 @@ module.exports = ({ config, mode }) => {
     },
   });
 
-  const sassLoader = {
-    loader: 'sass-loader',
-    options: {
-      prependData() {
-        return `
-          $feature-flags: (
-            ui-shell: true,
-            enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
-          );
-        `;
-      },
-      sassOptions: {
-        includePaths: [path.resolve(__dirname, '..', 'node_modules')],
-      },
-      sourceMap: true,
-    },
-  };
-
-  const fastSassLoader = {
-    loader: 'fast-sass-loader',
-    options: {
-      data: `
-        $feature-flags: (
-          ui-shell: true,
-          enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
-        );
-      `,
-    },
-  };
-
-  config.module.rules.push({
-    test: /\.scss$/,
-    sideEffects: true,
-    use: [
-      {
-        loader: useExternalCss ? MiniCssExtractPlugin.loader : 'style-loader',
-      },
-      {
-        loader: 'css-loader',
-        options: {
-          importLoaders: 2,
-          sourceMap: true,
-        },
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: () => {
-            const autoPrefixer = require('autoprefixer')({
-              overrideBrowserslist: ['last 1 version', 'ie >= 11'],
-            });
-            return [
-              customProperties(),
-              autoPrefixer,
-              ...(useRtl ? [rtlcss] : []),
-            ];
-          },
-          sourceMap: true,
-        },
-      },
-      NODE_ENV === 'production' ? sassLoader : fastSassLoader,
-    ],
-  });
-
-  if (useExternalCss) {
-    config.plugins.push(
-      new MiniCssExtractPlugin({
-        filename: '[name].[contenthash].css',
-      })
-    );
-  }
-
   config.resolve = {
     modules: ['node_modules'],
     plugins: [new FeatureFlagProxyPlugin()],