Split out shared SCSS from devtool application

Author: alexluckett

package-lock.json

@@ -10,7 +10,7 @@
   ],
   "exports": {
     ".": {
-      "sass": "./.server/client/stylesheets/application.scss",
+      "sass": "./.server/client/stylesheets/shared.scss",
       "import": "./.server/server/plugins/engine/index.js",
       "default": "./.server/server/plugins/engine/index.js"
     },
@@ -20,9 +20,9 @@
     "./file-upload.js": "./.server/client/javascripts/file-upload.js",
     "./file-upload.min.js": "./.public/javascripts/file-upload.min.js",
     "./file-upload.min.js.map": "./.public/javascripts/file-upload.min.js.map",
-    "./application.min.css": "./.public/stylesheets/application.min.css",
     "./file-form-service.js": "./.server/server/utils/file-form-service.js",
     "./controllers/*": "./.server/server/plugins/engine/pageControllers/*",
+    "./application.min.css": "./.public/stylesheets/application.min.css",
     "./services/*": "./.server/server/plugins/engine/services/*",
     "./engine/*": "./.server/server/plugins/engine/*",
     "./package.json": "./package.json"
@@ -181,7 +181,7 @@
     "tsx": "^4.19.3",
     "typescript": "^5.7.2",
     "webpack": "^5.97.1",
-    "webpack-assets-manifest": "^5.2.1",
+    "webpack-assets-manifest": "^6.0.2",
     "webpack-cli": "^6.0.1"
   }
 }

package.json

@@ -1,18 +1,8 @@
 @use "govuk-frontend" as *;
-@use "pkg:accessible-autocomplete";
+@use "shared";
 @use "code";
-@use "prose";
-@use "service-banner";
-@use "summary-list";
 @use "tag-env";
 
-// Use default GDS Transport font for autocomplete
-.autocomplete__hint,
-.autocomplete__input,
-.autocomplete__option {
-  @include govuk-typography-common;
-}
-
 //  An example of some user-supplied styling
 //  Not great practice but it illustrates the point
 .govuk-header {

src/client/stylesheets/_service-banner.scss

@@ -0,0 +1,11 @@
+@use "govuk-frontend" as *;
+@use "pkg:accessible-autocomplete";
+@use "prose";
+@use "summary-list";
+
+// Use default GDS Transport font for autocomplete
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  @include govuk-typography-common;
+}

src/client/stylesheets/application.scss

@@ -4,7 +4,7 @@ import { dirname, join } from 'node:path'
 import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import CopyPlugin from 'copy-webpack-plugin'
 import TerserPlugin from 'terser-webpack-plugin'
-import WebpackAssetsManifest from 'webpack-assets-manifest'
+import { WebpackAssetsManifest } from 'webpack-assets-manifest'
 
 const { NODE_ENV = 'development' } = process.env