Impl fontFaces to globalCss

Author: owjs3901

.changeset/wet-fans-add.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/wasm": patch
+"@devup-ui/react": patch
+---
+
+Impl font-faces to global

Cargo.lock

@@ -128,6 +128,9 @@ impl Output {
                 ExtractStyleValue::Import(st) => {
                     sheet.add_import(&st.file, &st.url);
                 }
+                ExtractStyleValue::FontFace(font) => {
+                    sheet.add_font_face(&font.file, &font.properties);
+                }
             }
         }
 

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

@@ -69,6 +69,12 @@ pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! {
     "objectPos" => &["object-position"],
     "offsetPos" => &["offset-position"],
 };
+pub(super) static OPTIMIZE_MULTI_CSS_VALUE_PROPERTY: phf::Set<&str> = phf_set! {
+    "font-family",
+    "src",
+    "content",
+    "animation-name",
+};
 
 pub(super) static DOUBLE_SEPARATOR: phf::Set<&str> = phf_set! {
     "after",

libs/css/src/constant.rs

@@ -2,6 +2,7 @@ pub mod class_map;
 mod constant;
 pub mod debug;
 pub mod is_special_property;
+pub mod optimize_multi_css_value;
 pub mod optimize_value;
 pub mod rm_css_comment;
 mod selector_separator;

libs/css/src/lib.rs

@@ -0,0 +1,69 @@
+use crate::constant::OPTIMIZE_MULTI_CSS_VALUE_PROPERTY;
+
+pub fn optimize_mutli_css_value(value: &str) -> String {
+    value
+        .split(",")
+        .map(|s| {
+            let s = s.trim();
+            let s = if s.starts_with("'") && s.ends_with("'")
+                || s.starts_with('"') && s.ends_with('"')
+            {
+                s[1..s.len() - 1].to_string()
+            } else {
+                s.to_string()
+            };
+            if s.contains(" ") {
+                format!("\"{s}\"")
+            } else {
+                s
+            }
+        })
+        .collect::<Vec<_>>()
+        .join(",")
+}
+
+pub fn check_multi_css_optimize(property: &str) -> bool {
+    OPTIMIZE_MULTI_CSS_VALUE_PROPERTY.contains(property)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    use rstest::rstest;
+
+    #[rstest]
+    #[case("Roboto, sans-serif", "Roboto,sans-serif")]
+    #[case("'Roboto', sans-serif", "Roboto,sans-serif")]
+    #[case("\"Roboto\", sans-serif", "Roboto,sans-serif")]
+    #[case("'Roboto Hello', sans-serif", "\"Roboto Hello\",sans-serif")]
+    #[case("\"Roboto Hello\", sans-serif", "\"Roboto Hello\",sans-serif")]
+    #[case("Roboto", "Roboto")]
+    #[case("'Roboto'", "Roboto")]
+    #[case("\"Roboto\"", "Roboto")]
+    #[case("url('/fonts/Roboto-Regular.ttf')", "url('/fonts/Roboto-Regular.ttf')")]
+    #[case(
+        "url(\"/fonts/Roboto-Regular.ttf\")",
+        "url(\"/fonts/Roboto-Regular.ttf\")"
+    )]
+    #[case("'A B', 'C D', E", "\"A B\",\"C D\",E")]
+    #[case("A,B,C", "A,B,C")]
+    #[case("A, B, C", "A,B,C")]
+    #[case("'A', 'B', 'C'", "A,B,C")]
+    #[case("\"A\", \"B\", \"C\"", "A,B,C")]
+    fn test_optimize_mutli_css_value(#[case] input: &str, #[case] expected: &str) {
+        assert_eq!(optimize_mutli_css_value(input), expected);
+    }
+
+    #[rstest]
+    #[case("font-family", true)]
+    #[case("src", true)]
+    #[case("content", true)]
+    #[case("animation-name", true)]
+    #[case("background", false)]
+    #[case("color", false)]
+    #[case("margin", false)]
+    fn test_check_multi_css_optimize(#[case] property: &str, #[case] expected: bool) {
+        assert_eq!(check_multi_css_optimize(property), expected);
+    }
+}

