prevent unnecessary usage of style attribute

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

@@ -77,6 +77,7 @@
 			type: 'default',
 			data: { label: 'Styled with style' },
 			style: 'border: 2px solid #ff5050;',
+			height: 55,
 			position: { x: 450, y: 150 }
 		},
 		{
@@ -234,11 +235,6 @@
 </SvelteFlow>
 
 <style>
-	:global(.svelte-flow .custom-style) {
-		background: #ff5050;
-		color: white;
-	}
-
 	:root {
 		/* --background-color: #ffffdd; */
 		--background-pattern-color: #5050ff;

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

@@ -101,11 +101,15 @@
     });
   }
 
-  // We need to pass width and height into the style attribute because
+  let nodeStyle = $derived.by(() => {
-  // style:width/height={undefined} overwrites what is defined in style string
+    const w = measuredWidth === undefined ? (width ?? initialWidth) : width;
-  let inlineDimensions = $derived({
+    const h = measuredHeight === undefined ? (height ?? initialHeight) : height;
-    width: toPxString(measuredWidth === undefined ? (width ?? initialWidth) : width),
+
-    height: toPxString(measuredHeight === undefined ? (height ?? initialHeight) : height)
+    if (w === undefined && h === undefined && style === undefined) {
+      return undefined;
+    }
+
+    return `${style};${w ? `width:${toPxString(w)};` : ''}${h ? `height:${toPxString(h)};` : ''}`;
   });
 
   $effect(() => {
@@ -231,7 +235,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionX}px, {positionY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style};width:{inlineDimensions.width};height:{inlineDimensions.height}"
+    style={nodeStyle}
     onclick={onSelectNodeHandler}
     onpointerenter={onnodepointerenter
       ? (event) => onnodepointerenter({ node: userNode, event })