Tailwind CSS v4

.changeset/pink-showers-hunt.md

@@ -0,0 +1,5 @@
+---
+'layerchart': major
+---
+
+Tailwind 4 support

.changeset/polite-parts-learn.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Support `opacity` prop/style when Canvas rendered for all primatives

.changeset/witty-clocks-divide.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Pass `fillOpacity` prop (instead of `fill-opacity`) to support Canvas

packages/layerchart/package.json

@@ -27,6 +27,7 @@
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -66,9 +67,9 @@
     "svelte": "5.20.4",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^1.0.0",
+    "svelte-ux": "2.0.0-next.1",
     "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.12",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
@@ -81,10 +82,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^1.0.0",
-    "@layerstack/svelte-stores": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
-    "@layerstack/utils": "^1.0.0",
+    "@layerstack/svelte-actions": "1.0.1-next.0",
+    "@layerstack/svelte-stores": "1.0.2-next.0",
+    "@layerstack/tailwind": "2.0.0-next.1",
+    "@layerstack/utils": "1.1.0-next.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",

packages/layerchart/postcss.config.cjs

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

packages/layerchart/src/lib/components/Arc.svelte

@@ -80,6 +80,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = 'none';
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -221,9 +222,10 @@
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
-  fill-opacity={fillOpacity}
+  {fillOpacity}
   {stroke}
   stroke-width={strokeWidth}
+  {opacity}
   class={className}
   {...$$restProps}
   {onclick}

packages/layerchart/src/lib/components/Area.svelte

@@ -61,6 +61,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -166,7 +167,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -178,7 +179,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    fillKey && fillOpacity && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -228,6 +229,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     {...$$restProps}
     class={cls('path-area', className)}
     on:click={onclick}

packages/layerchart/src/lib/components/Bar.svelte

@@ -5,8 +5,6 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -37,8 +35,10 @@
   export let y1: Accessor = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
+  export let opacity: number | undefined = undefined;
   export let radius = 0;
 
   /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
@@ -113,19 +113,18 @@
       z`
     .split('\n')
     .join('');
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
 </script>
 
 {#if _rounded === 'all' || _rounded === 'none' || radius === 0}
   <Rect
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
     rx={_rounded === 'none' ? 0 : radius}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}
@@ -138,10 +137,12 @@
   <Spline
     {pathData}
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}

packages/layerchart/src/lib/components/Bars.svelte

@@ -38,6 +38,8 @@
   export let strokeWidth = 0;
   export let radius = 0;
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
   export let insets: Insets | undefined = undefined;
@@ -64,8 +66,10 @@
         {x1}
         {y1}
         fill={fill ?? ($config.c ? $cGet(d) : null)}
+        {fillOpacity}
         {stroke}
         {strokeWidth}
+        {opacity}
         {radius}
         {insets}
         {spring}

packages/layerchart/src/lib/components/Circle.svelte

@@ -26,6 +26,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -59,7 +60,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -78,6 +79,7 @@
       fillOpacity &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -114,6 +116,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}

packages/layerchart/src/lib/components/GeoPath.svelte

@@ -24,6 +24,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /**
    * Tooltip context to setup pointer events to show tooltip for related data
@@ -87,7 +88,7 @@
         styleOverrides
           ? merge({ styles: { strokeWidth } }, styleOverrides)
           : {
-              styles: { fill, stroke, strokeWidth },
+              styles: { fill, stroke, strokeWidth, opacity },
               classes: className,
             }
       );
@@ -100,7 +101,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when geojson, projection, or class change
-    geojson && _projection && fillKey && strokeKey && strokeWidth && className;
+    geojson && _projection && fillKey && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -153,6 +154,7 @@
       {fill}
       {stroke}
       stroke-width={strokeWidth}
+      {opacity}
       on:click={_onClick}
       on:pointerenter={_onPointerEnter}
       on:pointermove={_onPointerMove}

packages/layerchart/src/lib/components/Highlight.svelte

@@ -412,7 +412,7 @@
           strokeWidth={6}
           {...typeof points === 'object' ? points : null}
           class={cls(
-            'stroke-white [paint-order:stroke] drop-shadow',
+            'stroke-white [paint-order:stroke] drop-shadow-sm',
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}

packages/layerchart/src/lib/components/Legend.svelte

@@ -140,7 +140,7 @@
   {...$$restProps}
   class={cls(
     'inline-block',
-    'z-[1]', // stack above tooltip context layers (band rects, voronoi, ...)
+    'z-1', // stack above tooltip context layers (band rects, voronoi, ...)
     placement && [
       'absolute',
       {

packages/layerchart/src/lib/components/Line.svelte

@@ -28,6 +28,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -79,7 +80,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, stroke, strokeWidth },
+            styles: { fill, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -98,6 +99,7 @@
       fillKey &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -133,6 +135,7 @@
     {fill}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     class={cls(stroke === undefined && 'stroke-surface-content', className)}

packages/layerchart/src/lib/components/LinearGradient.svelte

@@ -29,6 +29,9 @@
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const { width, height, padding } = chartContext();
 
   const renderContext = getRenderContext();
@@ -42,13 +45,13 @@
       if (Array.isArray(stop)) {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop[1] },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: parsePercent(stop[0]), color: fill };
       } else {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: i / (stops.length - 1), color: fill };
       }
@@ -68,8 +71,7 @@
   }
 
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    x1 && y1 && x2 && y2 && stops;
+    x1 && y1 && x2 && y2 && stops && className;
     canvasContext.invalidate();
   }
 
@@ -103,9 +105,13 @@
         {#if stops}
           {#each stops as stop, i}
             {#if Array.isArray(stop)}
-              <stop offset={stop[0]} stop-color={stop[1]} />
+              <stop offset={stop[0]} stop-color={stop[1]} class={className} />
             {:else}
-              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+              <stop
+                offset="{i * (100 / (stops.length - 1))}%"
+                stop-color={stop}
+                class={className}
+              />
             {/if}
           {/each}
         {/if}

packages/layerchart/src/lib/components/Points.svelte

@@ -50,6 +50,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -188,6 +189,7 @@
       {fillOpacity}
       {stroke}
       {strokeWidth}
+      {opacity}
       class={className}
       {...$$restProps}
     />