🔥 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

src/components/molecules/CartItem.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/cart-item";
+</style>
+
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
     // Components

src/components/molecules/EmailForm.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/newsletter-form";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components

src/components/molecules/Heading.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/heading";
+</style>
+
 <script lang="ts">
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
 

src/components/molecules/House.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/house";
+</style>
+
 <script lang="ts">
     import dayjs from 'dayjs'
     // Components

src/components/molecules/Location.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/location";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
@@ -66,7 +70,7 @@
         tabindex="0"
     >
         <Image
-            class="location__flag"
+            class="flag"
             id={location.country.flag.id}
             sizeKey="square-small"
             width={32} height={32}
@@ -92,7 +96,7 @@
             {#each location.photos as { image }, index}
                 {#if image}
                     <Image
-                        class={index === photoIndex ? 'is-visible' : null}
+                        class={`location__photo ${index === photoIndex ? 'is-visible' : ''}`}
                         id={image.id}
                         sizeKey="photo-thumbnail"
                         width={340} height={226}

src/components/molecules/NotificationCart.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/notification-cart";
+</style>
+
 <script lang="ts">
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'

src/components/molecules/Pagination.svelte

@@ -0,0 +1,23 @@
+<style lang="scss">
+    @import "../../style/molecules/pagination";
+</style>
+
+<script lang="ts">
+    export let ended: boolean = false
+    export let current: number
+    export let total: number
+</script>
+
+<div class="pagination" role="button" tabindex="0"
+    disabled={ended ? ended : undefined}
+    on:click
+    on:keydown
+>
+    <div class="pagination__progress">
+        <span class="current">{current}</span>
+        <span>/</span>
+        <span class="total">{total}</span>
+
+        <slot />
+    </div>
+</div>

src/components/molecules/PhotoCard.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/photo-card";
+</style>
+
 <script lang="ts">
     import { createEventDispatcher } from 'svelte'
     import Image from '$components/atoms/Image.svelte'

src/components/molecules/PostCard.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/postcard";
+</style>
+
 <script lang="ts">
     import Image from '$components/atoms/Image.svelte'
 

src/components/molecules/Poster.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/poster";
+</style>
+
 <script lang="ts">
     import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'

src/components/molecules/ShopLocationSwitcher.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/shop-locationswitcher";
+</style>
+
 <script lang="ts">
     import { goto } from '$app/navigation'
     import { getContext } from 'svelte'

src/components/molecules/Switcher.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/molecules/switcher";
+</style>
+
 <script lang="ts">
     import { page } from '$app/stores'
     import { getContext } from 'svelte'