Autoprefix generated CSS

Autoprefix CSS using postcss and autoprefixer. This will fix the display of the close button’s chevron in IE9 (which requires `-ms-transform`) and probably some other stuff too.

This uses the same browserlist as we have in GOV.UK Frontend.

lib/metalsmith.js

@@ -14,6 +14,7 @@ const permalinks = require('metalsmith-permalinks')          // apply a permalin
 const canonical = require('metalsmith-canonical')            // add a canonical url property to pages
 
 const sass = require('metalsmith-sass')                      // convert Sass files to CSS using LibSass
+const postcss = require('metalsmith-postcss')
 
 const rollup = require('metalsmith-rollup')                  // used to build GOV.UK Frontend JavaScript
 const resolve = require('rollup-plugin-node-resolve')        // rollup plugin to resolve node_modules
@@ -65,6 +66,12 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
     includePaths: ['node_modules'] // an array of paths that sass can look in when attempt to resolve @import declarations
   }))
 
+  .use(postcss({
+    plugins: {
+      'autoprefixer': {}
+    }
+  }))
+
   // copy static assets from node_modules/@govukfrontend
   .use(assets({
     source: '../' + paths.govukfrontend + 'assets/',

package.json

@@ -28,12 +28,14 @@
     ]
   },
   "dependencies": {
+    "autoprefixer": "^9.1.0",
     "clipboard": "^2.0.0",
     "govuk-frontend": "^1.2.0",
     "gray-matter": "^4.0.1",
     "html5shiv": "^3.7.3",
     "jquery": "^1.12.4",
     "lunr": "^2.3.1",
+    "metalsmith-postcss": "^4.2.0",
     "modernizr": "^3.6.0",
     "sass-export": "^1.0.2"
   },
@@ -76,5 +78,11 @@
   },
   "jest": {
     "preset": "jest-puppeteer"
-  }
+  },
+  "browserslist": [
+    "last 2 versions",
+    "ie 8",
+    "ie 9",
+    "iOS 9"
+  ]
 }