minimize inline style usage

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -13,14 +13,14 @@
   let {
     store = $bindable(),
     type,
-    containerStyle = '',
-    style = '',
+    containerStyle,
+    style,
     LineComponent
   }: {
     store: SvelteFlowStore;
     type: ConnectionLineType;
-    containerStyle: string;
-    style: string;
+    containerStyle?: string;
+    style?: string;
     LineComponent?: Component;
   } = $props();
 

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -4,10 +4,13 @@
 
   import { useStore } from '$lib/store';
   import type { EdgeLabelProps } from './types';
+  import { toPxString } from '$lib/utils';
 
   let {
-    x,
-    y,
+    x = 0,
+    y = 0,
+    width,
+    height,
     selectEdgeOnClick = false,
     transparent = false,
     style,
@@ -27,7 +30,8 @@
   style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
   style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
   style:pointer-events="all"
-  {style}
+  style:width={toPxString(width)}
+  style:height={toPxString(height)}
   role="button"
   tabindex="-1"
   onclick={() => {

packages/svelte/src/lib/components/EdgeLabel/types.ts

@@ -1,12 +1,13 @@
+import type { Dimensions, XYPosition } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
 export type EdgeLabelProps = {
   x?: number;
   y?: number;
+  width?: number;
+  height?: number;
   selectEdgeOnClick?: boolean;
   transparent?: boolean;
-  style?: string;
-  class?: ClassValue;
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -107,8 +107,9 @@
 <EdgeLabel
   x={position?.x}
   y={position?.y}
+  width={size}
+  height={size}
   class={['svelte-flow__edgeupdater nopan', `svelte-flow__edgeupdater-${type}`, className]}
-  style={`width:${size}px; height:${size}px;` + style}
   onpointerdown={onPointerDown}
   transparent
   {...rest}

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -5,6 +5,7 @@
   import drag from '$lib/actions/drag';
 
   import type { NodeSelectionProps } from './types';
+  import { toPxString } from '$lib/utils';
 
   let {
     store = $bindable(),
@@ -38,7 +39,9 @@
 {#if store.selectionRectMode === 'nodes' && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)}
   <div
     class="selection-wrapper nopan"
-    style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
+    style:width={toPxString(bounds.width)}
+    style:height={toPxString(bounds.height)}
+    style:transform="translate({bounds.x}px, {bounds.y}px)"
     use:drag={{
       disabled: false,
       store,

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -3,11 +3,11 @@
   import { errorMessages, nodeHasDimensions, Position } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
-  import { getNodeInlineStyleDimensions } from './utils';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 
   import type { ConnectableContext, NodeWrapperProps } from './types';
   import type { NodeEvents } from '$lib/types';
+  import { toPxString } from '$lib/utils';
 
   let {
     store = $bindable(),
@@ -33,7 +33,7 @@
     connectable: _connectable,
     hidden = false,
     dragging = false,
-    style,
+    style = '',
     class: className,
     type = 'default',
     parentId,
@@ -90,16 +90,12 @@
     });
   }
 
-  let inlineStyleDimensions = $derived(
-    getNodeInlineStyleDimensions({
-      width,
-      height,
-      initialWidth,
-      initialHeight,
-      measuredWidth,
-      measuredHeight
-    })
-  );
+  // We need to pass width and height into the style attribute because
+  // style:width/height={undefined} overwrites what is defined in style string
+  let inlineDimensions = $derived({
+    width: toPxString(measuredWidth === undefined ? (width ?? initialWidth) : width),
+    height: toPxString(measuredHeight === undefined ? (height ?? initialHeight) : height)
+  });
 
   $effect(() => {
     // if type, sourcePosition or targetPosition changes,
@@ -197,7 +193,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionX}px, {positionY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
+    style="{style};width:{inlineDimensions.width};height:{inlineDimensions.height}"
     onclick={onSelectNodeHandler}
     onpointerenter={onnodepointerenter ? (event) => onnodepointerenter({ node, event }) : undefined}
     onpointerleave={onnodepointerleave ? (event) => onnodepointerleave({ node, event }) : undefined}

packages/svelte/src/lib/components/NodeWrapper/utils.ts

@@ -1,33 +0,0 @@
-export function getNodeInlineStyleDimensions({
-  width,
-  height,
-  initialWidth,
-  initialHeight,
-  measuredWidth,
-  measuredHeight
-}: {
-  width?: number;
-  height?: number;
-  initialWidth?: number;
-  initialHeight?: number;
-  measuredWidth?: number;
-  measuredHeight?: number;
-}): {
-  width: string | undefined;
-  height: string | undefined;
-} {
-  if (measuredWidth === undefined && measuredHeight === undefined) {
-    const styleWidth = width ?? initialWidth;
-    const styleHeight = height ?? initialHeight;
-
-    return {
-      width: styleWidth ? `width:${styleWidth}px;` : '',
-      height: styleHeight ? `height:${styleHeight}px;` : ''
-    };
-  }
-
-  return {
-    width: width ? `width:${width}px;` : '',
-    height: height ? `height:${height}px;` : ''
-  };
-}

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { toPxString } from '$lib/utils';
+
   let {
     x = 0,
     y = 0,
@@ -6,10 +8,10 @@
     height = 0,
     isVisible = true
   }: {
-    x?: number | null;
-    y?: number | null;
-    width?: number | string | null;
-    height?: number | string | null;
+    x?: number;
+    y?: number;
+    width?: number | string;
+    height?: number | string;
     isVisible?: boolean;
   } = $props();
 </script>
@@ -17,8 +19,8 @@
 {#if isVisible}
   <div
     class="svelte-flow__selection"
-    style:width={typeof width === 'string' ? width : `${width}px`}
-    style:height={typeof height === 'string' ? height : `${height}px`}
+    style:width={typeof width === 'string' ? width : toPxString(width)}
+    style:height={typeof height === 'string' ? height : toPxString(height)}
     style:transform={`translate(${x}px, ${y}px)`}
   ></div>
 {/if}