govuk-font(14) outputs incorrect font-sizes when compiling with node-sass

[oscarduignan]

Description of the issue

compiling styles with libsass (in this case via node-sass) causes govuk-font(14) to have incorrect font-size

this isn't related to decimal rounding, but because of some logic to suppress deprecation warnings not working exactly the same under libsass as it does when using dart-sass

Steps to reproduce the issue

1. gh repo clone alphagov/govuk-frontend
2. npx node-sass govuk-frontend/packages/govuk-frontend/src/govuk/all.scss node-sass.css
3. open node-sass.css look at what is created for .govuk-body-xs and anything similarly using the deprecated govuk-font(14) and you'll see output like this:

.govuk-body-xs {
  color: #0b0c0c;
  font-family: "GDS Transport", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 3.3125rem;
  line-height: 1.03774;
  margin-top: 0;
  margin-bottom: 15px; }
  @media print {
    .govuk-body-xs {
      color: #000000; } }
  @media print {
    .govuk-body-xs {
      font-family: sans-serif; } }
  @media (min-width: 40.0625em) {
    .govuk-body-xs {
      font-size: 5rem;
      line-height: 1; } }
  @media print {
    .govuk-body-xs {
      font-size: 53pt;
      line-height: 1.1; } }
  @media (min-width: 40.0625em) {
    .govuk-body-xs {
      margin-bottom: 20px; } }

where the font-sizes are wrong

seems like cause could be related to some logic in the sass around suppressing warnings for internal usages of govuk-font(14) where something is giving different result in node-sass and causing the logic to be incorrect and pick up the biggest size typography instead.

Actual vs expected behaviour

you can see the xs font size is showing as font-size: 3.3125rem; and on print for example, 53pt - which is bigger than headings, where it should be like this, which is from the dart-sass compiled output in govuk-frontend dist

.govuk-body-xs{
    color:#0b0c0c;
    font-family:GDS Transport,arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-weight:400;
    font-size:.75rem;
    line-height:1.25;
    margin-top:0;
    margin-bottom:15px
}
@media print{
    .govuk-body-xs{
        color:#000;
        font-family:sans-serif
    }
}
@media (min-width:40.0625em){
    .govuk-body-xs{
        font-size:.875rem;
        line-height:1.4285714286
    }
}
@media print{
    .govuk-body-xs{
        font-size:12pt;
        line-height:1.2
    }
}
@media (min-width:40.0625em){
    .govuk-body-xs{
        margin-bottom:20px
    }
}

Environment (where applicable)

only applies where anyone is compiling the govuk-frontend styles with libsass (for example, node-sass)

• Operating system: not operating system specific
• Browser: not browser specific
• Browser version: not browser specific
• GOV.UK Frontend Version: from when govuk-font 14 was deprecated I think, not sure the version

[romaricpascal]

Hi @oscarduignan, thanks for letting us know. Looks like it's picking the first item of the type scale instead of the right one, weird. It may take us a little bit to investigate as we need to figure how to run node-sass on our machines (which use ARM processors that node-sass doesn't compile on).

Out of curiosity, what keeps your project stuck on node-sass?

[oscarduignan]

a lot of tax services are using play framework (scala) and the way that sass is compiled by them is normally using a (no longer maintained) plugin for scala's build tool that uses libsass (though we are looking at options to get them off this)

and we are actually in the process of moving hmrc-frontend to dart-sass, and that's how I noticed this, I was updating our our visual regression tests and there was a 1px difference in some things position, so I did a diff of the css before and after and happened to spot this difference amongst the decimal-precision changes

for context, it's not a massively impactful thing for tax services I think - I have done a search across teams codebases and couldn't find anyone using classes that would be impacted - so might not be worth doing anything about since 14 is going away in next major version anyway