From c91166d548b77b3a1743b7596b603e054e13eb8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 1 Aug 2022 20:58:59 +0200
Subject: [PATCH] Use Svelte shorthand for CSS variables declaration

---
 src/components/SplitText.svelte              | 4 ++--
 src/components/atoms/ScrollingTitle.svelte   | 2 +-
 src/components/molecules/Location.svelte     | 4 +++-
 src/components/organisms/Carousel.svelte     | 3 ++-
 src/routes/[country]/[location]/index.svelte | 2 +-
 src/routes/photos.svelte                     | 2 +-
 6 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/SplitText.svelte b/src/components/SplitText.svelte
index 1217de2..3d7734b 100644
--- a/src/components/SplitText.svelte
+++ b/src/components/SplitText.svelte
@@ -16,7 +16,7 @@
             {#each Array(2) as _, index}
                 <span class="text-split__line" aria-hidden={index === 1}>
                     {#each split as word, i}
-                        <span class="word" style="--i-w: {i};">{word}</span>{#if word.includes('\n')}<br>{/if}
+                        <span class="word" style:--i-w={i}>{word}</span>{#if word.includes('\n')}<br>{/if}
                         <!-- svelte-ignore empty-block -->
                         {#if i < split.length - 1}{/if}
                     {/each}
@@ -36,7 +36,7 @@
 {:else}
     <span class={classes}>
         {#each split as char, i}
-            <span class="char" style="--i-c: {i};">{char}</span>
+            <span class="char" style:--i-c={i}>{char}</span>
         {/each}
     </span>
 {/if}
\ No newline at end of file
diff --git a/src/components/atoms/ScrollingTitle.svelte b/src/components/atoms/ScrollingTitle.svelte
index 30f0b86..ce1044b 100644
--- a/src/components/atoms/ScrollingTitle.svelte
+++ b/src/components/atoms/ScrollingTitle.svelte
@@ -67,7 +67,7 @@
 <svelte:element this={tag}
     bind:this={titleEl}
     class={classes} aria-label={label}
-    style="--parallax-x: {parallax}%;"
+    style--parallax-x="{parallax}%"
     use:reveal={revealOptions}
 >
     <slot />
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index 1704b82..ab6a8c0 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -61,7 +61,9 @@
 </script>
 
 <div class="location" bind:this={locationEl}
-    style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
+    style:--offset-x="{$offset.x}px"
+    style:--offset-y="{$offset.y}px"
+    style:--rotate="{$offset.x * 0.125}deg"
 >
     <a href="/{location.country.slug}/{location.slug}"
         on:mousemove={handleMouseMove}
diff --git a/src/components/organisms/Carousel.svelte b/src/components/organisms/Carousel.svelte
index 75020ae..6a8c789 100644
--- a/src/components/organisms/Carousel.svelte
+++ b/src/components/organisms/Carousel.svelte
@@ -118,7 +118,8 @@
         </ul>
 
         <span class="carousel__arrow" bind:this={arrowEl}
-            style="--x: {$arrowPosition.x}px; --y: {$arrowPosition.y}px;"
+            style:--x="{$arrowPosition.x}px"
+            style:--y="{$arrowPosition.y}px"
             class:is-flipped={arrowDirection === 'prev' && !isFirstSlide || isLastSlide}
         >
             <svg width="29" height="32">
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index c428c2f..e0ae4cd 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -257,7 +257,7 @@
         </div>
 
         {#if hasIllustration}
-            <picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
+            <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
                 <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
                 <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
                 <img
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 9fec6ba..58eae9c 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -427,7 +427,7 @@
         </div>
     </section>
 
-    <section class="photos-page__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
+    <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
         <div class="grid container">
             {#if photos}
                 <div class="photos-page__grid" bind:this={photosGridEl}>