refactor: use classic for conditional classes

apps/website/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@studio-freight/lenis": "^1.0.14",
+    "classix": "^2.1.32",
     "dayjs": "^1.11.8",
     "embla-carousel": "^7.1.0",
     "focus-visible": "^5.2.0",

apps/website/src/components/SplitText.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
     import { splitText } from 'utils/text'
 
     export let text: string
@@ -7,7 +8,10 @@
 
     $: split = splitText(text, mode)
 
-    const classes = ['text-split', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'text-split',
+        $$props.class,
+    )
 </script>
 
 {#if clone}

apps/website/src/components/atoms/AboutGridPhoto.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
     import Image from './Image.svelte'
 
     export let id: string
@@ -8,11 +9,11 @@
     let hovering = false
     let timer: ReturnType<typeof setTimeout> | number = null
 
-    $: classes = [
+    $: classes = cx(
         hovering ? 'is-hovered' : undefined,
         disabled ? 'is-disabled' : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Hovering functions
     const handleMouseEnter = () => {

apps/website/src/components/atoms/Button.svelte

@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
     import SplitText from '$components/SplitText.svelte'
 
     export let tag = 'a'
@@ -15,13 +16,13 @@
     export let slotPosition = 'before'
 
     const className = 'button'
-    const classes = [
+    $: classes = cx(
         className,
         effect ? effect : undefined,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Define external links
     $: isExternal = /^(http|https):\/\//i.test(url)

apps/website/src/components/atoms/ButtonCircle.svelte

@@ -3,6 +3,8 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let tag = 'button'
     export let url: string = undefined
     export let color: string = undefined
@@ -13,12 +15,12 @@
     export let label: string = undefined
 
     const className = 'button-circle'
-    const classes = [
+    $: classes = cx(
         className,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         clone ? 'has-clone' : null,
         $$props.class
-    ].join(' ').trim()
+    )
 </script>
 
 {#if tag === 'a'}

apps/website/src/components/atoms/Icon.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let icon: string
     export let label: string = undefined
 
-    const classes = [$$props.class].join(' ').trim()
+    $: classes = cx($$props.class)
 </script>
 
 <svg class={classes} aria-label={label} width="32" height="32">

apps/website/src/components/atoms/IconEarth.svelte

@@ -7,9 +7,14 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let animate = false
 
-    const classes = ['icon-earth', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'icon-earth',
+        $$props.class,
+    )
 </script>
 
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/atoms/ScrollingTitle.svelte

@@ -8,6 +8,7 @@
 </style>
 
 <script lang="ts">
+    import cx from 'classix'
     import { map } from 'utils/math'
     import reveal from '$animations/reveal'
 
@@ -39,11 +40,11 @@
         parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
     }
 
-    const classes = [
+    $: classes = cx(
         'scrolling-title',
         'title-huge',
         $$props.class
-    ].join(' ').trim()
+    )
 
     const revealOptions = animate ? {
         children: '.char',

apps/website/src/components/molecules/Location.svelte

@@ -6,6 +6,7 @@
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
     import dayjs from 'dayjs'
+    import { cx } from 'classix'
     import { lerp } from 'utils/math'
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
     import { seenLocations } from '$utils/stores'
@@ -110,7 +111,7 @@
         <div class="location__photos">
             {#each location.photos as { image }, index}
                 {#if image}
-                    {@const classes = ['location__photo', index === photoIndex ? 'is-visible' : null].join(' ').trim()}
+                    {@const classes = cx('location__photo', index === photoIndex && 'is-visible')}
                     <Image
                         class={classes}
                         id={image.id}

apps/website/src/components/molecules/PostCard.svelte

@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
     import Image from '$components/atoms/Image.svelte'
 
     export let street: string
@@ -13,11 +14,11 @@
     export let size: string = undefined
 
     const className = 'postcard'
-    $: classes = [
+    $: classes = cx(
         className,
         ...[size].map(variant => variant && `${className}--${variant}`),
         $$props.class
-    ].join(' ').trim()
+    )
 </script>
 
 <div class={classes}>

apps/website/src/components/molecules/ShopLocationSwitcher.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation'
     import { getContext, tick } from 'svelte'
+    import { cx } from 'classix'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     import { smoothScroll } from '$utils/stores'
 
@@ -12,11 +13,11 @@
 
     const { shopLocations }: any = getContext('shop')
 
-    const classes = [
+    const classes = cx(
         'shop-locationswitcher',
         isOver && 'is-over',
         $$props.class
-    ].join(' ').trim()
+    )
 
 
     // Quick location change