diff --git a/tachys/src/html/style.rs b/tachys/src/html/style.rs
index 4e8fe0066e..118f3b3e82 100644
--- a/tachys/src/html/style.rs
+++ b/tachys/src/html/style.rs
@@ -6,7 +6,7 @@ use super::attribute::{
 use crate::view::static_types::Static;
 use crate::{
     html::attribute::maybe_next_attr_erasure_macros::next_attr_combine,
-    renderer::Rndr,
+    renderer::{dom::CssStyleDeclaration, Rndr},
     view::{Position, ToTemplate},
 };
 use std::{future::Future, sync::Arc};
@@ -412,90 +412,66 @@ impl IntoStyle for String {
     }
 }
 
-impl IntoStyle for (Arc<str>, Arc<str>) {
-    type AsyncOutput = Self;
-    type State = (
-        crate::renderer::types::CssStyleDeclaration,
-        Arc<str>,
-        Arc<str>,
-    );
-    type Cloneable = Self;
-    type CloneableOwned = Self;
-
-    fn to_html(self, style: &mut String) {
-        let (name, value) = self;
-        style.push_str(&name);
-        style.push(':');
-        style.push_str(&value);
-        style.push(';');
-    }
+/// Any type that can be used to set an individual style in the
+/// [`CssStyleDeclaration`](web_sys::CssStyleDeclaration).
+///
+/// This is the value in a `(name, value)` tuple that implements [`IntoStyle`].
+pub trait IntoStyleValue: Send {
+    /// The type after all async data have resolved.
+    type AsyncOutput: IntoStyleValue;
+    /// The view state retained between building and rebuilding.
+    type State;
+    /// An equivalent value that can be cloned.
+    type Cloneable: Clone + IntoStyleValue;
+    /// An equivalent value that can be cloned and is `'static`.
+    type CloneableOwned: Clone + IntoStyleValue + 'static;
 
-    fn hydrate<const FROM_SERVER: bool>(
-        self,
-        el: &crate::renderer::types::Element,
-    ) -> Self::State {
-        let style = Rndr::style(el);
-        (style, self.0, self.1)
-    }
+    /// Renders the style to HTML.
+    fn to_html(self, name: &str, style: &mut String);
 
-    fn build(self, el: &crate::renderer::types::Element) -> Self::State {
-        let (name, value) = self;
-        let style = Rndr::style(el);
-        Rndr::set_css_property(&style, &name, &value);
-        (style, name, value)
-    }
+    /// Adds this style to the element during client-side rendering.
+    fn build(self, style: &CssStyleDeclaration, name: &str) -> Self::State;
 
-    fn rebuild(self, state: &mut Self::State) {
-        let (name, value) = self;
-        // state.1 was the previous name, theoretically the css name could be changed:
-        if name != state.1 {
-            <(Arc<str>, Arc<str>) as IntoStyle>::reset(state);
-        }
-        let (style, prev_name, prev_value) = state;
-        if value != *prev_value {
-            Rndr::set_css_property(style, &name, &value);
-        }
-        *prev_name = name;
-        *prev_value = value;
-    }
+    /// Updates the value.
+    fn rebuild(
+        self,
+        style: &CssStyleDeclaration,
+        name: &str,
+        state: &mut Self::State,
+    );
 
-    fn into_cloneable(self) -> Self::Cloneable {
-        self
-    }
+    /// Adds interactivity as necessary, given DOM nodes that were created from HTML that has
+    /// either been rendered on the server, or cloned for a `<template>`.
+    fn hydrate(self, style: &CssStyleDeclaration, name: &str) -> Self::State;
 
-    fn into_cloneable_owned(self) -> Self::Cloneable {
-        self
-    }
+    /// Converts this to a cloneable type.
+    fn into_cloneable(self) -> Self::Cloneable;
 
-    fn dry_resolve(&mut self) {}
+    /// Converts this to a cloneable, owned type.
+    fn into_cloneable_owned(self) -> Self::CloneableOwned;
 
-    async fn resolve(self) -> Self::AsyncOutput {
-        self
-    }
+    /// “Runs” the attribute without other side effects. For primitive types, this is a no-op. For
+    /// reactive types, this can be used to gather data about reactivity or about asynchronous data
+    /// that needs to be loaded.
+    fn dry_resolve(&mut self);
 
-    /// Reset the renderer to the state before this style was added.
-    fn reset(state: &mut Self::State) {
-        let (style, name, _value) = state;
-        Rndr::remove_css_property(style, name);
-    }
+    /// “Resolves” this into a type that is not waiting for any asynchronous data.
+    fn resolve(self) -> impl Future<Output = Self::AsyncOutput> + Send;
 }
 
-impl<'a> IntoStyle for (&'a str, &'a str) {
-    type AsyncOutput = Self;
-    type State = (
-        crate::renderer::types::CssStyleDeclaration,
-        &'a str,
-        &'a str,
-    );
-    type Cloneable = Self;
-    type CloneableOwned = (Arc<str>, Arc<str>);
+impl<K, V> IntoStyle for (K, V)
+where
+    K: AsRef<str> + Clone + Send + 'static,
+    V: IntoStyleValue,
+{
+    type AsyncOutput = (K, V::AsyncOutput);
+    type State = (crate::renderer::types::CssStyleDeclaration, K, V::State);
+    type Cloneable = (K, V::Cloneable);
+    type CloneableOwned = (K, V::CloneableOwned);
 
     fn to_html(self, style: &mut String) {
         let (name, value) = self;
-        style.push_str(name);
-        style.push(':');
-        style.push_str(value);
-        style.push(';');
+        value.to_html(name.as_ref(), style);
     }
 
     fn hydrate<const FROM_SERVER: bool>(
@@ -503,149 +479,225 @@ impl<'a> IntoStyle for (&'a str, &'a str) {
         el: &crate::renderer::types::Element,
     ) -> Self::State {
         let style = Rndr::style(el);
-        (style, self.0, self.1)
+        let state = self.1.hydrate(&style, self.0.as_ref());
+        (style, self.0, state)
     }
 
     fn build(self, el: &crate::renderer::types::Element) -> Self::State {
         let (name, value) = self;
         let style = Rndr::style(el);
-        Rndr::set_css_property(&style, name, value);
-        (style, self.0, self.1)
+        let state = value.build(&style, name.as_ref());
+        (style, name, state)
     }
 
     fn rebuild(self, state: &mut Self::State) {
         let (name, value) = self;
         // state.1 was the previous name, theoretically the css name could be changed:
-        if name != state.1 {
-            <(&'a str, &'a str) as IntoStyle>::reset(state);
-        }
-        let (style, prev_name, prev_value) = state;
-        if value != *prev_value {
-            Rndr::set_css_property(style, name, value);
+        if name.as_ref() != state.1.as_ref() {
+            <Self as IntoStyle>::reset(state);
+            state.2 = value.build(&state.0, name.as_ref());
+        } else {
+            value.rebuild(&state.0, name.as_ref(), &mut state.2);
         }
-        *prev_name = name;
-        *prev_value = value;
     }
 
     fn into_cloneable(self) -> Self::Cloneable {
-        self
+        (self.0, self.1.into_cloneable())
     }
 
     fn into_cloneable_owned(self) -> Self::CloneableOwned {
-        (self.0.into(), self.1.into())
+        (self.0, self.1.into_cloneable_owned())
     }
 
-    fn dry_resolve(&mut self) {}
+    fn dry_resolve(&mut self) {
+        self.1.dry_resolve();
+    }
 
     async fn resolve(self) -> Self::AsyncOutput {
-        self
+        (self.0, self.1.resolve().await)
     }
 
     /// Reset the renderer to the state before this style was added.
     fn reset(state: &mut Self::State) {
         let (style, name, _value) = state;
-        Rndr::remove_css_property(style, name);
+        Rndr::remove_css_property(style, name.as_ref());
     }
 }
 
-impl<'a> IntoStyle for (&'a str, String) {
-    type AsyncOutput = Self;
-    type State = (crate::renderer::types::CssStyleDeclaration, &'a str, String);
-    type Cloneable = (Arc<str>, Arc<str>);
-    type CloneableOwned = (Arc<str>, Arc<str>);
+macro_rules! impl_style_value {
+    ($ty:ty) => {
+        impl IntoStyleValue for $ty {
+            type AsyncOutput = Self;
+            type State = Self;
+            type Cloneable = Self;
+            type CloneableOwned = Self;
+
+            fn to_html(self, name: &str, style: &mut String) {
+                style.push_str(name);
+                style.push(':');
+                style.push_str(&self);
+                style.push(';');
+            }
 
-    fn to_html(self, style: &mut String) {
-        let (name, value) = self;
-        style.push_str(name);
-        style.push(':');
-        style.push_str(&value);
-        style.push(';');
-    }
+            fn build(
+                self,
+                style: &CssStyleDeclaration,
+                name: &str,
+            ) -> Self::State {
+                Rndr::set_css_property(style, name, &self);
+                self
+            }
 
-    fn hydrate<const FROM_SERVER: bool>(
-        self,
-        el: &crate::renderer::types::Element,
-    ) -> Self::State {
-        let style = Rndr::style(el);
-        (style, self.0, self.1)
-    }
+            fn rebuild(
+                self,
+                style: &CssStyleDeclaration,
+                name: &str,
+                state: &mut Self::State,
+            ) {
+                if &self != &*state {
+                    Rndr::set_css_property(style, name, &self);
+                }
+                *state = self;
+            }
 
-    fn build(self, el: &crate::renderer::types::Element) -> Self::State {
-        let (name, value) = &self;
-        let style = Rndr::style(el);
-        Rndr::set_css_property(&style, name, value);
-        (style, self.0, self.1)
-    }
+            fn hydrate(
+                self,
+                _style: &CssStyleDeclaration,
+                _name: &str,
+            ) -> Self::State {
+                self
+            }
 
-    fn rebuild(self, state: &mut Self::State) {
-        let (name, value) = self;
-        // state.1 was the previous name, theoretically the css name could be changed:
-        if name != state.1 {
-            <(&'a str, String) as IntoStyle>::reset(state);
-        }
-        let (style, prev_name, prev_value) = state;
-        if value != *prev_value {
-            Rndr::set_css_property(style, name, &value);
+            fn into_cloneable(self) -> Self::Cloneable {
+                self
+            }
+
+            fn into_cloneable_owned(self) -> Self::CloneableOwned {
+                self
+            }
+
+            fn dry_resolve(&mut self) {}
+
+            async fn resolve(self) -> Self::AsyncOutput {
+                self
+            }
         }
-        *prev_name = name;
-        *prev_value = value;
-    }
 
-    fn into_cloneable(self) -> Self::Cloneable {
-        (self.0.into(), self.1.into())
-    }
+        impl IntoStyleValue for Option<$ty> {
+            type AsyncOutput = Self;
+            type State = Self;
+            type Cloneable = Self;
+            type CloneableOwned = Self;
+
+            fn to_html(self, name: &str, style: &mut String) {
+                if let Some(value) = self {
+                    style.push_str(name);
+                    style.push(':');
+                    style.push_str(&value);
+                    style.push(';');
+                }
+            }
 
-    fn into_cloneable_owned(self) -> Self::CloneableOwned {
-        (self.0.into(), self.1.into())
-    }
+            fn build(
+                self,
+                style: &CssStyleDeclaration,
+                name: &str,
+            ) -> Self::State {
+                if let Some(value) = &self {
+                    Rndr::set_css_property(style, name, &value);
+                }
+                self
+            }
 
-    fn dry_resolve(&mut self) {}
+            fn rebuild(
+                self,
+                style: &CssStyleDeclaration,
+                name: &str,
+                state: &mut Self::State,
+            ) {
+                match (&state, &self) {
+                    (None, None) => {}
+                    (Some(_), None) => Rndr::remove_css_property(style, name),
+                    (None, Some(value)) => {
+                        Rndr::set_css_property(style, name, &value)
+                    }
+                    (Some(old), Some(new)) => {
+                        if new != &*old {
+                            Rndr::set_css_property(style, name, &new);
+                        }
+                    }
+                }
+                *state = self;
+            }
 
-    async fn resolve(self) -> Self::AsyncOutput {
-        self
-    }
+            fn hydrate(
+                self,
+                _style: &CssStyleDeclaration,
+                _name: &str,
+            ) -> Self::State {
+                self
+            }
 
-    fn reset(state: &mut Self::State) {
-        let (style, name, _value) = state;
-        Rndr::remove_css_property(style, name);
-    }
+            fn into_cloneable(self) -> Self::Cloneable {
+                self
+            }
+
+            fn into_cloneable_owned(self) -> Self::CloneableOwned {
+                self
+            }
+
+            fn dry_resolve(&mut self) {}
+
+            async fn resolve(self) -> Self::AsyncOutput {
+                self
+            }
+        }
+    };
 }
 
+impl_style_value!(&'static str);
+impl_style_value!(Arc<str>);
+impl_style_value!(String);
+#[cfg(feature = "oco")]
+impl_style_value!(oco_ref::Oco<'static, str>);
+
 #[cfg(feature = "nightly")]
-impl<const V: &'static str> IntoStyle for (&str, Static<V>) {
+impl<const V: &'static str> IntoStyleValue for Static<V> {
     type AsyncOutput = Self;
-    type State = ();
-    type Cloneable = (Arc<str>, Static<V>);
-    type CloneableOwned = (Arc<str>, Static<V>);
+    type State = Self;
+    type Cloneable = Self;
+    type CloneableOwned = Self;
 
-    fn to_html(self, style: &mut String) {
-        let (name, _) = self;
+    fn to_html(self, name: &str, style: &mut String) {
         style.push_str(name);
         style.push(':');
         style.push_str(V);
         style.push(';');
     }
 
-    fn hydrate<const FROM_SERVER: bool>(
-        self,
-        _el: &crate::renderer::types::Element,
-    ) -> Self::State {
+    fn build(self, style: &CssStyleDeclaration, name: &str) -> Self::State {
+        Rndr::set_css_property(style, name, V);
+        self
     }
 
-    fn build(self, el: &crate::renderer::types::Element) -> Self::State {
-        let (name, _) = &self;
-        let style = Rndr::style(el);
-        Rndr::set_css_property(&style, name, V);
+    fn rebuild(
+        self,
+        _style: &CssStyleDeclaration,
+        _name: &str,
+        _state: &mut Self::State,
+    ) {
     }
 
-    fn rebuild(self, _state: &mut Self::State) {}
+    fn hydrate(self, _style: &CssStyleDeclaration, _name: &str) -> Self::State {
+        self
+    }
 
     fn into_cloneable(self) -> Self::Cloneable {
-        (self.0.into(), self.1)
+        self
     }
 
     fn into_cloneable_owned(self) -> Self::CloneableOwned {
-        (self.0.into(), self.1)
+        self
     }
 
     fn dry_resolve(&mut self) {}
@@ -653,45 +705,56 @@ impl<const V: &'static str> IntoStyle for (&str, Static<V>) {
     async fn resolve(self) -> Self::AsyncOutput {
         self
     }
-
-    fn reset(_state: &mut Self::State) {}
 }
 
 #[cfg(feature = "nightly")]
-impl<const V: &'static str> IntoStyle for (Arc<str>, Static<V>) {
+impl<const V: &'static str> IntoStyleValue for Option<Static<V>> {
     type AsyncOutput = Self;
-    type State = ();
-    type Cloneable = (Arc<str>, Static<V>);
-    type CloneableOwned = (Arc<str>, Static<V>);
+    type State = Self;
+    type Cloneable = Self;
+    type CloneableOwned = Self;
 
-    fn to_html(self, style: &mut String) {
-        let (name, _) = self;
-        style.push_str(&name);
-        style.push(':');
-        style.push_str(V);
-        style.push(';');
+    fn to_html(self, name: &str, style: &mut String) {
+        if self.is_some() {
+            style.push_str(name);
+            style.push(':');
+            style.push_str(V);
+            style.push(';');
+        }
     }
 
-    fn hydrate<const FROM_SERVER: bool>(
-        self,
-        _el: &crate::renderer::types::Element,
-    ) -> Self::State {
+    fn build(self, style: &CssStyleDeclaration, name: &str) -> Self::State {
+        if self.is_some() {
+            Rndr::set_css_property(style, name, V);
+        }
+        self
     }
 
-    fn build(self, el: &crate::renderer::types::Element) -> Self::State {
-        let (name, _) = &self;
-        let style = Rndr::style(el);
-        Rndr::set_css_property(&style, name, V);
+    fn rebuild(
+        self,
+        style: &CssStyleDeclaration,
+        name: &str,
+        state: &mut Self::State,
+    ) {
+        match (&state, &self) {
+            (None, None) => {}
+            (Some(_), None) => Rndr::remove_css_property(style, name),
+            (None, Some(_)) => Rndr::set_css_property(style, name, V),
+            (Some(_), Some(_)) => {}
+        }
+        *state = self;
     }
 
-    fn rebuild(self, _state: &mut Self::State) {}
+    fn hydrate(self, _style: &CssStyleDeclaration, _name: &str) -> Self::State {
+        self
+    }
 
     fn into_cloneable(self) -> Self::Cloneable {
-        (self.0, self.1)
+        self
     }
 
     fn into_cloneable_owned(self) -> Self::CloneableOwned {
-        (self.0, self.1)
+        self
     }
 
     fn dry_resolve(&mut self) {}
@@ -699,8 +762,6 @@ impl<const V: &'static str> IntoStyle for (Arc<str>, Static<V>) {
     async fn resolve(self) -> Self::AsyncOutput {
         self
     }
-
-    fn reset(_state: &mut Self::State) {}
 }
 
 #[cfg(feature = "nightly")]
diff --git a/tachys/src/reactive_graph/style.rs b/tachys/src/reactive_graph/style.rs
index 0d08540e58..58fe7840cb 100644
--- a/tachys/src/reactive_graph/style.rs
+++ b/tachys/src/reactive_graph/style.rs
@@ -1,162 +1,116 @@
 use super::{ReactiveFunction, SharedReactiveFunction};
-use crate::{html::style::IntoStyle, renderer::Rndr};
+use crate::{
+    html::style::{IntoStyle, IntoStyleValue},
+    renderer::Rndr,
+};
 use reactive_graph::effect::RenderEffect;
-use std::borrow::Cow;
+use std::sync::Arc;
 
-pub struct RenderEffectWithCssStyleName<T>
-where
-    T: 'static,
-{
-    name: &'static str,
-    effect: RenderEffect<T>,
-}
-
-impl<T> RenderEffectWithCssStyleName<T>
-where
-    T: 'static,
-{
-    fn new(name: &'static str, effect: RenderEffect<T>) -> Self {
-        Self { effect, name }
-    }
-}
-
-impl<F, S> IntoStyle for (&'static str, F)
+impl<F, S> IntoStyleValue for F
 where
     F: ReactiveFunction<Output = S>,
-    S: Into<Cow<'static, str>> + 'static,
+    S: IntoStyleValue + 'static,
 {
     type AsyncOutput = Self;
-    type State = RenderEffectWithCssStyleName<(
-        crate::renderer::types::CssStyleDeclaration,
-        Cow<'static, str>,
-    )>;
-    type Cloneable = (&'static str, SharedReactiveFunction<S>);
-    type CloneableOwned = (&'static str, SharedReactiveFunction<S>);
+    type State = (Arc<str>, RenderEffect<S::State>);
+    type Cloneable = SharedReactiveFunction<S>;
+    type CloneableOwned = SharedReactiveFunction<S>;
 
-    fn to_html(self, style: &mut String) {
-        let (name, mut f) = self;
+    fn to_html(self, name: &str, style: &mut String) {
+        let mut f = self;
         let value = f.invoke();
-        style.push_str(name);
-        style.push(':');
-        style.push_str(&value.into());
-        style.push(';');
+        value.to_html(name, style);
     }
 
-    fn hydrate<const FROM_SERVER: bool>(
-        self,
-        el: &crate::renderer::types::Element,
+    fn build(
+        mut self,
+        style: &crate::renderer::dom::CssStyleDeclaration,
+        name: &str,
     ) -> Self::State {
-        let (name, mut f) = self;
-        let name = Rndr::intern(name);
-        // TODO FROM_SERVER vs template
-        let style = Rndr::style(el);
-        RenderEffectWithCssStyleName::new(
-            name,
+        let name: Arc<str> = Rndr::intern(name).into();
+        let style = style.to_owned();
+        (
+            Arc::clone(&name),
             RenderEffect::new(move |prev| {
-                let value = f.invoke().into();
+                let value = self.invoke();
                 if let Some(mut state) = prev {
-                    let (style, prev): &mut (
-                        crate::renderer::types::CssStyleDeclaration,
-                        Cow<'static, str>,
-                    ) = &mut state;
-                    if &value != prev {
-                        Rndr::set_css_property(style, name, &value);
-                    }
-                    *prev = value;
+                    value.rebuild(&style, &name, &mut state);
                     state
                 } else {
-                    // only set the style in template mode
-                    // in server mode, it's already been set
-                    if !FROM_SERVER {
-                        Rndr::set_css_property(&style, name, &value);
-                    }
-                    (style.clone(), value)
+                    value.build(&style, &name)
                 }
             }),
         )
     }
 
-    fn build(self, el: &crate::renderer::types::Element) -> Self::State {
-        let (name, mut f) = self;
-        let name = Rndr::intern(name);
-        let style = Rndr::style(el);
-        RenderEffectWithCssStyleName::new(
-            name,
-            RenderEffect::new(move |prev| {
-                let value = f.invoke().into();
-                if let Some(mut state) = prev {
-                    let (style, prev): &mut (
-                        crate::renderer::types::CssStyleDeclaration,
-                        Cow<'static, str>,
-                    ) = &mut state;
-                    if &value != prev {
-                        Rndr::set_css_property(style, name, &value);
+    fn rebuild(
+        mut self,
+        style: &crate::renderer::dom::CssStyleDeclaration,
+        name: &str,
+        state: &mut Self::State,
+    ) {
+        let (prev_name, prev_effect) = state;
+        let mut prev_value = prev_effect.take_value();
+        if name != prev_name.as_ref() {
+            Rndr::remove_css_property(style, prev_name.as_ref());
+            prev_value = None;
+        }
+        let name: Arc<str> = name.into();
+        let style = style.to_owned();
+
+        *state = (
+            Arc::clone(&name),
+            RenderEffect::new_with_value(
+                move |prev| {
+                    let value = self.invoke();
+                    if let Some(mut state) = prev {
+                        value.rebuild(&style, &name, &mut state);
+                        state
+                    } else {
+                        value.build(&style, &name)
                     }
-                    *prev = value;
-                    state
-                } else {
-                    // always set the style initially without checking
-                    Rndr::set_css_property(&style, name, &value);
-                    (style.clone(), value)
-                }
-            }),
-        )
+                },
+                prev_value,
+            ),
+        );
     }
 
-    fn rebuild(self, state: &mut Self::State) {
-        let (name, mut f) = self;
-        // Name might've updated:
-        state.name = name;
-        state.effect = RenderEffect::new_with_value(
-            move |prev| {
-                let value = f.invoke().into();
+    fn hydrate(
+        mut self,
+        style: &crate::renderer::dom::CssStyleDeclaration,
+        name: &str,
+    ) -> Self::State {
+        let name: Arc<str> = Rndr::intern(name).into();
+        let style = style.to_owned();
+        (
+            Arc::clone(&name),
+            RenderEffect::new(move |prev| {
+                let value = self.invoke();
                 if let Some(mut state) = prev {
-                    let (style, prev) = &mut state;
-                    if &value != prev {
-                        Rndr::set_css_property(style, name, &value);
-                    }
-                    *prev = value;
+                    value.rebuild(&style, &name, &mut state);
                     state
                 } else {
-                    unreachable!()
+                    value.hydrate(&style, &name)
                 }
-            },
-            state.effect.take_value(),
-        );
+            }),
+        )
     }
 
     fn into_cloneable(self) -> Self::Cloneable {
-        (self.0, self.1.into_shared())
+        self.into_shared()
     }
 
     fn into_cloneable_owned(self) -> Self::CloneableOwned {
-        (self.0, self.1.into_shared())
+        self.into_shared()
     }
 
     fn dry_resolve(&mut self) {
-        self.1.invoke();
+        self.invoke();
     }
 
     async fn resolve(self) -> Self::AsyncOutput {
         self
     }
-
-    fn reset(state: &mut Self::State) {
-        let name = state.name;
-        state.effect = RenderEffect::new_with_value(
-            move |prev| {
-                if let Some(mut state) = prev {
-                    let (style, prev) = &mut state;
-                    Rndr::remove_css_property(style, name);
-                    *prev = Cow::Borrowed("");
-                    state
-                } else {
-                    unreachable!()
-                }
-            },
-            state.effect.take_value(),
-        );
-    }
 }
 
 impl<F, C> IntoStyle for F
@@ -319,42 +273,48 @@ mod stable {
                 }
             }
 
-            impl<S> IntoStyle for (&'static str, $sig<S>)
+            impl<S> IntoStyleValue for $sig<S>
             where
                 $sig<S>: Get<Value = S>,
-                S: Into<Cow<'static, str>> + Send + Sync + Clone + 'static,
+                S: IntoStyleValue + Send + Sync + Clone + 'static,
             {
                 type AsyncOutput = Self;
-                type State = crate::reactive_graph::style::RenderEffectWithCssStyleName<(
-                    crate::renderer::types::CssStyleDeclaration,
-                    Cow<'static, str>,
-                )>;
-                type Cloneable = Self;
-                type CloneableOwned = Self;
+                type State = (Arc<str>, RenderEffect<S::State>);
+                type Cloneable = $sig<S>;
+                type CloneableOwned = $sig<S>;
 
-                fn to_html(self, style: &mut String) {
-                    IntoStyle::to_html((self.0, move || self.1.get()), style)
+                fn to_html(self, name: &str, style: &mut String) {
+                    IntoStyleValue::to_html(move || self.get(), name, style)
                 }
 
-                fn hydrate<const FROM_SERVER: bool>(
+                fn build(
                     self,
-                    el: &crate::renderer::types::Element,
+                    style: &crate::renderer::dom::CssStyleDeclaration,
+                    name: &str,
                 ) -> Self::State {
-                    IntoStyle::hydrate::<FROM_SERVER>(
-                        (self.0, move || self.1.get()),
-                        el,
-                    )
+                    IntoStyleValue::build(move || self.get(), style, name)
                 }
 
-                fn build(
+                fn rebuild(
                     self,
-                    el: &crate::renderer::types::Element,
-                ) -> Self::State {
-                    IntoStyle::build((self.0, move || self.1.get()), el)
+                    style: &crate::renderer::dom::CssStyleDeclaration,
+                    name: &str,
+                    state: &mut Self::State,
+                ) {
+                    IntoStyleValue::rebuild(
+                        move || self.get(),
+                        style,
+                        name,
+                        state,
+                    )
                 }
 
-                fn rebuild(self, state: &mut Self::State) {
-                    IntoStyle::rebuild((self.0, move || self.1.get()), state)
+                fn hydrate(
+                    self,
+                    style: &crate::renderer::dom::CssStyleDeclaration,
+                    name: &str,
+                ) -> Self::State {
+                    IntoStyleValue::hydrate(move || self.get(), style, name)
                 }
 
                 fn into_cloneable(self) -> Self::Cloneable {
@@ -370,23 +330,6 @@ mod stable {
                 async fn resolve(self) -> Self::AsyncOutput {
                     self
                 }
-
-                fn reset(state: &mut Self::State) {
-                    let name = state.name;
-                    *state = crate::reactive_graph::style::RenderEffectWithCssStyleName::new(state.name, RenderEffect::new_with_value(
-                        move |prev| {
-                            if let Some(mut state) = prev {
-                                let (style, prev) = &mut state;
-                                crate::reactive_graph::Rndr::remove_css_property(style, name);
-                                *prev = Cow::Borrowed("");
-                                state
-                            } else {
-                                unreachable!()
-                            }
-                        },
-                        state.effect.take_value(),
-                    ));
-                }
             }
         };
     }
@@ -458,84 +401,11 @@ mod stable {
                     );
                 }
             }
-
-            #[allow(deprecated)]
-            impl<S, St> IntoStyle for (&'static str, $sig<S, St>)
-            where
-                $sig<S, St>: Get<Value = S>,
-                St: Send + Sync + 'static,
-                St: Storage<S> + Storage<Option<S>>,
-                S: Into<Cow<'static, str>> + Send + Sync + Clone + 'static,
-            {
-                type AsyncOutput = Self;
-                type State = crate::reactive_graph::style::RenderEffectWithCssStyleName<(
-                    crate::renderer::types::CssStyleDeclaration,
-                    Cow<'static, str>,
-                )>;
-                type Cloneable = Self;
-                type CloneableOwned = Self;
-
-                fn to_html(self, style: &mut String) {
-                    IntoStyle::to_html((self.0, move || self.1.get()), style)
-                }
-
-                fn hydrate<const FROM_SERVER: bool>(
-                    self,
-                    el: &crate::renderer::types::Element,
-                ) -> Self::State {
-                    IntoStyle::hydrate::<FROM_SERVER>(
-                        (self.0, move || self.1.get()),
-                        el,
-                    )
-                }
-
-                fn build(
-                    self,
-                    el: &crate::renderer::types::Element,
-                ) -> Self::State {
-                    IntoStyle::build((self.0, move || self.1.get()), el)
-                }
-
-                fn rebuild(self, state: &mut Self::State) {
-                    IntoStyle::rebuild((self.0, move || self.1.get()), state)
-                }
-
-                fn into_cloneable(self) -> Self::Cloneable {
-                    self
-                }
-
-                fn into_cloneable_owned(self) -> Self::CloneableOwned {
-                    self
-                }
-
-                fn dry_resolve(&mut self) {}
-
-                async fn resolve(self) -> Self::AsyncOutput {
-                    self
-                }
-
-                fn reset(state: &mut Self::State) {
-                    let name = state.name;
-                    *state = crate::reactive_graph::style::RenderEffectWithCssStyleName::new(state.name, RenderEffect::new_with_value(
-                        move |prev| {
-                            if let Some(mut state) = prev {
-                                let (style, prev) = &mut state;
-                                crate::reactive_graph::Rndr::remove_css_property(style, name);
-                                *prev = Cow::Borrowed("");
-                                state
-                            } else {
-                                unreachable!()
-                            }
-                        },
-                        state.effect.take_value(),
-                    ));
-                }
-            }
         };
     }
 
     use super::RenderEffect;
-    use crate::html::style::IntoStyle;
+    use crate::html::style::{IntoStyle, IntoStyleValue};
     #[allow(deprecated)]
     use reactive_graph::wrappers::read::MaybeSignal;
     use reactive_graph::{
@@ -545,7 +415,7 @@ mod stable {
         traits::Get,
         wrappers::read::{ArcSignal, Signal},
     };
-    use std::borrow::Cow;
+    use std::sync::Arc;
 
     style_signal_arena!(RwSignal);
     style_signal_arena!(ReadSignal);