Support media query to css

Author: owjs3901

.changeset/puny-jeans-mix.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+css util support media query

bindings/devup-ui-wasm/src/lib.rs

@@ -231,50 +231,12 @@ pub fn get_theme_interface(
     theme_interface_name: &str,
 ) -> String {
     let sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
-    let mut color_keys = HashSet::new();
-    let mut typography_keys = HashSet::new();
-    let mut theme_keys = HashSet::new();
-    for color_theme in sheet.theme.colors.values() {
-        color_theme.0.keys().for_each(|key| {
-            color_keys.insert(key.clone());
-        });
-    }
-    sheet.theme.typography.keys().for_each(|key| {
-        typography_keys.insert(key.clone());
-    });
-
-    sheet.theme.colors.keys().for_each(|key| {
-        theme_keys.insert(key.clone());
-    });
-
-    if color_keys.is_empty() && typography_keys.is_empty() {
-        String::new()
-    } else {
-        format!(
-            "import \"{}\";declare module \"{}\"{{interface {}{{{}}}interface {}{{{}}}interface {}{{{}}}}}",
-            package_name,
-            package_name,
-            color_interface_name,
-            color_keys
-                .into_iter()
-                .map(|key| format!("${key}:null;"))
-                .collect::<Vec<String>>()
-                .join(""),
-            typography_interface_name,
-            typography_keys
-                .into_iter()
-                .map(|key| format!("{key}:null;"))
-                .collect::<Vec<String>>()
-                .join(""),
-            theme_interface_name,
-            theme_keys
-                .into_iter()
-                // key to pascal
-                .map(|key| format!("{key}:null;"))
-                .collect::<Vec<String>>()
-                .join("")
-        )
-    }
+    sheet.create_interface(
+        package_name,
+        color_interface_name,
+        typography_interface_name,
+        theme_interface_name,
+    )
 }
 #[cfg(test)]
 mod tests {
@@ -311,42 +273,6 @@ mod tests {
         );
     }
 
-    #[test]
-    #[serial]
-    fn test_get_theme_interface() {
-        {
-            let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
-            *sheet = StyleSheet::default();
-        }
-        assert_eq!(
-            get_theme_interface(
-                "package",
-                "ColorInterface",
-                "TypographyInterface",
-                "ThemeInterface"
-            ),
-            ""
-        );
-
-        {
-            let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
-            let mut theme = Theme::default();
-            let mut color_theme = ColorTheme::default();
-            color_theme.add_color("primary", "#000");
-            theme.add_color_theme("dark", color_theme);
-            sheet.set_theme(theme);
-        }
-        assert_eq!(
-            get_theme_interface(
-                "package",
-                "ColorInterface",
-                "TypographyInterface",
-                "ThemeInterface"
-            ),
-            "import \"package\";declare module \"package\"{interface ColorInterface{$primary:null;}interface TypographyInterface{}interface ThemeInterface{dark:null;}}"
-        );
-    }
-
     #[test]
     fn deserialize_theme() {
         {

libs/css/src/constant.rs

@@ -77,6 +77,9 @@ pub(super) static DOUBLE_SEPARATOR: phf::Set<&str> = phf_set! {
 };
 
 pub(super) static F_SPACE_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"\s*,\s*").unwrap());
+pub(super) static F_DOT_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"(\b|,)0\.(\d+)").unwrap());
+pub(super) static DOT_ZERO_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"(\b|,)-?0\.0+").unwrap());
+
 pub(super) static COLOR_HASH: Lazy<Regex> = Lazy::new(|| Regex::new(r"#([0-9a-zA-Z]+)").unwrap());
 pub(super) static ZERO_RE: Lazy<Regex> =
     Lazy::new(|| Regex::new(r"(^|\s|\(|,)-?0(px|em|rem|vh|vw|%|dvh|dvw)").unwrap());

libs/css/src/lib.rs

