css! macro resolving expressions in url

CHANGES.md

@@ -22,6 +22,7 @@
 * Component embedding using non-local name (f. ex. `<my_module::MyComponent />`)
 * Raw field name support in AutoJsJson derive macro
 * `component!` macro copying attributes to struct (and doc-strings)
+* `css!` macro resolving expressions in `url`
 * vertigo-cli: Watch script now attached inside body tag
 
 ## 0.4.3 - 2024-02-28

crates/vertigo-macro/src/css.pest

@@ -274,7 +274,7 @@ unknown_rule = {
 }
 
 rule_ident = { (ASCII_ALPHA_LOWER | "@" | "-" ) ~ (ASCII_ALPHA_LOWER | "-")+ }
-value = _{ (simple_value)+ | url_value }
+value = _{ url_value | (simple_value)+ }
 simple_value = _{ expression | color_value | unquoted_value | quoted_value }
 
 unquoted_value = { (!semicolon ~ ANY)+ }
@@ -290,7 +290,7 @@ hsla_value = _{ "hsl(" ~ ASCII_DIGIT ~ comma ~ (ASCII_DIGIT ~ percent ~ comma){2
 
 transparency_value = _{ zero_to_one }
 
-url_value = _{ "url(" ~ (expression | quoted_value) ~ ")" }
+url_value = { "url(" ~ (expression | quoted_value) ~ ")" }
 
 // { } and {$ $} expressions
 expression = { brace_left ~ /*PUSH("$"*) ~*/ expression_value ~ /*POP ~*/ brace_right }

crates/vertigo-macro/src/css_parser.rs

@@ -120,6 +120,21 @@ impl CssParser {
                 Rule::expression => self
                     .params
                     .insert(value.into_inner().next().unwrap().as_str().to_string()),
+                Rule::url_value => {
+                    // url_value -> expression/quoted_value
+                    let inner = value.clone().into_inner().next().unwrap();
+                    match inner.as_rule() {
+                        Rule::expression => {
+                            // expression -> expression_value
+                            let expr_value = inner.into_inner().next().unwrap().as_str().to_string();
+                            format!("url('{}')", self.params.insert(expr_value))
+                        },
+                        _ => {
+                            // quoted_value
+                            value.as_str().to_string()
+                        }
+                    }
+                }
                 _ => {
                     emit_warning!(
                         self.call_site,

crates/vertigo/src/computed/value.rs

@@ -46,6 +46,7 @@ impl<T> Drop for ValueInner<T> {
 /// });
 /// ```
 ///
+#[derive(Clone)]
 pub struct Value<T> {
     inner: Rc<ValueInner<T>>,
 }
@@ -56,14 +57,6 @@ impl<T: Clone + Default + 'static> Default for Value<T> {
     }
 }
 
-impl<T> Clone for Value<T> {
-    fn clone(&self) -> Self {
-        Value {
-            inner: self.inner.clone(),
-        }
-    }
-}
-
 impl<T: PartialEq> PartialEq for Value<T> {
     fn eq(&self, other: &Self) -> bool {
         self.inner.id.eq(&other.inner.id)

crates/vertigo/src/tests/css/expressions.rs

@@ -0,0 +1,31 @@
+use crate::css;
+
+use super::utils::*;
+
+// Make crate available by its name for css macro
+use crate as vertigo;
+
+#[test]
+fn test_background_url_plain() {
+    let value = css!("
+        background-image: url('foo');
+    ");
+
+    assert_eq!(
+        get_s(&value),
+        "background-image: url('foo');"
+    )
+}
+
+#[test]
+fn test_background_url_expression() {
+    let url = "bar";
+    let value = css!("
+        background-image: url({url});
+    ");
+
+    assert_eq!(
+        get_d(&value),
+        "background-image: url('bar');"
+    )
+}

crates/vertigo/src/tests/css/mod.rs

@@ -2,6 +2,7 @@ mod animation;
 mod classes;
 mod colors;
 mod comments;
+mod expressions;
 mod media;
 mod pseudoselectors;
 mod refs;