From 04d15a043d7e543f046edbf7fe432b239af34dec Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 20 Feb 2024 16:15:13 +0000 Subject: [PATCH 1/4] Interpolate contents of `calc()` for LibSass See GitHub issue: https://github.com/alphagov/govuk-frontend/issues/4782 Co-authored-by: Oscar Duignan <100650+oscarduignan@users.noreply.github.com> --- .../govuk-frontend/src/govuk/components/checkboxes/_index.scss | 2 +- packages/govuk-frontend/src/govuk/components/radios/_index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss index 87ee48fb6a..700ccb03f5 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss +++ b/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; diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss index df91759b0b..a13fced374 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/_index.scss +++ b/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; From da851878d6a196b4d820777c27ccccd0b59b5336 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 20 Feb 2024 16:16:00 +0000 Subject: [PATCH 2/4] Update release tests to check for `$govuk-*` Sass variables --- packages/govuk-frontend/tasks/build/release.unit.test.mjs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/govuk-frontend/tasks/build/release.unit.test.mjs b/packages/govuk-frontend/tasks/build/release.unit.test.mjs index dcc306660d..2bc64e3048 100644 --- a/packages/govuk-frontend/tasks/build/release.unit.test.mjs +++ b/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. */' From 139cbe3e1d546905daf6fe4b4795007c5ca69c4f Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 20 Feb 2024 17:33:28 +0000 Subject: [PATCH 3/4] Update Sass CLI tests to check for `$govuk-*` Sass variables --- .github/workflows/sass.yaml | 54 ++++++++++++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/.github/workflows/sass.yaml b/.github/workflows/sass.yaml index 5151e5ba93..81f107fb16 100644 --- a/.github/workflows/sass.yaml +++ b/.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 From 8715b9a0d89bcf8cadd8783a0cf841b6c537612f Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 20 Feb 2024 16:45:07 +0000 Subject: [PATCH 4/4] Add CHANGELOG entry --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1709f91155..2cd27b9b35 100644 --- a/CHANGELOG.md +++ b/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)