refactor: use SASS @use over @import

apps/website/src/routes/+layout.svelte

@@ -15,6 +15,7 @@
 </style>
 
 <script lang="ts">
+    import 'sanitize.css'
     import '../style/global.scss'
 
     import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
@@ -94,7 +95,7 @@
 <svelte:window bind:innerHeight />
 
 <svelte:head>
-    <link rel="canonical" href={$page.url.href} />
+    <link rel="canonical" href={$page.url.href.split('#')[0]} />
 
     {#each fonts as font}
         <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">

apps/website/src/style/animations.scss

@@ -1,3 +1,6 @@
+@use "imports" as *;
+
+
 /*
 ** Earth icon
 */

apps/website/src/style/atoms/photo.scss

@@ -1,3 +1,6 @@
+@use "../imports" as *;
+
+
 .photo {
     overflow: hidden;
     background: $color-primary-tertiary20;

apps/website/src/style/base.scss

@@ -1,3 +1,6 @@
+@use "imports" as *;
+
+
 html {
     font: #{$base-font-size}/1.2 $font-sans;
     font-weight: 400;

apps/website/src/style/effects.scss

@@ -1,3 +1,6 @@
+@use "imports" as *;
+
+
 /*
 ** Box shadows
 */

apps/website/src/style/fonts.scss

@@ -1,3 +1,5 @@
+@use "imports" as *;
+
 /* Fonts list
 ========================================================================== */
 @include font-face("Garnett", "G-Light", 200);
@@ -5,4 +7,4 @@
 @include font-face("Garnett", "G-Medium", 500);
 @include font-face("Garnett", "G-Semibold", 600);
 @include font-face("Jazmin", "J-Extralight", 200);
-@include font-face("Jazmin", "J-Light", 300);
+@include font-face("Jazmin", "J-Light", 300);

apps/website/src/style/global.scss

@@ -1,25 +1,22 @@
 @charset "UTF-8";
 
-// Dependencies
-@import "sanitize.css/sanitize";
-
 // Tools
-@import "tools/helpers";
+@forward "tools/helpers";
 
 // Base
-@import "variables-css";
-@import "base";
-@import "fonts";
-@import "typography";
-@import "effects";
+@forward "variables-css";
+@forward "base";
+@forward "fonts";
+@forward "typography";
 
 // Layout
-@import "layout/grid";
-@import "layout/modules";
+@forward "layout/grid";
+@forward "layout/modules";
 
 // Misc
-@import "animations";
+@forward "animations";
+@forward "effects";
 
 // Components (Atomic Design System)
 // Atoms
-@import "atoms/photo";
+@forward "atoms/photo";

apps/website/src/style/imports.scss

@@ -1,4 +1,3 @@
-// Tools
-@import "variables";
-@import "tools/mixins";
-@import "tools/functions";
+@forward "variables";
+@forward "tools/mixins";
+@forward "tools/functions";

apps/website/src/style/layout/grid.scss

@@ -1,3 +1,6 @@
+@use "../imports" as *;
+
+
 /*
 ** Grid
 */

apps/website/src/style/layout/modules.scss

@@ -1,3 +1,6 @@
+@use "../imports" as *;
+
+
 .grid-modules {
     padding-bottom: 40px;
 

apps/website/src/style/tools/functions.scss

@@ -1,4 +1,7 @@
 @use "sass:math";
+@use "sass:color";
+@use "../variables" as *;
+
 
 /* PX to REM
 ========================================================================== */
@@ -39,5 +42,5 @@
 /* HEX color to RGB
 ========================================================================== */
 @function hexToRGB($color) {
-    @return red($color), green($color), blue($color);
-}
+    @return color.channel($color, "red", $space: rgb), color.channel($color, "green", $space: rgb), color.channel($color, "blue", $space: rgb);
+}

apps/website/src/style/tools/helpers.scss

@@ -1,3 +1,6 @@
+@use "../imports" as *;
+
+
 /* Classes
 ========================================================================== */
 .clear {

apps/website/src/style/tools/mixins.scss

@@ -1,5 +1,7 @@
 @use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+
 
 // Hide text
 %hide-text {

apps/website/src/style/typography.scss

@@ -1,3 +1,6 @@
+@use "imports" as *;
+
+
 /* ==========================================================================
    TITLES
 ========================================================================== */

apps/website/src/style/variables-css.scss

@@ -1,3 +1,6 @@
+@use "imports" as *;
+
+
 :root {
     // Sizes
     --container-width: #{$container-width};