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]>

Author: jon-kirwan

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;
@@ -98,8 +98,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;
@@ -110,8 +110,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;
@@ -120,8 +120,8 @@
 
 .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;
@@ -138,8 +138,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;
@@ -162,8 +162,8 @@
   &::before {
     height: 30px;
     width: 35px;
-    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);
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

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

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);

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");
     }
   }
 }

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 {

app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -95,7 +95,7 @@ $large-input-size: 50px;
   // Note: this is a non-standard CSS feature and will not do anything in Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1417753
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
-    background-image: image-url("govuk_publishing_components/icon-close.svg");
+    background-image: url("govuk_publishing_components/icon-close.svg");
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -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;

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;

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;

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;

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";