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 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) 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; 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. */'