chore(storybook): update storybook to load flags conditionally and im…

…prove build perf (#4438)

* chore(project): update sass-loader dependency

* chore(react): add conditional data from flags

* chore(react): update styles to import through JavaScript

* chore(project): remove storybook cache

* chore(react): update webpack config to explain loader flags

packages/react/.storybook/Container.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import './styles';
 import './polyfills';
-import './_container.scss';
+import React, { Component } from 'react';
+
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;

packages/react/.storybook/_container.scss

@@ -13,9 +13,24 @@ $prefix: 'bx';
 // IMPORTANT: This import path should _not_ be used outside our source tree
 // as `src` directory is _not_ meant to be shipped in our NPM package.
 // Use e.g. `@import '~carbon-components/scss/globals/scss/styles.scss'` instead.
-@import '~carbon-components/src/globals/scss/styles.scss'; // SEE THE NOTE ABOVE
+@import '~carbon-components/scss/globals/scss/feature-flags';
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~carbon-components/scss/globals/scss/colors';
+@import '~carbon-components/scss/globals/scss/theme';
+@import '~carbon-components/scss/globals/scss/mixins';
+@import '~carbon-components/scss/globals/scss/layout';
+@import '~carbon-components/scss/globals/scss/layer';
+@import '~carbon-components/scss/globals/scss/spacing';
+@import '~carbon-components/scss/globals/scss/typography';
+@import '~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '~carbon-components/scss/globals/scss/css--reset';
+@import '~carbon-components/scss/globals/scss/css--font-face';
+@import '~carbon-components/scss/globals/scss/css--helpers';
+@import '~carbon-components/scss/globals/scss/css--body';
+@import '~carbon-components/scss/globals/grid/grid';
+@import '~carbon-components/src/globals/scss/functions';
 
-@if mixin-exists(carbon--theme) {
+@if feature-flag-enabled('enable-css-custom-properties') {
   :root {
     @include carbon--theme($carbon--theme--white, true);
   }

packages/react/.storybook/addons.js

@@ -13,4 +13,14 @@ import '@storybook/addon-a11y/register';
 
 // Community addons
 import 'storybook-readme/register';
-import './addon-carbon-theme/register';
+
+if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
+  import('./addon-carbon-theme/register').catch(error => {
+    console.error(error);
+  });
+}
+
+// These options used by storybook often conflict with developer tools,
+// conditional panels, or other things that get in the way of our workflow
+localStorage.removeItem('@storybook/ui/store');
+localStorage.removeItem('storybook-layout');

packages/react/.storybook/styles.js

@@ -0,0 +1,44 @@
+import './_container.scss';
+import 'carbon-components/src/components/button/_button.scss';
+import 'carbon-components/src/components/copy-button/_copy-button.scss';
+import 'carbon-components/src/components/file-uploader/_file-uploader.scss';
+import 'carbon-components/src/components/checkbox/_checkbox.scss';
+import 'carbon-components/src/components/combo-box/_combo-box.scss';
+import 'carbon-components/src/components/radio-button/_radio-button.scss';
+import 'carbon-components/src/components/toggle/_toggle.scss';
+import 'carbon-components/src/components/search/_search.scss';
+import 'carbon-components/src/components/select/_select.scss';
+import 'carbon-components/src/components/text-input/_text-input.scss';
+import 'carbon-components/src/components/text-area/_text-area.scss';
+import 'carbon-components/src/components/number-input/_number-input.scss';
+import 'carbon-components/src/components/form/_form.scss';
+import 'carbon-components/src/components/link/_link.scss';
+import 'carbon-components/src/components/list-box/_list-box.scss';
+import 'carbon-components/src/components/list/_list.scss';
+import 'carbon-components/src/components/data-table/_data-table.scss';
+import 'carbon-components/src/components/structured-list/_structured-list.scss';
+import 'carbon-components/src/components/code-snippet/_code-snippet.scss';
+import 'carbon-components/src/components/overflow-menu/_overflow-menu.scss';
+import 'carbon-components/src/components/content-switcher/_content-switcher.scss';
+import 'carbon-components/src/components/date-picker/_date-picker.scss';
+import 'carbon-components/src/components/dropdown/_dropdown.scss';
+import 'carbon-components/src/components/loading/_loading.scss';
+import 'carbon-components/src/components/modal/_modal.scss';
+import 'carbon-components/src/components/multi-select/_multi-select.scss';
+import 'carbon-components/src/components/notification/_inline-notification.scss';
+import 'carbon-components/src/components/notification/_toast-notification.scss';
+import 'carbon-components/src/components/tooltip/_tooltip.scss';
+import 'carbon-components/src/components/tabs/_tabs.scss';
+import 'carbon-components/src/components/tag/_tag.scss';
+import 'carbon-components/src/components/pagination/_pagination.scss';
+import 'carbon-components/src/components/accordion/_accordion.scss';
+import 'carbon-components/src/components/progress-indicator/_progress-indicator.scss';
+import 'carbon-components/src/components/breadcrumb/_breadcrumb.scss';
+import 'carbon-components/src/components/toolbar/_toolbar.scss';
+import 'carbon-components/src/components/time-picker/_time-picker.scss';
+import 'carbon-components/src/components/slider/_slider.scss';
+import 'carbon-components/src/components/tile/_tile.scss';
+import 'carbon-components/src/components/skeleton/_skeleton.scss';
+import 'carbon-components/src/components/inline-loading/_inline-loading.scss';
+import 'carbon-components/src/components/pagination-nav/_pagination-nav.scss';
+import 'carbon-components/src/components/ui-shell/_ui-shell.scss';

packages/react/.storybook/webpack.config.js

@@ -11,15 +11,19 @@ const TerserPlugin = require('terser-webpack-plugin');
 const rtlcss = require('rtlcss');
 const customProperties = require('postcss-custom-properties');
 
-const useExternalCss =
-  process.env.CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS === 'true';
-
-const useStyleSourceMap =
-  process.env.CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP === 'true';
+const {
+  CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
+  CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS,
+  CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP,
+  CARBON_REACT_USE_CONTROLLED_STATE_WITH_EVENT_LISTENER,
+  CARBON_REACT_STORYBOOK_USE_RTL,
+} = process.env;
 
+const useExternalCss = CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS === 'true';
+const useStyleSourceMap = CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP === 'true';
 const useControlledStateWithEventListener =
-  process.env.CARBON_REACT_USE_CONTROLLED_STATE_WITH_EVENT_LISTENER === 'true';
-const useRtl = process.env.CARBON_REACT_STORYBOOK_USE_RTL === 'true';
+  CARBON_REACT_USE_CONTROLLED_STATE_WITH_EVENT_LISTENER === 'true';
+const useRtl = CARBON_REACT_STORYBOOK_USE_RTL === 'true';
 
 const replaceTable = {
   useControlledStateWithEventListener,
@@ -48,13 +52,40 @@ const styleLoaders = [
   {
     loader: 'sass-loader',
     options: {
-      includePaths: [path.resolve(__dirname, '..', 'node_modules')],
-      data: `
-        $feature-flags: (
-          ui-shell: true,
-          enable-css-custom-properties: true,
-        );
-      `,
+      prependData(loaderContext) {
+        const entrypoint = path.resolve(__dirname, './_container.scss');
+        const flags = `
+          $feature-flags: (
+            ui-shell: true,
+            enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+          );
+        `;
+
+        // If we're attempting to process our entrypoint, we'll just pass in the
+        // feature flags that we want enabled. This entrypoint will bring in
+        // things like the CSS Reset and @font-face declarations that we want to
+        // load only once whereas we don't need these loaded per-component
+        if (loaderContext.resourcePath === entrypoint) {
+          return flags;
+        }
+
+        // For other scss files that we bring in from carbon, we can selectively
+        // turn off flags that we have that emit CSS that has already been
+        // loaded by the entrypoint. We can also disable warnings around feature
+        // flag deviations so that this isn't displayed each time an scss file is
+        // loaded
+        return `
+          ${flags}
+
+          $css--font-face: false;
+          $css--body: false;
+          $css--reset: false;
+          $did-warn-diverged-feature-flags: true;
+        `;
+      },
+      sassOptions: {
+        includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+      },
       sourceMap: useStyleSourceMap,
     },
   },

packages/react/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf es lib umd storybook-static",
     "prepublish": "yarn build",
     "start": "yarn storybook",
-    "storybook": "start-storybook -p 9000"
+    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000"
   },
   "peerDependencies": {
     "carbon-components": "^10.6.0",
@@ -103,7 +103,7 @@
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
     "requestanimationframe": "^0.0.23",
-    "rimraf": "^2.6.3",
+    "rimraf": "^3.0.0",
     "rollup": "^1.10.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.3.4",
@@ -112,7 +112,7 @@
     "rollup-plugin-sizes": "^0.5.0",
     "rollup-plugin-terser": "^4.0.0",
     "rtlcss": "^2.4.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^8.0.0",
     "storybook-readme": "^5.0.8",
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^1.1.0",

yarn.lock

@@ -20440,18 +20440,6 @@ sass-loader@^6.0.0:
     neo-async "^2.5.0"
     pify "^3.0.0"
 
-sass-loader@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
-  integrity sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==
-  dependencies:
-    clone-deep "^2.0.1"
-    loader-utils "^1.0.1"
-    lodash.tail "^4.1.1"
-    neo-async "^2.5.0"
-    pify "^3.0.0"
-    semver "^5.5.0"
-
 sass-loader@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.0.tgz#e7b07a3e357f965e6b03dd45b016b0a9746af797"