chore: replace deprecated node-sass with sass (#698)

* chore: replace deprecated `node-sass` with `sass`

* fix: update compound selector `@extends` usage
https://sass-lang.com/documentation/breaking-changes/extend-compound

.storybook/main.js

@@ -10,7 +10,7 @@
 'use strict';
 
 const path = require('path');
-const sass = require('node-sass');
+const sass = require('sass');
 const rtlcss = require('rtlcss');
 const deepReplace = require('../tools/deep-replace');
 

examples/codesandbox/styling/theme-zoning/package.json

@@ -19,9 +19,9 @@
     "autoprefixer": "^9.0.0",
     "css-loader": "^4.3.0",
     "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.14.0",
     "postcss": "^8.1.0",
     "postcss-loader": "^4.0.0",
+    "sass": "^1.39.0",
     "sass-loader": "^10.0.0",
     "style-loader": "^2.0.0",
     "webpack": "^4.0.0",

examples/codesandbox/styling/theme-zoning/webpack.config.js

@@ -1,15 +1,15 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 'use strict';
 
-const sass = require('node-sass');
+const sass = require('sass');
 const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 

package.json

@@ -228,7 +228,6 @@
     "mini-css-extract-plugin": "^0.5.0",
     "mkdirp": "^0.5.0",
     "morgan": "^1.8.0",
-    "node-sass": "^5.0.0",
     "null-loader": "^2.0.0",
     "playwright": "^1.0.0",
     "polymer-webpack-loader": "^2.0.0",
@@ -255,6 +254,7 @@
     "rollup-pluginutils": "^2.8.0",
     "rtlcss": "^2.4.0",
     "rxjs": "^6.4.0",
+    "sass": "^1.39.0",
     "sass-loader": "^10.0.0",
     "strip-comments": "^1.0.0",
     "style-loader": "^2.0.0",

src/components/modal/modal.scss

@@ -72,7 +72,7 @@
 }
 
 :host(#{$prefix}-modal[open]) {
-  @extend .#{$prefix}--modal.is-visible;
+  @extend .#{$prefix}--modal, .is-visible;
 }
 
 :host(#{$prefix}-modal-header) {

src/components/notification/inline-notification.scss

@@ -33,34 +33,30 @@ $css--plex: true !default;
   @extend .#{$prefix}--inline-notification--success;
 
   &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast;
-    @extend .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success;
+    @extend .#{$prefix}--inline-notification--low-contrast, .#{$prefix}--inline-notification--success;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='info']) {
   @extend .#{$prefix}--inline-notification--info;
 
   &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast;
-    @extend .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info;
+    @extend .#{$prefix}--inline-notification--low-contrast, .#{$prefix}--inline-notification--info;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='warning']) {
   @extend .#{$prefix}--inline-notification--warning;
 
   &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast;
-    @extend .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning;
+    @extend .#{$prefix}--inline-notification--low-contrast, .#{$prefix}--inline-notification--warning;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='error']) {
   @extend .#{$prefix}--inline-notification--error;
 
   &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast;
-    @extend .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error;
+    @extend .#{$prefix}--inline-notification--low-contrast, .#{$prefix}--inline-notification--error;
   }
 }

src/components/notification/toast-notification.scss

@@ -29,34 +29,30 @@ $css--plex: true !default;
   @extend .#{$prefix}--toast-notification--success;
 
   &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast;
-    @extend .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success;
+    @extend .#{$prefix}--toast-notification--low-contrast, .#{$prefix}--toast-notification--success;
   }
 }
 
 :host(#{$prefix}-toast-notification[kind='info']) {
   @extend .#{$prefix}--toast-notification--info;
 
   &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast;
-    @extend .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info;
+    @extend .#{$prefix}--toast-notification--low-contrast, .#{$prefix}--toast-notification--info;
   }
 }
 
 :host(#{$prefix}-toast-notification[kind='warning']) {
   @extend .#{$prefix}--toast-notification--warning;
 
   &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast;
-    @extend .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning;
+    @extend .#{$prefix}--toast-notification--low-contrast, .#{$prefix}--toast-notification--warning;
   }
 }
 
 :host(#{$prefix}-toast-notification[kind='error']) {
   @extend .#{$prefix}--toast-notification--error;
 
   &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast;
-    @extend .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error;
+    @extend .#{$prefix}--toast-notification--low-contrast, .#{$prefix}--toast-notification--error;
   }
 }

