From 7a3fa4c893fd06d40c41bbae935fcfe479c7b466 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 16 Jan 2023 08:24:41 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Fix=20Sass=20deprecation=20=E2=80=9CPassing?= =?UTF-8?q?=20a=20number=20without=20unit=20%=20is=20deprecated=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/govuk/components/tag/_index.scss | 36 ++++++++++++++-------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/govuk/components/tag/_index.scss b/src/govuk/components/tag/_index.scss index 9387537d06..1d657a1613 100644 --- a/src/govuk/components/tag/_index.scss +++ b/src/govuk/components/tag/_index.scss @@ -35,47 +35,47 @@ } .govuk-tag--grey { - color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30); - background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90); + color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30%); + background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90%); } .govuk-tag--purple { - color: govuk-shade(govuk-colour("purple"), 20); - background: govuk-tint(govuk-colour("purple"), 80); + color: govuk-shade(govuk-colour("purple"), 20%); + background: govuk-tint(govuk-colour("purple"), 80%); } .govuk-tag--turquoise { - color: govuk-shade(govuk-colour("turquoise"), 60); - background: govuk-tint(govuk-colour("turquoise"), 70); + color: govuk-shade(govuk-colour("turquoise"), 60%); + background: govuk-tint(govuk-colour("turquoise"), 70%); } .govuk-tag--blue { - color: govuk-shade(govuk-colour("blue"), 30); - background: govuk-tint(govuk-colour("blue"), 80); + color: govuk-shade(govuk-colour("blue"), 30%); + background: govuk-tint(govuk-colour("blue"), 80%); } .govuk-tag--yellow { - color: govuk-shade(govuk-colour("yellow"), 65); - background: govuk-tint(govuk-colour("yellow"), 75); + color: govuk-shade(govuk-colour("yellow"), 65%); + background: govuk-tint(govuk-colour("yellow"), 75%); } .govuk-tag--orange { - color: govuk-shade(govuk-colour("orange"), 55); - background: govuk-tint(govuk-colour("orange"), 70); + color: govuk-shade(govuk-colour("orange"), 55%); + background: govuk-tint(govuk-colour("orange"), 70%); } .govuk-tag--red { - color: govuk-shade(govuk-colour("red"), 30); - background: govuk-tint(govuk-colour("red"), 80); + color: govuk-shade(govuk-colour("red"), 30%); + background: govuk-tint(govuk-colour("red"), 80%); } .govuk-tag--pink { - color: govuk-shade(govuk-colour("pink"), 40); - background: govuk-tint(govuk-colour("pink"), 80); + color: govuk-shade(govuk-colour("pink"), 40%); + background: govuk-tint(govuk-colour("pink"), 80%); } .govuk-tag--green { - color: govuk-shade(govuk-colour("green"), 20); - background: govuk-tint(govuk-colour("green"), 80); + color: govuk-shade(govuk-colour("green"), 20%); + background: govuk-tint(govuk-colour("green"), 80%); } } From 2e50d83641a9ed9e45d8a7f2db99d54f0e438178 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 16 Jan 2023 10:23:04 +0000 Subject: [PATCH 2/3] Fix Sass breaking `$string: red is not a string` error MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dart Sass will throw when trying to `quote()` colour identifiers as it no longer treats them as unquoted strings See “Heads up!” box on Strings (Unquoted) docs: https://sass-lang.com/documentation/values/strings#unquoted --- src/govuk/helpers/_colour.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/govuk/helpers/_colour.scss b/src/govuk/helpers/_colour.scss index 6d529442fc..80f26b21cd 100644 --- a/src/govuk/helpers/_colour.scss +++ b/src/govuk/helpers/_colour.scss @@ -8,7 +8,7 @@ /// Get colour /// -/// @param {String} $colour - Name of colour from the colour palette +/// @param {String | Colour} $colour - Name of colour from the colour palette /// (`$govuk-colours`) /// @param {String} $legacy - Either the name of colour from the legacy palette /// or a colour literal, to return instead when in 'legacy mode' - matching @@ -36,7 +36,10 @@ $colour: $legacy; } - $colour: quote($colour); + @if type-of($colour) == "color" { + // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside + $colour: quote("#{$colour}"); + } @if not map-has-key($govuk-colours, $colour) { @error "Unknown colour `#{$colour}`"; From 3098ccab1ed417176160aea80c2427b7360fa52b Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 23 Jan 2023 21:10:09 +0000 Subject: [PATCH 3/3] Silence Sass warnings from dependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For example we can’t fix “Using / for division outside of calc() is deprecated” in: ``` govuk_frontend_toolkit govuk-elements-sass ``` See https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass --- tasks/compile-stylesheets.mjs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tasks/compile-stylesheets.mjs b/tasks/compile-stylesheets.mjs index 5ff33f5e57..fa9a0b5742 100644 --- a/tasks/compile-stylesheets.mjs +++ b/tasks/compile-stylesheets.mjs @@ -66,6 +66,9 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath }]) { file: moduleSrcPath, outFile: moduleDestPath, + // Turn off dependency warnings + quietDeps: true, + // Enable source maps sourceMap: true, sourceMapContents: true,