Add regex and once_cell dependencies; enhance CSS processing with regex support

Author: owjs3901

.changeset/shiny-ways-try.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Support $ var with anywhere

Cargo.lock

@@ -7,3 +7,4 @@ edition = "2021"
 once_cell = "1.20.2"
 serial_test = "3.2.0"
 serde = { version = "1.0.217", features = ["derive"] }
+regex = "1.11.1"

libs/css/Cargo.toml

@@ -1,5 +1,6 @@
 use crate::StyleSelector::{Dual, Postfix, Prefix};
 use once_cell::sync::Lazy;
+use regex::Regex;
 use serde::{Deserialize, Serialize};
 use std::collections::{HashMap, HashSet};
 use std::fmt;
@@ -278,6 +279,7 @@ pub fn sort_to_long(property: &str) -> String {
         .unwrap_or_else(|| property.to_string())
 }
 
+static F_SPACE_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"\s*,\s*").unwrap());
 pub fn sheet_to_classname(
     property: &str,
     level: u8,
@@ -286,10 +288,10 @@ pub fn sheet_to_classname(
 ) -> String {
     let key = format!(
         "{}-{}-{}-{}",
-        property,
+        property.trim(),
         level,
-        value.unwrap_or(""),
-        selector.unwrap_or("")
+        F_SPACE_RE.replace_all(value.unwrap_or(""), ",").trim(),
+        selector.unwrap_or("").trim()
     );
     let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
     map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| {
@@ -355,6 +357,30 @@ mod tests {
             sheet_to_classname("background", 1, Some("hover"), None),
             "d3"
         );
+
+        reset_class_map();
+        assert_eq!(sheet_to_classname("background", 0, None, None), "d0");
+        assert_eq!(sheet_to_classname("background", 0, None, None), "d0");
+        assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1");
+        assert_eq!(sheet_to_classname("background", 0, Some("red"), None), "d1");
+        assert_eq!(
+            sheet_to_classname("  background  ", 0, Some("  red  "), None),
+            "d1"
+        );
+
+        assert_eq!(
+            sheet_to_classname("background", 0, Some("rgba(255, 0, 0,    0.5)"), None),
+            "d2"
+        );
+        assert_eq!(
+            sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None),
+            "d2"
+        );
+
+        {
+            let map = GLOBAL_CLASS_MAP.lock().unwrap();
+            assert_eq!(map.get("background-0-rgba(255,0,0,0.5)-"), Some(&2));
+        }
     }
 
     #[test]

libs/css/src/lib.rs

@@ -6,6 +6,8 @@ edition = "2021"
 [dependencies]
 css = { path = "../css" }
 serde = { version = "1.0.217", features = ["derive"] }
+regex = "1.11.1"
+once_cell = "1.20.2"
 
 [dev-dependencies]
 insta = "1.42.1"

libs/sheet/Cargo.toml

@@ -2,10 +2,12 @@ pub mod theme;
 
 use crate::theme::Theme;
 use css::{convert_property, merge_selector, PropertyType, StyleSelector};
+use once_cell::sync::Lazy;
+use regex::Regex;
 use serde::de::Error;
 use serde::{Deserialize, Deserializer, Serialize};
 use std::cmp::Ordering::{Equal, Greater, Less};
-use std::collections::{BTreeMap, HashSet};
+use std::collections::{BTreeMap, HashMap, HashSet};
 
 trait ExtractStyle {
     fn extract(&self) -> String;
@@ -45,12 +47,14 @@ impl ExtractStyle for StyleSheetProperty {
     }
 }
 
-fn convert_theme_variable_value(value: &String) -> String {
-    if let Some(value) = value.strip_prefix("$") {
-        format!("var(--{})", value)
-    } else {
-        value.to_string()
-    }
+static VAR_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"\$\w+").unwrap());
+
+fn convert_theme_variable_value(value: &str) -> String {
+    VAR_RE
+        .replace_all(value, |caps: &regex::Captures| {
+            format!("var(--{})", &caps[0][1..])
+        })
+        .to_string()
 }
 
 #[derive(Debug, Hash, Eq, PartialEq, Deserialize, Serialize)]
@@ -198,6 +202,16 @@ mod tests {
             convert_theme_variable_value(&"$var".to_string()),
             "var(--var)"
         );
+
+        assert_eq!(
+            convert_theme_variable_value(&"$var $var".to_string()),
+            "var(--var) var(--var)"
+        );
+
+        assert_eq!(
+            convert_theme_variable_value(&"1px solid $red".to_string()),
+            "1px solid var(--red)"
+        );
     }
 
     #[test]