Use Dart Sass (#101)

This changes our SASS build to use the Dart Sass implementation. As part of this, we bundle the GDS styles plus our own additions into a single file - site.css. We also apply govuk-link to all a elements and govuk-body to all p elements by default.
DFE-Digital · Sep 6, 2022 · 4e0dce2 · 4e0dce2
1 parent 21a1879
commit 4e0dce2
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 62 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -62,6 +62,9 @@ jobs:
         dotnet tool install -g dotnet-format --version "6.*" --add-source https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet6/nuget/v3/index.json
         dotnet-format --verify-no-changes
 
+    - name: Install SASS
+      run: npm install -g sass
+
     - name: Build
       run: dotnet build --configuration Release
 

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/.gitignore b/dotnet-authserver/src/TeacherIdentity.AuthServer/.gitignore
@@ -1,2 +1,3 @@
 wwwroot/lib
-wwwroot/Styles/*.css
+wwwroot/Styles/*.css
+wwwroot/Styles/*.css.map
diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/Authorization/Authorize.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/Authorization/Authorize.cshtml
@@ -49,17 +49,17 @@
       <govuk-panel-body>
         @if (Model.GotTrn)
         {
-            <p class="govuk-body" data-testid="known-trn-content">Thank you, we’ve finished checking our records.</p>
+            <p data-testid="known-trn-content">Thank you, we’ve finished checking our records.</p>
         }
         else
         {
             <span data-testid="unknown-trn-content"></span>
             <h2 class="govuk-heading-m">You can continue without a match</h2>
-            <p class="govuk-body">We will attempt to match your record again. If we cannot, someone might be in touch to ask for more information.</p>
+            <p>We will attempt to match your record again. If we cannot, someone might be in touch to ask for more information.</p>
         }
 
         <h2 class="govuk-heading-m">Next time</h2>
-        <p class="govuk-body govuk-!-margin-bottom-6">Next time, you can skip these questions by signing in with your email address: <b>@Model.Email</b></p>
+        <p class="govuk-!-margin-bottom-6">Next time, you can skip these questions by signing in with your email address: <b>@Model.Email</b></p>
 
         @{
           await RenderForm("app-button--inverse govuk-!-margin-bottom-0");

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/SignIn/EmailConfirmation.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/SignIn/EmailConfirmation.cshtml
@@ -9,14 +9,14 @@
     <div class="govuk-grid-column-two-thirds-from-desktop">
       <h1 class="govuk-heading-xl">Confirm your email address</h1>
 
-      <p class="govuk-body">We’ve emailed a confirmation code to <span data-testid="email">@Model.Email</span></p>
+      <p>We’ve emailed a confirmation code to <span data-testid="email">@Model.Email</span></p>
 
       <govuk-input asp-for="Code" input-class="govuk-!-width-one-quarter" pattern="[0-9]*" inputmode="numeric" autocomplete="one-time-code">
         <govuk-input-label class="govuk-label--s" />
       </govuk-input>
 
       <p>
-        <a href="#" class="govuk-body govuk-link">I have not received an email</a>
+        <a href="#">I have not received an email</a>
       </p>
 
       <govuk-button type="submit">Continue</govuk-button>

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/SignIn/Trn.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Pages/SignIn/Trn.cshtml
@@ -1,4 +1,4 @@
-@page "/sign-in/trn"
+@page "/sign-in/trn"
 @model TeacherIdentity.AuthServer.Pages.SignIn.TrnModel
 @{
     ViewBag.Title = "We’ll ask you some questions to check against our records";
@@ -8,15 +8,15 @@
   <govuk-panel-title>We’ll ask you some questions to check against our records</govuk-panel-title>
 
   <govuk-panel-body>
-    <p class="govuk-body">We’ll ask for your:</p>
+    <p>We’ll ask for your:</p>
     <ul class="govuk-list govuk-list--bullet">
       <li>name</li>
       <li>date of birth</li>
       <li>National Insurance number, if you have one</li>
       <li>teacher reference number (TRN)</li>
     </ul>
 
-    <p class="govuk-body govuk-!-margin-bottom-6">
+    <p class="govuk-!-margin-bottom-6">
         If you do not have your TRN or National Insurance number available, we may ask some follow-up questions.
     </p>
 

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/TeacherIdentity.AuthServer.csproj b/dotnet-authserver/src/TeacherIdentity.AuthServer/TeacherIdentity.AuthServer.csproj
@@ -4,12 +4,11 @@
     <TargetFramework>net6.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>TeacherIdentityServer</UserSecretsId>
-    <EnableDefaultSassItems>false</EnableDefaultSassItems>
   </PropertyGroup>
 
-  <ItemGroup>
-    <SassFile Include="wwwroot/Styles/**/*.scss" />
-  </ItemGroup>
+  <Target Name="CompileSass" BeforeTargets="Build">
+    <Exec Command="sass -q wwwroot/Styles/site.scss wwwroot/Styles/site.css" />
+  </Target>
 
   <ItemGroup>
     <PackageReference Include="AspNetCore.HealthChecks.NpgSql" Version="6.0.2" />
@@ -23,7 +22,6 @@
     <PackageReference Include="Hangfire.PostgreSql" Version="1.9.8" />
     <PackageReference Include="idunno.Authentication.Basic" Version="2.2.3" />
     <PackageReference Include="Joonasw.AspNetCore.SecurityHeaders" Version="4.0.1" />
-    <PackageReference Include="LibSassBuilder" Version="2.0.2" />
     <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.21.0" />
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="6.0.7" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="6.0.7" />

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/GenericError.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/GenericError.cshtml
@@ -1,10 +1,10 @@
-@{
+@{
     ViewBag.Title = "Sorry, there is a problem with the service";
 }
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
-    <p class="govuk-body">Try again later.</p>
+    <p>Try again later.</p>
   </div>
 </div>
diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/NotFound.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/NotFound.cshtml
@@ -1,14 +1,14 @@
-@{
+@{
     ViewBag.Title = "Page not found";
 }
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l">Page not found</h1>
-    <p class="govuk-body">
+    <p>
       If you typed the web address, check it is correct.
     </p>
-    <p class="govuk-body">
+    <p>
       If you pasted the web address, check you copied the entire address.
     </p>
   </div>

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/_Layout.cshtml b/dotnet-authserver/src/TeacherIdentity.AuthServer/Views/Shared/_Layout.cshtml
@@ -30,7 +30,6 @@
   <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
 
-  @Html.Raw(GovUk.Frontend.AspNetCore.HtmlSnippets.StyleImports)
   <link rel="stylesheet" asp-href-include="~/Styles/*.css">
 
   <meta property="og:image" content="/assets/images/govuk-opengraph-image.png">

diff --git a/dotnet-authserver/src/TeacherIdentity.AuthServer/wwwroot/Styles/panel.scss b/dotnet-authserver/src/TeacherIdentity.AuthServer/wwwroot/Styles/panel.scss
diff --git a/...ity.AuthServer/wwwroot/Styles/button.scss → ...ntity.AuthServer/wwwroot/Styles/site.scss b/...ity.AuthServer/wwwroot/Styles/button.scss → ...ntity.AuthServer/wwwroot/Styles/site.scss
@@ -1,4 +1,55 @@
+@use '../lib/govuk-frontend/govuk/all.scss';
 @import '../lib/govuk-frontend/govuk/_base.scss';
+@import '../lib/govuk-frontend/govuk/settings/measurements.scss';
+
+a {
+  @extend %govuk-link;
+}
+
+p {
+  @extend .govuk-body;
+}
+
+.app-panel--interruption {
+  background-color: govuk-colour("blue");
+  color: govuk-colour("white");
+  text-align: left;
+
+  p,
+  .govuk-heading-m,
+  .govuk-list,
+  .govuk-body,
+  .govuk-label,
+  .govuk-fieldset__legend,
+  .govuk-hint {
+    color: govuk-colour("white");
+  }
+
+  p {
+    margin-bottom: 20px;
+  }
+
+  .govuk-heading-m {
+    padding-top: 10px;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-radios__label::before,
+  & ::after {
+    color: govuk-colour("black");
+    border-color: govuk-colour("black");
+    background-color: govuk-colour("white");
+  }
+
+  @include govuk-media-query(desktop) {
+    > * {
+      width: map_get($govuk-grid-widths, two-thirds);
+    }
+  }
+}
 
 $app-button-shadow-size: $govuk-border-width-form-element;
 $app-button-inverse-background-colour: govuk-colour("white");
@@ -31,3 +82,4 @@ $app-button-inverse-hover-background-colour: govuk-tint($app-button-inverse-fore
   background-color: $app-button-inverse-hover-background-colour;
   box-shadow: inset 0 0 0 2px $govuk-focus-colour;
 }
+