css attribute in dom! macro now accepts &Css (referenced) for c…

…onvenience

CHANGES.md

@@ -1,6 +1,12 @@
 <!-- markdownlint-configure-file { "no-duplicate-heading": { "siblings_only": true } } -->
 
 <!-- markdownlint-disable-next-line first-line-h1 -->
+## Unreleased
+
+### Added
+
+* `css` attribute in `dom!` macro now accepts `&Css` (referenced) for convenience
+
 ## 0.6.1 - 2024-12-18
 
 ### Added

crates/vertigo/src/dom/attr_value.rs

@@ -72,3 +72,9 @@ impl From<Computed<Css>> for CssAttrValue {
         CssAttrValue::Computed(value)
     }
 }
+
+impl From<&Css> for CssAttrValue {
+    fn from(value: &Css) -> Self {
+        CssAttrValue::Css(value.clone())
+    }
+}

demo/app/src/app/counters/mod.rs

@@ -1,4 +1,4 @@
-use vertigo::{Computed, Value, dom, include_static, css, component};
+use vertigo::{component, css, dom, include_static, Computed, Value};
 
 mod simple_counter;
 use simple_counter::SimpleCounter;
@@ -40,13 +40,11 @@ impl State {
             counter2,
             counter3,
             counter4,
-            sum
+            sum,
         }
     }
 }
 
