Enable CSS source maps

alphagov · Nov 23, 2022 · 9b1e7d7 · 9b1e7d7
1 parent 3032ffd
commit 9b1e7d7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/tasks/gulp/__tests__/after-build-dist.test.mjs b/tasks/gulp/__tests__/after-build-dist.test.mjs
@@ -22,10 +22,12 @@ describe('dist/', () => {
   })
 
   describe('govuk-frontend-[version].min.css', () => {
+    let filename
     let stylesheet
 
     beforeAll(async () => {
-      stylesheet = await readFile(join(configPaths.dist, `govuk-frontend-${pkg.version}.min.css`), 'utf8')
+      filename = `govuk-frontend-${pkg.version}.min.css`
+      stylesheet = await readFile(join(configPaths.dist, filename), 'utf8')
     })
 
     it('should not contain current media query displayed on body element', () => {
@@ -35,18 +37,28 @@ describe('dist/', () => {
     it('should contain the copyright notice', () => {
       expect(stylesheet).toContain('/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */')
     })
+
+    it('should contain source mapping URL', () => {
+      expect(stylesheet).toMatch(new RegExp(`/\\*# sourceMappingURL=${filename}.map \\*/$`))
+    })
   })
 
   describe('govuk-frontend-ie8-[version].min.css', () => {
+    let filename
     let stylesheet
 
     beforeAll(async () => {
-      stylesheet = await readFile(join(configPaths.dist, `govuk-frontend-ie8-${pkg.version}.min.css`), 'utf8')
+      filename = `govuk-frontend-ie8-${pkg.version}.min.css`
+      stylesheet = await readFile(join(configPaths.dist, filename), 'utf8')
     })
 
     it('should not contain current media query displayed on body element', () => {
       expect(stylesheet).not.toMatch(/body:before{content:/)
     })
+
+    it('should contain source mapping URL', () => {
+      expect(stylesheet).toMatch(new RegExp(`/\\*# sourceMappingURL=${filename}.map \\*/$`))
+    })
   })
 
   describe('govuk-frontend-[version].min.js', () => {

diff --git a/tasks/gulp/compile-assets.mjs b/tasks/gulp/compile-assets.mjs
@@ -38,42 +38,59 @@ export function compileStylesheets () {
   if (isDist) {
     return merge(
       compileStylesheet(
-        gulp.src(`${slash(configPaths.src)}/govuk/all.scss`)
+        gulp.src(`${slash(configPaths.src)}/govuk/all.scss`, {
+          sourcemaps: true
+        })
           .pipe(rename({
             basename: 'govuk-frontend',
             suffix: `-${pkg.version}.min`,
             extname: '.css'
           }))),
 
       compileStylesheet(
-        gulp.src(`${slash(configPaths.src)}/govuk/all-ie8.scss`)
+        gulp.src(`${slash(configPaths.src)}/govuk/all-ie8.scss`, {
+          sourcemaps: true
+        })
           .pipe(rename({
             basename: 'govuk-frontend-ie8',
             suffix: `-${pkg.version}.min`,
             extname: '.css'
           })))
     )
-      .pipe(gulp.dest(slash(destPath)))
+      .pipe(gulp.dest(slash(destPath), {
+        sourcemaps: '.'
+      }))
   }
 
   // Review application
   return merge(
     compileStylesheet(
-      gulp.src(`${slash(configPaths.app)}/assets/scss/app?(-ie8).scss`)),
+      gulp.src(`${slash(configPaths.app)}/assets/scss/app?(-ie8).scss`, {
+        sourcemaps: true
+      })),
 
     compileStylesheet(
-      gulp.src(`${slash(configPaths.app)}/assets/scss/app-legacy?(-ie8).scss`), {
-        includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
+      gulp.src(`${slash(configPaths.app)}/assets/scss/app-legacy?(-ie8).scss`, {
+        sourcemaps: true
+      }), {
+        includePaths: [
+          'node_modules/govuk_frontend_toolkit/stylesheets',
+          'node_modules'
+        ]
       }),
 
     compileStylesheet(
-      gulp.src(`${slash(configPaths.fullPageExamples)}/**/styles.scss`)
+      gulp.src(`${slash(configPaths.fullPageExamples)}/**/styles.scss`, {
+        sourcemaps: true
+      })
         .pipe(rename((path) => {
           path.basename = path.dirname
           path.dirname = 'full-page-examples'
         })))
   )
-    .pipe(gulp.dest(slash(destPath)))
+    .pipe(gulp.dest(slash(destPath), {
+      sourcemaps: '.'
+    }))
 }
 
 compileStylesheets.displayName = 'compile:scss'