chore: use scss @use instead of @import

Author: OliverDudgeon

next.config.mjs

@@ -37,10 +37,7 @@ let nextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || undefined,
   transpilePackages: MONOREPO_MODE ? ["@squonk/mui-theme", "@squonk/sdf-parser"] : [],
   sassOptions: {
-    prependData: `$assetsURL: '${
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      process.env.ASSET_URL || "https://squonk.informaticsmatters.org"
-    }';`,
+    prependData: `$assetsURL: '${process.env.ASSET_URL}';`,
   },
   images: {
     domains: ["squonk.informaticsmatters.org"],

src/styles/fonts/open-sans.scss

@@ -1,6 +1,34 @@
-// Should use @use instead but need these sheets to access $assetUrl in the global scope
-@import "fonts/open-sans";
-@import "fonts/raleway";
+@use "mixins/font-face-template" with ($base_url: $assetsURL);
+
+@include font-face-template.font-face-template("Open Sans", "OpenSans-Light", normal, 300);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-LightItalic", italic, 300);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-Regular", normal, 400);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-Italic", italic, 400);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-SemiBold", normal, 600);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-SemiBoldItalic", italic, 600);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-Bold", normal, 700);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-BoldItalic", italic, 700);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-ExtraBold", normal, 800);
+@include font-face-template.font-face-template("Open Sans", "OpenSans-ExtraBoldItalic", italic, 800);
+
+@include font-face-template.font-face-template("Raleway", "Raleway-Thin", normal, 100);
+@include font-face-template.font-face-template("Raleway", "Raleway-ThinItalic", italic, 100);
+@include font-face-template.font-face-template("Raleway", "Raleway-ExtraLight", normal, 200);
+@include font-face-template.font-face-template("Raleway", "Raleway-ExtraLightItalic", italic, 200);
+@include font-face-template.font-face-template("Raleway", "Raleway-Light", normal, 300);
+@include font-face-template.font-face-template("Raleway", "Raleway-LightItalic", italic, 300);
+@include font-face-template.font-face-template("Raleway", "Raleway-Regular", normal, normal);
+@include font-face-template.font-face-template("Raleway", "Raleway-Italic", italic, normal);
+@include font-face-template.font-face-template("Raleway", "Raleway-Medium", normal, 500);
+@include font-face-template.font-face-template("Raleway", "Raleway-MediumItalic", italic, 500);
+@include font-face-template.font-face-template("Raleway", "Raleway-SemiBold", normal, 600);
+@include font-face-template.font-face-template("Raleway", "Raleway-SemiBoldItalic", italic, 600);
+@include font-face-template.font-face-template("Raleway", "Raleway-BoldItalic", italic, bold);
+@include font-face-template.font-face-template("Raleway", "Raleway-Bold", normal, bold);
+@include font-face-template.font-face-template("Raleway", "Raleway-ExtraBold", normal, 800);
+@include font-face-template.font-face-template("Raleway", "Raleway-ExtraBoldItalic", italic, 800);
+@include font-face-template.font-face-template("Raleway", "Raleway-Black", normal, 900);
+@include font-face-template.font-face-template("Raleway", "Raleway-BlackItalic", italic, 900);
 
 @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
 

src/styles/fonts/raleway.scss

@@ -1,3 +1,5 @@
+$base_url: "https://squonk.informaticsmatters.org" !default;
+
 @mixin font-face-template($font-family, $file-name, $style, $weight) {
   @font-face {
     font-family: $font-family;
@@ -6,8 +8,8 @@
     font-display: swap;
     src:
       local($font-family),
-      url($assetsURL + "/assets/fonts/#{$file-name}.woff2") format("woff2"),
-      /* Chrome 26+, Opera 23+, Firefox 39+ */ url($assetsURL + "/assets/fonts/#{$file-name}.woff")
+      url($base_url + "/assets/fonts/#{$file-name}.woff2") format("woff2"),
+      /* Chrome 26+, Opera 23+, Firefox 39+ */ url($base_url + "/assets/fonts/#{$file-name}.woff")
         format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
 }