Merge pull request #3164 from alphagov/dart-sass

Migrate GOV.UK Frontend build pipeline to use Dart Sass

docs/contributing/running-locally.md

@@ -34,16 +34,6 @@ We use [npm](https://docs.npmjs.com/getting-started/what-is-npm) to manage the d
 npm install
 ```
 
-### Fixing errors after upgrading Node.js
-
-If you've previously installed `govuk-frontend` locally using Node.js v14 or earlier, you may see `node-sass`-related errors when updating to a newer Node.js LTS release.
-
-To get rid of these errors, download the Sass binary again using:
-
-```
-npm rebuild node-sass
-```
-
 ## 5. Start a local server
 
 This will build sources, serve pages and watch for changes.

docs/examples/webpack/package.json

@@ -16,7 +16,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "html5shiv": "^3.7.3",
     "postcss-loader": "^7.0.2",
-    "sass": "^1.58.3",
+    "sass-embedded": "^1.58.3",
     "sass-loader": "^13.2.0",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",

lib/jest-helpers.js

@@ -2,9 +2,9 @@ const { join } = require('path')
 
 const cheerio = require('cheerio')
 const { configureAxe } = require('jest-axe')
-const sass = require('node-sass')
 const nunjucks = require('nunjucks')
 const { outdent } = require('outdent')
+const { compileAsync, compileStringAsync, Logger } = require('sass-embedded')
 
 const { paths } = require('../config/index.js')
 
@@ -129,44 +129,32 @@ async function getExamples (componentName) {
  * Render Sass from file
  *
  * @param {string} path - Path to Sass file
- * @param {import('node-sass').Options} [options] - Options to pass to Sass
+ * @param {import('sass-embedded').Options} [options] - Options to pass to Sass
+ * @returns {Promise<import('sass-embedded').CompileResult>} Sass compile result
  */
 async function compileSassFile (path, options = {}) {
-  const { css, map, stats } = sass.renderSync({
-    file: path,
-    includePaths: sassPaths,
-    outputStyle: 'expanded',
+  return compileAsync(path, {
+    loadPaths: sassPaths,
+    logger: Logger.silent,
     quietDeps: true,
     ...options
   })
-
-  return {
-    css: css?.toString().trim(),
-    map: map?.toString().trim(),
-    stats
-  }
 }
 
 /**
  * Render Sass from string
  *
  * @param {string} source - Sass source string
- * @param {import('node-sass').Options} [options] - Options to pass to Sass
+ * @param {import('sass-embedded').Options} [options] - Options to pass to Sass
+ * @returns {Promise<import('sass-embedded').CompileResult>} Sass compile result
  */
 async function compileSassString (source, options = {}) {
-  const { css, map, stats } = sass.renderSync({
-    data: source,
-    includePaths: sassPaths,
-    outputStyle: 'expanded',
+  return compileStringAsync(source, {
+    loadPaths: sassPaths,
+    logger: Logger.silent,
     quietDeps: true,
     ...options
   })
-
-  return {
-    css: css?.toString().trim(),
-    map: map?.toString().trim(),
-    stats
-  }
 }
 
 /**