chore: Upgrade to Node 16 (#2139)

Fixes: #2138

[category:Infrastructure]

.nvmrc

@@ -1 +1 @@
-lts/fermium
+16.20.0

.storybook/main.js

@@ -19,6 +19,7 @@ module.exports = {
     },
     './readme-panel/preset.js',
     '@storybook/addon-storysource',
+    '@storybook/addon-postcss',
   ],
   typescript: {
     check: false,
@@ -28,6 +29,20 @@ module.exports = {
     // Get the specifications object and replace with a real object in the spec.ts file
     const specs = await getSpecifications();
 
+    /**
+     * This was added to tell webpack not to parse the typescript.js file in node_modules and suppress these warnings:
+     * WARN Module not found: Error: Can't resolve 'perf_hooks' in 'node_modules/typescript/lib'
+     * WARN resolve 'perf_hooks' in 'node_modules/typescript/lib
+     * 
+     * These warnings relate to this open GitHub issue: https://github.com/microsoft/TypeScript/issues/39436
+     * If you no longer see these warnings when this is config is removed, you can safely delete this config.
+    */ 
+    config.module = {
+      ...config.module,
+      // This solution was taken from this comment: https://github.com/microsoft/TypeScript/issues/39436#issuecomment-817029140
+      noParse: [require.resolve('typescript/lib/typescript.js')],
+    }
+
     config.module.rules.push({
       test: /.ts$/,
       include: [path.resolve(__dirname, '../modules/docs')],

modules/css/banner/lib/accessibility.scss

@@ -8,7 +8,8 @@
 
 [data-whatinput='keyboard'] {
   @include wdc-focusable-banner() {
-    @extend .wdc-banner.wdc-banner-focus;
+    @extend .wdc-banner;
+    @extend .wdc-banner-focus;
   }
 }
 

modules/css/button/lib/accessibility-deprecated.scss

@@ -14,18 +14,22 @@
   }
 
   .wdc-btn-deprecated.wdc-btn-primary:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']):focus {
-    @extend .wdc-btn-primary.wdc-btn-focus;
+    @extend .wdc-btn-primary;
+    @extend .wdc-btn-focus;
   }
 
   .wdc-btn-deprecated.wdc-btn-split-text:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']):focus {
-    @extend .wdc-btn-split-text.wdc-btn-focus;
+    @extend .wdc-btn-split-text;
+    @extend .wdc-btn-focus;
   }
   .wdc-btn-deprecated.wdc-btn-split-icon:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']):focus {
-    @extend .wdc-btn-split-icon.wdc-btn-focus;
+    @extend .wdc-btn-split-icon;
+    @extend .wdc-btn-focus;
   }
 
   .wdc-btn-deprecated.wdc-btn-delete:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']):focus {
-    @extend .wdc-btn-delete.wdc-btn-focus;
+    @extend .wdc-btn-delete;
+    @extend .wdc-btn-focus;
   }
 }
 

modules/css/button/lib/accessibility.scss

@@ -19,7 +19,8 @@
   }
 
   .wdc-btn-primary:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']):focus {
