chore: update sass to v1.71.0 (#22531)

## Updates Sass

Updates `sass` to the latest version, while also switching to
`sass-embedded` (maintained by the same team, is faster than sass, and
we don't need to patch it anymore!).

## Moves fonts

This PR also moves the `fonts` directory to be relative to the CSS file
that imports it. This helps with two things:

1. its just nice to use _real_ relative paths to files that are using
them while developing (not just in the final build)
2. the webpack build will work differently: it _requires_ all the
imports to use relative paths (there is a hack I can put in place to not
require relative paths, but meh. I don't want to do that :-) ).

## Use `@use` for the design-system instead of `@import`

The biggest change in this PR is moving towards the use of `@use` and
away from `@import`, which is slated to be completely removed from Sass
in some distance future release.

### Bonus savings!

This PR also fixes a the duplication of CSS, as the design-system
previously included actual CSS (colors, fonts, and font-awesome styles)
and reduces the output size from ~1700KB to ~1300KB. The issue with that
some devs were already `@use`ing the `design-system`, which was
re-including its all of its rules (mentioned above).

### ⚠️ Changes How We Write SCSS

So, from now on, if someone wants to use something from the
design-system they'll need to put `@use design-system";` at the top of
the SCSS file.

Author: davidmurdoch

.storybook/5.BREAKPOINTS.stories.mdx

@@ -34,51 +34,55 @@ $screen-lg-min /* 1280px */
 ### Mixins
 
 ```css
+@use "design-system";
+
 /* Max screen size */
-@include screen-sm-max {
+@include design-system.screen-sm-max {
   /* equivalent css @media screen and (max-width: 575px) */
 }
-@include screen-md-max {
+@include design-system.screen-md-max {
   /* equivalent css @media screen and (max-width: 767px) */
 }
-@include screen-lg-max {
+@include design-system.screen-lg-max {
   /* equivalent css @media screen and (max-width: 1279px) */
 }
 
 /* Min screen size */
-@include screen-sm-min {
+@include design-system.screen-sm-min {
   /* equivalent css @media screen and (min-width: 576px) */
 }
-@include screen-md-min {
+@include design-system.screen-md-min {
   /* equivalent css @media screen and (min-width: 768px) */
 }
-@include screen-lg-min {
+@include design-system.screen-lg-min {
   /* equivalent css @media screen and (min-width: 1280px) */
 }
 ```
 
 Migrating from the old sass variables to the new mixins looks like this
 
 ```css
+@use "design-system";
+
 /* Max width */
 /* Instead of the media query and sass variable */
-@media screen and (max-width: $break-small) {
+@media screen and (max-width: design-system.$break-small) {
   right: 16px;
 }
 
 /* Use the sass mixin */
-@include screen-sm-max {
+@include design-system.screen-sm-max {
   right: 16px;
 }
 
 /* Min width */
 /* Instead of the media query and sass variable */
-@media screen and (min-width: $break-large) {
+@media screen and (min-width: design-system.$break-large) {
   left: 16px;
 }
 
 /* Use the sass mixin */
-@include screen-sm-min {
+@include design-system.screen-sm-min {
   left: 16px;
 }
 ```
@@ -113,12 +117,14 @@ Don't use static media queries in your code.
 Do use the provided Sass mixins
 
 ```css
+@use "design-system";
+
 .account-menu {
-  @include screen-md-min {
+  @include design-system.screen-md-min {
     right: calc((100vw - 80vw) / 2);
   }
 
-  @include screen-lg-min {
+  @include design-system.screen-lg-min {
     right: calc((100vw - 65vw) / 2);
   }
 }

.storybook/main.js

@@ -69,9 +69,9 @@ module.exports = {
           loader: 'sass-loader',
           options: {
             sourceMap: true,
-            implementation: require('sass'),
+            implementation: require('sass-embedded'),
             sassOptions: {
-              includePaths: ['ui/css/'],
+              includePaths: ['ui/css/', 'node_modules/',],
             },
           },
         },

.yarn/patches/sass-npm-1.35.2-6df4e15d13.patch

@@ -127,7 +127,7 @@ function getCopyTargets(
       dest: `images/contract`,
     },
     {
-      src: `./app/fonts/`,
+      src: `./ui/css/utilities/fonts/`,
       dest: `fonts`,
     },
     {
@@ -139,6 +139,7 @@ function getCopyTargets(
         '@fortawesome/fontawesome-free',
         'webfonts/',
       ),
+      // update this location in styles.js if it changes
       dest: `fonts/fontawesome`,
     },
     {

development/build/sass-compiler.js

@@ -7,11 +7,11 @@ const sourcemaps = require('gulp-sourcemaps');
 const rtlcss = require('postcss-rtlcss');
 const postcss = require('gulp-postcss');
 const pump = pify(require('pump'));
+const sass = require('sass-embedded');
+const gulpSass = require('gulp-sass')(sass);
 const { TASKS } = require('./constants');
 const { createTask } = require('./task');
 
-let sass;
-
 // scss compilation and autoprefixing tasks
 module.exports = createStyleTasks;
 
@@ -64,18 +64,25 @@ function createStyleTasks({ livereload }) {
 }
 
 async function buildScssPipeline(src, dest, devMode) {
-  if (!sass) {
-    // use our own compiler which runs sass in its own process
-    // in order to not pollute the intrinsics
-    // eslint-disable-next-line node/global-require
-    sass = require('gulp-sass')(require('./sass-compiler'));
-  }
   await pump(
     ...[
       // pre-process
       gulp.src(src),
       devMode && sourcemaps.init(),
-      sass().on('error', sass.logError),
+      gulpSass({
+        // The order of includePaths is important; prefer our own
+        // folders over `node_modules`
+        includePaths: [
+          // enables shortcuts to `@use design-system`, `@use utilities`, etc.
+          'ui/css/',
+          'node_modules/',
+        ],
+        functions: {
+          // Tell sass where to find the font-awesome font files
+          // update this location in static.js if it changes
+          '-mm-fa-path()': () => new sass.SassString('./fonts/fontawesome'),
+        },
+      }).on('error', gulpSass.logError),
       postcss([autoprefixer(), rtlcss()]),
       devMode && sourcemaps.write(),
       gulp.dest(dest),

development/build/static.js

@@ -9,7 +9,7 @@ import endOfStream from 'end-of-stream';
 import pump from 'pump';
 import gulp from 'gulp';
 import gulpSass from 'gulp-sass';
-import sass from 'sass';
+import * as sass from 'sass-embedded';
 import sourcemaps from 'gulp-sourcemaps';
 import autoprefixer from 'gulp-autoprefixer';
 import fg from 'fast-glob';

development/build/styles.js

@@ -37,8 +37,8 @@
     "@ensdomains/content-hash>cids>multihashes": {
       "packages": {
         "@ensdomains/content-hash>cids>multibase": true,
-        "@ensdomains/content-hash>cids>uint8arrays": true,
-        "@ensdomains/content-hash>multihashes>varint": true
+        "@ensdomains/content-hash>cids>multihashes>varint": true,
+        "@ensdomains/content-hash>cids>uint8arrays": true
       }
     },
     "@ensdomains/content-hash>cids>uint8arrays": {
@@ -66,7 +66,7 @@
     "@ensdomains/content-hash>multicodec": {
       "packages": {
         "@ensdomains/content-hash>multicodec>uint8arrays": true,
-        "@ensdomains/content-hash>multicodec>varint": true
+        "sass-embedded>varint": true
       }
     },
     "@ensdomains/content-hash>multicodec>uint8arrays": {

development/ts-migration-dashboard/scripts/build-app.ts

@@ -37,8 +37,8 @@
     "@ensdomains/content-hash>cids>multihashes": {
       "packages": {
         "@ensdomains/content-hash>cids>multibase": true,
-        "@ensdomains/content-hash>cids>uint8arrays": true,
-        "@ensdomains/content-hash>multihashes>varint": true
+        "@ensdomains/content-hash>cids>multihashes>varint": true,
+        "@ensdomains/content-hash>cids>uint8arrays": true
       }
     },
     "@ensdomains/content-hash>cids>uint8arrays": {
@@ -66,7 +66,7 @@
     "@ensdomains/content-hash>multicodec": {
       "packages": {
         "@ensdomains/content-hash>multicodec>uint8arrays": true,
-        "@ensdomains/content-hash>multicodec>varint": true
+        "sass-embedded>varint": true
       }
     },
     "@ensdomains/content-hash>multicodec>uint8arrays": {

lavamoat/browserify/beta/policy.json

@@ -37,8 +37,8 @@
     "@ensdomains/content-hash>cids>multihashes": {
       "packages": {
         "@ensdomains/content-hash>cids>multibase": true,
-        "@ensdomains/content-hash>cids>uint8arrays": true,
-        "@ensdomains/content-hash>multihashes>varint": true
+        "@ensdomains/content-hash>cids>multihashes>varint": true,
+        "@ensdomains/content-hash>cids>uint8arrays": true
       }
     },
     "@ensdomains/content-hash>cids>uint8arrays": {
@@ -66,7 +66,7 @@
     "@ensdomains/content-hash>multicodec": {
       "packages": {
         "@ensdomains/content-hash>multicodec>uint8arrays": true,
-        "@ensdomains/content-hash>multicodec>varint": true
+        "sass-embedded>varint": true
       }
     },
     "@ensdomains/content-hash>multicodec>uint8arrays": {