Quiet sass warnings (github#19960)

* npm install sass@latest

* add quietDeps: true to webpack config

* prevent error message from hmr abort, cleans up the log

Co-authored-by: Sarah Schneider <[email protected]>

Author: mikesurowiec

middleware/abort.js

@@ -1,6 +1,10 @@
 module.exports = function abort (req, res, next) {
   // If the client aborts the connection, send an error
   req.once('aborted', () => {
+    // ignore aborts from next, usually has to do with webpack-hmr
+    if (req.path.startsWith('/_next')) {
+      return
+    }
     // NOTE: Node.js will also automatically set `req.aborted = true`
 
     const abortError = new Error('Client closed request')

next.config.js

@@ -4,13 +4,19 @@ const languages = require('./lib/languages')
 module.exports = {
   // speed up production `next build` by ignoring typechecking during that step of build.
   // type-checking still occurs in the Dockerfile build
+  future: {
+    webpack: 5,
+  },
   typescript: {
     ignoreBuildErrors: true
   },
   i18n: {
     locales: Object.values(languages).map(({ code }) => code),
     defaultLocale: 'en'
   },
+  sassOptions: {
+    quietDeps: true
+  },
   async rewrites () {
     const DEFAULT_VERSION = 'free-pro-team@latest'
     return productIds.map((productId) => {

package-lock.json

@@ -163,7 +163,7 @@
     "resolve-url-loader": "^4.0.0",
     "rimraf": "^3.0.2",
     "robots-parser": "^2.3.0",
-    "sass": "^1.34.0",
+    "sass": "^1.35.1",
     "sass-loader": "^11.1.1",
     "start-server-and-test": "^1.12.2",
     "strip-ansi": "^7.0.0",

package.json

@@ -1,7 +1,9 @@
+@use "sass:math";
+
 // Arrow links
 .Bump-link-symbol {
   display: inline-block;
-  transition: $transition-time / 2;
+  transition: math.div($transition-time, 2);
   transform: translateX(0);
 }
 
@@ -12,7 +14,7 @@
 .Bump-link--hover .Bump-link-symbol {
   color: inherit;
   opacity: 0;
-  transition: $transition-time / 2;
+  transition: math.div($transition-time, 2);
   transform: translateX(0);
 }
 

stylesheets/bump-link.scss

@@ -47,6 +47,7 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               sassOptions: {
+                quietDeps: true,
                 includePaths: ['./stylesheets', './node_modules'],
                 options: {
                   sourceMap: true,