Use standalone PostCSS task for package

gulpfile.mjs

@@ -65,6 +65,7 @@ gulp.task('build:package', gulp.series(
   clean,
   copyFiles,
   compileJavaScripts,
+  compileStylesheets,
   updatePrototypeKitConfig
 ))
 

package.json

@@ -53,7 +53,6 @@
     "glob": "^8.1.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
-    "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-task-listing": "^1.1.1",
     "js-yaml": "^4.1.0",

postcss.config.js

@@ -4,7 +4,9 @@ const autoprefixer = require('autoprefixer')
 const cssnano = require('cssnano')
 const cssnanoPresetDefault = require('cssnano-preset-default')
 const { minimatch } = require('minimatch')
+const postcss = require('postcss')
 const pseudoclasses = require('postcss-pseudo-classes')
+const scss = require('postcss-scss')
 const unmq = require('postcss-unmq')
 const unopacity = require('postcss-unopacity')
 const unrgba = require('postcss-unrgba')
@@ -17,6 +19,7 @@ const unrgba = require('postcss-unrgba')
  */
 module.exports = (ctx) => {
   const plugins = []
+  const syntax = ctx.to?.endsWith('.scss') ? scss : postcss
 
   // PostCSS 'from' (or webpack 'file') source path
   // https://github.com/postcss/postcss-load-config#options
@@ -55,15 +58,18 @@ module.exports = (ctx) => {
   }
 
   // Always minify CSS
-  plugins.push(cssnano({
-    preset: [cssnanoPresetDefault, {
-      // Sorted CSS is smaller when gzipped, but we sort using Stylelint
-      // https://cssnano.co/docs/optimisations/cssdeclarationsorter/
-      cssDeclarationSorter: false
-    }]
-  }))
+  if (syntax !== scss) {
+    plugins.push(cssnano({
+      preset: [cssnanoPresetDefault, {
+        // Sorted CSS is smaller when gzipped, but we sort using Stylelint
+        // https://cssnano.co/docs/optimisations/cssdeclarationsorter/
+        cssDeclarationSorter: false
+      }]
+    }))
+  }
 
   return {
+    syntax,
     plugins
   }
 }

postcss.config.unit.test.js

@@ -159,6 +159,22 @@ describe('PostCSS config', () => {
       })
     })
 
+    describe('Sass syntax parser', () => {
+      it.each([
+        {
+          from: 'src/govuk/components/accordion/_accordion.scss',
+          to: 'package/govuk/components/accordion/_accordion.scss'
+        }
+      ])('Adds plugins for $from', ({ from, to }) => {
+        const config = configFn({ env, from, to })
+
+        expect(getPluginNames(config))
+          .toEqual([
+            'autoprefixer'
+          ])
+      })
+    })
+
     describe('Review app only', () => {
       it.each([
         {