Rewrite URLs in CSS based on environment

Fix for issue that caused this revert:

https://github.com/alphagov/notifications-admin/pull/3196

Note:

gulp-css-url-adjuster operates on an Abstract
Syntax Tree (AST) derived from `main.css`. The
CSS output from this loses the compression
gulp-sass applies.

This moves compression out of Sass, to a step
after the URLs are adjusted.

gulpfile.js

@@ -15,11 +15,12 @@ const plugins = {};
 plugins.addSrc = require('gulp-add-src');
 plugins.babel = require('gulp-babel');
 plugins.base64 = require('gulp-base64-inline');
-plugins.rollup = require('gulp-better-rollup')
+plugins.cleanCSS = require('gulp-clean-css');
 plugins.concat = require('gulp-concat');
 plugins.cssUrlAdjuster = require('gulp-css-url-adjuster');
 plugins.jshint = require('gulp-jshint');
 plugins.prettyerror = require('gulp-prettyerror');
+plugins.rollup = require('gulp-better-rollup')
 plugins.sass = require('gulp-sass');
 plugins.sassLint = require('gulp-sass-lint');
 plugins.uglify = require('gulp-uglify');
@@ -34,6 +35,11 @@ const paths = {
   toolkit: 'node_modules/govuk_frontend_toolkit/',
   govuk_frontend: 'node_modules/govuk-frontend/'
 };
+// Rewrite /static prefix for URLs in CSS files
+let staticPathMatcher = new RegExp('^\/static\/');
+if (process.env.NOTIFY_ENVIRONMENT == 'development') { // pass through if on development
+  staticPathMatcher = url => url;
+}
 
 // 3. TASKS
 // - - - - - - - - - - - - - - -
@@ -172,7 +178,7 @@ const sass = () => {
   return src([paths.src + '/stylesheets/main*.scss', paths.src + '/stylesheets/print.scss'])
     .pipe(plugins.prettyerror())
     .pipe(plugins.sass({
-      outputStyle: 'compressed',
+      outputStyle: 'nested',
       includePaths: [
         paths.npm + 'govuk-elements-sass/public/sass/',
         paths.toolkit + 'stylesheets/',
@@ -180,6 +186,11 @@ const sass = () => {
       ]
     }))
     .pipe(plugins.base64('../..'))
+    .pipe(plugins.cssUrlAdjuster({
+      replace: [staticPathMatcher, '/']
+    }))
+    // cssUrlAdjuster outputs uncompressed CSS so we need to perform the compression here
+    .pipe(plugins.cleanCSS({ compatibility: '*' }))
     .pipe(dest(paths.dist + 'stylesheets/'))
 };
 

package.json

@@ -31,6 +31,7 @@
     "gulp-babel": "8.0.0",
     "gulp-base64-inline": "1.0.4",
     "gulp-better-rollup": "4.0.1",
+    "gulp-clean-css": "4.2.0",
     "gulp-concat": "2.6.1",
     "gulp-include": "2.3.1",
     "gulp-sass": "4.0.2",