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.

Sign up for GitHub

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

Jump to bottom

Support Dart Sass (part 1) #2583

Closed
wants to merge 1 commit into from
Closed

Support Dart Sass (part 1) #2583

wants to merge 1 commit into from

Conversation

nataliecarey
Copy link
Contributor

This PR is a step towards supporting Dart Sass. I made the codebase more compatible and then moved back to libsass. These changes would help prototype kit team and are a step closer to supporting Dart Sass on frontend project.

Dart sass is deprecating 1248 / 2 style division in favour of math.div(1248, 2) which is not supported by libsass. This creates a logic problem where we can either fully support Dart Sass and break libsass or support Dart Sass with warnings while fully supporting libsass.

I have consolidated the issue into one divideby function so it only gets flagged once when govuk-frontend is used by the Prototype Kit - that is a massive improvement for our users. I have also included a .dart-scss file which I think we might be able to configure so we use the Dart Sass version inside the Prototype Kit.

@nataliecarey
Experimented with Dart Sass, made codebase more compaitible and then …
0d61021 
…moved back to libsass. These changes would help prototype kit team and are a step closer to supporting Dart Sass on frontend project.
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2583 March 30, 2022 12:33 Inactive
@github-actions
Copy link

Changes to dist

diff --git a/dist/govuk-frontend-4.0.1.min.css b/dist/govuk-frontend-4.0.1.min.css
index adf7c076..7cf6f57a 100644
--- a/dist/govuk-frontend-4.0.1.min.css
+++ b/dist/govuk-frontend-4.0.1.min.css
@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .govuk-link {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -54,9 +56,9 @@
 
 @media print {
 
-    .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) ")";
         font-size: 90%;
         word-wrap: break-word
@@ -158,7 +160,7 @@
     .govuk-list {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -242,7 +244,7 @@
     .govuk-heading-xl {
         font-size: 48px;
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
 }
 
@@ -267,7 +269,7 @@
     font-weight: 700;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     display: block;
     margin-top: 0;
     margin-bottom: 20px
@@ -284,7 +286,7 @@
     .govuk-heading-l {
         font-size: 36px;
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -309,7 +311,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
     margin-top: 0;
     margin-bottom: 15px
@@ -368,7 +370,7 @@
     .govuk-heading-s {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -392,7 +394,7 @@
     font-weight: 400;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
     color: #505a5f
@@ -408,7 +410,7 @@
     .govuk-caption-xl {
         font-size: 27px;
         font-size: 1.6875rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -426,7 +428,7 @@
     font-weight: 400;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
     color: #505a5f
@@ -481,7 +483,7 @@
     .govuk-caption-m {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -501,7 +503,7 @@
     font-weight: 400;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-top: 0;
     margin-bottom: 20px
 }
@@ -571,7 +573,7 @@
     .govuk-body-m {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -600,7 +602,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     margin-top: 0;
     margin-bottom: 15px
 }
@@ -657,7 +659,7 @@
     .govuk-body-xs {
         font-size: 14px;
         font-size: .875rem;
-        line-height: 1.42857
+        line-height: 1.4285714286
     }
 }
 
@@ -1168,7 +1170,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     color: #0b0c0c;
     display: block;
     margin-bottom: 0;
@@ -1253,7 +1255,7 @@
     .js-enabled .govuk-accordion__show-all {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -1463,7 +1465,7 @@
     .js-enabled .govuk-accordion__section-toggle {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -1514,7 +1516,7 @@
 .govuk-back-link {
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1618,7 +1620,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     color: #0b0c0c;
     margin-top: 15px;
     margin-bottom: 10px
@@ -2007,7 +2009,7 @@
     .govuk-error-message {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2066,7 +2068,7 @@
     .govuk-fieldset__legend {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2099,7 +2101,7 @@
     .govuk-fieldset__legend--xl {
         font-size: 48px;
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
 }
 
@@ -2117,7 +2119,7 @@
     font-weight: 700;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -2131,7 +2133,7 @@
     .govuk-fieldset__legend--l {
         font-size: 36px;
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -2149,7 +2151,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 15px
 }
 
@@ -2194,7 +2196,7 @@
     .govuk-fieldset__legend--s {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2233,7 +2235,7 @@
     .govuk-hint {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2279,7 +2281,7 @@
     .govuk-label {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2312,7 +2314,7 @@
     .govuk-label--xl {
         font-size: 48px;
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
 }
 
@@ -2330,7 +2332,7 @@
     font-weight: 700;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -2344,7 +2346,7 @@
     .govuk-label--l {
         font-size: 36px;
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -2362,7 +2364,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 10px
 }
 
@@ -2407,7 +2409,7 @@
     .govuk-label--s {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2448,7 +2450,7 @@
     .govuk-checkboxes__item {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2572,7 +2574,7 @@ screen and (forced-colors:active) {
     .govuk-checkboxes__divider {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -2827,7 +2829,7 @@ screen and (forced-colors:active) {
     .govuk-summary-list {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3013,7 +3015,7 @@ screen and (forced-colors:active) {
     .govuk-input {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3145,7 +3147,7 @@ screen and (forced-colors:active) {
     .govuk-input__suffix {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3247,7 +3249,7 @@ screen and (forced-colors:active) {
     .govuk-details {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3375,7 +3377,7 @@ screen and (forced-colors:active) {
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-top: 0;
     margin-bottom: 15px
 }
@@ -3427,7 +3429,7 @@ screen and (forced-colors:active) {
     .govuk-error-summary__body {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3516,7 +3518,7 @@ screen and (forced-colors:active) {
     .govuk-file-upload {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -3551,7 +3553,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     padding-top: 25px;
     padding-bottom: 15px;
     border-top: 1px solid #b1b4b6;
@@ -3818,7 +3820,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     border-bottom: 10px solid #fff;
     color: #fff;
     background: #0b0c0c
@@ -3887,7 +3889,7 @@ only screen and (min-resolution:192dpi) {
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top
 }
 
@@ -3984,6 +3986,16 @@ only screen and (min-resolution:192dpi) {
     }
 }
 
+@media (min-width:40.0625em) {
+    .govuk-header__link--homepage {
+        display: inline
+    }
+
+    .govuk-header__link--homepage:focus {
+        box-shadow: 0 0 #fd0
+    }
+}
+
 .govuk-header__link--homepage:link,
 .govuk-header__link--homepage:visited {
     text-decoration: none
@@ -4009,7 +4021,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
 
 @media print {
@@ -4073,7 +4085,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     display: none;
     position: absolute;
     top: 20px;
@@ -4222,7 +4234,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 700;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     white-space: nowrap
 }
 
@@ -4309,7 +4321,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-inset-text {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4360,7 +4372,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-notification-banner {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4415,7 +4427,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-notification-banner__title {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4460,7 +4472,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin: 0 0 15px;
     padding: 0
 }
@@ -4567,7 +4579,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-panel {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4593,7 +4605,7 @@ only screen and (min-resolution:192dpi) {
 
 @media print {
     .govuk-panel--confirmation {
-        border-color: currentColor;
+        border-color: currentcolor;
         color: #000;
         background: none
     }
@@ -4621,7 +4633,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-panel__title {
         font-size: 48px;
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
 }
 
@@ -4643,7 +4655,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 400;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167
+    line-height: 1.0416666667
 }
 
 @media print {
@@ -4656,7 +4668,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-panel__body {
         font-size: 36px;
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -4765,7 +4777,7 @@ only screen and (min-resolution:192dpi) {
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     color: #0b0c0c;
     display: table;
     margin: 0
@@ -4836,7 +4848,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-tabs__title {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4881,7 +4893,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-tabs__list-item {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -4894,7 +4906,7 @@ only screen and (min-resolution:192dpi) {
 
 .govuk-tabs__list-item:before {
     color: #0b0c0c;
-    content: "\2014 ";
+    content: "—";
     margin-left: -25px;
     padding-right: 5px
 }
@@ -5021,6 +5033,9 @@ only screen and (min-resolution:192dpi) {
     .js-enabled .govuk-tabs__tab:hover {
         color: rgba(11, 12, 12, .99)
     }
+}
+
+@media (min-width:40.0625em) {
 
     .js-enabled .govuk-tabs__tab:active,
     .js-enabled .govuk-tabs__tab:focus {
@@ -5045,7 +5060,9 @@ only screen and (min-resolution:192dpi) {
         bottom: 0;
         left: 0
     }
+}
 
+@media (min-width:40.0625em) {
     .js-enabled .govuk-tabs__panel {
         margin-bottom: 0;
         padding: 30px 20px;
@@ -5064,7 +5081,9 @@ only screen and (min-resolution:192dpi) {
     .js-enabled .govuk-tabs__panel>:last-child {
         margin-bottom: 0
     }
+}
 
+@media (min-width:40.0625em) {
     .js-enabled .govuk-tabs__panel--hidden {
         display: none
     }
@@ -5096,7 +5115,7 @@ only screen and (min-resolution:192dpi) {
     .govuk-radios__item {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -5156,7 +5175,7 @@ only screen and (min-resolution:192dpi) {
     border: 10px solid;
     border-radius: 50%;
     opacity: 0;
-    background: currentColor
+    background: currentcolor
 }
 
 .govuk-radios__hint {
@@ -5230,7 +5249,7 @@ screen and (forced-colors:active) {
     .govuk-radios__divider {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -5416,7 +5435,7 @@ screen and (forced-colors:active) {
     text-decoration: underline;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     display: block;
     padding: 10px 15px
 }
@@ -5527,7 +5546,7 @@ screen and (forced-colors:active) {
     .govuk-table {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -5617,7 +5636,7 @@ screen and (forced-colors:active) {
     .govuk-table__caption--xl {
         font-size: 48px;
         font-size: 3rem;
-        line-height: 1.04167
+        line-height: 1.0416666667
     }
 }
 
@@ -5635,7 +5654,7 @@ screen and (forced-colors:active) {
     font-weight: 700;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -5649,7 +5668,7 @@ screen and (forced-colors:active) {
     .govuk-table__caption--l {
         font-size: 36px;
         font-size: 2.25rem;
-        line-height: 1.11111
+        line-height: 1.1111111111
     }
 }
 
@@ -5667,7 +5686,7 @@ screen and (forced-colors:active) {
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 15px
 }
 
@@ -5712,7 +5731,7 @@ screen and (forced-colors:active) {
     .govuk-table__caption--s {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -5817,7 +5836,7 @@ screen and (forced-colors:active) {
     .govuk-warning-text__text {
         font-size: 19px;
         font-size: 1.1875rem;
-        line-height: 1.31579
+        line-height: 1.3157894737
     }
 }
 
@@ -6903,7 +6922,7 @@ screen and (forced-colors:active) {
 .govuk-\!-font-size-80 {
     font-size: 53px !important;
     font-size: 3.3125rem !important;
-    line-height: 1.03774 !important
+    line-height: 1.0377358491 !important
 }
 
 @media (min-width:40.0625em) {
@@ -6931,7 +6950,7 @@ screen and (forced-colors:active) {
     .govuk-\!-font-size-48 {
         font-size: 48px !important;
         font-size: 3rem !important;
-        line-height: 1.04167 !important
+        line-height: 1.0416666667 !important
     }
 }
 
@@ -6945,14 +6964,14 @@ screen and (forced-colors:active) {
 .govuk-\!-font-size-36 {
     font-size: 24px !important;
     font-size: 1.5rem !important;
-    line-height: 1.04167 !important
+    line-height: 1.0416666667 !important
 }
 
 @media (min-width:40.0625em) {
     .govuk-\!-font-size-36 {
         font-size: 36px !important;
         font-size: 2.25rem !important;
-        line-height: 1.11111 !important
+        line-height: 1.1111111111 !important
     }
 }
 
@@ -6966,14 +6985,14 @@ screen and (forced-colors:active) {
 .govuk-\!-font-size-27 {
     font-size: 18px !important;
     font-size: 1.125rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
 
 @media (min-width:40.0625em) {
     .govuk-\!-font-size-27 {
         font-size: 27px !important;
         font-size: 1.6875rem !important;
-        line-height: 1.11111 !important
+        line-height: 1.1111111111 !important
     }
 }
 
@@ -6987,7 +7006,7 @@ screen and (forced-colors:active) {
 .govuk-\!-font-size-24 {
     font-size: 18px !important;
     font-size: 1.125rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
 
 @media (min-width:40.0625em) {
@@ -7015,7 +7034,7 @@ screen and (forced-colors:active) {
     .govuk-\!-font-size-19 {
         font-size: 19px !important;
         font-size: 1.1875rem !important;
-        line-height: 1.31579 !important
+        line-height: 1.3157894737 !important
     }
 }
 
@@ -7029,7 +7048,7 @@ screen and (forced-colors:active) {
 .govuk-\!-font-size-16 {
     font-size: 14px !important;
     font-size: .875rem !important;
-    line-height: 1.14286 !important
+    line-height: 1.1428571429 !important
 }
 
 @media (min-width:40.0625em) {
@@ -7057,7 +7076,7 @@ screen and (forced-colors:active) {
     .govuk-\!-font-size-14 {
         font-size: 14px !important;
         font-size: .875rem !important;
-        line-height: 1.42857 !important
+        line-height: 1.4285714286 !important
     }
 }
 
diff --git a/dist/govuk-frontend-ie8-4.0.1.min.css b/dist/govuk-frontend-ie8-4.0.1.min.css
index 20f85aaf..3eae6400 100644
--- a/dist/govuk-frontend-ie8-4.0.1.min.css
+++ b/dist/govuk-frontend-ie8-4.0.1.min.css
@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .govuk-link {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -93,7 +95,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin-top: 0;
     margin-bottom: 20px;
     padding-left: 0;
@@ -138,7 +140,7 @@
     line-height: 1.09375;
     font-size: 48px;
     font-size: 3rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     display: block;
     margin-top: 0;
     margin-bottom: 50px
@@ -147,7 +149,7 @@
 .govuk-heading-l {
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     font-size: 36px;
     font-size: 2.25rem;
     margin-bottom: 30px
@@ -160,7 +162,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     display: block;
     margin-top: 0
 }
@@ -182,7 +184,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin-top: 0;
     margin-bottom: 20px
 }
@@ -201,7 +203,7 @@
     font-size: 1.125rem;
     font-size: 27px;
     font-size: 1.6875rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     margin-bottom: 5px;
     color: #505a5f
 }
@@ -209,7 +211,7 @@
 .govuk-caption-l {
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     margin-bottom: 0
@@ -231,7 +233,7 @@
     font-size: 1rem;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-body-l,
@@ -243,7 +245,7 @@
     font-weight: 400;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25;
@@ -258,7 +260,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-body,
@@ -276,7 +278,7 @@
 .govuk-body-s {
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25
@@ -293,7 +295,7 @@
     line-height: 1.25;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.42857;
+    line-height: 1.4285714286;
     margin-top: 0;
     margin-bottom: 20px
 }
@@ -590,7 +592,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25;
@@ -631,7 +633,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     position: relative;
     z-index: 1;
     padding: 5px 2px 5px 0;
@@ -711,7 +713,7 @@
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
-    content: "\25B2";
+    content: "▲";
     position: relative;
     border: 0
 }
@@ -723,7 +725,7 @@
 }
 
 .js-enabled .govuk-accordion-nav__chevron--down:after {
-    content: "\25BC";
+    content: "▼";
     -webkit-transform: none;
     -ms-transform: none;
     transform: none
@@ -826,7 +828,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     font-weight: 400;
     color: #1d70b8
 }
@@ -840,7 +842,7 @@
 .govuk-back-link {
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -889,7 +891,7 @@
     -webkit-transform: rotate(225deg);
     -ms-transform: rotate(225deg);
     transform: rotate(225deg);
-    content: "\003c";
+    content: "<";
     width: auto;
     height: auto;
     border: 0;
@@ -917,7 +919,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -960,7 +962,7 @@
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
-    content: "\003e";
+    content: ">";
     width: auto;
     height: auto;
     border: 0;
@@ -1191,7 +1193,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     display: block;
     margin-top: 0;
     margin-bottom: 15px;
@@ -1230,7 +1232,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     box-sizing: border-box;
     display: table;
@@ -1254,7 +1256,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -1263,13 +1265,13 @@
     font-size: 1.5rem;
     font-size: 36px;
     font-size: 2.25rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
 
 .govuk-fieldset__legend--m {
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     margin-bottom: 15px
@@ -1289,7 +1291,7 @@
     font-size: 1rem;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-fieldset__heading {
@@ -1308,7 +1310,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin-bottom: 15px;
     color: #505a5f
 }
@@ -1335,7 +1337,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     display: block;
     margin-bottom: 5px
@@ -1355,7 +1357,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -1364,13 +1366,13 @@
     font-size: 1.5rem;
     font-size: 36px;
     font-size: 2.25rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
 
 .govuk-label--m {
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     margin-bottom: 10px
@@ -1390,7 +1392,7 @@
     font-size: 1rem;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-label-wrapper {
@@ -1407,7 +1409,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     display: block;
     position: relative;
     min-height: 40px;
@@ -1478,7 +1480,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     width: 40px;
     margin-bottom: 10px;
@@ -1657,7 +1659,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     display: table;
     width: 100%;
@@ -1766,7 +1768,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     box-sizing: border-box;
     width: 100%;
     height: 40px;
@@ -1862,7 +1864,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     box-sizing: border-box;
     display: inline-block;
     min-width: 40px;
@@ -1915,7 +1917,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     margin-bottom: 30px;
     display: block
@@ -2014,7 +2016,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     margin-top: 0;
@@ -2035,7 +2037,7 @@
     font-size: 1rem;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-error-summary__body p {
@@ -2089,7 +2091,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     max-width: 100%;
     margin-left: -5px;
@@ -2117,7 +2119,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -2298,7 +2300,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -2342,7 +2344,7 @@
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top
 }
 
@@ -2405,7 +2407,12 @@
     display: inline-block;
     margin-right: 10px;
     font-size: 30px;
-    line-height: 1
+    line-height: 1;
+    display: inline
+}
+
+.govuk-header__link--homepage:focus {
+    box-shadow: 0 0 #fd0
 }
 
 .govuk-header__link--homepage:link,
@@ -2433,7 +2440,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25
@@ -2465,7 +2472,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -2565,7 +2572,7 @@
     font-weight: 700;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -2597,7 +2604,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     padding: 15px;
     margin-top: 30px;
@@ -2625,7 +2632,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin-bottom: 50px;
     border: 5px solid #1d70b8;
     background-color: #1d70b8
@@ -2650,7 +2657,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin: 0;
     padding: 0;
     color: #fff
@@ -2675,7 +2682,7 @@
     font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25;
@@ -2746,7 +2753,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     box-sizing: border-box;
     margin-bottom: 15px;
     padding: 35px;
@@ -2771,7 +2778,7 @@
     line-height: 1.09375;
     font-size: 48px;
     font-size: 3rem;
-    line-height: 1.04167
+    line-height: 1.0416666667
 }
 
 .govuk-panel__title:last-child {
@@ -2782,10 +2789,10 @@
     font-weight: 400;
     font-size: 24px;
     font-size: 1.5rem;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     font-size: 36px;
     font-size: 2.25rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
 
 .govuk-panel__body,
@@ -2871,7 +2878,7 @@
     font-weight: 400;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -2904,7 +2911,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     margin-bottom: 10px
 }
@@ -2925,13 +2932,13 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     margin-left: 25px
 }
 
 .govuk-tabs__list-item:before {
     color: #0b0c0c;
-    content: "\2014 ";
+    content: "—";
     margin-left: -25px;
     padding-right: 5px
 }
@@ -3068,7 +3075,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     display: block;
     position: relative;
     min-height: 40px;
@@ -3127,7 +3134,7 @@
     border: 10px solid;
     border-radius: 50%;
     filter: alpha(opacity=0);
-    background: currentColor
+    background: currentcolor
 }
 
 .govuk-radios__hint {
@@ -3178,7 +3185,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     width: 40px;
     margin-bottom: 10px;
@@ -3318,7 +3325,7 @@
     text-decoration: underline;
     font-size: 14px;
     font-size: .875rem;
-    line-height: 1.14286;
+    line-height: 1.1428571429;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
@@ -3380,7 +3387,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     width: 100%;
     margin-bottom: 30px;
@@ -3447,7 +3454,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    line-height: 1.04167;
+    line-height: 1.0416666667;
     margin-bottom: 15px
 }
 
@@ -3456,13 +3463,13 @@
     font-size: 1.5rem;
     font-size: 36px;
     font-size: 2.25rem;
-    line-height: 1.11111
+    line-height: 1.1111111111
 }
 
 .govuk-table__caption--m {
     font-size: 18px;
     font-size: 1.125rem;
-    line-height: 1.11111;
+    line-height: 1.1111111111;
     font-size: 24px;
     font-size: 1.5rem;
     margin-bottom: 15px
@@ -3482,7 +3489,7 @@
     font-size: 1rem;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579
+    line-height: 1.3157894737
 }
 
 .govuk-warning-text {
@@ -3540,7 +3547,7 @@
     line-height: 1.25;
     font-size: 19px;
     font-size: 1.1875rem;
-    line-height: 1.31579;
+    line-height: 1.3157894737;
     color: #0b0c0c;
     display: block;
     padding-left: 45px
@@ -4014,7 +4021,7 @@
 .govuk-\!-font-size-80 {
     font-size: 53px !important;
     font-size: 3.3125rem !important;
-    line-height: 1.03774 !important;
+    line-height: 1.0377358491 !important;
     font-size: 80px !important;
     font-size: 5rem !important;
     line-height: 1 !important
@@ -4026,16 +4033,16 @@
     line-height: 1.09375 !important;
     font-size: 48px !important;
     font-size: 3rem !important;
-    line-height: 1.04167 !important
+    line-height: 1.0416666667 !important
 }
 
 .govuk-\!-font-size-36 {
     font-size: 24px !important;
     font-size: 1.5rem !important;
-    line-height: 1.04167 !important;
+    line-height: 1.0416666667 !important;
     font-size: 36px !important;
     font-size: 2.25rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
 
 .govuk-\!-font-size-27 {
@@ -4043,13 +4050,13 @@
     font-size: 1.125rem !important;
     font-size: 27px !important;
     font-size: 1.6875rem !important;
-    line-height: 1.11111 !important
+    line-height: 1.1111111111 !important
 }
 
 .govuk-\!-font-size-24 {
     font-size: 18px !important;
     font-size: 1.125rem !important;
-    line-height: 1.11111 !important;
+    line-height: 1.1111111111 !important;
     font-size: 24px !important;
     font-size: 1.5rem !important;
     line-height: 1.25 !important
@@ -4061,13 +4068,13 @@
     line-height: 1.25 !important;
     font-size: 19px !important;
     font-size: 1.1875rem !important;
-    line-height: 1.31579 !important
+    line-height: 1.3157894737 !important
 }
 
 .govuk-\!-font-size-16 {
     font-size: 14px !important;
     font-size: .875rem !important;
-    line-height: 1.14286 !important;
+    line-height: 1.1428571429 !important;
     font-size: 16px !important;
     font-size: 1rem !important;
     line-height: 1.25 !important
@@ -4079,7 +4086,7 @@
     line-height: 1.25 !important;
     font-size: 14px !important;
     font-size: .875rem !important;
-    line-height: 1.42857 !important
+    line-height: 1.4285714286 !important
 }
 
 .govuk-\!-font-weight-regular {

@daniel-ac-martin
Copy link
Contributor

daniel-ac-martin commented Apr 3, 2022 •
edited
Loading

@natcarey: I wonder whether there is anyway to detect whether we are in dart-sass or libsass?
Failing that, would it work to have a variable that the user can set to tell govuk-frontend which style of division to use?

Edit: I suppose that as it's a syntax error, that wouldn't work...

@36degrees
Copy link
Contributor

Thanks for picking this up @natcarey.

To avoid confusion, I do want to clarify that GOV.UK Frontend has explicitly supported Dart Sass v1.0.0 or above since February 2020 and we recommend using it over LibSass and Ruby Sass in our installation instructions. We also have a documented approach to silencing the deprecation warnings which is in line with the approach recommended by the Sass maintainers.

Having talked with @vanitabarrett and @querkmachine, we're going to close this as the immediate issue with the Prototype Kit has been resolved and released in v12.0.2. There is also a follow up PR open to replace the silent logger with the quiet deps approach we recommend.

We still intend to move the GOV.UK Frontend build pipeline to use Dart Sass as part of #2239. This will only affect the CSS used in the review app and the compiled CSS we include in the ZIP file attached to each release (the dist folder). When we do that, we will need to work out how to deal with the deprecation warnings. However, we anticipate the Sass team may go on to deprecate further features and so we should work on a generic solution rather than introducing a new layer of abstraction that focuses specifically on division.

Finally, it's worth noting that at some point in the future we plan to migrate to the Sass module system as part of #1791. This isn't something we're looking at in the short term as we know lots of our users are still using LibSass, including the GOV.UK team here at GDS.

@36degrees 36degrees closed this Apr 7, 2022
@colinrotherham colinrotherham mentioned this pull request Jan 13, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@nataliecarey @daniel-ac-martin @36degrees @govuk-design-system-ci