Use separate stylesheets for public- and SAIS-facing interfaces

paulrobertlloyd · paulrobertlloyd · commit f545e66325f5 · 2025-07-20T23:37:20.000+01:00
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,10 +1,20 @@
-@use "sass:color";
-
 // NHS.UK frontend components
-@forward "vendor/nhsuk-frontend";
+@forward "vendor/nhsuk-frontend" with (
+  $nhsuk-page-width: 1100px,
+  $nhsuk-grid-widths: (
+    one-quarter: 25%,
+    one-third: 33.3333%,
+    one-half: 50%,
+    two-thirds: 66.6666%,
+    three-quarters: 75%,
+    full: 100%,
+    filters: 30%,
+    results: 70%,
+  )
+);
 
 // GOV.UK Frontend components
 @forward "vendor/govuk-frontend";
 
-// App-specific components
+// Application components
 @forward "components";
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
@@ -12,7 +12,6 @@
 @forward "highlight";
 @forward "search-input";
 @forward "secondary-navigation";
-@forward "signed-in";
 @forward "status";
 @forward "summary-list";
 @forward "tables";
diff --git a/app/assets/stylesheets/components/_signed-in.scss b/app/assets/stylesheets/components/_signed-in.scss
diff --git a/app/assets/stylesheets/core/settings/_index.scss b/app/assets/stylesheets/core/settings/_index.scss
@@ -1,7 +1,6 @@
 @use "sass:color";
 @use "../../vendor/nhsuk-frontend" as *;
 
-$page-width: 1100px;
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $color_dark-orange: color.scale(
   color.mix($color_nhsuk-red, $color_nhsuk-yellow, 60%),
diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss
@@ -0,0 +1,10 @@
+// NHS.UK frontend components
+@forward "vendor/nhsuk-frontend";
+
+// Public-facing GOV.UK Frontend components
+@forward "vendor/govuk-frontend/public";
+
+// Public-facing components
+@forward "components/autocomplete";
+@forward "components/environment";
+@forward "components/summary-list";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/_public.scss b/app/assets/stylesheets/vendor/govuk-frontend/_public.scss
@@ -0,0 +1,3 @@
+@use "base" as *;
+
+@forward "components/notification-banner";
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss
@@ -1,13 +1 @@
-@forward "pkg:nhsuk-frontend/packages/core" with (
-  $nhsuk-fonts-path: "/",
-  $nhsuk-grid-widths: (
-    one-quarter: 25%,
-    one-third: 33.3333%,
-    one-half: 50%,
-    two-thirds: 66.6666%,
-    three-quarters: 75%,
-    full: 100%,
-    filters: 30%,
-    results: 70%,
-  )
-);
+@forward "pkg:nhsuk-frontend/packages/core";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -6,7 +6,7 @@
 
     <title><%= page_title(@service_name) %></title>
 
-    <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.development? ? "" : "reload" %>
+    <%= stylesheet_link_tag current_user.present? ? "application" : "public", "data-turbo-track": Rails.env.development? ? "" : "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": Rails.env.development? ? "" : "reload", defer: true %>
 
     <%= csrf_meta_tags %>
@@ -16,7 +16,7 @@
     <%= yield :head %>
   </head>
 
-  <body class="nhsuk-template__body<%= ' app-signed-in' if current_user.present? %>">
+  <body class="nhsuk-template__body">
     <script>
       document.body.className += ' js-enabled' +
          ('noModule' in HTMLScriptElement.prototype
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "workbox-build": "^7.3.0"
   },
   "scripts": {
-    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --pkg-importer=node --quiet-deps --style compressed",
+    "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --pkg-importer=node --quiet-deps --style compressed",
     "build": "esbuild app/javascript/*.[jt]s app/javascript/controllers/*.[jt]s --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --minify",
     "build:serviceworker": "esbuild app/javascript/serviceworker/main.js --bundle --sourcemap --outfile=public/sw.js --minify",
     "test:e2e": "PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1 playwright test",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@use "base" as *;`
	`2`	`+`
	`3`	`+@forward "components/notification-banner";`