minimize inline style usage

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()}