Include the govuk-frontend version number in CSS and JS files

package.json

@@ -76,6 +76,7 @@
     "postcss-unrgba": "^1.1.1",
     "puppeteer": "^19.8.2",
     "rollup": "0.59.4",
+    "rollup-plugin-replace": "^2.2.0",
     "sass-embedded": "^1.60.0",
     "sassdoc": "^2.7.4",
     "slash": "^5.0.0",

postcss.config.mjs

@@ -9,6 +9,9 @@ import unmq from 'postcss-unmq'
 import unopacity from 'postcss-unopacity'
 import unrgba from 'postcss-unrgba'
 
+import { pkg } from './config/index.js'
+import { isDev } from './tasks/helpers/task-arguments.mjs'
+
 /**
  * PostCSS config
  *
@@ -58,6 +61,21 @@ export default ({ from = '', to = '', env = 'production' }) => {
     )
   }
 
+  // Add GOV.UK Frontend release version
+  if (!isDev) {
+    config.plugins.push({
+      postcssPlugin: 'govuk-frontend-version',
+      Declaration: {
+        // Find CSS declaration for version, update value
+        // https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
+        // https://postcss.org/api/#declaration
+        '--govuk-frontend-version': (decl) => {
+          decl.value = `"${pkg.version}"`
+        }
+      }
+    })
+  }
+
   // Always minify CSS
   if (config.syntax !== scss) {
     config.plugins.push(cssnano({

postcss.config.unit.test.mjs

@@ -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

@@ -1,3 +1,4 @@
+import { version } from './common/govuk-frontend-version.mjs'
 import { nodeListForEach } from './common/index.mjs'
 import Accordion from './components/accordion/accordion.mjs'
 import Button from './components/button/button.mjs'
@@ -87,6 +88,9 @@ function initAll (config) {
 
 export {
   initAll,
+  version,
+
+  // Components
   Accordion,
   Button,
   Details,

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

@@ -0,0 +1 @@
+export var version = 'development'

src/govuk/components/globals.test.mjs

@@ -24,7 +24,7 @@ describe('GOV.UK Frontend', () => {
       const GOVUKFrontendGlobal = await page.evaluate(() => window.GOVUKFrontend)
 
       const components = Object.keys(GOVUKFrontendGlobal)
-        .filter(method => !['initAll'].includes(method))
+        .filter(method => !['initAll', 'version'].includes(method))
 
       // Ensure GOV.UK Frontend exports the expected components
       expect(components).toEqual([
@@ -47,7 +47,7 @@ describe('GOV.UK Frontend', () => {
 
       const componentsWithoutInitFunctions = await page.evaluate(() => {
         const components = Object.keys(window.GOVUKFrontend)
-          .filter(method => !['initAll'].includes(method))
+          .filter(method => !['initAll', 'version'].includes(method))
 
         return components.filter(component => {
           const prototype = window.GOVUKFrontend[component].prototype

src/govuk/core/_all.scss

@@ -1,3 +1,4 @@
+@import "govuk-frontend-version";
 @import "links";
 @import "lists";
 @import "typography";

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

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

tasks/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(`.version="${pkg.version}",`)
+    })
+
     it('should contain source mapping URL', () => {
       expect(javascript).toMatch(new RegExp(`//# sourceMappingURL=${filename}.map$`))
     })

tasks/build/package.test.mjs

@@ -1,7 +1,7 @@
 import { readFile } from 'fs/promises'
 import { join } from 'path'
 
-import { paths } from '../../config/index.js'
+import { paths, pkg } from '../../config/index.js'
 import { filterPath, getDirectories, getListing, mapPathTo } from '../../lib/file-helper.js'
 import { componentNameToClassName, componentPathToModuleName } from '../../lib/helper-functions.js'
 import { compileSassFile } from '../../lib/jest-helpers.js'
@@ -112,6 +112,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(paths.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', () => {

tasks/scripts.mjs

@@ -2,11 +2,14 @@ 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 { pkg } from '../config/index.js'
 import { getListing } from '../lib/file-helper.js'
 import { componentPathToModuleName } from '../lib/helper-functions.js'
 
+import { isDev } from './helpers/task-arguments.mjs'
 import { assets } from './index.mjs'
 
 /**
@@ -38,10 +41,22 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
   const moduleSrcPath = join(srcPath, modulePath)
   const moduleDestPath = join(destPath, filePath ? filePath(parse(modulePath)) : modulePath)
 
+  // Rollup plugins
+  const plugins = []
+
+  if (!isDev) {
+    // Add GOV.UK Frontend release version
+    // @ts-expect-error "This expression is not callable" due to incorrect types
+    plugins.push(replace({
+      include: join(srcPath, 'common/govuk-frontend-version.mjs'),
+      values: { development: pkg.version }
+    }))
+  }
+
   // Option 1: Rollup bundle set (multiple files)
   // - Module imports are preserved, not concatenated
   if (moduleDestPath.endsWith('.mjs')) {
-    const bundle = await rollup({ input: [moduleSrcPath], experimentalPreserveModules: true })
+    const bundle = await rollup({ input: [moduleSrcPath], plugins, experimentalPreserveModules: true })
 
     // Compile JavaScript to ES modules
     await bundle.write({
@@ -55,7 +70,7 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
 
   // Option 1: Rollup bundle (single file)
   // - Universal Module Definition (UMD) bundle
-  const bundle = await rollup({ input: moduleSrcPath })
+  const bundle = await rollup({ input: moduleSrcPath, plugins })
 
   // Compile JavaScript to output format
   const bundled = await bundle[moduleDestPath.endsWith('.min.js') ? 'generate' : 'write']({