🔥 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/atoms/Badge.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/badge";
+</style>
+
 <script lang="ts">
     export let text: string
     export let size: string = 'small'

src/components/atoms/BoxCTA.svelte

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

src/components/atoms/Button.svelte

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

src/components/atoms/ButtonCart.svelte

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

src/components/atoms/ButtonCircle.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/button-circle";
+</style>
+
 <script lang="ts">
     export let tag: string = 'button'
     export let url: string = undefined

src/components/atoms/DiscoverText.svelte

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

src/components/atoms/IconArrow.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/arrow";
+</style>
+
 <script lang="ts">
     export let color: string = undefined
     export let flip: boolean = false

src/components/atoms/IconEarth.svelte

@@ -1,3 +1,11 @@
+<style lang="scss">
+    svg {
+        width: 24px;
+        height: 24px;
+        color: $color-gray;
+    }
+</style>
+
 <script lang="ts">
     export let animate: boolean = false
 

src/components/atoms/ScrollingTitle.svelte

@@ -1,3 +1,11 @@
+<style lang="scss">
+    :global(.scrolling-title) {
+        transform: translate3d(var(--parallax-x), 0, 0);
+        transition: transform 1.2s var(--ease-quart);
+        will-change: transform;
+    }
+</style>
+
 <script lang="ts">
     import { map } from '$utils/functions'
     import { reveal, fly } from '$animations/index'

src/components/atoms/SiteTitle.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/atoms/site-title";
+</style>
+
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
     import { reveal, fly } from '$animations/index'

src/components/layouts/PosterLayout.svelte

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

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'

src/components/organisms/Carousel.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/carousel";
+</style>
+
 <script lang="ts">
     import { onMount } from 'svelte'
     import { writable } from 'svelte/store'

src/components/organisms/Cart.svelte

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

src/components/organisms/Collage.svelte

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

src/components/organisms/Footer.svelte

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

src/components/organisms/InteractiveGlobe.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/modules/globe";
+</style>
+
 <script lang="ts">
     import { onMount, onDestroy, getContext } from 'svelte'
     import { getPosition, getRandomItem } from '$utils/functions'
@@ -123,7 +127,7 @@
 
 <section id="globe">
     {#if type === 'cropped'}
-        <div class="globe--cropped">
+        <div class="globe-cropped">
             <div class="globe" bind:this={globeEl} />
         </div>
     {:else}

src/components/organisms/ListCTAs.svelte

@@ -0,0 +1,20 @@
+<style lang="scss">
+    .list-cta {
+        @include bp (sm) {
+            display: flex;
+            justify-content: center;
+        }
+
+        & > :global(*) {
+            margin: 20px auto 0;
+
+            @include bp (sm) {
+                margin: 0 16px;
+            }
+        }
+    }
+</style>
+
+<ul class="list-cta">
+    <slot />
+</ul>

src/components/organisms/Locations.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/organisms/locations";
+</style>
+
 <script lang="ts">
     import { getContext } from 'svelte'
     import { flip } from 'svelte/animate'

src/components/organisms/NewsletterModule.svelte

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

src/components/organisms/PostersGrid.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/posters";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'

src/components/organisms/ShopHeader.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop/intro";
+</style>
+
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
     import anime, { type AnimeTimelineInstance } from 'animejs'

src/components/organisms/ShopModule.svelte

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