libs/css/src/optimize_multi_css_value.rs

@@ -7,6 +7,7 @@ pub fn rm_css_comment(value: &str) -> String {
         .split_ascii_whitespace()
         .collect::<Vec<&str>>()
         .join(" ")
+        .replace(", ", ",")
 }
 
 #[cfg(test)]

libs/css/src/rm_css_comment.rs

@@ -4,13 +4,13 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-oxc_parser = "0.79.1"
-oxc_syntax = "0.79.1"
-oxc_span = "0.79.1"
-oxc_allocator = "0.79.1"
-oxc_ast = "0.79.1"
-oxc_ast_visit = "0.79.1"
-oxc_codegen = "0.79.1"
+oxc_parser = "0.80.0"
+oxc_syntax = "0.80.0"
+oxc_span = "0.80.0"
+oxc_allocator = "0.80.0"
+oxc_ast = "0.80.0"
+oxc_ast_visit = "0.80.0"
+oxc_codegen = "0.80.0"
 css = { path = "../css" }
 phf = "0.12"
 strum = "0.27.2"

libs/extractor/Cargo.toml

@@ -1,6 +1,10 @@
 use std::collections::BTreeMap;
 
-use css::{rm_css_comment::rm_css_comment, style_selector::StyleSelector};
+use css::{
+    optimize_multi_css_value::{check_multi_css_optimize, optimize_mutli_css_value},
+    rm_css_comment::rm_css_comment,
+    style_selector::StyleSelector,
+};
 
 use crate::{
     ExtractStyleProp,
@@ -107,8 +111,13 @@ fn css_to_style_block<'a>(
                 let mut iter = s.split(":").map(|s| s.trim());
                 let property = iter.next().unwrap();
                 let value = iter.next().unwrap();
+                let value = if check_multi_css_optimize(property) {
+                    optimize_mutli_css_value(value)
+                } else {
+                    value.to_string()
+                };
                 Some(ExtractStyleProp::Static(ExtractStyleValue::Static(
-                    ExtractStaticStyle::new(property, value, level, selector.clone()),
+                    ExtractStaticStyle::new(property, &value, level, selector.clone()),
                 )))
             }
         })
@@ -164,6 +173,11 @@ pub fn optimize_css_block(css: &str) -> String {
                 let mut iter = s.split(":");
                 let property = iter.next().unwrap().trim();
                 let value = iter.next().unwrap().trim();
+                let value = if check_multi_css_optimize(property.split("{").last().unwrap()) {
+                    optimize_mutli_css_value(value)
+                } else {
+                    value.to_string()
+                };
                 format!("{property}:{value}")
             }
         })
@@ -219,6 +233,14 @@ mod tests {
         "ul { list-style : none ; margin : 0 ; padding : 0 ; }",
         "ul{list-style:none;margin:0;padding:0}"
     )]
+    #[case(
+        "ul { font-family: 'Roboto',       sans-serif; }",
+        "ul{font-family:Roboto,sans-serif}"
+    )]
+    #[case(
+        "ul { font-family: \"Roboto Hello\",       sans-serif; }",
+        "ul{font-family:\"Roboto Hello\",sans-serif}"
+    )]
     #[case("section{  }", "section{}")]
     fn test_optimize_css_block(#[case] input: &str, #[case] expected: &str) {
         assert_eq!(optimize_css_block(input), expected);
@@ -456,6 +478,12 @@ mod tests {
         }",
         vec![]
     )]
+    #[case(
+        "ul { font-family: 'Roboto Hello',       sans-serif; }",
+        vec![
+            ("font-family", "\"Roboto Hello\",sans-serif", Some(StyleSelector::Selector("ul".to_string()))),
+        ]
+    )]
     fn test_css_to_style(
         #[case] input: &str,
         #[case] expected: Vec<(&str, &str, Option<StyleSelector>)>,

libs/extractor/src/css_utils.rs

@@ -0,0 +1,7 @@
+use std::collections::BTreeMap;
+
+#[derive(Debug, PartialEq, Clone, Eq, Hash, Ord, PartialOrd)]
+pub struct ExtractFontFace {
+    pub file: String,
+    pub properties: BTreeMap<String, String>,
+}