feat: Add computedStyles to retrieve all computed styles for element. Useful to resolve CSS variable values or working with <canvas>

Author: techniq

.changeset/olive-laws-flow.md

@@ -0,0 +1,5 @@
+---
+'@layerstack/svelte-actions': patch
+---
+
+feat: Add `computedStyles` to retrieve all computed styles for element. Useful to resolve CSS variable values or working with `<canvas>`

packages/svelte-actions/src/lib/index.ts

@@ -9,4 +9,4 @@ export * from './portal.js';
 export * from './scroll.js';
 export * from './spotlight.js';
 export * from './sticky.js';
-export * from './styleProps.js';
+export * from './styles.js';

packages/svelte-actions/src/lib/styleProps.ts renamed to packages/svelte-actions/src/lib/styles.ts

@@ -2,7 +2,6 @@ import type { Action } from 'svelte/action';
 import { entries, keys } from '@layerstack/utils';
 
 type CSSProps = { [key: string]: string | number | boolean | null | undefined };
-
 export const styleProps: Action<HTMLElement, CSSProps> = (node, props) => {
   entries(props ?? {}).forEach(([key, value]) => {
     // Ignore if null or undefined
@@ -35,3 +34,12 @@ export const styleProps: Action<HTMLElement, CSSProps> = (node, props) => {
     },
   };
 };
+
+type ComputedStylesCallback = (styles: CSSStyleDeclaration) => void;
+export const computedStyles: Action<HTMLElement | SVGElement, ComputedStylesCallback> = (
+  node,
+  callback
+) => {
+  const computedStyles: CSSStyleDeclaration = window.getComputedStyle(node);
+  callback(computedStyles);
+};

sites/docs/src/routes/_NavMenu.svelte

@@ -16,7 +16,7 @@
     'scroll',
     'spotlight',
     'sticky',
-    'styleProps',
+    'styles',
     'table',
   ];
 

sites/docs/src/routes/docs/svelte-actions/styleProps/+page.svelte renamed to sites/docs/src/routes/docs/svelte-actions/styles/+page.svelte

@@ -1,22 +1,38 @@
 <script lang="ts">
   import { TextField } from 'svelte-ux';
-  import { styleProps } from '@layerstack/svelte-actions';
+  import { computedStyles, styleProps } from '@layerstack/svelte-actions';
 
   import Preview from '$docs/Preview.svelte';
   import Code from '$docs/Code.svelte';
+  import Json from '$docs/Json.svelte';
 
+  let _styles: CSSStyleDeclaration;
   let background = '#ddd';
   let border = '1px solid #aaa';
 </script>
 
 <h1>Usage</h1>
 
 <Code
-  source={`import { styleProps } from '@layerstack/svelte-actions';`}
+  source={`import { computedStyles, styleProps } from '@layerstack/svelte-actions';`}
   language="javascript"
   class="mb-4"
 />
 
+<h2>
+  computedStyles <small>
+    Retrieve all computed styles for element. Useful to resolve CSS variable values or working with
+    `canvas`.
+  </small>
+</h2>
+
+<Preview>
+  <div class="bg-primary" use:computedStyles={(styles) => (_styles = styles)}></div>
+  <Json value={_styles} defaultExpandedPaths={[]} />
+</Preview>
+
+<h2>styleProps <small>Reactively set style properties using a single object.</small></h2>
+
 <Preview>
   {@const styles = { '--background': background, '--border': border }}
   <div class="grid gap-4" use:styleProps={styles}>

sites/docs/src/routes/docs/svelte-actions/styleProps/+page.ts renamed to sites/docs/src/routes/docs/svelte-actions/styles/+page.ts

@@ -1,12 +1,12 @@
-import source from '$svelte-actions/styleProps.ts?raw';
+import source from '$svelte-actions/styles.ts?raw';
 import pageSource from './+page.svelte?raw';
 
 export async function load() {
   return {
     meta: {
       source,
       pageSource,
-      description: 'Reactively set style properties using a single object.',
+      description: 'Actions to conveniently work with CSS styles',
     },
   };
 }