Impl split css

Author: owjs3901

.changeset/modern-kids-obey.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Optimize keyframe name

Cargo.lock

@@ -15,6 +15,8 @@ export default withMDX(
       pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
       output: 'export',
     },
-    { include: ['@devup-ui/components', '@devup-ui/reset-css'] },
+    {
+      include: ['@devup-ui/components', '@devup-ui/reset-css'],
+    },
   ),
 )

apps/landing/next.config.ts

@@ -1,4 +1,5 @@
 use css::class_map::{get_class_map, set_class_map};
+use css::file_map::{get_file_map, get_filename_by_file_num};
 use extractor::extract_style::ExtractStyleProperty;
 use extractor::extract_style::extract_style_value::ExtractStyleValue;
 use extractor::extract_style::style_property::StyleProperty;
@@ -18,6 +19,9 @@ pub struct Output {
     styles: HashSet<ExtractStyleValue>,
     map: Option<String>,
     default_collected: bool,
+    split_css: bool,
+    filename: String,
+    css_file: String,
 }
 #[wasm_bindgen]
 extern "C" {
@@ -39,6 +43,11 @@ impl Output {
         self.code.clone()
     }
 
+    #[wasm_bindgen(getter)]
+    pub fn css_file(&self) -> String {
+        self.css_file.clone()
+    }
+
     #[wasm_bindgen(getter)]
     pub fn map(&self) -> Option<String> {
         self.map.clone()
@@ -52,7 +61,11 @@ impl Output {
         for style in self.styles.iter() {
             match style {
                 ExtractStyleValue::Static(st) => {
-                    let (cls, _) = match style.extract() {
+                    let (cls, _) = match style.extract(if self.split_css {
+                        Some(self.filename.as_str())
+                    } else {
+                        None
+                    }) {
                         Some(StyleProperty::ClassName(cls)) => (cls, None),
                         Some(StyleProperty::Variable {
                             class_name,
@@ -68,12 +81,21 @@ impl Output {
                         st.value(),
                         st.selector(),
                         st.style_order(),
+                        if self.split_css {
+                            Some(self.filename.as_str())
+                        } else {
+                            None
+                        },
                     ) {
                         collected = true;
                     }
                 }
                 ExtractStyleValue::Dynamic(dy) => {
-                    let (cls, variable) = match style.extract() {
+                    let (cls, variable) = match style.extract(if self.split_css {
+                        Some(self.filename.as_str())
+                    } else {
+                        None
+                    }) {
                         Some(StyleProperty::ClassName(cls)) => (cls, None),
                         Some(StyleProperty::Variable {
                             class_name,
@@ -89,14 +111,25 @@ impl Output {
                         &format!("var({})", variable.unwrap()),
                         dy.selector(),
                         dy.style_order(),
+                        if self.split_css {
+                            Some(self.filename.as_str())
+                        } else {
+                            None
+                        },
                     ) {
                         collected = true;
                     }
                 }
 
                 ExtractStyleValue::Keyframes(keyframes) => {
                     if sheet.add_keyframes(
-                        &keyframes.extract().to_string(),
+                        &keyframes
+                            .extract(if self.split_css {
+                                Some(self.filename.as_str())
+                            } else {
+                                None
+                            })
+                            .to_string(),
                         keyframes
                             .keyframes
                             .iter()
@@ -115,6 +148,11 @@ impl Output {
                                 )
                             })
                             .collect(),
+                        if self.split_css {
+                            Some(self.filename.as_str())
+                        } else {
+                            None
+                        },
                     ) {
                         collected = true;
                     }
@@ -138,7 +176,11 @@ impl Output {
             return None;
         }
 
-        Some(sheet.create_css())
+        Some(sheet.create_css(if self.split_css {
+            Some(self.filename.as_str())
+        } else {
+            None
+        }))
     }
 }
 
@@ -179,12 +221,27 @@ pub fn export_class_map() -> Result<String, JsValue> {
     serde_json::to_string(&get_class_map()).map_err(|e| JsValue::from_str(e.to_string().as_str()))
 }
 
+#[wasm_bindgen(js_name = "importFileMap")]
+pub fn import_file_map(sheet_object: JsValue) -> Result<(), JsValue> {
+    set_class_map(
+        serde_wasm_bindgen::from_value(sheet_object)
+            .map_err(|e| JsValue::from_str(e.to_string().as_str()))?,
+    );
+    Ok(())
+}
+
+#[wasm_bindgen(js_name = "exportFileMap")]
+pub fn export_file_map() -> Result<String, JsValue> {
+    serde_json::to_string(&get_file_map()).map_err(|e| JsValue::from_str(e.to_string().as_str()))
+}
+
 #[wasm_bindgen(js_name = "codeExtract")]
 pub fn code_extract(
     filename: &str,
     code: &str,
     package: &str,
-    css_file: &str,
+    css_dir: String,
+    split_css: bool,
 ) -> Result<Output, JsValue> {
     let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
 
@@ -193,14 +250,18 @@ pub fn code_extract(
         code,
         ExtractOption {
             package: package.to_string(),
-            css_file: Some(css_file.to_string()),
+            css_dir,
+            split_css,
         },
     ) {
         Ok(output) => Ok(Output {
             code: output.code,
             styles: output.styles,
             map: output.map,
             default_collected: sheet.rm_global_css(filename),
+            split_css,
+            filename: filename.to_string(),
+            css_file: output.css_file,
         }),
         Err(error) => Err(JsValue::from_str(error.to_string().as_str())),
     }
@@ -222,9 +283,9 @@ pub fn get_default_theme() -> Result<Option<String>, JsValue> {
 }
 
 #[wasm_bindgen(js_name = "getCss")]
-pub fn get_css() -> Result<String, JsValue> {
+pub fn get_css(file_num: Option<usize>) -> Result<String, JsValue> {
     let sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
-    Ok(sheet.create_css())
+    Ok(sheet.create_css(file_num.map(|num| get_filename_by_file_num(num)).as_deref()))
 }
 
 #[wasm_bindgen(js_name = "getThemeInterface")]
@@ -259,7 +320,7 @@ mod tests {
             let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
             *sheet = StyleSheet::default();
         }
-        assert_eq!(get_css().unwrap(), "");
+        assert_eq!(get_css(None).unwrap(), "");
 
         {
             let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
@@ -274,7 +335,7 @@ mod tests {
             sheet.set_theme(theme);
         }
 
-        assert_debug_snapshot!(get_css().unwrap());
+        assert_debug_snapshot!(get_css(None).unwrap());
     }
 
     #[test]

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

@@ -9,6 +9,7 @@ phf = { version = "0.13", features = ["macros"] }
 serial_test = "3.2.0"
 serde = { version = "1.0.219", features = ["derive"] }
 regex = "1.11.2"
+bimap = { version = "0.6.3", features = ["serde"] }
 
 [dev-dependencies]
 rstest = "0.26.1"

libs/css/Cargo.toml

@@ -2,7 +2,7 @@ use std::{collections::HashMap, sync::Mutex};
 
 use once_cell::sync::Lazy;
 
-pub(crate) static GLOBAL_CLASS_MAP: Lazy<Mutex<HashMap<String, i32>>> =
+pub(crate) static GLOBAL_CLASS_MAP: Lazy<Mutex<HashMap<String, HashMap<String, usize>>>> =
     Lazy::new(|| Mutex::new(HashMap::new()));
 
 /// for test
@@ -11,12 +11,12 @@ pub fn reset_class_map() {
     map.clear();
 }
 
-pub fn set_class_map(map: HashMap<String, i32>) {
+pub fn set_class_map(map: HashMap<String, HashMap<String, usize>>) {
     let mut global_map = GLOBAL_CLASS_MAP.lock().unwrap();
     *global_map = map;
 }
 
-pub fn get_class_map() -> HashMap<String, i32> {
+pub fn get_class_map() -> HashMap<String, HashMap<String, usize>> {
     GLOBAL_CLASS_MAP.lock().unwrap().clone()
 }
 
@@ -30,17 +30,17 @@ mod tests {
     #[serial]
     fn test_set_and_get_class_map() {
         let mut test_map = HashMap::new();
-        test_map.insert("test-key".to_string(), 42);
+        test_map.insert("".to_string(), HashMap::new());
         set_class_map(test_map.clone());
         let got = get_class_map();
-        assert_eq!(got.get("test-key"), Some(&42));
+        assert_eq!(got.get(""), Some(&HashMap::new()));
     }
 
     #[test]
     #[serial]
     fn test_reset_class_map() {
         let mut test_map = HashMap::new();
-        test_map.insert("reset-key".to_string(), 1);
+        test_map.insert("".to_string(), HashMap::new());
         set_class_map(test_map);
         reset_class_map();
         let got = get_class_map();

libs/css/src/class_map.rs

@@ -168,7 +168,7 @@ pub(super) static N_BASE_ARRAY: [char; 27] = [
     't', 'u', 'v', 'w', 'x', 'y', 'z', '_',
 ];
 
-pub(super) static M_BASE_ARRAY: [char; 38] = [
+pub(super) static M_BASE_ARRAY: [char; 37] = [
     'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
-    't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '_',
+    't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '_',
 ];

libs/css/src/constant.rs

@@ -0,0 +1,68 @@
+use bimap::BiHashMap;
+use std::sync::Mutex;
+
+use once_cell::sync::Lazy;
+
+pub(crate) static GLOBAL_FILE_MAP: Lazy<Mutex<BiHashMap<String, usize>>> =
+    Lazy::new(|| Mutex::new(BiHashMap::new()));
+
+/// for test
+pub fn reset_file_map() {
+    let mut map = GLOBAL_FILE_MAP.lock().unwrap();
+    map.clear();
+}
+
+pub fn set_file_map(map: BiHashMap<String, usize>) {
+    let mut global_map = GLOBAL_FILE_MAP.lock().unwrap();
+    *global_map = map;
+}
+
+pub fn get_file_map() -> BiHashMap<String, usize> {
+    GLOBAL_FILE_MAP.lock().unwrap().clone()
+}
+
+pub fn get_file_num_by_filename(filename: &str) -> usize {
+    let mut map = GLOBAL_FILE_MAP.lock().unwrap();
+    let len = map.len();
+    if !map.contains_left(filename) {
+        map.insert(filename.to_string(), len as usize);
+    }
+    *map.get_by_left(filename).unwrap()
+}
+
+pub fn get_filename_by_file_num(file_num: usize) -> String {
+    let map = GLOBAL_FILE_MAP.lock().unwrap();
+    map.get_by_right(&file_num)
+        .map(|s| s.as_str())
+        .unwrap_or_default()
+        .to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use serial_test::serial;
+
+    use super::*;
+
+    #[test]
+    #[serial]
+    fn test_set_and_get_file_map() {
+        let mut test_map = BiHashMap::new();
+        test_map.insert("test-key".to_string(), 42);
+        set_file_map(test_map.clone());
+        let got = get_file_map();
+        assert_eq!(got.get_by_left("test-key"), Some(&42));
+        assert_eq!(got.get_by_right(&42), Some(&"test-key".to_string()));
+    }
+
+    #[test]
+    #[serial]
+    fn test_reset_file_map() {
+        let mut test_map = BiHashMap::new();
+        test_map.insert("reset-key".to_string(), 1);
+        set_file_map(test_map);
+        reset_file_map();
+        let got = get_file_map();
+        assert!(got.is_empty());
+    }
+}