🔥 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
2022-06-22 23:25:08 +02:00
parent 4f81640b61
commit cdabe6935b
89 changed files with 1779 additions and 1735 deletions
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/viewer";
+</style>
+
 <script lang="ts">
    import { browser } from '$app/env'
    import { page } from '$app/stores'
@@ -223,24 +227,24 @@
            autoplay: false,
        })

-        anime.set('.viewer__picture', {
+        anime.set('.photo-page__picture', {
            opacity: 0,
        })
-        anime.set('.viewer__picture.is-1', {
+        anime.set('.photo-page__picture.is-1', {
            translateY: 24,
        })

        // Photos
        timeline.add({
-            targets: '.viewer__picture.is-1',
+            targets: '.photo-page__picture.is-1',
            opacity: 1,
            translateY: 0,
            duration: 900,
        }, 250)
        timeline.add({
-            targets: '.viewer__picture:not(.is-1)',
+            targets: '.photo-page__picture:not(.is-1)',
            opacity: 1,
-            translateX (element: HTMLElement, index: number) {
+            translateX (element: HTMLElement) {
                const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
                return [`-${x}`, 0]
            },
@@ -249,7 +253,7 @@

        // Prev/Next buttons
        timeline.add({
-            targets: '.viewer__controls button',
+            targets: '.photo-page__controls button',
            translateX (item: HTMLElement) {
                let direction = item.classList.contains('prev') ? -1 : 1
                return [16 * direction, 0]
@@ -260,25 +264,25 @@

        // Infos
        timeline.add({
-            targets: '.viewer__info > *',
+            targets: '.photo-page__info > *',
            translateY: [24, 0],
            opacity: [0, 1],
            delay: anime.stagger(200)
        }, 400)


-        anime.set('.viewer__index', {
+        anime.set('.photo-page__index', {
            opacity: 0
        })
        // Index
        timeline.add({
-            targets: '.viewer__index',
+            targets: '.photo-page__index',
            opacity: 1,
            duration: 900,
        }, 600)
        // Fly each number
        timeline.add({
-            targets: '.viewer__index .char',
+            targets: '.photo-page__index .char',
            translateY: ['100%', 0],
            delay: anime.stagger(200),
            duration: 1000,
@@ -303,25 +307,25 @@
 {/if}


-<PageTransition name="viewer">
+<PageTransition name="photo-page">
    <div class="container grid">
-        <p class="viewer__notice text-label">Tap for fullscreen</p>
+        <p class="photo-page__notice text-label">Tap for fullscreen</p>

        <ButtonCircle
            tag="a"
            url={previousUrl}
            color="purple"
-            class="viewer__close shadow-box-dark"
+            class="close shadow-box-dark"
        >
            <svg width="12" height="12">
                <use xlink:href="#cross">
            </svg>
        </ButtonCircle>

-        <div class="viewer__carousel">
-            <div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+        <div class="photo-page__carousel">
+            <div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                {#each visiblePhotos as { id, image, title }, index (id)}
-                    <div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
+                    <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
                        <Image
                            class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
                            id={image.id}
@@ -337,7 +341,7 @@
                    </div>
                {/each}

-                <div class="viewer__controls">
+                <div class="photo-page__controls">
                    <ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                        <IconArrow color="pink" flip={true} />
                    </ButtonCircle>
@@ -347,12 +351,12 @@
                </div>


-                <div class="viewer__index title-index">
+                <div class="photo-page__index title-index">
                    <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
                </div>
            </div>

-            <div class="viewer__info">
+            <div class="photo-page__info">
                <h1 class="title-medium">{currentPhoto.title}</h1>

                <div class="detail text-info">
@@ -376,7 +380,7 @@
    </div>

    {#if isFullscreen}
-        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+        <div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
            in:fade={{ easing: quartOut, duration: 1000 }}
            out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
        >
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/location";
+</style>
+
 <script lang="ts">
    import { navigating, page } from '$app/stores'
    import { onMount } from 'svelte'
@@ -14,6 +18,7 @@
    import Button from '$components/atoms/Button.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
    import House from '$components/molecules/House.svelte'
+    import Pagination from '$components/molecules/Pagination.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'

    export let location: any
@@ -279,23 +284,19 @@

        <section class="location-page__next">
            <div class="container">
-                <div class="pagination" role="button"
-                    on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
+                <Pagination
+                    ended={ended}
+                    current={currentPhotosAmount}
+                    total={totalPhotos}
+                    on:click={!ended && loadMorePhotos}
                    on:keydown={({ key, target }) => key === 'Enter' && target.click()}
-                    tabindex="0"
-                >
-                    <div class="pagination__progress">
-                        <span class="current">{currentPhotosAmount}</span>
-                        <span>/</span>
-                        <span class="total">{totalPhotos}</span>
-
-                        {#if !ended}
-                            <p class="pagination__more">See more photos</p>
-                        {:else}
-                            <p class="pagination__message">You've seen it all!</p>
-                        {/if}
-                    </div>
-                </div>
+            >
+                    {#if !ended}
+                        <p class="more">See more photos</p>
+                    {:else}
+                        <p class="message">You've seen it all!</p>
+                    {/if}
+                </Pagination>

                {#if ended}
                    <NewsletterModule theme="light" />
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/shop";
+</style>
+
 <script lang="ts">
    import { getContext } from 'svelte'
    // Components
@@ -7,6 +11,7 @@
    import BoxCTA from '$components/atoms/BoxCTA.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import ShopModule from '$components/organisms/ShopModule.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
@@ -37,7 +42,7 @@
            text="{errors[status].message} {defaultMessage}"
        />

-        <div class="list-cta">
+        <ListCTAs>
            <BoxCTA
                url="{$page.url.pathname}#locations"
                icon="globe"
@@ -56,7 +61,7 @@
                label="Shop our products"
                alt="Shopping bag"
            />
-        </div>
+        </ListCTAs>
    </div>

    <InteractiveGlobe />
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import '../style/style.scss'
+    import '../style/global.scss'
+
    import { navigating, page } from '$app/stores'
    import { beforeNavigate } from '$app/navigation'
    import { onMount, setContext } from 'svelte'
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/credits";
+</style>
+
 <script lang="ts">
    import { onMount } from 'svelte'
    import anime, { type AnimeTimelineInstance } from 'animejs'
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/homepage";
+</style>
+
 <script lang="ts">
    import { page } from '$app/stores'
    import { getContext, onMount } from 'svelte'
@@ -17,6 +21,7 @@
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Collage from '$components/organisms/Collage.svelte'
    import Locations from '$components/organisms/Locations.svelte'
+    import ListCTAs from '$components/organisms/ListCTAs.svelte'
    import ShopModule from '$components/organisms/ShopModule.svelte'
    import NewsletterModule from '$components/organisms/NewsletterModule.svelte'

@@ -77,7 +82,7 @@
    >
        <ScrollingTitle
            tag="h1"
-            class="homepage__title--houses"
+            class="title-houses"
            label="Houses of the World"
            offsetStart={-300}
            offsetEnd={400}
@@ -103,32 +108,38 @@
    <div class="homepage__ctas" id="ctas">
        <DiscoverText />

-        <div class="list-cta">
-            <BoxCTA
-                url="{$page.url.pathname}#locations"
-                icon="globe"
-                label="Discover locations"
-                alt="Globe"
-            />
-            <BoxCTA
-                url="/photos"
-                icon="photos"
-                label="Browse all photos"
-                alt="Photos"
-            />
-            <BoxCTA
-                url="/shop"
-                icon="bag"
-                label="Shop our products"
-                alt="Shopping bag"
-            />
-        </div>
+        <ListCTAs>
+            <li>
+                <BoxCTA
+                    url="{$page.url.pathname}#locations"
+                    icon="globe"
+                    label="Discover locations"
+                    alt="Globe"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/photos"
+                    icon="photos"
+                    label="Browse all photos"
+                    alt="Photos"
+                />
+            </li>
+            <li>
+                <BoxCTA
+                    url="/shop"
+                    icon="bag"
+                    label="Shop our products"
+                    alt="Shopping bag"
+                />
+            </li>
+        </ListCTAs>
    </div>

    <section class="homepage__locations">
        <InteractiveGlobe />

-        <ScrollingTitle tag="p" class="homepage__title--world mask">
+        <ScrollingTitle tag="p" class="title-world mask">
            <SplitText text="World" mode="chars" />
        </ScrollingTitle>

--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/explore";
+</style>
+
 <script lang="ts">
    import { getContext } from 'svelte'
    // Components
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/photos";
+</style>
+
 <script lang="ts">
    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
@@ -290,14 +294,14 @@

        // Reveal text
        timeline.add({
-            targets: '.photos__intro .discover',
+            targets: '.photos-page__intro .discover',
            translateY: [16, 0],
            opacity: [0, 1],
        }, 900)

        // Filters
        timeline.add({
-            targets: '.photos__intro .filter',
+            targets: '.photos-page__intro .filter',
            translateY: [16, 0],
            opacity: [0, 1],
            complete ({ animatables }) {
@@ -332,8 +336,8 @@
 />


-<PageTransition name="photos">
-    <section class="photos__intro"
+<PageTransition name="photos-page">
+    <section class="photos-page__intro"
        class:is-passed={scrolledPastIntro}
    >
        <ScrollingTitle tag="h1" text="Houses">
@@ -342,14 +346,14 @@

        <DiscoverText />

-        <div class="filter"
+        <div class="filters"
            class:is-over={filtersOver}
            class:is-transitioning={filtersTransitioning}
            class:is-visible={filtersVisible}
        >
-            <span class="text-label filter__label">Filter photos</span>
+            <span class="text-label filters__label">Filter photos</span>

-            <div class="filter__bar">
+            <div class="filters__bar">
                <ul>
                    <li>
                        <Select
@@ -410,7 +414,7 @@
                </ul>
            </div>

-            <div class="filter__actions">
+            <div class="filters__actions">
                {#if filtered}
                    <button class="reset button-link"
                        on:click={resetFiltered}
@@ -423,10 +427,10 @@
        </div>
    </section>

-    <section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
+    <section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
        <div class="grid container">
            {#if photos}
-                <div class="photos__grid" bind:this={photosGridEl}>
+                <div class="photos-page__grid" bind:this={photosGridEl}>
                    {#each photos as { id, image, slug, location, title, city }, index (id)}
                        <figure class="photo shadow-photo">
                            <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll tabindex="0">
@@ -476,7 +480,7 @@
                    </div>
                </div>
            {:else if !filteredCountryExists}
-                <div class="photos__message">
+                <div class="photos-page__message">
                    <p>
                        <strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
                    </p>
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../style/pages/shop";
+</style>
+
 <script lang="ts">
    import { setContext } from 'svelte'
    import { cartNotifications } from '$utils/stores/shop'
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../style/pages/subscribe";
+</style>
+
 <script lang="ts">
    import { onMount } from 'svelte'
    import dayjs from 'dayjs'