Replace gulp-base64 with gulp-base64-inline

The gulp-base64 package has 11 dependencies with
vulnerabilities listed against them as of this
time. It also doesn't seem to be maintained any
more. The last commit was in 2015 and there are
issues and pull requests up to bump the
dependencies.

This replaces it with gulp-base64-inline.

gulp-base64-inline takes a single path, which it
prepends to any image paths it finds. Our image
paths are actually URLs, not filesystem paths so
we need to send it a relative path to repoint the
URL.

This commit includes changes that remove a few
`@import`s from one of our sass partials.

They aren't needed as those files are imported
further up the stack and `_typography.scss` has an
import in it that overwrites the new
`_url-helpers.scss` we added here.

app/assets/stylesheets/_url-helpers.scss

@@ -0,0 +1,14 @@
+// Copy of _url-helpers.scss in govuk_frontend_toolkit
+// to allow us to use gulp-base64-inline on all our images
+// gulp-base64-inline requires you to specify which of your
+// images you want encoded by using the `inline()` function
+// see https://github.com/goschevski/gulp-base64-inline
+@function file-url($file) {
+  $url: '';
+  @if $path {
+    $url: inline($path + $file);
+  } @else {
+    $url: image-url($file);
+  }
+  @return $url;
+}

app/assets/stylesheets/components/vendor/previous-next-navigation.scss

@@ -4,8 +4,6 @@ https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175
 and
 https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss
 */
-@import "_colours.scss";
-@import "_typography.scss";
 
 // Media query helpers. These make producing IE layouts
 // super easy.

app/assets/stylesheets/main.scss

@@ -11,9 +11,11 @@ $path: '/static/images/';
 @import 'typography';
 @import 'grid_layout';
 @import 'helpers';
-@import 'url-helpers';
 @import 'design-patterns/buttons';
 
+// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
+@import 'url-helpers';
+
 // Dependencies from GOV.UK Elements
 // https://github.com/alphagov/govuk_elements
 @import 'elements/helpers';

gulpfile.js

@@ -9,7 +9,9 @@ const { src, pipe, dest, series, parallel } = require('gulp');
 const loadPlugins = require('gulp-load-plugins');
 const stylish = require('jshint-stylish');
 
-const plugins = loadPlugins();
+const plugins = loadPlugins({
+  'rename': { 'gulp-base64-inline': 'base64' }
+});
 
 // 2. CONFIGURATION
 // - - - - - - - - - - - - - - -
@@ -116,7 +118,7 @@ const sass = () => {
         paths.toolkit + 'stylesheets/'
       ]
     }))
-    .pipe(plugins.base64({baseDir: 'app'}))
+    .pipe(plugins.base64('../..'))
     .pipe(dest(paths.dist + 'stylesheets/'))
 };
 

package.json

@@ -27,7 +27,7 @@
     "gulp": "4.0.0",
     "gulp-add-src": "1.0.0",
     "gulp-babel": "8.0.0",
-    "gulp-base64": "0.1.3",
+    "gulp-base64-inline": "1.0.4",
     "gulp-concat": "2.6.1",
     "gulp-include": "2.3.1",
     "gulp-load-plugins": "1.5.0",