@@ -20,7 +20,16 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str
     if let Some(selector) = selector {
         match selector {
             StyleSelector::Selector(value) => value.replace("&", &format!(".{class_name}")),
-            StyleSelector::Media(_) => format!(".{class_name}"),
+            StyleSelector::Media {
+                selector: s,
+                query: _,
+            } => {
+                if let Some(s) = s {
+                    s.replace("&", &format!(".{class_name}"))
+                } else {
+                    format!(".{class_name}")
+                }
+            }
             StyleSelector::Global(v, _) => v.to_string(),
         }
     } else {
@@ -211,9 +220,14 @@ mod tests {
             sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None, None),
         );
 
+        assert_eq!(
+            sheet_to_classname("background", 0, Some("rgba(255, 0, 0,    0.5)"), None, None),
+            sheet_to_classname("background", 0, Some("rgba(255,0,0,.5)"), None, None),
+        );
+
         {
             let map = GLOBAL_CLASS_MAP.lock().unwrap();
-            assert_eq!(map.get("background-0-rgba(255,0,0,0.5)--255"), Some(&2));
+            assert_eq!(map.get("background-0-rgba(255,0,0,.5)--255"), Some(&2));
         }
         assert_eq!(
             sheet_to_classname("background", 0, Some("#fff"), None, None),
@@ -365,6 +379,16 @@ mod tests {
             sheet_to_classname("test", 0, Some("0 0vw"), None, None),
             "d2"
         );
+
+        reset_class_map();
+        assert_eq!(
+            sheet_to_classname("transition", 0, Some("all 0.3s ease-in-out"), None, None),
+            "d0"
+        );
+        assert_eq!(
+            sheet_to_classname("transition", 0, Some("all .3s ease-in-out"), None, None),
+            "d0"
+        );
     }
 
     #[test]

libs/css/src/optimize_value.rs

