Merge pull request #1269 from alphagov/replace-node-sass

Replace node-sass with Dart Sass

CHANGELOG.md

@@ -1,3 +1,9 @@
+# Unreleased
+
+## Fixes
+
+- [Pull request #1269: Replace node-sass with Dart Sass](https://github.com/alphagov/govuk-prototype-kit/pull/1269).  This should allow the kit to work on M1 Macs.
+
 # 12.0.1 (Fix release)
 
 ## Recommended changes

__tests__/spec/sanity-checks.js

@@ -1,22 +1,21 @@
 /* eslint-env jest */
+
 const assert = require('assert')
 const fs = require('fs')
 const path = require('path')
-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')
 }
+
 /**
  * Basic sanity checks on the dev server
  */
@@ -136,8 +135,21 @@ describe('The Prototype Kit', () => {
   const sassFiles = glob.sync(gulpConfig.paths.assets + '/sass/*.scss')
 
   describe(`${gulpConfig.paths.assets}sass/`, () => {
-    it.each(sassFiles)('%s renders to CSS without errors', (file) => {
-      return sassRender({ file: file })
+    it.each(sassFiles)('%s renders to CSS without errors', async (file) => {
+      return new Promise((resolve, reject) => {
+        sass.render({
+          file,
+          logger: sass.Logger.silent,
+          loadPaths: [path.resolve(__dirname, '..', '..')]
+        }, (err, result) => {
+          if (err) {
+            reject(err)
+          } else {
+            expect(result.css.length).toBeGreaterThan(1000)
+            resolve()
+          }
+        })
+      })
     })
   })
 

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 }).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',