Configure Browserslist for build tooling

.browserslistrc

@@ -0,0 +1,12 @@
+> 0.1% in GB and not dead
+last 6 Chrome versions
+last 6 Firefox versions
+last 6 Edge versions
+last 2 Samsung versions
+Firefox ESR
+Safari >= 11
+iOS >= 11
+IE 11
+
+[node]
+node 20

CHANGELOG.md

@@ -1,5 +1,17 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:wrench: **Fixes**
+
+We've configured our build tasks to use [Browserslist](https://browsersl.ist) for browser compatibility. This change was introduced in [pull request #1135: Configure Browserslist for build tooling](https://github.com/nhsuk/nhsuk-frontend/issues/1135)
+
+- Updated stylesheet build to automatically add vendor prefixes using [Autoprefixer](https://github.com/postcss/autoprefixer)
+- Changed stylesheet minifier from [`clean-css`](https://www.npmjs.com/package/clean-css) to [`cssnano`](https://www.npmjs.com/package/cssnano) for Browserslist support
+- Changed JavaScript minifier from [`uglify-js`](https://www.npmjs.com/package/uglify-js) to [`terser`](https://www.npmjs.com/package/terser) with compatibility workarounds
+- Fixed JavaScript build to ensure Babel uses [Browserslist](https://browsersl.ist) configured browsers
+- Fixed JavaScript build to ensure only `nhsuk.min.js` is minified not `nhsuk.js`
+
 ## 9.3.0 - 13 February 2025
 
 :new: **New features**

babel.config.js

@@ -3,10 +3,17 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        targets: {
-          node: 'current'
-        }
+        // Apply bug fixes to avoid transforms
+        bugfixes: true,
+
+        // Apply smaller "loose" transforms for browsers
+        loose: true
       }
     ]
-  ]
+  ],
+  env: {
+    test: {
+      browserslistEnv: 'node'
+    }
+  }
 }

gulpfile.js

@@ -1,9 +1,11 @@
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
 const gulp = require('gulp')
 const clean = require('gulp-clean')
-const cleanCSS = require('gulp-clean-css')
+const postcss = require('gulp-postcss')
 const rename = require('gulp-rename')
 const gulpSass = require('gulp-sass')
-const uglify = require('gulp-uglify')
+const terser = require('gulp-terser')
 const zip = require('gulp-zip')
 const dartSass = require('sass')
 const webpack = require('webpack-stream')
@@ -32,6 +34,7 @@ function compileCSS(done) {
   return gulp
     .src(['packages/nhsuk.scss'])
     .pipe(sass().on('error', done))
+    .pipe(postcss([autoprefixer()]))
     .pipe(gulp.dest('dist/'))
 }
 
@@ -42,7 +45,7 @@ function minifyCSS() {
       'dist/*.css',
       '!dist/*.min.css' // don't re-minify minified css
     ])
-    .pipe(cleanCSS())
+    .pipe(postcss([cssnano()]))
     .pipe(
       rename({
         suffix: `-${version}.min`
@@ -68,16 +71,19 @@ function webpackJS() {
               use: {
                 loader: 'babel-loader',
                 options: {
-                  presets: ['@babel/preset-env']
+                  rootMode: 'upward'
                 }
               }
             }
           ]
         },
+        optimization: {
+          minimize: false // minification is handled by terser
+        },
         output: {
           filename: 'nhsuk.js'
         },
-        target: 'web'
+        target: 'browserslist'
       })
     )
     .pipe(gulp.dest('./dist'))
@@ -90,7 +96,15 @@ function minifyJS() {
       'dist/*.js',
       '!dist/*.min.js' // don't re-minify minified javascript
     ])
-    .pipe(uglify())
+    .pipe(
+      terser({
+        format: { comments: false },
+
+        // Compatibility workarounds
+        ecma: 5,
+        safari10: true
+      })
+    )
     .pipe(
       rename({
         suffix: '.min'
@@ -102,14 +116,11 @@ function minifyJS() {
 /* Version the JS file for release */
 function versionJS() {
   return gulp
-    .src([
-      'dist/*.js',
-      '!dist/*.min.js' // don't re-minify minified javascript
-    ])
-    .pipe(uglify())
+    .src('dist/nhsuk.min.js')
     .pipe(
       rename({
-        suffix: `-${version}.min`
+        basename: `nhsuk-${version}`,
+        extname: '.min.js'
       })
     )
     .pipe(gulp.dest('dist/'))