Use Dart Sass modern compilation API

alphagov · Mar 2, 2023 · df6f181 · df6f181
1 parent 46c8e1c
commit df6f181
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 39 deletions.
diff --git a/lib/jest-helpers.js b/lib/jest-helpers.js
@@ -4,7 +4,7 @@ const cheerio = require('cheerio')
 const { configureAxe } = require('jest-axe')
 const nunjucks = require('nunjucks')
 const { outdent } = require('outdent')
-const sass = require('sass-embedded')
+const { compileAsync, compileStringAsync } = require('sass-embedded')
 
 const { paths } = require('../config/index.js')
 
@@ -130,43 +130,29 @@ async function getExamples (componentName) {
  *
  * @param {string} path - Path to Sass file
  * @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,
     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('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,
     quietDeps: true,
     ...options
   })
-
-  return {
-    css: css?.toString().trim(),
-    map: map?.toString().trim(),
-    stats
-  }
 }
 
 /**

diff --git a/src/govuk/components/components.test.js b/src/govuk/components/components.test.js
@@ -22,7 +22,7 @@ describe('Components', () => {
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
-        stats: expect.any(Object)
+        loadedUrls: expect.arrayContaining([expect.any(URL)])
       })
     })
 
@@ -32,7 +32,7 @@ describe('Components', () => {
 
         return expect(compileSassFile(file)).resolves.toMatchObject({
           css: expect.any(String),
-          stats: expect.any(Object)
+          loadedUrls: expect.arrayContaining([expect.any(URL)])
         })
       })
 

diff --git a/src/govuk/helpers/helpers.test.js b/src/govuk/helpers/helpers.test.js
@@ -26,7 +26,7 @@ describe('The helpers layer', () => {
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
-        stats: expect.any(Object)
+        loadedUrls: expect.arrayContaining([expect.any(URL)])
       })
     })
 

diff --git a/src/govuk/objects/objects.test.js b/src/govuk/objects/objects.test.js
@@ -21,7 +21,7 @@ describe('The objects layer', () => {
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
-        stats: expect.any(Object)
+        loadedUrls: expect.arrayContaining([expect.any(URL)])
       })
     })
 

diff --git a/src/govuk/settings/settings.test.js b/src/govuk/settings/settings.test.js
@@ -26,7 +26,7 @@ describe('The settings layer', () => {
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
-        stats: expect.any(Object)
+        loadedUrls: expect.arrayContaining([expect.any(URL)])
       })
     })
 

diff --git a/src/govuk/tools/tools.test.js b/src/govuk/tools/tools.test.js
@@ -26,7 +26,7 @@ describe('The tools layer', () => {
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
-        stats: expect.any(Object)
+        loadedUrls: expect.arrayContaining([expect.any(URL)])
       })
     })
 

diff --git a/tasks/compile-stylesheets.mjs b/tasks/compile-stylesheets.mjs
@@ -1,22 +1,18 @@
 import { readFile } from 'fs/promises'
 import { join, parse } from 'path'
-import { promisify } from 'util'
 
 import PluginError from 'plugin-error'
 import postcss from 'postcss'
 // eslint-disable-next-line import/default
 import postcssrc from 'postcss-load-config'
-import { render } from 'sass-embedded'
+import { compileAsync } from 'sass-embedded'
 
 import { paths, pkg } from '../config/index.js'
 import { getListing } from '../lib/file-helper.js'
 
 import { writeAsset } from './compile-assets.mjs'
 import { destination, isDist, isPackage, isPublic } from './task-arguments.mjs'
 
-// Sass renderer
-const sassRender = promisify(render)
-
 /**
  * Compile Sass to CSS task
  *
@@ -62,28 +58,26 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath }]) {
 
   // Render Sass
   if (!isPackage) {
-    ({ css, map } = await sassRender({
-      file: moduleSrcPath,
-      outFile: moduleDestPath,
-
+    ({ css, sourceMap: map } = await compileAsync(moduleSrcPath, {
       // Turn off dependency warnings
       quietDeps: true,
 
       // Enable source maps
       sourceMap: true,
-      sourceMapContents: true,
+      sourceMapIncludeSources: true,
 
       // Resolve @imports via
-      includePaths: [
+      loadPaths: [
         join(paths.node_modules, 'govuk_frontend_toolkit/stylesheets'),
         paths.node_modules
       ]
     }))
 
     // Pass source maps to PostCSS
     options.map = {
+      annotation: true,
       inline: false,
-      prev: map.toString()
+      prev: map
     }
   }