Merge pull request #4784 from alphagov/libsass-calc

Fix LibSass `calc()` compatibility in Radios and Checkboxes
alphagov · Feb 20, 2024 · 91816c5 · 91816c5
2 parents 448b449 + 20b1555
commit 91816c5
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss
@@ -41,7 +41,7 @@
     // container minus the input width minus the padding on either side of
     // the label. This prevents the label from going onto the next line due to
     // __item using flex-wrap because we want hints on a separate line.
-    max-width: calc(100% - (($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size));
+    max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});
     margin-bottom: 0;
     padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
     cursor: pointer;

diff --git a/src/govuk/components/radios/_index.scss b/src/govuk/components/radios/_index.scss
@@ -43,7 +43,7 @@
     // container minus the input width minus the padding on either side of
     // the label. This prevents the label from going onto the next line due to
     // __item using flex-wrap because we want hints on a separate line
-    max-width: calc(100% - ($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3)));
+    max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});
     margin-bottom: 0;
     padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
     cursor: pointer;

diff --git a/tasks/build/release.unit.test.mjs b/tasks/build/release.unit.test.mjs
@@ -37,6 +37,10 @@ describe('dist/', () => {
       expect(stylesheet).not.toMatch(/body:before{content:/)
     })
 
+    it('should not contain Sass variables', () => {
+      expect(stylesheet).not.toContain('$govuk-')
+    })
+
     it('should contain the copyright notice', () => {
       expect(stylesheet).toContain(
         '/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */'