Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate GOV.UK Frontend build pipeline to use Dart Sass #3164

Merged
merged 7 commits into from
Mar 2, 2023

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Jan 13, 2023

This PR swaps "Node Sass" node-sass with "Dart Sass" sass sass-embedded

There are some minor output differences to be aware of:

  1. No new lines between @media queries for expanded style
  2. Number precision now at 10 decimal places 1.42857 1.4285714286
  3. Legacy (LibSass) global functions renamed to_upper_case to-upper-case
  4. Slightly re-ordered comma separated selectors

Other changes in preparation have been moved to:

Plus this swap has previously been looked at in an older PR:

Closes: #2239

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 13, 2023 18:08 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 16, 2023 08:25 Inactive
@colinrotherham colinrotherham changed the title [DO NOT MERGE] Migrate GOV.UK Frontend build pipeline to use Dart Sass Migrate GOV.UK Frontend build pipeline to use Dart Sass Jan 16, 2023
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 16, 2023 10:50 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 16, 2023 13:11 Inactive
@36degrees
Copy link
Contributor

I'm not seeing changes to src reflected in the review app – I think possibly the review app is loading GOV.UK Frontend from the package folder rather than src (i.e. the review app is now always showing the latest release)?

Also wondering what we want to do about all the deprecation notices… it's potentially useful to be aware of new ones, but there are ones we can't fix that create quite a lot of noise in the terminal output… 😬

@colinrotherham colinrotherham marked this pull request as draft January 17, 2023 17:41
@colinrotherham
Copy link
Contributor Author

colinrotherham commented Jan 17, 2023

I'm not seeing changes to src reflected in the review app – I think possibly the review app is loading GOV.UK Frontend from the package folder rather than src (i.e. the review app is now always showing the latest release)?

@36degrees Yeah it's importing from ./package as per Node package resolution but Dart Sass { importers } can be configured to map govuk-frontend from ./package./src/govuk just need to add that bit 😊

Update 1: I've kept the source import @import "../../../src/govuk/all"; versus importing from govuk-frontend as it's working correctly again in Dart Sass since we fixed e37f173

Also wondering what we want to do about all the deprecation notices… it's potentially useful to be aware of new ones, but there are ones we can't fix that create quite a lot of noise in the terminal output… 😬

For deprecations we can silence the log output for tests and/or development quite easily

Update 2: Found nice fixes for all our deprecation warnings in:

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 18, 2023 20:54 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 18, 2023 21:01 Inactive
@colinrotherham colinrotherham changed the base branch from main to postcss-pseudo-classes January 18, 2023 21:02
@colinrotherham colinrotherham force-pushed the postcss-pseudo-classes branch 2 times, most recently from 13e3be4 to d5903b3 Compare January 19, 2023 11:26
Base automatically changed from postcss-pseudo-classes to main January 19, 2023 11:30
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 20, 2023 19:16 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 January 20, 2023 19:21 Inactive
@colinrotherham colinrotherham changed the base branch from main to dart-sass-prep-formatting January 20, 2023 19:46
@colinrotherham
Copy link
Contributor Author

Diff for govuk-frontend-4.5.0.min.css

