Replace image-url asset helper instances

Replace instances with CSS url() function. See rails/dartsass-rails#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 <[email protected]>
alphagov · Nov 22, 2023 · 0d59540 · 0d59540
1 parent 0154f14
commit 0d59540
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 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
@@ -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,17 +96,17 @@
 
 .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);
   }
 }
 
 .gem-c-action-link--blue-arrow {
   &::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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/.../stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss b/.../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";