Re-enable scss linting (#3811)

* re-enable scss linting

* Update build.yml

switch github action to yarn-based stylelint

* add npm to dockerfile

* SCSS linting fixes

.github/workflows/build.yml

@@ -228,10 +228,10 @@ jobs:
       - name: set-up-environment
         uses: DFE-Digital/github-actions/set-up-environment@master
 
-      # - name: Lint SCSS
-      #   uses: actions-hub/stylelint@master
-      #   env:
-      #     PATTERN: "**/*.scss"
+      - name: Lint SCSS
+        run: |-
+          docker run -t --rm -e RAILS_ENV=test -e NODE_ENV=test -e CI=true -e PATTERN="**/*.scss" \
+            ${{env.DOCKER_IMAGE_TEST}} sh -c "yarn && yarn scss-lint"
 
       - name: Lint Ruby
         run: |-

Dockerfile

@@ -20,7 +20,7 @@ RUN apk add --no-cache \
   "procps-ng=4.0.4-r0" \
   "libproc2=4.0.4-r0"
 
-RUN apk add --no-cache build-base tzdata shared-mime-info nodejs yarn git \
+RUN apk add --no-cache build-base tzdata shared-mime-info nodejs npm yarn git \
         chromium chromium-chromedriver postgresql-libs postgresql-dev && rm -rf /var/lib/apt/lists/*
 
 # Install bundler

app/webpacker/styles/blocks.scss

@@ -90,7 +90,7 @@ $space-between-sections: 3.7em;
 
   @include mq($from: tablet) {
     display: flex;
-    gap: $indent-amount * 0.5;
+    gap: $indent-amount * .5;
     padding: 0 15px;
 
     .image-block {

app/webpacker/styles/components/badge.scss

@@ -12,7 +12,7 @@ html:not(.js-enabled) {
   background-color: $purple;
   font-weight: bold;
   font-size: .8em;
-  margin-right: $indent-amount * 0.25;
+  margin-right: $indent-amount * .25;
   text-align: center;
 
   span {

app/webpacker/styles/components/fact-list.scss

@@ -13,7 +13,7 @@ ul.fact-list {
 
   li {
     border: 3px solid $purple;
-    padding: $indent-amount * 0.5;
+    padding: $indent-amount * .5;
     display: flex;
     flex-direction: column;
     flex: 1;

app/webpacker/styles/components/promo.scss

@@ -2,7 +2,7 @@
   max-width: $content-max-width;
   display: flex;
   flex-direction: column;
-  gap: $indent-amount * 0.5;
+  gap: $indent-amount * .5;
   margin: 0 $indent-amount;
 
   @include mq($from: tablet) {

app/webpacker/styles/layout.scss

@@ -72,11 +72,12 @@ section.container {
   flex-direction: column;
   margin: 1em 0;
 
-  > main.within-section, > .back-link {
+  > main.within-section,
+  > .back-link {
     margin: auto $indent-amount;
 
     @include mq($from: tablet) {
-      margin: 0 0;
+      margin: 0;
       width: 100%;
     }
   }
@@ -162,7 +163,7 @@ section.container {
     background-color: $grey;
     padding: 1em 0;
 
-     @include mq($from: tablet) {
+    @include mq($from: tablet) {
       padding: 3em 0;
     }
   }

app/webpacker/styles/links-and-buttons.scss

@@ -184,10 +184,6 @@ body a.govuk-back-link {
   }
 }
 
-.button--secondary:hover {
-  background: $cta-grey-dark;
-}
-
 .call-to-action-icon-button {
   @include button;
   display: inline-block;

app/webpacker/styles/registration.scss

@@ -11,7 +11,8 @@ section.registration {
   }
 
   @include mq($from: tablet) {
-    main.within-section, .back-link,
+    main.within-section,
+    .back-link,
     .registration__mailing-list,
     .registration__teacher-training-adviser,
     .registration__callback {

app/webpacker/styles/sections/action-container.scss

@@ -39,17 +39,17 @@
   &:after {
     content: "";
     position: absolute;
-    right: -$indent-amount * 0.5;
-    bottom: -$indent-amount * 0.5;
+    right: -$indent-amount * .5;
+    bottom: -$indent-amount * .5;
   }
 
   &:before {
-    width: $indent-amount * 0.5;
+    width: $indent-amount * .5;
     height: 100px;
   }
 
   &:after {
-    height: $indent-amount * 0.5;
+    height: $indent-amount * .5;
     width: 100px;
   }