diff --git a/Users/colin/Desktop/Diffs/dist-old/govuk-frontend-4.5.0.min.css b/Users/colin/Desktop/Diffs/dist-new/govuk-frontend-4.5.0.min.css
index b46ab421..f12e617c 100644
--- a/Users/colin/Desktop/Diffs/dist-old/govuk-frontend-4.5.0.min.css
+++ b/Users/colin/Desktop/Diffs/dist-new/govuk-frontend-4.5.0.min.css
@@ -1 +1,3 @@
+@charset "UTF-8";
+
 .govuk-link {
@@ -58,5 +60,5 @@
 
-    .govuk-link[href^="/"]:after,
-    .govuk-link[href^="http://"]:after,
-    .govuk-link[href^="https://"]:after {
+    [href^="/"].govuk-link:after,
+    [href^="http://"].govuk-link:after,
+    [href^="https://"].govuk-link:after {
         content: " (" attr(href) ")";
@@ -162,3 +164,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -246,3 +248,3 @@
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
@@ -271,3 +273,3 @@
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     display: block;
@@ -288,3 +290,3 @@
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -313,3 +315,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
@@ -372,3 +374,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -396,3 +398,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
@@ -412,3 +414,3 @@
         font-size: 1.6875rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -430,3 +432,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
@@ -485,3 +487,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -505,3 +507,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-top: 0;
@@ -575,3 +577,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -604,3 +606,3 @@
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     margin-top: 0;
@@ -661,3 +663,3 @@
         font-size: .875rem;
-        line-height: 1.42857
+        line-height: 1.4285714286
     }
@@ -917,3 +919,3 @@
     .govuk-grid-column-one-third {
-        width: 33.33333%;
+        width: 33.3333333333%;
         float: left
@@ -943,3 +945,3 @@
     .govuk-grid-column-two-thirds {
-        width: 66.66667%;
+        width: 66.6666666667%;
         float: left
@@ -993,3 +995,3 @@
     .govuk-grid-column-one-third-from-desktop {
-        width: 33.33333%;
+        width: 33.3333333333%;
         float: left
@@ -1017,3 +1019,3 @@
     .govuk-grid-column-two-thirds-from-desktop {
-        width: 66.66667%;
+        width: 66.6666666667%;
         float: left
@@ -1159,3 +1161,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     color: #0b0c0c;
@@ -1257,3 +1259,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -1477,3 +1479,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -1528,3 +1530,3 @@
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-family: GDS Transport, arial, sans-serif;
@@ -1641,3 +1643,3 @@
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     color: #0b0c0c;
@@ -1686,3 +1688,3 @@
     margin-left: .625em;
-    padding-left: .97844em;
+    padding-left: .9784375em;
     float: left
@@ -1696,3 +1698,3 @@
     bottom: 0;
-    left: -.20688em;
+    left: -.206875em;
     width: .4375em;
@@ -2031,3 +2033,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2090,3 +2092,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2123,3 +2125,3 @@
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
@@ -2141,3 +2143,3 @@
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
@@ -2155,3 +2157,3 @@
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -2173,3 +2175,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 15px
@@ -2218,3 +2220,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2257,3 +2259,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2300,3 +2302,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2333,3 +2335,3 @@
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
@@ -2351,3 +2353,3 @@
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
@@ -2365,3 +2367,3 @@
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -2383,3 +2385,3 @@
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 10px
@@ -2428,3 +2430,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2469,3 +2471,3 @@
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2594,3 +2596,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -2809,3 +2811,3 @@ screen and (forced-colors:active) {
 .govuk-character-count__message:after {
-    content: "\200B"
+    content: "​"
 }
@@ -2868,3 +2870,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -3001,3 +3003,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -3101,3 +3103,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -3231,3 +3233,3 @@ screen and (forced-colors:active) {
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-top: 0;
@@ -3283,3 +3285,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -3374,3 +3376,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -3414,3 +3416,3 @@ screen and (forced-colors:active) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     padding-top: 25px;
@@ -3669,3 +3671,3 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     border-bottom: 10px solid #fff;
@@ -3873,3 +3875,3 @@ only screen and (min-resolution:2dppx) {
     font-size: 1.125rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
@@ -3935,3 +3937,3 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     display: none;
@@ -4075,3 +4077,3 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     white-space: nowrap
@@ -4168,3 +4170,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4219,3 +4221,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4274,3 +4276,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4319,3 +4321,3 @@ only screen and (min-resolution:2dppx) {
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin: 0 0 15px;
@@ -4465,3 +4467,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4610,3 +4612,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4721,3 +4723,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -4775,3 +4777,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
@@ -4797,3 +4799,3 @@ only screen and (min-resolution:2dppx) {
     font-size: 1.5rem;
-    line-height: 1.04167
+    line-height: 1.0416666667
 }
@@ -4810,3 +4812,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -4919,3 +4921,3 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     color: #0b0c0c;
@@ -4989,3 +4991,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5034,3 +5036,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5047,3 +5049,3 @@ only screen and (min-resolution:2dppx) {
     color: #0b0c0c;
-    content: "\2014 ";
+    content: "—";
     margin-left: -25px;
@@ -5241,3 +5243,3 @@ only screen and (min-resolution:2dppx) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5376,3 +5378,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5569,3 +5571,3 @@ screen and (forced-colors:active) {
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     display: block;
@@ -5677,3 +5679,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5908,3 +5910,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -5953,3 +5955,3 @@ screen and (forced-colors:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -6055,3 +6057,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -6145,3 +6147,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
@@ -6163,3 +6165,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
@@ -6177,3 +6179,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
@@ -6195,3 +6197,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 15px
@@ -6240,3 +6242,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -6345,3 +6347,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
@@ -7691,3 +7693,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 3.3125rem !important;
-    line-height: 1.03774 !important
+    line-height: 1.0377358491 !important
 }
@@ -7719,3 +7721,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 3rem !important;
-        line-height: 1.04167 !important
+        line-height: 1.0416666667 !important
     }
@@ -7733,3 +7735,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 1.5rem !important;
-    line-height: 1.04167 !important
+    line-height: 1.0416666667 !important
 }
@@ -7740,3 +7742,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 2.25rem !important;
-        line-height: 1.11111 !important
+        line-height: 1.1111111111 !important
     }
@@ -7754,3 +7756,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 1.125rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
@@ -7761,3 +7763,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 1.6875rem !important;
-        line-height: 1.11111 !important
+        line-height: 1.1111111111 !important
     }
@@ -7775,3 +7777,3 @@ screen and (-ms-high-contrast:active) {
     font-size: 1.125rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
@@ -7803,3 +7805,3 @@ screen and (-ms-high-contrast:active) {
         font-size: 1.1875rem !important;
-        line-height: 1.31579 !important
+        line-height: 1.3157894737 !important
     }
@@ -7817,3 +7819,3 @@ screen and (-ms-high-contrast:active) {
     font-size: .875rem !important;
-    line-height: 1.14286 !important
+    line-height: 1.1428571429 !important
 }
@@ -7845,3 +7847,3 @@ screen and (-ms-high-contrast:active) {
         font-size: .875rem !important;
-        line-height: 1.42857 !important
+        line-height: 1.4285714286 !important
     }

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 February 23, 2023 12:27 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 February 27, 2023 19:28 Inactive
@colinrotherham colinrotherham changed the base branch from main to deprecate-ie8-vars-mixins February 27, 2023 19:28
@romaricpascal
Copy link
Member

Codes changes look good to me. 🙌🏻 Regarding the underline, it's be neat to have a fix if adjusting $govuk-link-underline-offset does it (and the eye of a designer on the situation too 😉)

Base automatically changed from deprecate-ie8-vars-mixins to main February 28, 2023 17:53
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 February 28, 2023 18:14 Inactive
@domoscargin
Copy link
Contributor

As per our discussion offline: we're going to merge this as it only affects dist and folks using dart-sass are already seeing these changes.

Additionally, we'll make sure we tackle #2743 soon.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3164 March 2, 2023 10:55 Inactive
Copy link
Contributor

@domoscargin domoscargin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good to me

@colinrotherham colinrotherham merged commit dbab9e2 into main Mar 2, 2023
@colinrotherham colinrotherham deleted the dart-sass branch March 2, 2023 11:24
36degrees added a commit that referenced this pull request May 20, 2024
Use the new `silenceDeprecations` feature introduced in Sass 1.74.0 and remove the custom logger that was implemented to filter them out.

The logger was introduced in 81f59d9 and ec547be as part of #3164.

As mentioned in the first commit message, the output otherwise exactly matches the log output from Dart Sass. I’ve also manually verified this by comparing the output from the custom logger with an empty array for `supressed` and using the default logged with an empty array for `silenceDeprecations`.

There’s nothing else using `chalk` which was introduced as a dependency in 81f59d9 so uninstall that too.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file interoperability sass / css tooling
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Migrate GOV.UK Frontend build pipeline to use Dart Sass
6 participants