fix: stop directly requiring govuk-frontend SCSS

Directly requiring individual govuk-frontend SCSS files is risky, as govuk-frontend could
move their internal files and break our compatibility. This has happened in v5 of
govuk-frontend, and we cannot support both ≤v4 and v5 at the same time with the current
method.

Instead, we will require users to separately import govuk-frontend before moj-frontend. In
reality users should already be doing this, as using moj-frontend code without govuk-frontend
will cause an inconsistent UI. Anyone who _isn't_ doing so already will just need a one line
import:

```scss
@import "node_modules/govuk-frontend/dist/govuk/all";
```

To still be able to build our distributable version, which also requires govuk-frontend code
to be built, create a wrapper `dist.scss` with the specific imports required.

BREAKING CHANGE: If you are building moj-frontend from SCSS, you must include govuk-frontend
beforehand

.github/workflows/main.yml

@@ -47,7 +47,9 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Test Sass can be compiled
-      run: npm run test:sass
+      run: |
+        npm install
+        npm run test:sass
 
   publish:
     runs-on: ubuntu-latest

gulp/dist-scss/all-ie8.scss

@@ -0,0 +1,3 @@
+$govuk-is-ie8: true;
+
+@import "all";

gulp/dist-scss/all.scss

@@ -0,0 +1,6 @@
+$_govuk-imported-modules: ("govuk/objects/width-container") !default;
+
+@import "node_modules/govuk-frontend/dist/govuk/base";
+@import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
+@import "package/moj/all"
+

gulp/dist.js

@@ -31,13 +31,13 @@ gulp.task("dist:javascript", () => {
 
 gulp.task("dist:css", () => {
   return gulp
-    .src("package/moj/*.scss")
+    .src("gulp/dist-scss/*.scss")
     .pipe(sass())
     .pipe(postcss([autoprefixer, cssnano]))
     .pipe(
       rename((path) => ({
         dirname: path.dirname,
-        basename: path.basename.replace("all", "moj-frontend"),
+        basename: path.basename.replace("dist", "moj-frontend"),
         extname: ".min.css",
       }))
     )

package.json

@@ -14,7 +14,7 @@
     "ci:dryrun": "HUSKY=0 CI=true semantic-release --dry-run",
     "start": "npm-run-all --parallel watch:*",
     "test": "npm-run-all --parallel test:*",
-    "test:sass": "npm install node-sass && node-sass -q test.scss >/dev/null && echo 'ok'",
+    "test:sass": "npx node-sass -q gulp/dist-scss/all.scss >/dev/null && echo 'ok'",
     "test:docs": "npm run build:docs",
     "watch:11ty": "eleventy --input=./docs --output=public --serve --watch",
     "watch:webpack": "webpack --watch"

src/moj/all.scss

@@ -1,5 +1,3 @@
-@import "node_modules/govuk-frontend/dist/govuk/base";
-
 @import "settings/all";
 @import "helpers/all";
 @import "objects/all";

src/moj/components/cookie-banner/_cookie-banner.scss

@@ -1,5 +1,3 @@
-@import "node_modules/govuk-frontend/dist/govuk/objects/width-container";
-
 .moj-cookie-banner {
   display: none;
   @include govuk-font(16);