From 0d59540f7cf5fe5425c339e679559afd03b776c4 Mon Sep 17 00:00:00 2001 From: Jon Kirwan <87758239+jon-kirwan@users.noreply.github.com> Date: Mon, 6 Nov 2023 14:15:28 +0000 Subject: [PATCH] Replace `image-url` asset helper instances Replace instances with CSS url() function. See https://github.com/rails/dartsass-rails/issues/18. Also, add asset handlers to ensure fonts and images are correctly referenced. See https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#copy-the-font-and-image-files-into-your-application. Co-Authored-By: Martin Jones <28779939+MartinJJones@users.noreply.github.com> --- .../components/_action-link.scss | 40 +++++++++---------- .../components/_input.scss | 2 +- .../components/_option-select.scss | 2 +- .../components/_organisation-logo.scss | 8 ++-- .../components/_print-link.scss | 4 +- .../components/_search.scss | 2 +- .../components/govspeak/_advisory.scss | 2 +- .../components/govspeak/_form-download.scss | 2 +- .../components/govspeak/_warning-callout.scss | 2 +- .../helpers/_govuk-frontend-settings.scss | 17 +++++++- 10 files changed, 47 insertions(+), 34 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss index 139f393c6d..07e12396f0 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss @@ -8,8 +8,8 @@ display: table-cell; width: 60px; height: 45px; - background: image-url("govuk_publishing_components/action-link-arrow.png"); - background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow.png"); + background: url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: 0 50%; background-size: 45px auto; @@ -96,8 +96,8 @@ .gem-c-action-link--white-arrow { &::before { - background-image: image-url("govuk_publishing_components/action-link-arrow--white.png"); - background-image: image-url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent); + background-image: url("govuk_publishing_components/action-link-arrow--white.png"); + background-image: url("govuk_publishing_components/action-link-arrow--white.svg"), linear-gradient(transparent, transparent); } } @@ -105,8 +105,8 @@ &::before { width: 36px; height: 28px; - background: image-url("govuk_publishing_components/action-link-arrow--blue.png"); - background: image-url("govuk_publishing_components/action-link-arrow--blue.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--blue.png"); + background: url("govuk_publishing_components/action-link-arrow--blue.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: 28px auto; background-position: 0 0; @@ -123,8 +123,8 @@ &::before { width: 30px; height: 30px; - background: image-url("govuk_publishing_components/action-link-arrow--simple.png"); - background: image-url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--simple.png"); + background: url("govuk_publishing_components/action-link-arrow--simple.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: 25px auto; background-position: 0 2px; @@ -135,8 +135,8 @@ &::before { width: 30px; height: 30px; - background: image-url("govuk_publishing_components/action-link-arrow--simple-light.png"); - background: image-url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--simple-light.png"); + background: url("govuk_publishing_components/action-link-arrow--simple-light.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: 25px auto; background-position: 0 2px; @@ -145,15 +145,15 @@ .gem-c-action-link--dark-icon { &::before { - background: image-url("govuk_publishing_components/action-link-arrow--dark.png"); - background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--dark.png"); + background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent); } } .gem-c-action-link--dark-large-icon { &::before { - background: image-url("govuk_publishing_components/action-link-arrow--dark.png"); - background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--dark.png"); + background: url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent); height: 34px; width: 40px; background-repeat: no-repeat; @@ -170,8 +170,8 @@ &::before { width: 36px; height: 28px; - background: image-url("govuk_publishing_components/action-link-arrow--light.png"); - background: image-url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link-arrow--light.png"); + background: url("govuk_publishing_components/action-link-arrow--light.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: 28px auto; background-position: 0 0; @@ -203,7 +203,7 @@ .gem-c-action-link--transparent-icon { &::before { - background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg"); + background-image: url("govuk_publishing_components/action-link-arrow--transparent.svg"); } } @@ -213,7 +213,7 @@ &::before { height: 30px; width: 30px; - background-image: image-url("govuk_publishing_components/action-link-arrow--brexit.svg"); + background-image: url("govuk_publishing_components/action-link-arrow--brexit.svg"); background-repeat: no-repeat; background-size: 18px auto; background-position: 0 2px; @@ -238,8 +238,8 @@ &::before { width: 80px; height: 70px; - background: image-url("govuk_publishing_components/action-link--nhs.png"); - background: image-url("govuk_publishing_components/action-link--nhs.svg"), linear-gradient(transparent, transparent); + background: url("govuk_publishing_components/action-link--nhs.png"); + background: url("govuk_publishing_components/action-link--nhs.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: 85% auto; background-position: 0 50%; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss index d9a7268541..51b5292892 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss @@ -12,7 +12,7 @@ $search-icon-size: 40px; width: $search-icon-size; height: $search-icon-size; height: govuk-px-to-rem($search-icon-size); - background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center; + background: url("govuk_publishing_components/icon-search.svg") no-repeat -3px center; } // this overrides styles from static that break the look of the component diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss b/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss index 9fab472592..ccf473c433 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss @@ -112,7 +112,7 @@ .gem-c-option-select__filter-input { @include govuk-font(19); - background: image-url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px; + background: url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px; @include govuk-media-query($from: tablet) { @include govuk-font(16); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss index 341df86f7f..893c57ee3a 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss @@ -82,19 +82,19 @@ } @mixin crest($crest) { - background: image-url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0; + background: url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0; background-size: auto 20px; @include govuk-device-pixel-ratio { - background-image: image-url("govuk_publishing_components/crests/#{$crest}_13px_x2.png"); + background-image: url("govuk_publishing_components/crests/#{$crest}_13px_x2.png"); } @include govuk-media-query($from: tablet) { - background: image-url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0; + background: url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0; background-size: auto 26px; @include govuk-device-pixel-ratio { - background-image: image-url("govuk_publishing_components/crests/#{$crest}_18px_x2.png"); + background-image: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png"); } } } diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss index 60538ba073..dc1d7a0372 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss @@ -19,13 +19,13 @@ $gem-c-print-link-background-height: 18px; .gem-c-print-link__link, .gem-c-print-link__button { - background: image-url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%; + background: url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%; background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height; padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width); text-decoration: none; @include govuk-device-pixel-ratio($ratio: 2) { - background-image: image-url("govuk_publishing_components/icon-print-2x.png"); + background-image: url("govuk_publishing_components/icon-print-2x.png"); } &:hover { diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss index 1809bdb717..d159e0fc93 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss @@ -281,7 +281,7 @@ $large-input-size: 50px; .search-toggle { display: none; background-color: govuk-colour("blue"); - background-image: image-url("govuk_publishing_components/search-button.png"); + background-image: url("govuk_publishing_components/search-button.png"); background-position: 0 50%; background-repeat: no-repeat; float: right; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss index e5121bbec6..4abb817bc7 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss @@ -4,7 +4,7 @@ $high-alert-border: #cc0000; .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items. .gem-c-govspeak { .advisory { - background-image: image-url("govuk_publishing_components/icon-important.svg"); + background-image: url("govuk_publishing_components/icon-important.svg"); background-repeat: no-repeat; background-size: 30px 30px; background-position: 98% center; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss index 6e58216210..654d0b387c 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss @@ -14,7 +14,7 @@ a { display: block; font-weight: 600; - background-image: image-url("govuk_publishing_components/icon-file-download.svg"); + background-image: url("govuk_publishing_components/icon-file-download.svg"); background-repeat: no-repeat; background-size: 40px 40px; min-height: 2.5em; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss index 596d398beb..22adf81d0e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss @@ -16,7 +16,7 @@ margin: 2em 0; // Add '!' icon - background-image: image-url("govuk_publishing_components/icon-important.svg"); + background-image: url("govuk_publishing_components/icon-important.svg"); background-size: $icon-size $icon-size; background-repeat: no-repeat; min-height: $icon-size; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss index 99fee637f9..79d5c7a7e2 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss @@ -1,2 +1,15 @@ -$govuk-image-url-function: "image-url"; -$govuk-font-url-function: "font-url"; +// Custom image URL function +// https://github.com/alphagov/govuk-frontend/blob/9f05cea739d14d4cbf18e79b17228045ca84b3ba/packages/govuk-frontend/src/govuk/settings/_assets.scss#L30-L55 + +@function app-image-url($filename) { + @return url("#{$filename}"); +} +// Custom font URL function +// https://github.com/alphagov/govuk-frontend/blob/9f05cea739d14d4cbf18e79b17228045ca84b3ba/packages/govuk-frontend/src/govuk/settings/_assets.scss#L57-L82 + +@function app-font-url($filename) { + @return url("#{$filename}"); +} + +$govuk-image-url-function: "app-image-url"; +$govuk-font-url-function: "app-font-url";