feat: expose assets for consumers of sass package

IATI · Dec 10, 2024 · cd247bf · cd247bf
1 parent 40ddfe1
commit cd247bf
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)),
+    },
+  },
 });