Merge pull request #1371 from nhsuk/build-sass

Add Gulp build output for Sass

Author: colinrotherham

package-lock.json

@@ -1,10 +1,10 @@
 import { join } from 'path'
 
 import * as config from '@nhsuk/frontend-config'
-import { scripts, styles } from '@nhsuk/frontend-tasks'
+import { scripts } from '@nhsuk/frontend-tasks'
 import gulp from 'gulp'
 
-import { assets, release } from './tasks/index.mjs'
+import { assets, release, styles } from './tasks/index.mjs'
 
 gulp.task('styles', styles.compile)
 gulp.task('scripts', scripts.compile)

packages/nhsuk-frontend/gulpfile.mjs

@@ -46,10 +46,15 @@
     "@nhsuk/frontend-tasks": "*",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.6.1",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.0.7",
     "del-cli": "^6.0.0",
+    "glob": "^11.0.2",
     "gulp": "^5.0.1",
     "gulp-zip": "^6.1.0",
     "outdent": "^0.8.0",
+    "postcss": "^8.5.4",
+    "postcss-scss": "^4.0.9",
     "puppeteer": "^24.10.0",
     "sass-embedded": "^1.87.0"
   },

packages/nhsuk-frontend/package.json

@@ -0,0 +1,35 @@
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+import postcss from 'postcss'
+import scss from 'postcss-scss'
+
+/**
+ * PostCSS config
+ *
+ * @type {ConfigFn}
+ */
+export default (ctx = {}) => {
+  const { to } = ctx
+
+  return {
+    plugins: [
+      // Add vendor prefixes
+      autoprefixer({
+        env: 'stylesheets'
+      }),
+
+      // Minify CSS only
+      to?.endsWith('.min.css') &&
+        cssnano({
+          env: 'stylesheets'
+        })
+    ],
+
+    // Sass syntax support
+    syntax: to?.endsWith('.scss') ? scss : postcss
+  }
+}
+
+/**
+ * @import { ConfigFn } from 'postcss-load-config'
+ */

packages/nhsuk-frontend/postcss.config.mjs

@@ -3,3 +3,4 @@
  */
 export * as assets from './assets.mjs'
 export * as release from './release.mjs'
+export * as styles from './styles.mjs'

packages/nhsuk-frontend/tasks/index.mjs

@@ -0,0 +1,39 @@
+import { join } from 'path'
+
+import * as config from '@nhsuk/frontend-config'
+import { styles, task } from '@nhsuk/frontend-tasks'
+import { glob } from 'glob'
+import gulp from 'gulp'
+
+export const compile = gulp.series(
+  /**
+   * Transform NHS.UK frontend styles
+   */
+  task.name('styles:transform', async () => {
+    const modulePaths = await glob('nhsuk/**/*.scss', {
+      cwd: join(config.paths.pkg, 'src'),
+      nodir: true
+    })
+
+    // Apply PostCSS transforms (e.g. vendor prefixes)
+    for (const modulePath of modulePaths) {
+      await styles.compile(modulePath, {
+        srcPath: join(config.paths.pkg, 'src'),
+        destPath: join(config.paths.pkg, 'dist'),
+        output: { file: modulePath }
+      })()
+    }
+  }),
+
+  /**
+   * Compile NHS.UK frontend styles bundle
+   */
+  task.name(
+    'styles:compile',
+    styles.compile('nhsuk/nhsuk.scss', {
+      srcPath: join(config.paths.pkg, 'src'),
+      destPath: join(config.paths.pkg, 'dist'),
+      output: { file: 'nhsuk/nhsuk-frontend.min.css' }
+    })
+  )
+)

packages/nhsuk-frontend/tasks/styles.mjs

@@ -15,10 +15,11 @@
     "browser-sync": "^3.0.4",
     "cssnano": "^7.0.7",
     "gulp": "^5.0.1",
-    "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^6.0.1",
     "plugin-error": "^2.0.1",
+    "postcss": "^8.5.4",
+    "postcss-load-config": "^5.1.0",
+    "postcss-scss": "^4.0.9",
     "sass-embedded": "^1.87.0",
     "terser-webpack-plugin": "^5.3.14",
     "webpack-stream": "^7.0.0"