-    @extend .wdc-btn-primary.wdc-btn-focus;
+    @extend .wdc-btn-primary;
+    @extend .wdc-btn-focus;
 
     &:hover {
       background-color: $wdc-btn-bg-primary-hover;
@@ -66,10 +67,12 @@
 
   .wdc-btn-delete:not([disabled]):not(.wdc-btn-disabled):not([tabindex='-1']) {
     &:hover {
-      @extend .wdc-btn-delete.wdc-btn-hover;
+      @extend .wdc-btn-delete;
+      @extend .wdc-btn-hover;
     }
     &:active {
-      @extend .wdc-btn-delete.wdc-btn-active;
+      @extend .wdc-btn-delete;
+      @extend .wdc-btn-active;
     }
   }
 

modules/css/button/lib/button-deprecated-variables.scss

@@ -56,8 +56,6 @@ $wdc-btn-deprecated-color-delete-disabled: $wdc-color-cinnamon-300;
 $wdc-btn-deprecated-split-border-radius: 3px;
 $wdc-btn-deprecated-split-icon-height: $wdc-spacing-s;
 $wdc-btn-deprecated-split-icon-width: $wdc-spacing-xxxs + $wdc-spacing-m + $wdc-spacing-xxs;
-$wdc-btn-deprecated-split-icon-padding-v: (
-    $wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height
-  )/2;
+$wdc-btn-deprecated-split-icon-padding-v: calc(($wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height)/2);
 $wdc-btn-deprecated-split-icon-padding: $wdc-btn-deprecated-split-icon-padding-v $wdc-spacing-xxs
   $wdc-btn-deprecated-split-icon-padding-v $wdc-spacing-xxxs;

modules/css/button/lib/button-deprecated.scss

@@ -59,7 +59,7 @@ $_wdc-btn-deprecated-caret-down-icon-hover: svg-load(
   }
 
   .wdc-btn-icon-inline {
-    padding: (($wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height)/2) 0;
+    padding: calc(($wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height)/2) 0;
     margin-left: $wdc-spacing-xxs;
     line-height: 0;
     float: right;
@@ -120,7 +120,7 @@ $_wdc-btn-deprecated-caret-down-icon-hover: svg-load(
 
     &:after {
       @include wdc-btn-deprecated-icon-inline($_wdc-btn-deprecated-caret-down-icon);
-      padding: (($wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height)/2) 0;
+      padding: calc(($wdc-btn-deprecated-height-l - $wdc-btn-deprecated-split-icon-height)/2) 0;
       margin-left: $wdc-spacing-xxs;
       line-height: 0;
       float: right;

modules/css/button/lib/button.scss

@@ -118,7 +118,7 @@ $_wdc-btn-caret-down-icon-white: svg-load(
 
     &:after {
       @include wdc-btn-icon-inline($_wdc-btn-caret-down-icon);
-      padding: (($wdc-btn-height-l - $wdc-btn-split-icon-height)/2) 0;
+      padding: calc(($wdc-btn-height-l - $wdc-btn-split-icon-height)/2) 0;
       margin-left: $wdc-spacing-xxs;
       line-height: 0;
       float: right;

modules/css/card/lib/card.scss

@@ -56,7 +56,7 @@ $_wdc-container-positions: 'start' flex-start, 'end' flex-end, 'center' center,
   // add compensation for the padding
   // and spacing in between cards
   $_spacing-compensation: $wdc-spacing-l * 3;
-  $_width: 100% / 12 * $size;
+  $_width: calc(100% / 12 * $size);
 
   .wdc-card-#{$size} {
     @include card-common();
@@ -70,22 +70,22 @@ $_wdc-container-positions: 'start' flex-start, 'end' flex-end, 'center' center,
 
   // double the size for tablet;
   // if size is > 50% increase it to 100%
-  @media only screen and(max-width: $_wdc-tablet-breakpoint) {
+  @media only screen and (max-width: $_wdc-tablet-breakpoint) {
     $_doubled-size: $size * 2;
     $_doubled-width: null;
 
     @if $_doubled-size > 6 {
       $_doubled-width: 100%;
     } @else {
-      $_doubled-width: 100% / 12 * $_doubled-size;
+      $_doubled-width: calc(100% / 12 * $_doubled-size);
     }
 
     .wdc-card-#{$size} {
       width: calc(#{$_doubled-width} - #{$_spacing-compensation});
     }
   }
 
-  @media only screen and(max-width: $_wdc-mobile-breakpoint) {
+  @media only screen and (max-width: $_wdc-mobile-breakpoint) {
     .wdc-card-#{$size} {
       width: 100%;
     }

modules/css/layout/lib/layout.scss

@@ -38,8 +38,8 @@
         @include wdc-col-common;
         padding-left: $_half-spacing;
         padding-right: $_half-spacing;
-        flex-basis: 100% / $wdc-layout-columns * $_i;
-        max-width: 100% / $wdc-layout-columns * $_i;
+        flex-basis: calc(100% / $wdc-layout-columns * $_i);
+        max-width: calc(100% / $wdc-layout-columns * $_i);
       }
 
       .wdc-col-offset-#{$_i} {
@@ -50,16 +50,16 @@
         @if $_i == 0 {
           margin-left: 0;
         } @else {
-          margin-left: 100% / $wdc-layout-columns * $_i;
+          margin-left: calc(100% / $wdc-layout-columns * $_i);
         }
       }
 
       .wdc-col-#{$_name}-#{$_i} {
         @include wdc-col-common;
         padding-left: $_half-spacing;
         padding-right: $_half-spacing;
-        flex-basis: 100% / $wdc-layout-columns * $_i;
-        max-width: 100% / $wdc-layout-columns * $_i;
+        flex-basis: calc(100% / $wdc-layout-columns * $_i);
+        max-width: calc(100% / $wdc-layout-columns * $_i);
       }
 
       .wdc-col-#{$_name}-offset-#{$_i} {
@@ -70,7 +70,7 @@
         @if $_i == 0 {
           margin-left: 0;
         } @else {
-          margin-left: 100% / $wdc-layout-columns * $_i;
+          margin-left: calc(100% / $wdc-layout-columns * $_i);
         }
       }
     }

modules/css/select/lib/select.scss

@@ -55,7 +55,7 @@
 }
 
 [data-whatinput='keyboard'] .wdc-form-select:not([disabled]):focus {
-  @extend .wdc-form-select.wdc-form-focus;
+  @extend .wdc-form-select, .wdc-form-focus;
 }
 
 [data-whatinput='mouse'],

modules/react/tokens/index.ts

@@ -63,16 +63,15 @@ export {
   fontFamily,
   monoFontFamily,
   BrandingColor,
-  CanvasDepth,
-  CanvasDepthValues,
-  CSSProperties,
 };
 
 export type {
   CanvasBorderRadius,
   CanvasBorderRadiusKeys,
   CanvasBorderRadiusValues,
   CanvasColor,
+  CanvasDepth,
+  CanvasDepthValues,
   CanvasSpace,
   CanvasSpaceKeys,
   CanvasSpaceValues,
@@ -82,4 +81,5 @@ export type {
   CanvasTypeProperties,
   CanvasTypeVariants,
   CanvasTypeHierarchy,
+  CSSProperties,
 }

package.json

@@ -18,6 +18,7 @@
     "@emotion/eslint-plugin": "^11.7.0",
     "@emotion/is-prop-valid": "^1.1.1",
     "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-storysource": "^6.5.9",
     "@storybook/components": "^6.5.9",
     "@storybook/react": "^6.5.9",
@@ -44,7 +45,6 @@
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "caniuse-lite": "^1.0.30001154",
     "chalk": "4.1.2",
     "commitizen": "^4.0.4",
     "common-tags": "^1.8.0",
@@ -89,7 +89,6 @@
     "markdown-to-jsx": "^6.10.3",
     "mkdirp": "^1.0.3",
     "node-fetch": "^3.1.0",
-    "node-sass": "^6.0.0",
     "npm-run-all": "^4.1.5",
     "postcss-banner": "^3.0.1",
     "postcss-discard-duplicates": "^4.0.2",
@@ -105,6 +104,7 @@
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-terser": "^5.0.0",
+    "sass": "^1.61.0",
     "sass-loader": "^10.0.0",
     "semver": "^7.3.2",
     "string-replace-loader": "2.3.0",

utils/css-build.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 'use strict';
 
-const sass = require('node-sass');
+const sass = require('sass');
 const path = require('path');
 const postcss = require('postcss');
 const fs = require('fs');