From 131ebcc0f9c6f4244939c80be6112304cc3aa94d Mon Sep 17 00:00:00 2001
From: Andrew Morris <voltrevo@gmail.com>
Date: Fri, 1 Mar 2024 12:03:21 +1100
Subject: [PATCH] Implement special behavior for style attribute

---
 valuescript_vm/src/jsx_element.rs             | 51 ++++++++++++++++++-
 .../files/root/tutorial/alsoJsx.tsx           |  2 +-
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/valuescript_vm/src/jsx_element.rs b/valuescript_vm/src/jsx_element.rs
index 14b0908..910c6f8 100644
--- a/valuescript_vm/src/jsx_element.rs
+++ b/valuescript_vm/src/jsx_element.rs
@@ -137,7 +137,12 @@ impl fmt::Display for JsxElement {
 
 fn write_attributes(f: &mut fmt::Formatter<'_>, attrs: &Vec<(String, Val)>) -> fmt::Result {
   for (key, val) in attrs {
-    write!(f, " {}=\"{}\"", key, val)?;
+    let val_str = match key.as_str() {
+      "style" => render_css(val),
+      _ => val.to_string(),
+    };
+
+    write!(f, " {}=\"{}\"", key, val_str)?;
   }
 
   Ok(())
@@ -145,7 +150,12 @@ fn write_attributes(f: &mut fmt::Formatter<'_>, attrs: &Vec<(String, Val)>) -> f
 
 fn write_attributes_pretty(f: &mut fmt::Formatter<'_>, attrs: &Vec<(String, Val)>) -> fmt::Result {
   for (key, val) in attrs {
-    write!(f, " {}=\x1b[33m\"{}\"\x1b[39m", key, val)?;
+    let val_str = match key.as_str() {
+      "style" => render_css(val),
+      _ => val.to_string(),
+    };
+
+    write!(f, " {}=\x1b[33m\"{}\"\x1b[39m", key, val_str)?;
   }
 
   Ok(())
@@ -158,3 +168,40 @@ pub fn is_jsx_element(val: &Val) -> bool {
     _ => false,
   }
 }
+
+fn render_css(val: &Val) -> String {
+  if let Val::Object(obj) = val {
+    let mut css_str = String::new();
+
+    for (key, val) in &obj.string_map {
+      css_str.push_str(&format!("{}: {}; ", to_kebab_case(key), val));
+    }
+
+    return css_str;
+  }
+
+  val.to_string()
+}
+
+fn to_kebab_case(key: &str) -> String {
+  // eg: backgroundColor -> background-color
+
+  let mut kebab = String::new();
+  let mut last_was_upper = false;
+
+  for c in key.chars() {
+    if c.is_uppercase() {
+      if !last_was_upper {
+        kebab.push('-');
+      }
+
+      kebab.push_str(c.to_lowercase().collect::<String>().as_str());
+      last_was_upper = true;
+    } else {
+      kebab.push(c);
+      last_was_upper = false;
+    }
+  }
+
+  kebab
+}
diff --git a/website/src/playground/files/root/tutorial/alsoJsx.tsx b/website/src/playground/files/root/tutorial/alsoJsx.tsx
index 4f52865..70e371f 100644
--- a/website/src/playground/files/root/tutorial/alsoJsx.tsx
+++ b/website/src/playground/files/root/tutorial/alsoJsx.tsx
@@ -8,7 +8,7 @@ function greet(name: string) {
   return (
     <h1>
       Hello
-      <span style="color: green;">{name}</span>!
+      <span style={{ color: "green" }}>{name}</span>!
     </h1>
   );
 }