From 54a7956aa7003f863a5694e274e30ef2ad533111 Mon Sep 17 00:00:00 2001
From: Nico Burns <nico@nicoburns.com>
Date: Mon, 6 Jan 2025 13:32:14 +1300
Subject: [PATCH] Restyle when style attribute is mutated

---
 examples/restyle.rs                           | 38 +++++++++++++++++++
 packages/dioxus-native/src/mutation_writer.rs |  4 ++
 2 files changed, 42 insertions(+)
 create mode 100644 examples/restyle.rs

diff --git a/examples/restyle.rs b/examples/restyle.rs
new file mode 100644
index 00000000..43eecdec
--- /dev/null
+++ b/examples/restyle.rs
@@ -0,0 +1,38 @@
+use dioxus::prelude::*;
+use tokio::time::{sleep, Duration};
+
+fn main() {
+    // Turn on the runtime and enter it
+    let rt = tokio::runtime::Builder::new_multi_thread()
+        .enable_all()
+        .build()
+        .unwrap();
+    let _guard = rt.enter();
+
+    dioxus_native::launch(app);
+}
+
+fn app() -> Element {
+    let mut count = use_signal(|| 0);
+    let mut running = use_signal(|| true);
+    // `use_future` will spawn an infinitely running future that can be started and stopped
+    use_future(move || async move {
+        loop {
+            if running() {
+                count += 1;
+            }
+            sleep(Duration::from_millis(40)).await;
+        }
+    });
+    rsx! {
+        div {
+            h1 { "Current count: {count}" }
+            p {
+                style: "font-size: {count}px",
+                "Animate Font Size"
+            }
+            button { onclick: move |_| running.toggle(), "Start/Stop the count"}
+            button { onclick: move |_| count.set(0), "Reset the count" }
+        }
+    }
+}
diff --git a/packages/dioxus-native/src/mutation_writer.rs b/packages/dioxus-native/src/mutation_writer.rs
index 029cf31f..166d211b 100644
--- a/packages/dioxus-native/src/mutation_writer.rs
+++ b/packages/dioxus-native/src/mutation_writer.rs
@@ -316,6 +316,10 @@ impl WriteMutations for MutationWriter<'_> {
                         });
                     }
                 }
+
+                if name == "style" {
+                    element.flush_style_attribute(&self.doc.guard);
+                }
             }
 
             if let AttributeValue::None = value {