fix: Use correct _ instead of , grid-col-[...] separator for cust…

…om values. Fixes Tailwind 4 compatability (TooltipList and others)
techniq · Feb 10, 2025 · 90a12f4 · 90a12f4
1 parent db49b96
commit 90a12f4
Show file tree

Hide file tree

Showing 51 changed files with 91 additions and 86 deletions.
diff --git a/.changeset/tricky-knives-speak.md b/.changeset/tricky-knives-speak.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Use correct `_` instead of `,` grid-col-[...] separator for custom values. Fixes Tailwind 4 compatability
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipList.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipList.svelte
@@ -5,7 +5,7 @@
 <div
   class={cls(
     'TooltipList',
-    'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center',
+    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
     $$props.class
   )}
 >

diff --git a/packages/layerchart/src/lib/docs/GeoDebug.svelte b/packages/layerchart/src/lib/docs/GeoDebug.svelte
@@ -30,7 +30,7 @@
       {/each}
     </div>
 
-    <div class="grid grid-cols-[auto,1fr]">
+    <div class="grid grid-cols-[auto_1fr]">
       <span class="opacity-50">center:</span>
       <span class="text-right">
         {$geo.center?.()}

diff --git a/packages/layerchart/src/lib/docs/Preview.svelte b/packages/layerchart/src/lib/docs/Preview.svelte
@@ -72,7 +72,7 @@
       on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
-      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+      <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">Chart data</div>
         </div>

diff --git a/packages/layerchart/src/lib/docs/ViewSourceButton.svelte b/packages/layerchart/src/lib/docs/ViewSourceButton.svelte
@@ -19,7 +19,7 @@
       on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
-      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+      <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
           <div class="text-xs text-surface-content/50 truncate">{href}</div>

diff --git a/packages/layerchart/src/routes/changelog/+page.svelte b/packages/layerchart/src/routes/changelog/+page.svelte
@@ -9,7 +9,7 @@
   }
 </script>
 
-<div class="grid grid-cols-[1fr,auto] gap-6 pt-2 pb-4">
+<div class="grid grid-cols-[1fr_auto] gap-6 pt-2 pb-4">
   <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded shadow-lg border overflow-auto">
     {@html marked.parse(sanitize(data.changelog))}
   </div>

diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte
@@ -172,7 +172,7 @@
     {/key}
   {/if}
 
-  <div class="grid xl:grid-cols-[1fr,auto] gap-6 pb-4">
+  <div class="grid xl:grid-cols-[1fr_auto] gap-6 pb-4">
     <div class="_overflow-auto p-1">
       {#if type === 'components' && !hideUsage}
         {#key $page.route.id}

diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -29,7 +29,7 @@
 
 <h1>Playground</h1>
 
-<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-2 mb-2">
+<div class="grid grid-cols-[1fr_1fr_1fr_1fr] gap-2 mb-2">
   <RangeField label="Value" bind:value min={domain[0]} max={domain[1]} class="col-span-3" />
   <Field label="Use spring" let:id>
     <Switch bind:checked={spring} {id} />

diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -29,7 +29,7 @@
 <h1>Playground</h1>
 
 <div class="grid gap-2 mb-2">
-  <div class="grid grid-cols-[1fr,1fr,1fr,auto,auto] gap-2">
+  <div class="grid grid-cols-[1fr_1fr_1fr_auto_auto] gap-2">
     <PathDataMenuField bind:value={pathGenerator} />
     <CurveMenuField bind:value={curve} />
     <RangeField label="Points" bind:value={pointCount} min={2} />
@@ -88,7 +88,7 @@
 <h1>Canvas</h1>
 
 <div class="grid gap-2 mb-2">
-  <div class="grid grid-cols-[1fr,1fr,1fr,auto,auto] gap-2">
+  <div class="grid grid-cols-[1fr_1fr_1fr_auto_auto] gap-2">
     <PathDataMenuField bind:value={pathGenerator} />
     <CurveMenuField bind:value={curve} />
     <RangeField label="Points" bind:value={pointCount} min={2} />

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -120,7 +120,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2">
+<div class="grid grid-cols-[1fr_auto] gap-2">
   <Field label="Render context">
     <ToggleGroup bind:value={renderContext} variant="outline">
       <ToggleOption value="svg">Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
@@ -595,7 +595,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr,auto] gap-2 items-end">
+<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
   <h2>Axis label placements (top/bottom)</h2>
 
   <div class="mb-2 flex gap-6">
@@ -634,7 +634,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr,auto] gap-2 items-end">
+<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
   <h2>Axis label placements (left/right)</h2>
 
   <div class="mb-2 flex gap-6">
@@ -673,7 +673,7 @@
   </div>
 </Preview>
 
-<div class="grid grid-cols-[1fr,auto] gap-2 items-end">
+<div class="grid grid-cols-[1fr_auto] gap-2 items-end">
   <h2>Multiple axis with same placement</h2>
 
   <div class="mb-2 flex gap-6">

diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -56,7 +56,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2">
+<div class="grid grid-cols-[1fr_auto] gap-2">
   <Field label="Render context">
     <ToggleGroup bind:value={renderContext} variant="outline">
       <ToggleOption value="svg">Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
@@ -25,7 +25,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,1fr,1fr] gap-2">
+<div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
   <CurveMenuField bind:value={curve} showOpenClosed />
 </div>
 

diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -71,7 +71,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2">
+<div class="grid grid-cols-[1fr_auto] gap-2">
   <Field label="Render context">
     <ToggleGroup bind:value={renderContext} variant="outline">
       <ToggleOption value="svg">Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
