Merge pull request #763 from alphagov/fix-sass-error

Fix sass error

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Unreleased
 
+Fixes:
+
+- [#763 Fix a Sass compilation error in the unbranded stylesheet](https://github.com/alphagov/govuk-prototype-kit/pull/763), which was introduced in 8.12.0.
+
 # 8.12.0
 
 Features:

__tests__/spec/sanity-checks.js

@@ -1,9 +1,17 @@
 /* eslint-env jest */
-var request = require('supertest')
-var app = require('../../server.js')
-var path = require('path')
-var fs = require('fs')
-var assert = require('assert')
+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 app = require('../../server.js')
+const gulpConfig = require('../../gulp/config.json')
+
+const sassRender = util.promisify(sass.render)
 
 function readFile (pathFromRoot) {
   return fs.readFileSync(path.join(__dirname, '../../' + pathFromRoot), 'utf8')
@@ -105,4 +113,12 @@ 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 })
+    })
+  })
 })

app/assets/sass/unbranded.scss

@@ -1,12 +1,24 @@
+// The unbranded stylesheet is used if you need to create pages in your
+// prototype without the GOV.UK branding.
+//
+// See localhost:3000/docs/examples/blank-unbranded
+
+// Import colour palette and applied colours so that we can use
+// $govuk-body-background-colour in our overrides below.
+// 
+// If you need to enable compatibility mode or the legacy palette, do that
+// *before* these imports.
+@import "node_modules/govuk-frontend/settings/colours-palette";
+@import "node_modules/govuk-frontend/settings/colours-applied";
+
+// Style links and paragraphs by default
 $govuk-global-styles: true;
 
 // Override the govuk-frontend font stack
 $govuk-font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
-// Remove canvas background colour, as is used with the GOV.UK Footer.
+// Override the canvas background colour, which is normally grey to blend with
+// the GOV.UK footer.
 $govuk-canvas-background-colour: $govuk-body-background-colour;
 
 @import "node_modules/govuk-frontend/all";
-
-// If you need to create a page as part of your journey, but without GOV.UK branding
-// See localhost:3000/docs/examples/blank-unbranded

package.json

@@ -52,7 +52,9 @@
     ]
   },
   "devDependencies": {
+    "glob": "^7.1.4",
     "jest": "^24.0.1",
+    "node-sass": "^4.12.0",
     "standard": "^12.0.1",
     "supertest": "^3.0.0"
   }