Update version number using Rollup and PostCSS plugins

alphagov · Mar 31, 2023 · 6717ed1 · 6717ed1
1 parent e0d252b
commit 6717ed1
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 31 deletions.
diff --git a/app/tasks/scripts.mjs b/app/tasks/scripts.mjs
@@ -3,15 +3,13 @@ import { join } from 'path'
 import gulp from 'gulp'
 
 import { paths } from '../../config/index.js'
-import { files, npm, scripts, task } from '../../tasks/index.mjs'
+import { npm, scripts, task } from '../../tasks/index.mjs'
 
 /**
  * JavaScripts task (for watch)
  * Compilation, documentation
  */
 export const compile = gulp.series(
-  files.updateFrontendVersionJavaScript,
-
   task.name('compile:js', () =>
     scripts.compile('all.mjs', {
       srcPath: join(paths.src, 'govuk'),

diff --git a/app/tasks/styles.mjs b/app/tasks/styles.mjs
@@ -3,15 +3,13 @@ import { join } from 'path'
 import gulp from 'gulp'
 
 import { paths } from '../../config/index.js'
-import { files, npm, styles, task } from '../../tasks/index.mjs'
+import { npm, styles, task } from '../../tasks/index.mjs'
 
 /**
  * Stylesheets task (for watch)
  * Compilation, documentation
  */
 export const compile = gulp.series(
-  files.updateFrontendVersionSass,
-
   task.name('compile:scss', () =>
     styles.compile('**/[!_]*.scss', {
       srcPath: join(paths.app, 'src/stylesheets'),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -9,6 +9,8 @@ import unmq from 'postcss-unmq'
 import unopacity from 'postcss-unopacity'
 import unrgba from 'postcss-unrgba'
 
+import { pkg } from './config/index.js'
+
 /**
  * PostCSS config
  *
@@ -58,6 +60,19 @@ export default ({ from = '', to = '', env = 'production' }) => {
     )
   }
 
+  // Add GOV.UK Frontend release version
+  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({

diff --git a/postcss.config.unit.test.mjs b/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',

diff --git a/src/govuk/all.mjs b/src/govuk/all.mjs
@@ -89,6 +89,8 @@ function initAll (config) {
 export {
   initAll,
   version,
+
+  // Components
   Accordion,
   Button,
   Details,

diff --git a/tasks/build/dist.mjs b/tasks/build/dist.mjs
@@ -24,8 +24,6 @@ export default gulp.series(
     })
   ),
 
-  files.updateFrontendVersionJavaScript,
-
   // Compile GOV.UK Frontend JavaScript
   task.name('compile:js', () =>
     scripts.compile('all.mjs', {
@@ -38,8 +36,6 @@ export default gulp.series(
     })
   ),
 
-  files.updateFrontendVersionSass,
-
   // Compile GOV.UK Frontend Sass
   task.name('compile:scss', () =>
     styles.compile('**/[!_]*.scss', {

diff --git a/tasks/build/dist.test.mjs b/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$`))
     })

diff --git a/tasks/build/package.test.mjs b/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', () => {

diff --git a/tasks/files.mjs b/tasks/files.mjs
@@ -6,7 +6,7 @@ import cpy from 'cpy'
 import { deleteAsync } from 'del'
 import slash from 'slash'
 
-import { pkg, paths } from '../config/index.js'
+import { pkg } from '../config/index.js'
 
 /**
  * Delete path globs for a given destination
@@ -28,22 +28,6 @@ export async function version (assetPath, { destPath }) {
   await writeFile(join(destPath, assetPath), pkg.version + EOL)
 }
 
-/**
- * Write govuk-frontend-version.mjs
- * with `package/package.json` version
- */
-export async function updateFrontendVersionJavaScript () {
-  return writeFile(join(`${paths.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(`${paths.src}/govuk/core/`, '_govuk-frontend-version.scss'), `:root {\n  --govuk-frontend-version: "${pkg.version}";\n}${EOL}`)
-}
-
 /**
  * Copy files task
  * Copies files to destination

diff --git a/tasks/scripts.mjs b/tasks/scripts.mjs
@@ -2,8 +2,10 @@ 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'
 
@@ -38,10 +40,20 @@ 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 = [
+    // Add GOV.UK Frontend release version
+    // @ts-expect-error "This expression is not callable" due to incorrect types
+    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 +67,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']({