@@ -37,7 +37,7 @@
 
 <h2>Spline</h2>
 
-<div class="grid grid-cols-[auto,auto,auto,auto,1fr,1fr,1fr] gap-2 mb-2">
+<div class="grid grid-cols-[auto_auto_auto_auto_1fr_1fr_1fr] gap-2 mb-2">
   <Field label="Start" let:id>
     <Switch bind:checked={markerStart} {id} size="md" />
   </Field>
@@ -79,7 +79,7 @@
 
 <h2>Spline w/ thicker stroke</h2>
 
-<div class="grid grid-cols-[auto,auto,auto,auto,1fr,1fr,1fr] gap-2 mb-2">
+<div class="grid grid-cols-[auto_auto_auto_auto_1fr_1fr_1fr] gap-2 mb-2">
   <Field label="Start" let:id>
     <Switch bind:checked={markerStart} {id} size="md" />
   </Field>

diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
@@ -32,7 +32,7 @@
 <h2>Repeat indefinitely</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -62,7 +62,7 @@
 <h2>Rotate object with path</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -105,7 +105,7 @@
 <h2>Sync with draw</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>

diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -170,7 +170,7 @@
 </Preview>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[1fr,auto] gap-2">
+  <div class="grid grid-cols-[1fr_auto] gap-2">
     <h2>Tweened</h2>
     <Field label="Show" labelPlacement="left" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />

diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -36,7 +36,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2">
+<div class="grid grid-cols-[1fr_auto] gap-2">
   <Field label="Render context">
     <ToggleGroup bind:value={renderContext} variant="outline">
       <ToggleOption value="svg">Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -39,7 +39,7 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2">
+<div class="grid grid-cols-[1fr_auto] gap-2">
   <Field label="Render context">
     <ToggleGroup bind:value={renderContext} variant="outline">
       <ToggleOption value="svg">Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -33,7 +33,7 @@
 <h1>Playground</h1>
 
 <div class="grid gap-2 mb-2">
-  <div class="grid grid-cols-[1fr,1fr,1fr,auto] gap-2">
+  <div class="grid grid-cols-[1fr_1fr_1fr_auto] gap-2">
     <PathDataMenuField bind:value={pathGenerator} {amplitude} {frequency} {phase} />
     <CurveMenuField bind:value={curve} />
     <RangeField label="Points" bind:value={pointCount} min={2} />
@@ -93,7 +93,7 @@
 <h2>draw</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -120,7 +120,7 @@
 <h2>tweened</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -147,7 +147,7 @@
 <h2>markers / arrows</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -179,7 +179,7 @@
 <h2>basic start and end slots</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -209,7 +209,7 @@
 <h2>label using start/end slots</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -246,7 +246,7 @@
 <h2>end slot with draw</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -275,7 +275,7 @@
 <h2>Canvas</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>

diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.svelte b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
@@ -22,7 +22,7 @@
 
 <div class="grid gap-2 mb-2">
   <TextField label="value" bind:value />
-  <div class="grid grid-cols-[1fr,1fr,1fr] gap-2">
+  <div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
     <RangeField label="x" bind:value={x} min={-300} max={300} />
     <RangeField label="y" bind:value={y} min={-300} max={300} />
     <RangeField label="width" bind:value={width} max={300} />

diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte
@@ -18,7 +18,7 @@
   };
 </script>
 
-<div class="grid grid-cols-[1fr,1fr,120px,120px,64px] gap-2 mb-2">
+<div class="grid grid-cols-[1fr_1fr_120px_120px_64px] gap-2 mb-2">
   <MenuField
     label="Mode"
     bind:value={settings.mode}

diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
@@ -23,14 +23,14 @@
 
 <h1>Examples</h1>
 
-<div class="grid grid-cols-[1fr,auto] gap-2 mb-2">
+<div class="grid grid-cols-[1fr_auto] gap-2 mb-2">
   <RangeField label="Angle" bind:value={angle} min={1} max={360} />
   <Field label="Tweened" let:id>
     <Switch bind:checked={tweened} {id} size="md" />
   </Field>
 </div>
 
-<div class="grid grid-cols-[1fr,1fr,auto,auto] gap-2 mb-2">
+<div class="grid grid-cols-[1fr_1fr_auto_auto] gap-2 mb-2">
   <RangeField label="Points" bind:value={pointCount} min={1} max={2000} />
   <CurveMenuField bind:value={curve} showOpenClosed />
   <Field label="Show points" let:id>

diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
@@ -88,7 +88,7 @@
   let debug = false;
 </script>
 
-<div class="grid grid-cols-[1fr,auto] gap-2 mb-3">
+<div class="grid grid-cols-[1fr_auto] gap-2 mb-3">
   <Field label="Render context">
     <ToggleGroup bind:value={Context} variant="outline">
       <ToggleOption value={Svg}>Svg</ToggleOption>

diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -246,7 +246,7 @@
 <h2>Tween value on mount</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr] gap-2 mb-2">
     <Field label="Show" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>

diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -567,7 +567,7 @@
 <h2>Clip tween on mount</h2>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr] gap-2 mb-2">
     <Field label="Show area" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -606,7 +606,7 @@
 </Toggle>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr] gap-2 mb-2">
     <Field label="Show area" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>
@@ -646,7 +646,7 @@
 </Toggle>
 
 <Toggle on let:on={show} let:toggle>
-  <div class="grid grid-cols-[auto,1fr] gap-2 mb-2">
+  <div class="grid grid-cols-[auto_1fr] gap-2 mb-2">
     <Field label="Show area" let:id>
       <Switch checked={show} on:change={toggle} {id} size="md" />
     </Field>