Interpolate sass variables inside calc() to maintain support for compiling with libsass

[oscarduignan]

Description of the issue

In 5.1.0 you introduced some styles that mean that your sass is no longer compatible with libsass due to lack of interpolation within some uses of "calc()"

Steps to reproduce the issue

1. grab the latest from main
2. cat dist/*.css | npx prettier --stdin-filepath .css | grep "calc(100% -"
3. you will see this:

   max-width: calc(100% - 74px);
   max-width: calc(100% - 74px);
   

4. npm install node-sass
5. cd src/govuk
6. npx node-sass all.scss | grep "calc(100% -"
7. and now you will see:

   max-width: calc(100% - (($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size));
   max-width: calc(100% - ($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3)));
   

because the contents of calc() are treated as an unquoted string in libsass, it outputs everything literally

in hmrc-frontend I think we must have something that's throwing an exception on this - possibly stylelint or something like this when we build - but node-sass won't through an error itself, it will just output it literally, so it's possible that 5.1.0 might break some people's usages of govuk-frontend unknowingly if they are using node-sass to compile your scss without any other checks that it generated valid css

Actual vs expected behaviour

libsass is deprecated but you could maintain compatibility with it by interpolating the sass variables like this:

   max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});
   max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});

the before and after output with dart-sass and libsass is:

   max-width: calc(100% - 74px);
   max-width: calc(100% - 74px);

(for an example see this branch in a fork)

Environment (where applicable)

we're using node-sass@7 (sorry) but I tried updating hmrc-frontend through all the newer major versions (8 and 9) and still got the issue with compilation.

• Operating system: N/A
• Browser: N/A
• Browser version: N/A
• GOV.UK Frontend Version: 5.1.0