fix: comparison of Value for string variants to compare stringly types

crates/sauron-core/src/html/attributes.rs

@@ -1,7 +1,9 @@
 //! Create html [attributes][0]
 //!
 //! [0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
-use crate::{dom::Event, vdom, vdom::Attribute};
+use crate::vdom;
+
+pub use crate::{dom::Event, vdom::Attribute};
 pub use attribute_macros::commons::*;
 pub use attribute_macros::*;
 pub use attribute_value::AttributeValue;

crates/sauron-core/src/html/attributes/value.rs

@@ -4,7 +4,7 @@ use std::fmt;
 /// This is needed since html attributes can have different value types
 /// such as checked(bool), name(String), tab_index(i32)
 /// Note: memory size of Value is 32 bytes, in comparison String is 24 bytes
-#[derive(Debug, PartialEq, Clone)]
+#[derive(Debug, Clone)]
 pub enum Value {
     /// bool value
     Bool(bool),
@@ -127,6 +127,40 @@ impl Value {
     }
 }
 
+impl PartialEq for Value {
+    fn eq(&self, other: &Self) -> bool {
+        match (self, other) {
+            (Self::Bool(v), Self::Bool(o)) => v == o,
+            (Self::String(v), other) => match other {
+                Self::String(o) => v == o,
+                Self::Str(o) => v == o,
+                _ => false,
+            },
+            (Self::Str(v), other) => match other {
+                Self::String(o) => v == o,
+                Self::Str(o) => v == o,
+                _ => false,
+            },
+            (Self::Vec(v), Self::Vec(o)) => v == o,
+            (Self::U8(v), Self::U8(o)) => v == o,
+            (Self::U16(v), Self::U16(o)) => v == o,
+            (Self::U32(v), Self::U32(o)) => v == o,
+            (Self::U64(v), Self::U64(o)) => v == o,
+            (Self::U128(v), Self::U128(o)) => v == o,
+            (Self::Usize(v), Self::Usize(o)) => v == o,
+            (Self::I8(v), Self::I8(o)) => v == o,
+            (Self::I16(v), Self::I16(o)) => v == o,
+            (Self::I32(v), Self::I32(o)) => v == o,
+            (Self::I64(v), Self::I64(o)) => v == o,
+            (Self::I128(v), Self::I128(o)) => v == o,
+            (Self::Isize(v), Self::Isize(o)) => v == o,
+            (Self::F32(v), Self::F32(o)) => v == o,
+            (Self::F64(v), Self::F64(o)) => v == o,
+            _ => false,
+        }
+    }
+}
+
 impl fmt::Display for Value {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         match self {

crates/sauron-macro/src/lib.rs

@@ -194,21 +194,87 @@ pub fn custom_element(
     custom_element::to_token_stream(attr, input)
 }
 
-/// TODO: docs
+/// build a css string
+///
+/// # Example:
+/// ```rust
+/// use sauron::jss;
+///
+/// let css = jss!(
+///     ".layer": {
+///         background_color: "red",
+///         border: "1px solid green",
+///     },
+///
+///     ".hide .layer": {
+///         opacity: 0,
+///     },
+/// );
+///
+/// let expected = "\
+///     .layer {\
+///     \n  background-color: red;\
+///     \n  border: 1px solid green;\
+///     \n}\
+///     \n\
+///     \n.hide .layer {\
+///     \n  opacity: 0;\
+///     \n}\
+///     \n";
+/// assert_eq!(expected, css);
+/// ```
 #[proc_macro]
 pub fn jss(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
     let style_sheet = syn::parse_macro_input!(input as jss::StyleSheet);
     style_sheet.to_token_stream().into()
 }
 
-/// TODO: docs
+/// build css string that has media selector or any other conditional group
+///
+/// # Example:
+/// ```rust
+/// use sauron::jss_with_media;
+///
+/// let css = jss_with_media!(
+///     "@media screen and (max-width: 800px)": {
+///       ".layer": {
+///         width: "100%",
+///       }
+///     },
+/// );
+///
+/// let expected = "\
+///     @media screen and (max-width: 800px) {\
+///         \n.layer {\
+///         \n  width: 100%;\
+///         \n}\
+///         \n\
+///         \n}\
+///         \n";
+/// assert_eq!(expected, css);
+/// ```
 #[proc_macro]
 pub fn jss_with_media(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
     let css_media = syn::parse_macro_input!(input as jss::StyleSheetWithConditionalGroup);
     css_media.to_token_stream().into()
 }
 
-/// TODO: docs
+/// build a style attribute
+///
+/// # Example:
+/// ```rust
+/// use sauron::style;
+/// use sauron::html::units::{px, percent};
+/// use sauron::html::attributes::{Attribute,attr};
+///
+/// let s1 = style! {
+///     background_color: "red",
+///     border: (px(1), "solid", "green"),
+///     width: percent(100),
+/// };
+/// let expected: Attribute<()> = attr("style","background-color:red;border:1px solid green;width:100%;");
+/// assert_eq!(expected, s1);
+/// ```
 #[proc_macro]
 pub fn style(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
     let style = syn::parse_macro_input!(input as jss::Style);

tests/jss_test.rs

@@ -4,16 +4,25 @@ use sauron::*;
 fn test_jss() {
     let css = jss!(
         ".layer": {
-            "background-color": "red",
-            "border": "1px solid green",
+            background_color: "red",
+            border: "1px solid green",
         },
 
         ".hide .layer": {
-            "opacity": 0,
+            opacity: 0,
         },
     );
 
-    let expected = ".layer {\n  background-color: red;\n  border: 1px solid green;\n}\n\n.hide .layer {\n  opacity: 0;\n}\n";
+    let expected = "\
+        .layer {\
+        \n  background-color: red;\
+        \n  border: 1px solid green;\
+        \n}\
+        \n\
+        \n.hide .layer {\
+        \n  opacity: 0;\
+        \n}\
+        \n";
     assert_eq!(expected, css);
 }
 
@@ -55,15 +64,15 @@ fn test_jss_ns() {
     assert_eq!(expected, css);
 }
 #[test]
-fn test_jss_pretty() {
+fn test_jss_with_quoted_property_name() {
     let css = jss!(
         ".layer": {
             "background-color": "red",
-            border: "1px solid green",
+            "border": "1px solid green",
         },
 
         ".hide .layer": {
-            opacity: 0,
+            "opacity": 0,
         },
     );
 
@@ -72,22 +81,23 @@ fn test_jss_pretty() {
 }
 
 #[test]
-fn test_jss_ns_pretty() {
+fn test_jss_with_mixed_quoting() {
     let css = jss!(
-        ".": {
+        ".block": {
             display: "block",
         },
 
         ".layer": {
             "background-color": "red",
+            "user-select": "none",
             border: "1px solid green",
         },
 
         ".hide .layer": {
             opacity: 0,
         },
     );
-    let expected =". {\n  display: block;\n}\n\n.layer {\n  background-color: red;\n  border: 1px solid green;\n}\n\n.hide .layer {\n  opacity: 0;\n}\n";
+    let expected = ".block {\n  display: block;\n}\n\n.layer {\n  background-color: red;\n  user-select: none;\n  border: 1px solid green;\n}\n\n.hide .layer {\n  opacity: 0;\n}\n";
     assert_eq!(expected, css);
 }
 
@@ -96,11 +106,18 @@ fn test_jss_ns_with_media_query() {
     let css = jss_with_media!(
         "@media screen and (max-width: 800px)": {
           ".layer": {
-            "width": "100%",
+            width: "100%",
           }
         },
     );
 
-    let expected = "@media screen and (max-width: 800px) {\n.layer {\n  width: 100%;\n}\n\n}\n";
+    let expected = "\
+        @media screen and (max-width: 800px) {\
+            \n.layer {\
+            \n  width: 100%;\
+            \n}\
+            \n\
+            \n}\
+            \n";
     assert_eq!(expected, css);
 }