Add custom asset handlers for app asset paths

jon-kirwan · jon-kirwan · commit be2a2eab0128 · 2023-10-10T15:39:17.000+01:00
Also, replace `image-url` helper instances with CSS url() function See rails/dartsass-rails#18
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/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 @import "govuk_publishing_components/components/search";
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
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
@@ -268,7 +268,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/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";

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ $search-icon-size: 40px;`
`12`	`12`	`width: $search-icon-size;`
`13`	`13`	`height: $search-icon-size;`
`14`	`14`	`height: govuk-px-to-rem($search-icon-size);`
`15`		`- background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;`
	`15`	`+ background: url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`// this overrides styles from static that break the look of the component`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "govuk_publishing_components/individual_component_support";`
	`2`	`+`
`1`	`3`	`@import "govuk_publishing_components/components/search";`
`2`	`4`	`@import "govuk_publishing_components/components/skip-link";`
`3`	`5`	`@import "govuk/components/header/header";`
Original file line number	Diff line number	Diff line change
`@@ -82,19 +82,19 @@`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`@mixin crest($crest) {`
`85`		`- background: image-url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;`
	`85`	`+ background: url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;`
`86`	`86`	`background-size: auto 20px;`
`87`	`87`
`88`	`88`	`@include govuk-device-pixel-ratio {`
`89`		`- background-image: image-url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");`
	`89`	`+ background-image: url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`@include govuk-media-query($from: tablet) {`
`93`		`- background: image-url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;`
	`93`	`+ background: url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;`
`94`	`94`	`background-size: auto 26px;`
`95`	`95`
`96`	`96`	`@include govuk-device-pixel-ratio {`
`97`		`- background-image: image-url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");`
	`97`	`+ background-image: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`	`}`