From 0c012484757b817b51ca429666963b318bcf358d Mon Sep 17 00:00:00 2001
From: Mike Monteith <mike@mikemonteith.com>
Date: Thu, 18 Apr 2024 18:01:29 +0100
Subject: [PATCH] Compile docs-only CSS in eleventy build

---
 .eleventy.js                    | 23 +++++++++++++++--------
 docs/_includes/layouts/base.njk |  3 +--
 docs/assets/css/app.scss        | 10 ++++++++++
 3 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 docs/assets/css/app.scss

diff --git a/.eleventy.js b/.eleventy.js
index e5beb84..35e3dd1 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,4 +1,5 @@
 import nunjucks from 'nunjucks'
+import sass from 'sass'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
 
 const nunjucksEnv = nunjucks.configure([
@@ -16,16 +17,22 @@ export default function (eleventyConfig) {
   // Configure a custom nunjucks environment
   eleventyConfig.setLibrary('njk', nunjucksEnv)
 
-  // Copy static files
-  eleventyConfig.addPassthroughCopy({
-    'node_modules/nhsuk-frontend/dist/nhsuk.css': 'assets/nhsuk.css',
-    'dist/nhsapp.css': 'assets/nhsapp.css'
-  })
-
   // Watch for changes in these directories and files
-  eleventyConfig.addWatchTarget('./docs/')
   eleventyConfig.addWatchTarget('./src/')
-  eleventyConfig.addWatchTarget('./dist/nhsapp.css')
+
+  eleventyConfig.addTemplateFormats('scss')
+  eleventyConfig.addExtension('scss', {
+    outputFileExtension: 'css',
+    compile: async function (inputContent) {
+      let result = sass.compileString(inputContent, {
+        // Allow us to import scss files relative to the project root
+        loadPaths: ['.']
+      })
+      return async (data) => {
+        return result.css
+      }
+    }
+  })
 
   // We need this HtmlBase plugin for serving our docs on github pages at a subdirectory
   // https://www.11ty.dev/docs/plugins/html-base/
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index c54d6da..799e83b 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -9,8 +9,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
-    <link href="/assets/nhsuk.css" rel="stylesheet" />
-    <link href="/assets/nhsapp.css" rel="stylesheet" />
+    <link href="/assets/css/app.css" rel="stylesheet" />
 
     <title>{{ title }}</title>
   </head>
diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
new file mode 100644
index 0000000..c07518b
--- /dev/null
+++ b/docs/assets/css/app.scss
@@ -0,0 +1,10 @@
+// Import all of the NHS.UK frontend core styles
+@import "node_modules/nhsuk-frontend/packages/core/all.scss";
+
+// Import specific components that we need from nhsuk-frontend
+@import "node_modules/nhsuk-frontend/packages/components/skip-link/skip-link.scss";
+@import "node_modules/nhsuk-frontend/packages/components/header/header.scss";
+@import "node_modules/nhsuk-frontend/packages/components/hero/hero.scss";
+
+// Import all styles from the NHS App frontend library
+@import "src/all.scss";