minimize inline style usage

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -222,7 +222,7 @@
 		>
 	</Controls>
 	<Background variant={BackgroundVariant.Dots} />
-	<MiniMap />
+	<MiniMap bgColor={'red'} />
 	<Panel position="top-right">
 		<button onclick={moveNode}>update node pos</button>
 		<button onclick={changeEdgeType}>update edge type</button>

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}

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -58,8 +58,8 @@
     panOnDrag = true,
     selectionOnDrag = true,
     connectionLineComponent,
-    connectionLineStyle = '',
-    connectionLineContainerStyle = '',
+    connectionLineStyle,
+    connectionLineContainerStyle,
     connectionLineType = ConnectionLineType.Bezier,
     attributionPosition,
     children,

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -2,6 +2,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
   import { type SvelteFlowRestProps } from '$lib/store/types';
+  import { toPxString } from '$lib/utils';
 
   let {
     width,
@@ -87,8 +88,8 @@
   bind:this={domNode}
   bind:clientHeight
   bind:clientWidth
-  style:width
-  style:height
+  style:width={toPxString(width)}
+  style:height={toPxString(height)}
   class={['svelte-flow', 'svelte-flow-container', className, colorMode]}
   data-testid="svelte-flow__wrapper"
   role="application"

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -7,7 +7,7 @@
 
 <div
   class="svelte-flow__viewport xyflow__viewport svelte-flow__container"
-  style="transform: translate({store.viewport.x}px, {store.viewport.y}px) scale({store.viewport
+  style:transform="translate({store.viewport.x}px, {store.viewport.y}px) scale({store.viewport
     .zoom})"
 >
   {@render children()}

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -37,8 +37,8 @@
     zoomable = true,
     inversePan,
     zoomStep,
-    style = '',
-    class: className
+    class: className,
+    ...rest
   }: MiniMapProps = $props();
 
   let store = useStore();
@@ -83,9 +83,10 @@
 
 <Panel
   {position}
-  style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
   class={['svelte-flow__minimap', className]}
   data-testid="svelte-flow__minimap"
+  --xy-minimap-background-color-props={bgColor}
+  {...rest}
 >
   {#if store.panZoom}
     <svg

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -37,8 +37,8 @@
   ry={borderRadius}
   {width}
   {height}
-  style={`${color ? `fill: ${color};` : ''}${strokeColor ? `stroke: ${strokeColor};` : ''}${
-    strokeWidth ? `stroke-width: ${strokeWidth};` : ''
-  }`}
+  style:fill={color}
+  style:stroke={strokeColor}
+  style:stroke-width={strokeWidth}
   shape-rendering={shapeRendering}
 />

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -1,5 +1,5 @@
 import type { PanelPosition } from '@xyflow/system';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type { Node } from '$lib/types';
 
 export type GetMiniMapNodeAttribute = (node: Node) => string;
@@ -46,4 +46,4 @@ export type MiniMapProps = {
   inversePan?: boolean;
   /** Step size for zooming in/out */
   zoomStep?: number;
-};
+} & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -26,9 +26,9 @@
     onResizeStart,
     onResize,
     onResizeEnd,
-    style = '',
     class: className,
-    children
+    children,
+    ...rest
   }: ResizeControlProps = $props();
 
   const store = useStore();
@@ -51,12 +51,6 @@
 
   let positionClassNames = $derived(controlPosition.split('-'));
 
-  let controlStyle = $derived.by(() => {
-    let colorStyleProp =
-      variant === ResizeControlVariant.Line ? 'border-color' : 'background-color';
-    return color ? `${style} ${colorStyleProp}: ${color};` : style;
-  });
-
   onMount(() => {
     if (resizeControlRef) {
       resizer = XYResizer({
@@ -116,7 +110,9 @@
 <div
   class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
   bind:this={resizeControlRef}
-  style={controlStyle}
+  style:border-color={variant === ResizeControlVariant.Line ? color : undefined}
+  style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
+  {...rest}
 >
   {@render children?.()}
 </div>

packages/svelte/src/lib/plugins/NodeResizer/types.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type {
   ControlPosition,
   ResizeControlVariant,
@@ -44,7 +44,7 @@ export type NodeResizerProps = {
   onResize?: OnResize;
   /** Callback called when resizing ends */
   onResizeEnd?: OnResizeEnd;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
@@ -69,7 +69,5 @@ export type ResizeControlProps = Pick<
    * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
    */
   variant?: ResizeControlVariant;
-  class?: ClassValue;
-  style?: string;
   children?: Snippet;
-};
+} & HTMLAttributes<HTMLDivElement>;

packages/svelte/src/lib/utils/index.ts

@@ -21,3 +21,7 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
+
+export function toPxString(value: number | undefined): string | undefined {
+  return value === undefined ? undefined : `${value}px`;
+}