@@ -1,4 +1,7 @@
-use crate::{COLOR_HASH, F_SPACE_RE, ZERO_RE};
+use crate::{
+    COLOR_HASH, F_SPACE_RE, ZERO_RE,
+    constant::{DOT_ZERO_RE, F_DOT_RE},
+};
 
 pub fn optimize_value(value: &str) -> String {
     let mut ret = value.trim().to_string();
@@ -11,6 +14,8 @@ pub fn optimize_value(value: &str) -> String {
             .to_string();
     }
     if ret.contains("0") {
+        ret = DOT_ZERO_RE.replace_all(&ret, "0").to_string();
+        ret = F_DOT_RE.replace_all(&ret, "${1}.${2}").to_string();
         ret = ZERO_RE.replace_all(&ret, "${1}0").to_string();
     }
     // remove ; from dynamic value
@@ -57,6 +62,17 @@ mod tests {
 
     #[rstest]
     #[case("0px", "0")]
+    #[case("0.0px", "0")]
+    #[case("0.0em", "0")]
+    #[case("0.0rem", "0")]
+    #[case("0.0vh", "0")]
+    #[case("0.0vw", "0")]
+    #[case("0.0%", "0")]
+    #[case("0.0dvh", "0")]
+    #[case("0.0dvw", "0")]
+    #[case("1.3s", "1.3s")]
+    #[case("0.3s", ".3s")]
+    #[case("0.3s ease-in-out", ".3s ease-in-out")]
     #[case("0em", "0")]
     #[case("0rem", "0")]
     #[case("0vh", "0")]
@@ -73,6 +89,7 @@ mod tests {
     #[case("scale(0px)", "scale(0)")]
     #[case("scale(-0px)", "scale(0)")]
     #[case("scale(-0px);", "scale(0)")]
+    #[case("rgba(255, 0, 0,    0.5)", "rgba(255,0,0,.5)")]
     #[case("red;", "red")]
     #[case("translate(0px)", "translate(0)")]
     #[case("translate(-0px,0px)", "translate(0,0)")]

libs/css/src/style_selector.rs

@@ -9,7 +9,10 @@ use crate::{constant::SELECTOR_ORDER_MAP, selector_separator::SelectorSeparator,
 
 #[derive(Debug, PartialEq, Clone, Hash, Eq, Serialize, Deserialize)]
 pub enum StyleSelector {
-    Media(String),
+    Media {
+        query: String,
+        selector: Option<String>,
+    },
     Selector(String),
     // selector, file
     Global(String, String),
@@ -23,12 +26,36 @@ impl PartialOrd for StyleSelector {
 impl Ord for StyleSelector {
     fn cmp(&self, other: &Self) -> Ordering {
         match (self, other) {
-            (StyleSelector::Media(a), StyleSelector::Media(b)) => a.cmp(b),
+            (
+                StyleSelector::Media {
+                    query: a,
+                    selector: aa,
+                },
+                StyleSelector::Media {
+                    query: b,
+                    selector: bb,
+                },
+            ) => {
+                let c = a.cmp(b);
+                if c == Ordering::Equal { aa.cmp(bb) } else { c }
+            }
             (StyleSelector::Selector(a), StyleSelector::Selector(b)) => {
                 get_selector_order(a).cmp(&get_selector_order(b))
             }
-            (StyleSelector::Media(_), StyleSelector::Selector(_)) => Ordering::Greater,
-            (StyleSelector::Selector(_), StyleSelector::Media(_)) => Ordering::Less,
+            (
+                StyleSelector::Media {
+                    selector: _,
+                    query: _,
+                },
+                StyleSelector::Selector(_),
+            ) => Ordering::Greater,
+            (
+                StyleSelector::Selector(_),
+                StyleSelector::Media {
+                    selector: _,
+                    query: _,
+                },
+            ) => Ordering::Less,
             (StyleSelector::Global(a, _), StyleSelector::Global(b, _)) => {
                 if a == b {
                     return Ordering::Equal;
@@ -84,7 +111,10 @@ impl From<&str> for StyleSelector {
                 &s[1..]
             ))
         } else if value == "print" {
-            StyleSelector::Media("print".to_string())
+            StyleSelector::Media {
+                query: "print".to_string(),
+                selector: None,
+            }
         } else {
             let post = to_kebab_case(value);
 
@@ -134,7 +164,13 @@ impl Display for StyleSelector {
             "{}",
             match self {
                 StyleSelector::Selector(value) => value.to_string(),
-                StyleSelector::Media(value) => format!("@{value}"),
+                StyleSelector::Media { query, selector } => {
+                    if let Some(selector) = selector {
+                        format!("@{query} {selector}")
+                    } else {
+                        format!("@{query}")
+                    }
+                }
                 StyleSelector::Global(value, _) => format!("{value}"),
             }
         )
@@ -182,7 +218,12 @@ mod tests {
 
     #[rstest]
     #[case(StyleSelector::Selector("&:hover".to_string()), "&:hover")]
-    #[case(StyleSelector::Media("screen and (max-width: 600px)".to_string()), "@screen and (max-width: 600px)")]
+    #[case(StyleSelector::Media {
+            query: "screen and (max-width: 600px)".to_string(),
+            selector: None,
+        },
+        "@screen and (max-width: 600px)"
+    )]
     #[case(StyleSelector::Global(":root[data-theme=dark]".to_string(), "file.rs".to_string()), ":root[data-theme=dark]")]
     fn test_style_selector_display(#[case] selector: StyleSelector, #[case] expected: &str) {
         let output = format!("{selector}");
@@ -191,7 +232,10 @@ mod tests {
 
     #[rstest]
     #[case(
-        StyleSelector::Media("screen".to_string()),
+        StyleSelector::Media {
+            query: "screen".to_string(),
+            selector: None,
+        },
         StyleSelector::Selector("&:hover".to_string()),
         std::cmp::Ordering::Greater
     )]
@@ -201,8 +245,14 @@ mod tests {
         std::cmp::Ordering::Less
     )]
     #[case(
-        StyleSelector::Media("a".to_string()),
-        StyleSelector::Media("b".to_string()),
+        StyleSelector::Media {
+            query: "a".to_string(),
+            selector: None,
+        },
+        StyleSelector::Media {
+            query: "b".to_string(),
+            selector: None,
+        },
         std::cmp::Ordering::Less
     )]
     #[case(
@@ -217,7 +267,10 @@ mod tests {
     )]
     #[case(
         StyleSelector::Selector("&:hover".to_string()),
-        StyleSelector::Media("screen".to_string()),
+        StyleSelector::Media {
+            query: "screen".to_string(),
+            selector: None,
+        },
         std::cmp::Ordering::Less
     )]
     #[case(