refactor: use SASS @use over @import

apps/website/package.json

@@ -20,7 +20,7 @@
     "embla-carousel": "^8.3.1",
     "focus-visible": "^5.2.1",
     "lenis": "^1.1.16",
-    "motion": "^10.18.0",
+    "motion": "^10",
     "ogl": "^1.0.9",
     "sanitize.css": "^13.0.0",
     "swell-js": "^4.2.4",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/adapter-cloudflare": "^4.7.4",
-    "@sveltejs/kit": "^2.8.0",
+    "@sveltejs/kit": "^2.8.1",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "base-64": "^1.0.0",
@@ -44,8 +44,8 @@
     "postcss-normalize": "^13.0.1",
     "postcss-preset-env": "^10.1.0",
     "postcss-sort-media-queries": "^5.2.0",
-    "sass": "^1.80.6",
-    "svelte": "^5.1.15",
+    "sass": "^1.80.7",
+    "svelte": "^5.1.16",
     "svelte-check": "^4.0.7",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",

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};

apps/website/svelte.config.js

@@ -1,18 +1,16 @@
-import { sveltePreprocess } from 'svelte-preprocess'
-import adapter from '@sveltejs/adapter-cloudflare'
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
+import { sveltePreprocess } from 'svelte-preprocess'
+import adapter from '@sveltejs/adapter-cloudflare'
 
-const stylePath = `${dirname(fileURLToPath(import.meta.url))}/src/style`
-export const scssImports = `@use "${stylePath}/imports.scss" as *;`
+export const globalStyles = `@use "${dirname(fileURLToPath(import.meta.url))}/src/style/imports" as *;`
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Preprocessors docs: https://github.com/sveltejs/svelte-preprocess
     preprocess: sveltePreprocess({
         scss: {
-            prependData: scssImports,
-            renderSync: true,
+            prependData: globalStyles,
         }
     }),
 

apps/website/vite.config.ts

@@ -1,15 +1,16 @@
-import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite'
-import { scssImports } from './svelte.config'
+import { globalStyles } from './svelte.config'
 
-const config: UserConfig = {
+export default defineConfig({
     plugins: [
         sveltekit()
     ],
     css: {
         preprocessorOptions: {
             scss: {
-                additionalData: scssImports,
+                additionalData: globalStyles,
+                api: 'modern',
             }
         }
     },
@@ -18,6 +19,4 @@ const config: UserConfig = {
             transformMixedEsModules: true,
         }
     },
-}
-
-export default config
+})