feat(storybook): update sass loaders and use dart-sass (#8228)

* feat(storybook): update sass loaders and use dart-sass * fix(storybook): remove fast-sass-loader to support sass modules * chore(project): update yarn cache and lockfile * chore(project): run yarn dedupe Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Apr 15, 2021 · 48deedf · 48deedf
1 parent 41a7ddc
commit 48deedf
Show file tree

Hide file tree

Showing 20 changed files with 115 additions and 97 deletions.
diff --git a/.yarn/cache/@types-json-schema-npm-7.0.7-95fb8178d7-ea3b409235.zip b/.yarn/cache/@types-json-schema-npm-7.0.7-95fb8178d7-ea3b409235.zip
diff --git a/.yarn/cache/ajv-keywords-npm-3.4.1-851fd088de-0ecb945d00.zip b/.yarn/cache/ajv-keywords-npm-3.4.1-851fd088de-0ecb945d00.zip
diff --git a/.yarn/cache/ajv-keywords-npm-3.5.2-0e391b70e2-7dc5e59316.zip b/.yarn/cache/ajv-keywords-npm-3.5.2-0e391b70e2-7dc5e59316.zip
diff --git a/.yarn/cache/ajv-npm-6.12.2-7ff2bc9f1e-4a87256bbe.zip b/.yarn/cache/ajv-npm-6.12.2-7ff2bc9f1e-4a87256bbe.zip
diff --git a/.yarn/cache/ajv-npm-6.12.6-4b5105e2b2-874972efe5.zip b/.yarn/cache/ajv-npm-6.12.6-4b5105e2b2-874972efe5.zip
diff --git a/.yarn/cache/cli-source-preview-npm-1.1.0-0a7655f66d-1abbe5383c.zip b/.yarn/cache/cli-source-preview-npm-1.1.0-0a7655f66d-1abbe5383c.zip
diff --git a/.yarn/cache/fast-sass-loader-npm-1.5.0-f83ec63742-73ac3bba48.zip b/.yarn/cache/fast-sass-loader-npm-1.5.0-f83ec63742-73ac3bba48.zip
diff --git a/.yarn/cache/klona-npm-2.0.4-6bc4e7cd86-abc6690882.zip b/.yarn/cache/klona-npm-2.0.4-6bc4e7cd86-abc6690882.zip
diff --git a/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-8a675256ae.zip b/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-8a675256ae.zip
diff --git a/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip b/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip
diff --git a/.yarn/cache/sass-loader-npm-10.1.1-5a25ed7b45-dbd4ba06e2.zip b/.yarn/cache/sass-loader-npm-10.1.1-5a25ed7b45-dbd4ba06e2.zip
diff --git a/.yarn/cache/sass-npm-1.32.4-8737637fc1-0bb3701b3e.zip b/.yarn/cache/sass-npm-1.32.4-8737637fc1-0bb3701b3e.zip
diff --git a/.yarn/cache/sass-npm-1.32.8-6b113b5d20-a4d67e6be7.zip b/.yarn/cache/sass-npm-1.32.8-6b113b5d20-a4d67e6be7.zip
diff --git a/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-56dc93b4f6.zip b/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-56dc93b4f6.zip
diff --git a/config/storybook-preset-carbon/index.js b/config/storybook-preset-carbon/index.js
@@ -35,36 +35,6 @@ module.exports = {
   ].filter(Boolean),
 
   webpack(config) {
-    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: [
@@ -115,7 +85,27 @@ module.exports = {
             sourceMap: true,
           },
         },
-        NODE_ENV === 'production' ? sassLoader : fastSassLoader,
+        {
+          loader: require.resolve('sass-loader'),
+          options: {
+            additionalData(content) {
+              return `
+                $feature-flags: (
+                  ui-shell: true,
+                  enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+                );
+                ${content}
+              `;
+            },
+            sassOptions: {
+              implementation: require('sass'),
+              includePaths: [
+                path.resolve(__dirname, '..', '..', 'node_modules'),
+              ],
+            },
+            sourceMap: true,
+          },
+        },
       ],
     });
 

