Replace node-sass with Dart Sass

We want to use `sass` instead of `node-sass` because `node-sass` does
not support M1 Macs (see issue #1000).

We have to replace use of slash for division with `math.div` to avoid
deprecation warnings.

We also use sync for performance and silence warnings (for now).

Co-authored-by: Natalie Carey <natalie.carey@digital.cabinet-office.gov.uk>
Co-authored-by: Joe Lanman <joe.lanman@digital.cabinet-office.gov.uk>
Co-authored-by: Laurence de Bruxelles <laurence.debruxelles@digital.cabinet-office.gov.uk>

__tests__/spec/sanity-checks.js

@@ -6,14 +6,12 @@ const util = require('util')
 
 const glob = require('glob')
 const request = require('supertest')
-const sass = require('node-sass')
+const sass = require('sass')
 
 const app = require('../../server.js')
 const gulpConfig = require('../../gulp/config.json')
 const utils = require('../../lib/utils')
 
-const sassRender = util.promisify(sass.render)
-
 function readFile (pathFromRoot) {
   return fs.readFileSync(path.join(__dirname, '../../' + pathFromRoot), 'utf8')
 }
@@ -135,9 +133,16 @@ describe('The Prototype Kit', () => {
 
   const sassFiles = glob.sync(gulpConfig.paths.assets + '/sass/*.scss')
 
-  describe(`${gulpConfig.paths.assets}sass/`, () => {
+  describe(`${gulpConfig.paths.assets}sass/`, (done) => {
     it.each(sassFiles)('%s renders to CSS without errors', (file) => {
-      return sassRender({ file: file })
+      return sass.render({ file: file }, (err) => {
+        console.log('callback')
+        if (err) {
+          console.error('error found', err)
+          throw err
+        }
+        done()
+      })
     })
   })
 

app/assets/sass/patterns/_step-by-step-nav.scss

@@ -1,6 +1,8 @@
 // Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
 // Note - this code for prototype purposes only. It is not production code.
 
+@use "sass:math";
+
 $stroke-width: 2px;
 $stroke-width-large: 3px;
 $number-circle-size: 26px;
@@ -19,12 +21,12 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
+  margin-left: math.div($number-circle-size, 2) - math.div($stroke-width, 2);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
+  margin-left: math.div($number-circle-size-large, 2) - math.div($stroke-width-large, 2);
   border-width: $stroke-width-large;
 }
 
@@ -141,8 +143,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
     z-index: 6;
     bottom: 0;
     left: 0;
-    margin-left: $number-circle-size / 4;
-    width: $number-circle-size / 2;
+    margin-left: math.div($number-circle-size, 4);
+    width: math.div($number-circle-size, 2);
     height: 0;
     border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
   }
@@ -163,8 +165,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   .app-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       &:before {
-        margin-left: $number-circle-size-large / 4;
-        width: $number-circle-size-large / 2;
+        margin-left: math.div($number-circle-size-large, 4);
+        width: math.div($number-circle-size-large, 2);
         border-width: $stroke-width-large;
       }
 
@@ -329,7 +331,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
     .app-step-nav--large & {
       @include govuk-media-query($from: tablet) {
-        margin-top: -govuk-spacing(3);
+        margin-top: - govuk-spacing(3);
       }
     }
   }
@@ -395,9 +397,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
     z-index: 5;
     top: .6em; // position the dot to align with the first row of text in the link
     left: -(govuk-spacing(6) + govuk-spacing(3));
-    margin-top: -($stroke-width / 2);
-    margin-left: ($number-circle-size / 2);
-    width: $number-circle-size / 2;
+    margin-top: - math.div($stroke-width, 2);
+    margin-left: math.div($number-circle-size, 2);
+    width: math.div($number-circle-size, 2);
     height: $stroke-width;
     background: govuk-colour("black");
   }
@@ -406,7 +408,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
     @include govuk-media-query($from: tablet) {
       &:before {
         left: -(govuk-spacing(9));
-        margin-left: ($number-circle-size-large / 2);
+        margin-left: math.div($number-circle-size-large, 2);
         height: $stroke-width-large;
       }
     }

app/assets/sass/patterns/_step-by-step-related.scss

@@ -1,6 +1,8 @@
 // Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-related.scss
 // Note - this code for prototype purposes only. It is not production code.
 
+@use "sass:math";
+
 .app-step-nav-related {
   @include govuk-text-colour;
   border-top: 2px solid govuk-colour("blue");
@@ -32,7 +34,7 @@
   }
 
   .app-step-nav-related__pretitle {
-    margin-bottom: govuk-spacing(6) / 4;
+    margin-bottom: math.div(govuk-spacing(6), 4);
   }
 }
 

gulp/sass.js

@@ -6,7 +6,7 @@
 */
 
 const gulp = require('gulp')
-const sass = require('gulp-sass')(require('node-sass'))
+const sass = require('gulp-sass')(require('sass'))
 const path = require('path')
 const fs = require('fs')
 
@@ -23,7 +23,7 @@ gulp.task('sass-extensions', function (done) {
 
 gulp.task('sass', function () {
   return gulp.src(config.paths.assets + '/sass/*.scss', { sourcemaps: true })
-    .pipe(sass({ outputStyle: 'expanded' }).on('error', function (error) {
+    .pipe(sass.sync({ outputStyle: 'expanded', logger: sass.compiler.Logger.silent }, false).on('error', function (error) {
       // write a blank application.css to force browser refresh on error
       if (!fs.existsSync(stylesheetDirectory)) {
         fs.mkdirSync(stylesheetDirectory)
@@ -37,16 +37,17 @@ gulp.task('sass', function () {
 
 gulp.task('sass-documentation', function () {
   return gulp.src(config.paths.docsAssets + '/sass/*.scss', { sourcemaps: true })
-    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
+    .pipe(sass.sync({ outputStyle: 'expanded', logger: sass.compiler.Logger.silent  }).on('error', sass.logError))
     .pipe(gulp.dest(config.paths.public + '/stylesheets/', { sourcemaps: true }))
 })
 
 // Backward compatibility with Elements
 
 gulp.task('sass-v6', function () {
   return gulp.src(config.paths.v6Assets + '/sass/*.scss', { sourcemaps: true })
-    .pipe(sass({
+    .pipe(sass.sync({
       outputStyle: 'expanded',
+      logger: sass.compiler.Logger.silent,
       includePaths: [
         'node_modules/govuk_frontend_toolkit/stylesheets',
         'node_modules/govuk-elements-sass/public/sass',