Significant line height differences between node-sass and dart-sass

Rendering the govuk-frontend scss with dart-sass results in surprisingly significant line height differences when compared to node-sass. This is caused by the default precision of dart-sass being 10, whereas it is 5 in node-sass. The problematic code lies here, in the calculation of line height.

  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
    $line-height: $line-height / $font-size;
  }

  @return $line-height;
}

This is a screenshot of the differences registered by backstop (In this case, from nhsuk-frontend, but it’s the same line height code).

Over on nhsuk-frontend, we are now forcibly rounding to 5 decimal places so that we get consistent rendering across node-sass and dart-sass (Sounds minor, but people are likely to be hopping between different bits of the NHS regularly so as much consistency as possible is nice). I will open a pull request shortly with our solution, for discussion…

[36degrees]

Not at all, it was definitely worth investigating (and interesting 🤓 )! Really do appreciate you taking the time to share your findings with us.

[36degrees]

I think the things we need to do to resolve this are:

• change the precision in our own build pipeline to 6dp (unless we’ve already done #2239 which’ll force us to 10dp anyway)
• document the precision somewhere, for anyone using node-sass or Ruby Sass (but accept that teams are likely to miss it)

I’ve also noticed a separate but related issue with the grid which I’ve written up in #2361, and which we should do at the same time.