-
-
 #[component]
 fn Sum(sum: Computed<u32>) {
     dom! {
@@ -60,31 +58,27 @@ fn Sum(sum: Computed<u32>) {
 pub fn CountersDemo(state: State) {
     let path = include_static!("./counter.webp");
 
-    let center_css = css!("
+    let center_base = css! {"
         border: 1px solid black;
         padding: 1px;
         margin: 0 auto;
         display: block;
 
         cursor: pointer;
-        box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888;
 
         transition: all .2s ease-in-out;
+    "};
+
+    let center_css = center_base.clone().extend(css! {"
+        box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888;
+
         :hover {
             transform: scale(1.1);
         }
-    ");
-
-    let center_css2 = css!("
-        border: 1px solid black;
-        padding: 1px;
-        margin: 0 auto;
-        display: block;
-
-        cursor: pointer;
+    "});
 
+    let center_css2 = center_base.push_str("
         box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5), 8px 8px 4px rgba(0, 0, 0, 0.4), 12px 12px 4px rgba(0, 0, 0, 0.3);
-        transition: all .2s ease-in-out;
         :hover {
             transform: scale(1.5);
             box-shadow: 54px 54px 14px rgba(0, 0, 0, 0.3), 58px 58px 14px rgba(0, 0, 0, 0.2), 62px 62px 14px rgba(0, 0, 0, 0.1);

demo/app/src/app/counters/simple_counter/mod.rs

@@ -1,47 +1,47 @@
-use vertigo::{Value, transaction, Computed, component};
 use vertigo::{bind, css, dom};
+use vertigo::{component, transaction, Computed, Value};
 
 #[component]
 /// Shows counter with label
 pub fn SimpleCounter(label: Computed<String>, value: Value<u32>) {
     let click_up = bind!(value, || {
-        transaction(|context|{
+        transaction(|context| {
             value.set(value.get(context) + 1);
         });
     });
 
     let click_down = bind!(value, || {
-        transaction(|context|{
+        transaction(|context| {
             value.set(value.get(context) - 1);
         });
     });
 
-    let css_wrapper = css!("
+    let css_wrapper = css! {"
         border: 1px solid black;
         margin: 5px 0;
-    ");
+    "};
 
-    let css_box = || css!("
+    let css_box = css! {"
         margin: 5px;
-    ");
+    "};
 
-    let css_button = || css_box().push_str("
+    let css_button = css_box.clone().extend(css! {"
         display: block;
         cursor: pointer;
-    ");
+    "});
 
-    let css_wrapper_buttons = css!("
+    let css_wrapper_buttons = css! {"
         display: flex;
-    ");
+    "};
 
     dom! {
         <div css={css_wrapper}>
-            <div css={css_box()}>
+            <div css={css_box}>
                 {label} " = " {value}
             </div>
             <div css={css_wrapper_buttons}>
-                <button css={css_button()} on_click={click_up}>"up"</button>
-                <button css={css_button()} on_click={click_down}>"down"</button>
+                <button css={&css_button} on_click={click_up}>"up"</button>
+                <button css={css_button} on_click={click_down}>"down"</button>
             </div>
         </div>
     }

demo/app/src/app/game_of_life/component.rs

@@ -1,21 +1,21 @@
 use std::rc::Rc;
-use vertigo::{css, Value, bind, DomNode, dom, transaction, DomElement, dom_element};
+use vertigo::{bind, css, dom, dom_element, transaction, DomElement, DomNode, Value};
 
 pub use super::State;
 
 pub struct GameOfLife {
-    pub state: State
+    pub state: State,
 }
 
 impl GameOfLife {
     pub fn mount(&self) -> DomNode {
         let matrix = &self.state.matrix;
-        let css_wrapper = css!("
+        let css_wrapper = css! {"
             border: 1px solid black;
             padding: 10px;
             margin: 10px;
             background-color: #e0e0e0;
-        ");
+        "};
 
         dom! {
             <div css={css_wrapper}>
@@ -32,15 +32,9 @@ impl GameOfLife {
     }
 
     fn render_header(state: &State) -> DomNode {
-        let year = state.year.map(|item| {
-            item.to_string()
-        });
-        let delay = state.delay.map(|item| {
-            item.to_string()
-        });
-        let new_delay = state.new_delay.map(|item| {
-            item.to_string()
-        });
+        let year = state.year.map(|item| item.to_string());
+        let delay = state.delay.map(|item| item.to_string());
+        let new_delay = state.new_delay.map(|item| item.to_string());
 
         let on_toggle_timer = {
             let state = state.clone();
@@ -68,15 +62,15 @@ impl GameOfLife {
             state.new_delay.set(new_value.parse().unwrap_or_default());
         });
 
-        let flex_menu = css!("
+        let flex_menu = css! {"
             display: flex;
             gap: 40px;
             margin-bottom: 5px;
-        ");
+        "};
 
-        let css_button = || css!("
+        let css_button = css! {"
             cursor: pointer;
-        ");
+        "};
 
         dom! {
             <div css={flex_menu}>
@@ -87,18 +81,18 @@ impl GameOfLife {
                     "Year = " { year }
                 </div>
                 <div>
-                    <button css={css_button()} on_click={on_toggle_timer}>
+                    <button css={&css_button} on_click={on_toggle_timer}>
                         {button_label}
                     </button>
-                    <button css={css_button()} on_click={state.randomize()}>"Random"</button>
+                    <button css={&css_button} on_click={state.randomize()}>"Random"</button>
                 </div>
                 <div>
                     <div>
                         "delay = " {delay}
                     </div>
                     "Set delay: "
                     <input value={new_delay} on_input={on_input} />
-                    " " <button css={css_button()} on_click={state.accept_new_delay()}>"Set"</button>
+                    " " <button css={css_button} on_click={state.accept_new_delay()}>"Set"</button>
                 </div>
             </div>
         }
@@ -117,11 +111,11 @@ impl GameOfLife {
     }
 
     fn render_row(matrix: &[Value<bool>]) -> DomElement {
-        let css_row = css!("
+        let css_row = css! {"
             display: flex;
             flex-direction: row;
             height: 10px;
-        ");
+        "};
 
         let wrapper = dom_element! {
             <div css={css_row} />
@@ -137,12 +131,12 @@ impl GameOfLife {
     fn render_cell(cell: &Value<bool>) -> DomNode {
         let css_cell = |is_active: bool| {
             let color = if is_active { "black" } else { "white" };
-            css!("
+            css! {"
                 width: 10px;
                 height: 10px;
                 cursor: pointer;
                 background-color: { color };
-            ")
+            "}
         };
 
         let css_computed = cell.map(css_cell);

demo/app/src/app/github_explorer/component.rs

@@ -1,9 +1,9 @@
-use vertigo::{css, Resource, bind, dom, Computed, transaction, DomNode};
+use vertigo::{bind, css, dom, transaction, Computed, DomNode, Resource};
 
 use super::State;
 
 pub struct GitHubExplorer {
-    pub state: State
+    pub state: State,
 }
 
 impl GitHubExplorer {
@@ -23,27 +23,27 @@ impl GitHubExplorer {
             });
         });
 
-        let wrapper = css!("
+        let wrapper = css! {"
             border: 1px solid black;
             margin: 20px 0;
             padding: 10px;
-        ");
+        "};
 
-        let input_css = css!("
+        let input_css = css! {"
             margin-left: 10px;
-        ");
+        "};
 
-        let button_css = || css!("
+        let button_css = css! {"
             margin: 0 10px;
             cursor: pointer;
-        ");
+        "};
 
         dom! {
             <div css={wrapper}>
                 "Enter author/repo tuple: "
                 <input css={input_css} value={state.repo_input.to_computed()} on_input={on_input_callback} />
-                <button css={button_css()} on_click={on_show}>"Fetch"</button>
-                <div css={button_css()}>
+                <button css={&button_css} on_click={on_show}>"Fetch"</button>
+                <div css={button_css}>
                     <text computed={&state.repo_shown} />
                 </div>
                 { self.render_commit() }
@@ -69,13 +69,13 @@ impl GitHubExplorer {
         });
 
         commit_message.render_value(|message| {
-            let text_css = css!("
+            let text_css = css! {"
                 width: 600px;
                 height: 300px;
                 border: 1px solid black;
                 padding: 5px;
                 margin: 10px;
-            ");
+            "};
 
             dom! {
                 <div css={text_css}>