diff --git a/config/storybook-preset-carbon/package.json b/config/storybook-preset-carbon/package.json
@@ -38,6 +38,8 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
     "react-is": "^16.8.6",
+    "sass": "^1.32.2",
+    "sass-loader": "^10.1.1",
     "storybook-readme": "^5.0.8"
   },
   "devDependencies": {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -97,11 +97,9 @@
     "core-js": "^3.6.5",
     "cross-env": "^5.2.0",
     "css-loader": "^3.4.2",
-    "fast-sass-loader": "^1.5.0",
     "gzip-size": "^6.0.0",
     "lcov2badge": "^0.1.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
     "npm-which": "^3.0.1",
     "object-assign": "^4.1.1",
     "postcss-custom-properties": "^9.0.2",
@@ -118,7 +116,6 @@
     "rollup-plugin-strip-banner": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^2.4.0",
-    "sass-loader": "^8.0.2",
     "storybook-preset-carbon": "^0.3.0",
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^2.3.2",

diff --git a/packages/react/src/components/Grid/Grid-story.js b/packages/react/src/components/Grid/Grid-story.js
@@ -27,22 +27,25 @@ function DemoContent({ children }) {
 }
 
 export const autoColumns = () => (
-  <Grid>
-    <Row>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-    </Row>
-  </Grid>
+  <>
+    <div className="bx--css-grid">Hello</div>
+    <Grid>
+      <Row>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+      </Row>
+    </Grid>
+  </>
 );
 
 export const responsiveGrid = () => (

diff --git a/packages/react/src/components/Grid/Grid-story.scss b/packages/react/src/components/Grid/Grid-story.scss
@@ -1,3 +1,5 @@
+@use '../../../../grid/scss/modules/css-grid';
+
 @import '~carbon-components/scss/globals/scss/colors';
 
 // base of project work area

diff --git a/yarn.lock b/yarn.lock
@@ -5548,6 +5548,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/json-schema@npm:^7.0.6":
+  version: 7.0.7
+  resolution: "@types/json-schema@npm:7.0.7"
+  checksum: ea3b409235862d28122751158f4054e729e31ad844bd7b8b23868f38c518047b1c0e8e4e7cc293e02c31a2fb8cfc8a4506c2de2a745cf78b218e064fb8898cd4
+  languageName: node
+  linkType: hard
+
 "@types/keyv@npm:*, @types/keyv@npm:^3.1.1":
   version: 3.1.1
   resolution: "@types/keyv@npm:3.1.1"
@@ -6366,12 +6373,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-keywords@npm:^3.1.0, ajv-keywords@npm:^3.4.1":
-  version: 3.4.1
-  resolution: "ajv-keywords@npm:3.4.1"
+"ajv-keywords@npm:^3.1.0, ajv-keywords@npm:^3.4.1, ajv-keywords@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "ajv-keywords@npm:3.5.2"
   peerDependencies:
     ajv: ^6.9.1
-  checksum: 0ecb945d00934ccf6f1da9e82db4d5ef68988f4fff5bc07a30629eb15c2a6b7a85eff5cececfc9fdc3ca34a9d75dee1c8596991e59cc46f5105b765d17d9c7cd
+  checksum: 7dc5e5931677a680589050f79dcbe1fefbb8fea38a955af03724229139175b433c63c68f7ae5f86cf8f65d55eb7c25f75a046723e2e58296707617ca690feae9
   languageName: node
   linkType: hard
 
@@ -6385,15 +6392,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.0, ajv@npm:^6.5.5":
-  version: 6.12.2
-  resolution: "ajv@npm:6.12.2"
+"ajv@npm:^6.1.0, ajv@npm:^6.10.0, ajv@npm:^6.10.2, ajv@npm:^6.12.0, ajv@npm:^6.12.5, ajv@npm:^6.5.5":
+  version: 6.12.6
+  resolution: "ajv@npm:6.12.6"
   dependencies:
     fast-deep-equal: ^3.1.1
     fast-json-stable-stringify: ^2.0.0
     json-schema-traverse: ^0.4.1
     uri-js: ^4.2.2
-  checksum: 4a87256bbe209b71f5cc49ac98e21f36874747a728b39209635ea3be6f12536f401739ef210ce2877aa30e2abfe31bc9b741a7ee402216728ff4e66132e550e4
+  checksum: 874972efe5c4202ab0a68379481fbd3d1b5d0a7bd6d3cc21d40d3536ebff3352a2a1fabb632d4fd2cc7fe4cbdcd5ed6782084c9bbf7f32a1536d18f9da5007d4
   languageName: node
   linkType: hard
 
@@ -7441,7 +7448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^2.0.0, async@npm:^2.0.1, async@npm:^2.1.4, async@npm:^2.6.0, async@npm:^2.6.2":
+"async@npm:^2.0.0, async@npm:^2.1.4, async@npm:^2.6.0, async@npm:^2.6.2":
   version: 2.6.3
   resolution: "async@npm:2.6.3"
   dependencies:
@@ -9288,7 +9295,6 @@ __metadata:
     cross-env: ^5.2.0
     css-loader: ^3.4.2
     downshift: 5.2.1
-    fast-sass-loader: ^1.5.0
     flatpickr: 4.6.9
     gzip-size: ^6.0.0
     invariant: ^2.2.3
@@ -9299,7 +9305,6 @@ __metadata:
     lodash.omit: ^4.5.0
     lodash.throttle: ^4.1.1
     mini-css-extract-plugin: ^0.9.0
-    node-sass: ^4.13.1
     npm-which: ^3.0.1
     object-assign: ^4.1.1
     postcss-custom-properties: ^9.0.2
@@ -9317,7 +9322,6 @@ __metadata:
     rollup-plugin-strip-banner: ^2.0.0
     rollup-plugin-terser: ^7.0.2
     rtlcss: ^2.4.0
-    sass-loader: ^8.0.2
     storybook-preset-carbon: ^0.3.0
     string-replace-loader: ^2.1.0
     terser-webpack-plugin: ^2.3.2
@@ -9988,15 +9992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-source-preview@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "cli-source-preview@npm:1.1.0"
-  dependencies:
-    chalk: ^1.1.3
-  checksum: 1abbe5383c76525124ffeb62a000724003b7fea8f67a4275b83d5a1ad42a8ea5f8486770ca5d173d3c6262f4e68c1c0d6d7fd5f3dbbc47c322906572a76c518c
-  languageName: node
-  linkType: hard
-
 "cli-spinner@npm:0.2.10":
   version: 0.2.10
   resolution: "cli-spinner@npm:0.2.10"
@@ -14304,22 +14299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-sass-loader@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "fast-sass-loader@npm:1.5.0"
-  dependencies:
-    async: ^2.0.1
-    cli-source-preview: ^1.0.0
-    co: ^4.6.0
-    fs-extra: 3.x
-    loader-utils: ^1.1.0
-  peerDependencies:
-    node-sass: 4.x || 3.x
-    webpack: 1.x || 2.x || 3.x || 4.x
-  checksum: 73ac3bba48b03179e89c4b94ddfad02c209e2cd7e5a50fe95bda8517b07c3b5d0d9b2c3b4efa6668aa86d07106bfffa6924f66c4e31754278307e74dddb14785
-  languageName: node
-  linkType: hard
-
 "fastparse@npm:^1.1.1":
   version: 1.1.2
   resolution: "fastparse@npm:1.1.2"
@@ -15049,7 +15028,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:3.0.1, fs-extra@npm:3.x, fs-extra@npm:^3.0.1":
+"fs-extra@npm:3.0.1, fs-extra@npm:^3.0.1":
   version: 3.0.1
   resolution: "fs-extra@npm:3.0.1"
   dependencies:
@@ -20317,6 +20296,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klona@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "klona@npm:2.0.4"
+  checksum: abc6690882e0e6f5cf70451b79a6de95a27be56ced283d1d6d7e610db7d824e5da1f142f8073466dfbcfa887ee001b98f6dcfbcf02759828ba356b90202a74c5
+  languageName: node
+  linkType: hard
+
 "known-css-properties@npm:^0.11.0":
   version: 0.11.0
   resolution: "known-css-properties@npm:0.11.0"
@@ -20771,7 +20757,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:2.0.0":
+"loader-utils@npm:2.0.0, loader-utils@npm:^2.0.0":
   version: 2.0.0
   resolution: "loader-utils@npm:2.0.0"
   dependencies:
@@ -22910,10 +22896,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.1":
-  version: 2.6.1
-  resolution: "neo-async@npm:2.6.1"
-  checksum: 8a675256aec19ec2341c445f9b43183af3fd5a461b396ec75b43f3ad4f078a0e146c99433830a25e30d726fd9e4e1688a14babe5021fea5a2aaab4163bd8a653
+"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2":
+  version: 2.6.2
+  resolution: "neo-async@npm:2.6.2"
+  checksum: deac9f8d00eda7b2e5cd1b2549e26e10a0faa70adaa6fdadca701cc55f49ee9018e427f424bac0c790b7c7e2d3068db97f3093f1093975f2acb8f8818b936ed9
   languageName: node
   linkType: hard
 
@@ -28224,6 +28210,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "sass-loader@npm:10.1.1"
+  dependencies:
+    klona: ^2.0.4
+    loader-utils: ^2.0.0
+    neo-async: ^2.6.2
+    schema-utils: ^3.0.0
+    semver: ^7.3.2
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0
+    sass: ^1.3.0
+    webpack: ^4.36.0 || ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+  checksum: dbd4ba06e2a7de50db4588c9e84e38fb458ca4a44e1fccdf6eded728662b6fe0bd556249970876f13b47424e4285f5c6a8953933f83d47fd1448cad5884f84a5
+  languageName: node
+  linkType: hard
+
 "sass-loader@npm:^8.0.2":
   version: 8.0.2
   resolution: "sass-loader@npm:8.0.2"
@@ -28249,14 +28260,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.24.5, sass@npm:^1.32.4":
-  version: 1.32.4
-  resolution: "sass@npm:1.32.4"
+"sass@npm:^1.24.5, sass@npm:^1.32.2, sass@npm:^1.32.4":
+  version: 1.32.8
+  resolution: "sass@npm:1.32.8"
   dependencies:
     chokidar: ">=2.0.0 <4.0.0"
   bin:
     sass: sass.js
-  checksum: 0bb3701b3eaee454d8a6fdaeee802e67b1abac86180e6e29aee7e2e7b2ff8c688e7a3d3aff6be87e4c339e06f05ae00a9badd454e217023528eb3bd9964c3aae
+  checksum: a4d67e6be7b3c479d44065b1dd63fc76b90cfb5f5c9684a5d93fb9721c283bae4ec3f4dab478125ee21f3618dd408a9ba65bd3ba6482ab5a422fc86e1ca18b17
   languageName: node
   linkType: hard
 
@@ -28377,6 +28388,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "schema-utils@npm:3.0.0"
+  dependencies:
+    "@types/json-schema": ^7.0.6
+    ajv: ^6.12.5
+    ajv-keywords: ^3.5.2
+  checksum: 56dc93b4f6abe91aa2b76b2c656610cc6d491297f4e6866340bc7b6b226b521a2969ab2498cd9e6c59eda670b730a9c8695404ca56c08643c3b95c5e174588c8
+  languageName: node
+  linkType: hard
+
 "scss-comment-parser@npm:^0.8.4":
   version: 0.8.4
   resolution: "scss-comment-parser@npm:0.8.4"
@@ -29926,6 +29948,8 @@ __metadata:
     react: ^16.8.6
     react-dom: ^16.8.6
     react-is: ^16.8.6
+    sass: ^1.32.2
+    sass-loader: ^10.1.1
     storybook-readme: ^5.0.8
     webpack: ^4.41.5
   peerDependencies: