Update version number using Rollup and PostCSS plugins

gulpfile.mjs

@@ -1,7 +1,7 @@
 import gulp from 'gulp'
 import taskListing from 'gulp-task-listing'
 
-import { updateAssetsVersion, updateFrontendVersionJavaScript, updateFrontendVersionSass } from './tasks/asset-version.mjs'
+import { updateAssetsVersion } from './tasks/asset-version.mjs'
 import { clean } from './tasks/clean.mjs'
 import { compileJavaScripts } from './tasks/compile-javascripts.mjs'
 import { compileStylesheets } from './tasks/compile-stylesheets.mjs'
@@ -40,8 +40,6 @@ gulp.task('styles', gulp.series(
  */
 gulp.task('compile', gulp.series(
   clean,
-  updateFrontendVersionJavaScript,
-  updateFrontendVersionSass,
   copyAssets,
   compileJavaScripts,
   compileStylesheets,

package.json

@@ -70,6 +70,7 @@
     "postcss-unopacity": "^2.0.0",
     "postcss-unrgba": "^1.1.1",
     "rollup": "0.59.4",
+    "rollup-plugin-replace": "^2.2.0",
     "sass-embedded": "^1.58.3",
     "sassdoc": "^2.7.4",
     "slash": "^5.0.0",

postcss.config.js

@@ -11,6 +11,8 @@ const unmq = require('postcss-unmq')
 const unopacity = require('postcss-unopacity')
 const unrgba = require('postcss-unrgba')
 
+const { pkg } = require('./config/index.js')
+
 /**
  * PostCSS config
  *
@@ -57,6 +59,16 @@ module.exports = (ctx) => {
     )
   }
 
+  // Add GOV.UK Frontend release version
+  plugins.push({
+    postcssPlugin: 'govuk-frontend-version',
+    Declaration: {
+      '--govuk-frontend-version': (decl) => {
+        decl.value = `"${pkg.version}"`
+      }
+    }
+  })
+
   // Always minify CSS
   if (syntax !== scss) {
     plugins.push(cssnano({

postcss.config.unit.test.js

@@ -80,6 +80,7 @@ describe('PostCSS config', () => {
         expect(getPluginNames(config))
           .toEqual([
             'autoprefixer',
+            'govuk-frontend-version',
             'postcss-discard-comments',
             'postcss-minify-gradients',
             'postcss-reduce-initial',
@@ -127,6 +128,7 @@ describe('PostCSS config', () => {
             'postcss-unmq',
             'postcss-unopacity',
             'postcss-color-rgba-fallback',
+            'govuk-frontend-version',
             'postcss-discard-comments',
             'postcss-minify-gradients',
             'postcss-reduce-initial',
@@ -170,7 +172,8 @@ describe('PostCSS config', () => {
 
         expect(getPluginNames(config))
           .toEqual([
-            'autoprefixer'
+            'autoprefixer',
+            'govuk-frontend-version'
           ])
       })
     })
@@ -188,6 +191,7 @@ describe('PostCSS config', () => {
           .toEqual([
             'autoprefixer',
             'postcss-pseudo-classes',
+            'govuk-frontend-version',
             'postcss-discard-comments',
             'postcss-minify-gradients',
             'postcss-reduce-initial',
@@ -256,6 +260,7 @@ describe('PostCSS config', () => {
             'postcss-unmq',
             'postcss-unopacity',
             'postcss-color-rgba-fallback',
+            'govuk-frontend-version',
             'postcss-discard-comments',
             'postcss-minify-gradients',
             'postcss-reduce-initial',

src/govuk/all.mjs

@@ -89,6 +89,8 @@ function initAll (config) {
 export {
   initAll,
   version,
+
+  // Components
   Accordion,
   Button,
   Details,

src/govuk/common/govuk-frontend-version.mjs

@@ -1 +1 @@
-export var version = '4.5.0'
+export var version = 'development'

src/govuk/core/_govuk-frontend-version.scss

@@ -1,3 +1,3 @@
 :root {
-  --govuk-frontend-version: "4.5.0";
+  --govuk-frontend-version: "development";
 }

tasks/asset-version.mjs

@@ -3,7 +3,6 @@ import { EOL } from 'os'
 import { join } from 'path'
 
 import { pkg } from '../config/index.js'
-import configPaths from '../config/paths.js'
 
 import { destination } from './task-arguments.mjs'
 
@@ -17,20 +16,4 @@ export async function updateAssetsVersion () {
   return writeFile(join(destination, 'VERSION.txt'), pkg.version + EOL)
 }
 
-/**
- * Write govuk-frontend-version.mjs
- * with `package/package.json` version
- */
-export async function updateFrontendVersionJavaScript () {
-  return writeFile(join(`${configPaths.src}/govuk/common/`, 'govuk-frontend-version.mjs'), `export var version = '${pkg.version}'${EOL}`)
-}
-
-/**
- * Write _govuk-frontend-version.scss
- * with `package/package.json` version
- */
-export async function updateFrontendVersionSass () {
-  return writeFile(join(`${configPaths.src}/govuk/core/`, '_govuk-frontend-version.scss'), `:root {\n  --govuk-frontend-version: "${pkg.version}";\n}${EOL}`)
-}
-
 updateAssetsVersion.displayName = 'update-assets-version'

tasks/compile-javascripts.mjs

@@ -2,6 +2,7 @@ import { join, parse } from 'path'
 
 import PluginError from 'plugin-error'
 import { rollup } from 'rollup'
+import replace from 'rollup-plugin-replace'
 import { minify } from 'terser'
 
 import { paths, pkg } from '../config/index.js'
@@ -41,7 +42,15 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath }]) {
 
   // Create Rollup bundle
   const bundle = await rollup({
-    input: join(srcPath, modulePath)
+    input: join(srcPath, modulePath),
+
+    // Add GOV.UK Frontend release version
+    plugins: [
+      replace({
+        include: join(srcPath, 'common/govuk-frontend-version.mjs'),
+        values: { development: pkg.version }
+      })
+    ]
   })
 
   // Compile JavaScript ESM to CommonJS

tasks/gulp/__tests__/after-build-dist.test.mjs

@@ -40,6 +40,10 @@ describe('dist/', () => {
     it('should contain source mapping URL', () => {
       expect(stylesheet).toMatch(new RegExp(`/\\*# sourceMappingURL=${filename}.map \\*/$`))
     })
+
+    it('should contain version number custom property', () => {
+      expect(stylesheet).toContain(`--govuk-frontend-version:"${pkg.version}"`)
+    })
   })
 
   describe('govuk-frontend-ie8-[version].min.css', () => {
@@ -73,6 +77,10 @@ describe('dist/', () => {
       expect(javascript).toBeTruthy()
     })
 
+    it('should contain correct version number', () => {
+      expect(javascript).toContain(`t.version="${pkg.version}",`)
+    })
+
     it('should contain source mapping URL', () => {
       expect(javascript).toMatch(new RegExp(`//# sourceMappingURL=${filename}.map$`))
     })

tasks/gulp/__tests__/after-build-package.test.mjs

@@ -1,6 +1,7 @@
 import { readFile } from 'fs/promises'
 import { join } from 'path'
 
+import { pkg } from '../../../config/index.js'
 import configPaths from '../../../config/paths.js'
 import { filterPath, getDirectories, getListing, mapPathTo } from '../../../lib/file-helper.js'
 import { componentNameToClassName, componentPathToModuleName } from '../../../lib/helper-functions.js'
@@ -107,6 +108,14 @@ describe('package/', () => {
       // Look for AMD module definition for 'GOVUKFrontend'
       expect(contents).toContain("typeof define === 'function' && define.amd ? define('GOVUKFrontend', ['exports'], factory)")
     })
+
+    it('should have correct version number', async () => {
+      const contents = await readFile(join(configPaths.package, 'govuk', 'all.js'), 'utf8')
+
+      // Look for AMD module export 'GOVUKFrontend.version'
+      expect(contents).toContain(`var version = '${pkg.version}';`)
+      expect(contents).toContain('exports.version = version;')
+    })
   })
 
   describe('component', () => {