From dd8c4049e11e427d2dc2a79e553c7e66f635abaa Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:34:58 +0200
Subject: [PATCH] feat: expose assets for consumers of sass package

---
 package.json                                       |  1 +
 .../brand-background/_brand-background.scss        |  5 +----
 .../country-switcher/_country-switcher.scss        |  2 +-
 src/scss/components/icon/_icon.scss                | 14 +++++++-------
 vite.config.js                                     |  6 ++++++
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f1f58b1..348ad59 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "files": [
     "src/scss/**/*.scss",
+    "src/assets/**/*",
     "dist/css/**/*.css",
     "dist/js/**/*.js"
   ],
diff --git a/src/scss/components/brand-background/_brand-background.scss b/src/scss/components/brand-background/_brand-background.scss
index 21feea4..2755f26 100644
--- a/src/scss/components/brand-background/_brand-background.scss
+++ b/src/scss/components/brand-background/_brand-background.scss
@@ -2,16 +2,13 @@
 @use "../../tokens/screens" as *;
 
 .iati-brand-background {
-  $var-background-image: --background-image;
-  #{$var-background-image}: url("/src/assets/svg/marque-white.svg");
-
   background-color: $color-teal-90;
   display: grid;
   @media (min-width: $screen-md) {
     &:after {
       content: "";
       grid-area: 1/-1;
-      background-image: var($var-background-image);
+      background-image: url("@assets/svg/marque-white.svg");
       background-repeat: no-repeat;
       background-position: right 2rem top;
       background-size: 32.3rem auto;
diff --git a/src/scss/components/country-switcher/_country-switcher.scss b/src/scss/components/country-switcher/_country-switcher.scss
index 34dbb73..b124f80 100644
--- a/src/scss/components/country-switcher/_country-switcher.scss
+++ b/src/scss/components/country-switcher/_country-switcher.scss
@@ -23,7 +23,7 @@
     font-family: $font-stack-heading;
     color: $color-grey-90;
     font-weight: 600;
-    background-image: url("/src/assets/svg/icon-globe.svg");
+    background-image: url("@assets/svg/icon-globe.svg");
     background-repeat: no-repeat;
     background-position: 0.5em center;
   }
diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss
index 1299997..d600161 100644
--- a/src/scss/components/icon/_icon.scss
+++ b/src/scss/components/icon/_icon.scss
@@ -7,31 +7,31 @@
   background-size: 100%;
 
   &--info {
-    background-image: url("/src/assets/svg/icon-info.svg");
+    background-image: url("@assets/svg/icon-info.svg");
   }
 
   &--search {
-    background-image: url("/src/assets/svg/icon-search.svg");
+    background-image: url("@assets/svg/icon-search.svg");
   }
 
   &--globe {
-    background-image: url("/src/assets/svg/icon-globe.svg");
+    background-image: url("@assets/svg/icon-globe.svg");
   }
 
   &--youtube {
-    background-image: url("/src/assets/svg/youtube-logo.svg");
+    background-image: url("@assets/svg/youtube-logo.svg");
     aspect-ratio: 1.2 / 1;
   }
 
   &--x {
-    background-image: url("/src/assets/svg/x-logo.svg");
+    background-image: url("@assets/svg/x-logo.svg");
   }
 
   &--linkedin {
-    background-image: url("/src/assets/svg/linkedin-logo.svg");
+    background-image: url("@assets/svg/linkedin-logo.svg");
   }
 
   &--facebook {
-    background-image: url("/src/assets/svg/facebook-logo.svg");
+    background-image: url("@assets/svg/facebook-logo.svg");
   }
 }
diff --git a/vite.config.js b/vite.config.js
index 0314e59..a5fef16 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,6 @@
 import path from "path";
 import { NodePackageImporter } from "sass";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -32,4 +33,9 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: {
+      "@assets": fileURLToPath(new URL("./src/assets", import.meta.url)),
+    },
+  },
 });