🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

svelte.config.js

@@ -1,10 +1,20 @@
 import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-auto'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const stylePath = `${dirname(fileURLToPath(import.meta.url))}/src/style`
+const scssImports = `@use "${stylePath}/imports.scss" as *;`
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Preprocessors docs: https://github.com/sveltejs/svelte-preprocess
-    preprocess: preprocess(),
+    preprocess: preprocess({
+        scss: {
+            prependData: scssImports,
+            renderSync: true,
+		}
+    }),
 
     kit: {
         adapter: adapter(),
@@ -13,6 +23,16 @@ const config = {
             $animations: 'src/animations',
             $modules: 'src/modules',
             $utils: 'src/utils',
+            $style: 'src/style',
+        },
+        vite: {
+            css: {
+                preprocessorOptions: {
+                    scss: {
+                        additionalData: scssImports,
+                    }
+                }
+            }
         }
     }
 }