From 14a100270ad0ed270203cdc51ba7c1f1875bba3b Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 29 Apr 2025 13:59:57 +0200
Subject: [PATCH] prevent unnecessary usage of style attribute

---
 .../src/routes/examples/overview/Flow.svelte     |  6 +-----
 .../components/NodeWrapper/NodeWrapper.svelte    | 16 ++++++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index ab663728..24a80d0b 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/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;
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 2f9ebee6..1da86ce4 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -101,11 +101,15 @@
     });
   }
 
-  // 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)
+  let nodeStyle = $derived.by(() => {
+    const w = measuredWidth === undefined ? (width ?? initialWidth) : width;
+    const h = 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 })