Fix LibSass calc() compatibility in Radios and Checkboxes

.github/workflows/sass.yaml

@@ -36,7 +36,14 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
+        run: |
+          mkdir -p .tmp
+          time sass packages/govuk-frontend/src/govuk/all.scss > .tmp/all.css
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css
 
   dart-sass-latest:
     name: Dart Sass v1 (latest)
@@ -64,7 +71,14 @@ jobs:
         # Run the command through a shell to ensure `time` measures the time
         # taken by the entire pipeline, as we are now piping input into `sass`.
       - name: Run command
-        run: time sh -c 'echo "@import "\""govuk/all"\"";" | sass --stdin --quiet-deps --load-path=packages/govuk-frontend/src > /dev/null'
+        run: |
+          mkdir -p .tmp
+          time sh -c 'echo "@import "\""govuk/all"\"";" | sass --stdin --quiet-deps --load-path=packages/govuk-frontend/src > .tmp/all.css'
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css
 
   # Node Sass v3.4.0 = LibSass v3.3.0
   lib-sass:
@@ -87,7 +101,14 @@ jobs:
           node-sass --version
 
       - name: Run command
-        run: time node-sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
+        run: |
+          mkdir -p .tmp
+          time node-sass packages/govuk-frontend/src/govuk/all.scss > .tmp/all.css
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css
 
   # Node Sass v8.x = LibSass v3 latest
   lib-sass-latest:
@@ -110,7 +131,14 @@ jobs:
           node-sass --version
 
       - name: Run command
-        run: time node-sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
+        run: |
+          mkdir -p .tmp
+          time node-sass packages/govuk-frontend/src/govuk/all.scss > .tmp/all.css
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css
 
   ruby-sass:
     name: Ruby Sass v3.4.0 (deprecated)
@@ -131,7 +159,14 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
+        run: |
+          mkdir -p .tmp
+          time sass packages/govuk-frontend/src/govuk/all.scss > .tmp/all.css
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css
 
   ruby-sass-latest:
     name: Ruby Sass v3 (latest, deprecated)
@@ -152,4 +187,11 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
+        run: |
+          mkdir -p .tmp
+          time sass packages/govuk-frontend/src/govuk/all.scss > .tmp/all.css
+
+      # Check output for uncompiled Sass
+      - name: Check output
+        run: |
+          ! grep "\$govuk-" .tmp/all.css

CHANGELOG.md

@@ -62,7 +62,8 @@ The `useTudorCrown` parameter, along with any other adjustments made to display
 
 We've made fixes to GOV.UK Frontend in the following pull requests:
 
-- [#4768 : Fix z-index of inputs in Radios and Checkboxes component](https://github.com/alphagov/govuk-frontend/pull/4768)
+- [#4768: Fix z-index of inputs in Radios and Checkboxes component](https://github.com/alphagov/govuk-frontend/pull/4768)
+- [#4784: Fix LibSass `calc()` compatibility in Radios and Checkboxes](https://github.com/alphagov/govuk-frontend/pull/4784)
 
 ## 5.1.0 (Feature release)
 

packages/govuk-frontend/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;

packages/govuk-frontend/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;

packages/govuk-frontend/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. */'