Minify css

Add Grid

Author: owjs3901

.changeset/cyan-houses-visit.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add grid, minify css

libs/css/src/lib.rs

@@ -123,6 +123,15 @@ pub fn sheet_to_classname(
     })
 }
 
+pub fn css_to_classname(css: &str) -> String {
+    let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
+    map.get(css).map(|v| format!("d{}", v)).unwrap_or_else(|| {
+        let len = map.len();
+        map.insert(css.to_string(), len as i32);
+        format!("d{}", map.len() - 1)
+    })
+}
+
 pub fn sheet_to_variable_name(property: &str, level: u8, selector: Option<&str>) -> String {
     let key = format!("{}-{}-{}", property, level, selector.unwrap_or(""));
     let mut map = GLOBAL_CLASS_MAP.lock().unwrap();

libs/extractor/src/component.rs

@@ -12,6 +12,7 @@ pub enum ExportVariableKind {
     VStack,
     Center,
     Image,
+    Grid,
 }
 
 impl ExportVariableKind {
@@ -20,6 +21,7 @@ impl ExportVariableKind {
         match self {
             ExportVariableKind::Center
             | ExportVariableKind::VStack
+            | ExportVariableKind::Grid
             | ExportVariableKind::Flex
             | ExportVariableKind::Box => Ok("div"),
             ExportVariableKind::Text => Ok("span"),
@@ -82,6 +84,12 @@ impl ExportVariableKind {
                     }),
                 ]
             }
+            ExportVariableKind::Grid => vec![Static(ExtractStaticStyle {
+                value: "grid".to_string(),
+                property: "display".to_string(),
+                level: 0,
+                selector: None,
+            })],
         }
     }
 }
@@ -99,6 +107,7 @@ impl TryFrom<String> for ExportVariableKind {
             "Flex" => Ok(ExportVariableKind::Flex),
             "VStack" => Ok(ExportVariableKind::VStack),
             "Center" => Ok(ExportVariableKind::Center),
+            "Grid" => Ok(ExportVariableKind::Grid),
             _ => Err(()),
         }
     }
@@ -142,6 +151,10 @@ mod tests {
             ExportVariableKind::try_from("Center".to_string()),
             Ok(ExportVariableKind::Center)
         );
+        assert_eq!(
+            ExportVariableKind::try_from("Grid".to_string()),
+            Ok(ExportVariableKind::Grid)
+        );
         assert!(ExportVariableKind::try_from("css".to_string()).is_err());
         assert!(ExportVariableKind::try_from("foo".to_string()).is_err());
     }
@@ -156,6 +169,7 @@ mod tests {
         assert_eq!(ExportVariableKind::Flex.to_tag(), Ok("div"));
         assert_eq!(ExportVariableKind::VStack.to_tag(), Ok("div"));
         assert_eq!(ExportVariableKind::Center.to_tag(), Ok("div"));
+        assert_eq!(ExportVariableKind::Grid.to_tag(), Ok("div"));
     }
 
     #[test]
@@ -214,5 +228,14 @@ mod tests {
                 })
             ]
         );
+        assert_eq!(
+            ExportVariableKind::Grid.extract(),
+            vec![Static(ExtractStaticStyle {
+                value: "grid".to_string(),
+                property: "display".to_string(),
+                level: 0,
+                selector: None,
+            })]
+        );
     }
 }

libs/extractor/src/lib.rs

@@ -11,14 +11,13 @@ use oxc_codegen::Codegen;
 
 use crate::utils::convert_value;
 use crate::visit::DevupVisitor;
-use css::{sheet_to_classname, sheet_to_variable_name};
+use css::{css_to_classname, sheet_to_classname, sheet_to_variable_name};
 use oxc_allocator::Allocator;
 use oxc_ast::ast::Expression;
 use oxc_ast::VisitMut;
 use oxc_parser::{Parser, ParserReturn};
 use oxc_span::SourceType;
 use std::error::Error;
-use std::hash::{DefaultHasher, Hasher};
 
 /// result of extracting style properties from props
 #[derive(Debug)]
@@ -109,9 +108,7 @@ pub struct ExtractCss {
 impl ExtractStyleProperty for ExtractCss {
     /// hashing css code to class name
     fn extract(&self) -> StyleProperty {
-        let mut hasher = DefaultHasher::new();
-        hasher.write(self.css.as_bytes());
-        StyleProperty::ClassName(format!("d{}", hasher.finish()))
+        StyleProperty::ClassName(css_to_classname(self.css.as_str()))
     }
 }
 
@@ -234,7 +231,6 @@ mod tests {
     use css::reset_class_map;
     use insta::assert_debug_snapshot;
     use serial_test::serial;
-    use std::hash::{DefaultHasher, Hasher};
 
     #[test]
     #[serial]
@@ -842,8 +838,6 @@ mod tests {
     #[test]
     #[serial]
     fn extract_static_css_class_name_props() {
-        let mut hasher = DefaultHasher::new();
-        hasher.write("background-color: red;".as_bytes());
         reset_class_map();
         assert_debug_snapshot!(extract(
             "test.tsx",

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap

@@ -10,5 +10,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css`d10128267434031712411`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css`d0`} />;\n",
 }