src/components/overflow-menu/overflow-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2020
+// Copyright IBM Corp. 2019, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -48,7 +48,7 @@ $css--plex: true !default;
   @extend .#{$prefix}--overflow-menu-options;
 
   &:after {
-    @extend .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after;
+    @extend .#{$prefix}--overflow-menu-options, [data-floating-menu-direction='bottom'], ::after;
   }
 }
 
@@ -57,7 +57,7 @@ $css--plex: true !default;
   margin-bottom: $spacing-2xs;
 
   &:after {
-    @extend .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after;
+    @extend .#{$prefix}--overflow-menu-options, [data-floating-menu-direction='top'], ::after;
   }
 }
 

src/components/structured-list/structured-list.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2020
+// Copyright IBM Corp. 2019, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -15,8 +15,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-structured-list-head) ::slotted(#{$prefix}-structured-list-header-row) {
-  @extend .#{$prefix}--structured-list-row;
-  @extend .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--header-row;
+  @extend .#{$prefix}--structured-list-row, .#{$prefix}--structured-list-row--header-row;
 }
 
 :host(#{$prefix}-structured-list-header-row) {

tests/karma.conf.js

@@ -12,7 +12,7 @@
 /* eslint-disable global-require */
 
 const path = require('path');
-const sass = require('node-sass');
+const sass = require('sass');
 
 function normalizeBrowser(browser) {
   return (

tools/rollup-plugin-lit-scss.js

@@ -11,7 +11,7 @@
 
 const path = require('path');
 const { promisify } = require('util');
-const sass = require('node-sass');
+const sass = require('sass');
 const { createFilter } = require('rollup-pluginutils');
 
 const renderSass = promisify(sass.render);

yarn.lock

@@ -6816,6 +6816,14 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
@@ -8485,6 +8493,21 @@ child-process-promise@^2.2.0:
   optionalDependencies:
     fsevents "~2.1.2"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.0.0:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.6.tgz#b6cad653a929e244ce8a834244164d241fa954c5"
@@ -10638,11 +10661,6 @@ entities@^1.1.1, entities@~1.1.1:
   resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
-env-paths@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
-  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
-
 errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -12327,7 +12345,7 @@ glob-parent@^5.1.0, glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -12633,11 +12651,6 @@ graceful-fs@^4.2.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
 
-graceful-fs@^4.2.3:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -16718,22 +16731,6 @@ node-gyp@^3.8.0:
     tar "^2.0.0"
     which "1"
 
-node-gyp@^7.1.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
-  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
-  dependencies:
-    env-paths "^2.2.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.3"
-    nopt "^5.0.0"
-    npmlog "^4.1.2"
-    request "^2.88.2"
-    rimraf "^3.0.2"
-    semver "^7.3.2"
-    tar "^6.0.2"
-    which "^2.0.2"
-
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -16872,28 +16869,6 @@ node-sass@^4.8.3:
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
-node-sass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-5.0.0.tgz#4e8f39fbef3bac8d2dc72ebe3b539711883a78d2"
-  integrity sha512-opNgmlu83ZCF792U281Ry7tak9IbVC+AKnXGovcQ8LG8wFaJv6cLnRlc6DIHlmNxWEexB5bZxi9SZ9JyUuOYjw==
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^1.1.1"
-    cross-spawn "^7.0.3"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    lodash "^4.17.15"
-    meow "^3.7.0"
-    mkdirp "^0.5.1"
-    nan "^2.13.2"
-    node-gyp "^7.1.0"
-    npmlog "^4.0.0"
-    request "^2.88.0"
-    sass-graph "2.2.5"
-    stdout-stream "^1.4.0"
-    "true-case-path" "^1.0.2"
-
 node-version@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d"
@@ -16906,13 +16881,6 @@ node-version@^1.0.0:
   dependencies:
     abbrev "1"
 
-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.4.0"
   resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -19488,6 +19456,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 realpath-native@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
@@ -19938,7 +19913,7 @@ request-promise@^4.2.2:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.83.0, request@^2.88.2:
+request@^2.83.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -20419,16 +20394,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8"
-  integrity sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==
-  dependencies:
-    glob "^7.0.0"
-    lodash "^4.0.0"
-    scss-tokenizer "^0.2.3"
-    yargs "^13.3.2"
-
 sass-graph@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
@@ -20468,6 +20433,13 @@ sass@1.23.3:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
+sass@^1.39.0:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.39.0.tgz#6c64695d1c437767c8f1a4e471288e831f81d035"
+  integrity sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -23567,7 +23539,7 @@ which@1, which@^1.2.1, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0,
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1, which@^2.0.2:
+which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==