Update cache-busting gubbins in Sass stylesheets.

damiendart · Oct 29, 2024 · 34b84bf · 34b84bf
1 parent d4de13e
commit 34b84bf
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 11 deletions.
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -139,7 +139,7 @@ details {
       content: "";
       display: block;
       height: variables.$base-line-height;
-      mask: url("/assets/icon-chevron.00000000000000.svg") no-repeat center;
+      mask: functions.cache-bust-url("/assets/icon-chevron.svg") no-repeat center;
       mask-size: 40%;
       position: absolute;
       top: 0;

diff --git a/src/sass/_functions.scss b/src/sass/_functions.scss
@@ -3,6 +3,22 @@
 // please refer to the accompanying "LICENCE" file.
 
 @use "sass:math";
+@use "sass:string";
+
+@function cache-bust-url($url) {
+  @each $e in ".jpg", ".png", ".svg", ".webp", ".woff", ".woff2" {
+    $i: string.length($url) - string.length($e) + 1;
+
+    @if string.slice($url, $i) == $e {
+      // The bunch of zeros is replaced with the release timestamp in a
+      // later step in the asset build pipeline (see the "build:css"
+      // task in "Taskfile.yml" for more information).
+      @return url(string.insert($url, ".00000000000000", $i));
+    }
+  }
+
+  @error 'Unable to cache-bust "#{$url}"';
+}
 
 @function px-to-em($value, $base-font-size: 16px) {
   @return math.div($value, $base-font-size) * 1em;

diff --git a/src/sass/components/_button.scss b/src/sass/components/_button.scss
@@ -68,7 +68,7 @@
       display: block;
       height: variables.$base-line-height;
       margin-left: functions.px-to-rem(3px);
-      mask: url("/assets/itchio.00000000000000.svg") no-repeat center;
+      mask: functions.cache-bust-url("/assets/itchio.svg") no-repeat center;
       width: functions.px-to-rem(98.25px);
     }
   }

diff --git a/src/sass/components/_dialog.scss b/src/sass/components/_dialog.scss
@@ -63,7 +63,7 @@
       content: "";
       display: inline-block;
       height: 100%;
-      mask-image: url("icon-menu-close.00000000000000.svg");
+      mask-image: functions.cache-bust-url("icon-menu-close.svg");
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: 100%;

diff --git a/src/sass/components/_robot.scss b/src/sass/components/_robot.scss
@@ -3,6 +3,7 @@
 // please refer to the accompanying "LICENCE" file.
 
 @use "sass:math";
+@use "../functions";
 
 .robot {
   line-height: 1;
@@ -13,7 +14,7 @@
     position: relative;
 
     &::before {
-      background: url("/assets/homepage-robot-outline.00000000000000.webp");
+      background: functions.cache-bust-url("/assets/homepage-robot-outline.webp");
       background-size: cover;
       content: "";
       display: block;
@@ -29,7 +30,7 @@
       @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
         only screen and (min-resolution: 120dpi)
       {
-        background-image: url("/assets/homepage-robot-outline@2x.00000000000000.webp");
+        background-image: functions.cache-bust-url("/assets/[email protected]");
       }
     }
 

diff --git a/src/sass/components/_site-preferences-dialog.scss b/src/sass/components/_site-preferences-dialog.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../functions";
 @use "../variables";
 
 site-preferences-dialog {
@@ -32,7 +33,7 @@ site-preferences-dialog {
       display: inline-block;
       height: variables.$base-line-height * 0.65;
       margin: auto;
-      mask: url("icon-settings.00000000000000.svg");
+      mask: functions.cache-bust-url("icon-settings.svg");
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: 100%;

diff --git a/src/sass/components/_social-share-list.scss b/src/sass/components/_social-share-list.scss
@@ -3,6 +3,7 @@
 // please refer to the accompanying "LICENCE" file
 
 @use "sass:math";
+@use "../functions";
 @use "../variables";
 
 .social-share-list {
@@ -31,7 +32,7 @@
           display: inline-block;
           height: variables.$base-line-height * 1.5;
           left: 0;
-          mask: url("icon-check.00000000000000.svg") no-repeat center;
+          mask: functions.cache-bust-url("icon-check.svg") no-repeat center;
           mask-size: variables.$base-line-height * 1.25;
           opacity: 0;
           position: absolute;
@@ -41,7 +42,7 @@
         }
 
         &::before {
-          mask: url("icon-copy.00000000000000.svg");
+          mask: functions.cache-bust-url("icon-copy.svg");
         }
 
         &.clipboard-success {
@@ -59,15 +60,15 @@
     &--facebook {
       a {
         &::before {
-          mask: url("icon-facebook.svg");
+          mask: functions.cache-bust-url("icon-facebook.svg");
         }
       }
     }
 
     &--twitter {
       a {
         &::before {
-          mask: url("icon-twitter.00000000000000.svg");
+          mask: functions.cache-bust-url("icon-twitter.svg");
         }
       }
     }
@@ -88,7 +89,7 @@
         transition: background-size 0.125s ease, mask-size 0.125s ease, opacity 0.125s ease;
         width: variables.$base-line-height * 1.5;
 
-        @supports (mask: url("icon-check.00000000000000.svg")) {
+        @supports (mask: functions.cache-bust-url("icon-check.svg")) {
           background: var(--base-link);
         }
       }