From 7f2fa7515c9a1f145ff4d46fdc907a7005630e03 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Fri, 23 Sep 2022 16:22:38 -0400
Subject: [PATCH] Fix: svelte style prop (#755)

* fix svelte mitosis_styling fn

* release

* handle custom variables

* update snapshots
---
 .../__snapshots__/svelte.test.ts.snap         | 48 +++++++++++++++----
 packages/core/src/generators/svelte.ts        |  9 +++-
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index eb383ae105..55b57a51cb 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1012,7 +1012,11 @@ exports[`Svelte Javascript Test Img 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
@@ -1075,7 +1079,11 @@ exports[`Svelte Javascript Test Section 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
@@ -1099,7 +1107,11 @@ exports[`Svelte Javascript Test Section 2`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 
@@ -1308,7 +1320,11 @@ exports[`Svelte Javascript Test Video 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
@@ -3025,7 +3041,11 @@ exports[`Svelte Typescript Test Img 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
@@ -3115,7 +3135,11 @@ exports[`Svelte Typescript Test Section 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
@@ -3147,7 +3171,11 @@ exports[`Svelte Typescript Test Section 2`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 
@@ -3431,7 +3459,11 @@ exports[`Svelte Typescript Test Video 1`] = `
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
-      node.style[p] = v;
+      if (p.startsWith(\\"--\\")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
     });
   }
 </script>
diff --git a/packages/core/src/generators/svelte.ts b/packages/core/src/generators/svelte.ts
index 01e016883f..40316b9173 100644
--- a/packages/core/src/generators/svelte.ts
+++ b/packages/core/src/generators/svelte.ts
@@ -460,10 +460,17 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
         })
         .join('\n')}
       ${
+        // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
         hasStyle(json)
           ? `
         function mitosis_styling (node, vars) {
-          Object.entries(vars || {}).forEach(([ p, v ]) => { node.style[p] = v })
+          Object.entries(vars || {}).forEach(([ p, v ]) => {
+            if (p.startsWith('--')) {
+              node.style.setProperty(p, v);
+            } else {
+              node.style[p] = v;
+            }
+          })
         }
       `
           : ''