web: replace node-sass with sass (#5846)

The `node-sass` package has been deprecated and superseded by the
`sass` package.

The `node-sass` package used a C library via `node-gyp`, which itself
requires Python to wrangle the compilation. The version of `node-sass`
we were using was old and thus relied on an old version of `node-gyp`,
which only supported <= Python 3.8.

This caused problems with Homebrew builds with embedded assets, as
Python 3.9 is used there, so `node-gyp` would error out.

While it's theoretically possible to upgrade `node-sass` to a newer
version to transitively get a newer `node-gyp` that will not bail on
Python 3.9, that did NOT work out of the box, and the recommended
solution for the problem was...switch to `sass`, which does not have
any native code requirements and is actively supported.

As part of this, the `sass` compiler emitted warnings on deprecated
division outside of `calc()`, so those have all been updated to avoid
producing a bunch of noise in the build log.

I did a visual pass after this change and didn't see any differences
in styling in Chrome on macOS.

tl;dr: This will dramatically simplify producing Homebrew builds with
       embedded assets by sidestepping the need for a Python/`node-gyp`
       build chain just for bundling the UI assets.

web/package.json

@@ -80,11 +80,11 @@
     "fetch-mock": "^9.11.0",
     "jest-junit": "^13.0.0",
     "jsdom": "^18.1.0",
-    "node-sass": "^6.0.1",
     "prettier": "2.4.1",
     "prettier-plugin-organize-imports": "^2.3.4",
     "react-scripts": "^4.0.3",
     "react-test-renderer": "^16.9.0",
+    "sass": "^1.52.2",
     "typescript": "^4.4.4"
   },
   "engines": {

web/src/AnalyticsNudge.scss

@@ -6,7 +6,7 @@
   background-color: $color-purple;
   opacity: 0.98;
   color: $color-gray-10;
-  padding: $spacing-unit / 2;
+  padding: calc($spacing-unit / 2);
   box-sizing: border-box;
   position: fixed;
   z-index: $z-analyticsNudge;
@@ -40,8 +40,8 @@
   color: $color-gray-lightest;
   @include button-text;
   border: 1px solid $color-gray-50;
-  padding: $spacing-unit/3;
-  margin-left: $spacing-unit/2;
+  padding: calc($spacing-unit / 3);
+  margin-left: calc($spacing-unit / 2);
   min-width: $spacing-unit * 3;
 }
 
@@ -54,5 +54,5 @@
 }
 
 .AnalyticsNudge-button + .AnalyticsNudge-button {
-  margin-left: $spacing-unit/2;
+  margin-left: calc($spacing-unit / 2);
 }

web/src/FatalErrorModal.scss

@@ -20,8 +20,8 @@
   text-transform: uppercase;
   background-color: $color-red;
   color: $color-white;
-  padding-top: $spacing-unit / 4;
-  padding-bottom: $spacing-unit / 4;
+  padding-top: calc($spacing-unit / 4);
+  padding-bottom: calc($spacing-unit / 4);
   padding-left: $spacing-unit;
   padding-right: $spacing-unit;
 }

web/src/HUD.scss

@@ -23,7 +23,7 @@
 }
 
 .Pane-empty-message h2 {
-  margin-top: $spacing-unit / 2;
+  margin-top: calc($spacing-unit / 2);
   font-family: $font-sans-serif;
   font-size: $font-size;
   color: $color-gray-lightest;
@@ -33,4 +33,3 @@
   text-align: left;
   color: $color-gray-lightest;
 }
-

web/src/ShareSnapshotModal.scss

@@ -11,8 +11,8 @@
   text-transform: uppercase;
   background-color: $color-gray-50;
   color: $color-white;
-  padding-top: $spacing-unit / 2;
-  padding-bottom: $spacing-unit / 2;
+  padding-top: calc($spacing-unit / 2);
+  padding-bottom: calc($spacing-unit / 2);
   padding-left: $spacing-unit;
   padding-right: $spacing-unit;
 }
@@ -43,7 +43,7 @@
   position: relative; // Anchor the list bullets
 }
 .ShareSnapshotModal-detailsList > li {
-  margin-bottom: $spacing-unit / 3;
+  margin-bottom: calc($spacing-unit / 3);
 }
 .ShareSnapshotModal-detailsList > li::before {
   content: "";
@@ -59,9 +59,9 @@
   display: inline-block;
   text-decoration: none;
   background-color: $color-off-white;
-  margin-top: $spacing-unit / 4;
-  padding-left: $spacing-unit / 2;
-  padding-right: $spacing-unit / 2;
+  margin-top: calc($spacing-unit / 4);
+  padding-left: calc($spacing-unit / 2);
+  padding-right: calc($spacing-unit / 2);
   line-height: 1.75;
 }
 .ShareSnapshotModal-docsLink:hover {
@@ -72,8 +72,8 @@
   justify-content: flex-end;
   align-items: center;
   border-top: 1px dotted $color-gray-lightest;
-  padding-left: $spacing-unit / 2;
-  padding-right: $spacing-unit / 2;
+  padding-left: calc($spacing-unit / 2);
+  padding-right: calc($spacing-unit / 2);
   // This visually centers the button, whose shadow throws things off a bit:
   padding-top: $spacing-unit * 0.6;
   padding-bottom: $spacing-unit * 0.8;
@@ -95,10 +95,10 @@
 .ShareSnapshotModal-shareLink-urlBox {
   background-color: $color-white;
   border: 1px solid $color-gray-lightest;
-  padding-top: $spacing-unit / 6;
-  padding-bottom: $spacing-unit / 6;
-  padding-left: $spacing-unit / 3;
-  padding-right: $spacing-unit / 3;
+  padding-top: calc($spacing-unit / 6);
+  padding-bottom: calc($spacing-unit / 6);
+  padding-left: calc($spacing-unit / 3);
+  padding-right: calc($spacing-unit / 3);
   box-sizing: border-box;
   display: inline-block;
   flex-grow: 1;
@@ -134,7 +134,7 @@
 }
 .ShareSnapshotModal-tiltCloudLink span {
   border-bottom: 2px solid $color-gray-30;
-  margin-right: $spacing-unit / 4;
+  margin-right: calc($spacing-unit / 4);
 }
 .ShareSnapshotModal-tiltCloudLink svg {
   fill: $color-gray-50;
@@ -153,10 +153,10 @@
   text-transform: uppercase;
   color: $color-white;
   border: 0;
-  padding-top: $spacing-unit / 3;
-  padding-bottom: $spacing-unit / 3;
-  padding-left: $spacing-unit / 2;
-  padding-right: $spacing-unit / 2;
+  padding-top: calc($spacing-unit / 3);
+  padding-bottom: calc($spacing-unit / 3);
+  padding-left: calc($spacing-unit / 2);
+  padding-right: calc($spacing-unit / 2);
   text-decoration: none;
   transition: color 300ms;
   display: flex;