Merge pull request #13 from dev-five-git/minify-css-add-grid

Minify css

Author: owjs3901

.changeset/cyan-houses-visit.md

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

.changeset/mean-zebras-raise.md

@@ -0,0 +1,9 @@
+---
+"@devup-ui/webpack-plugin": patch
+"@devup-ui/wasm": patch
+"@devup-ui/next-plugin": patch
+"@devup-ui/vite-plugin": patch
+"@devup-ui/react": patch
+---
+
+Update package

bindings/devup-ui-wasm/package.json

@@ -1,6 +1,13 @@
 {
   "name": "@devup-ui/wasm",
   "version": "0.1.4",
+  "scripts": {
+    "build": "wasm-pack build --target nodejs --out-dir ./pkg --out-name index",
+    "test": "wasm-pack test --node"
+  },
+  "sideEffects": false,
+  "main": "./pkg/index.js",
+  "module": "./pkg/index.js",
   "keywords": [
     "react",
     "css-in-js",
@@ -22,9 +29,5 @@
       "types": "./pkg/index.d.ts"
     }
   },
-  "types": "./pkg/index.d.ts",
-  "scripts": {
-    "build": "wasm-pack build --target nodejs --out-dir ./pkg --out-name index",
-    "test": "wasm-pack test --node"
-  }
+  "types": "./pkg/index.d.ts"
 }

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",
 }

packages/next-plugin/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@devup-ui/next-plugin",
-  "version": "0.1.6",
   "type": "module",
-  "dependencies": {
-    "@devup-ui/webpack-plugin": "workspace:*",
-    "next": "^15.1"
-  },
+  "version": "0.1.6",
   "scripts": {
     "lint": "eslint",
     "build": "tsc && vite build"
   },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -20,6 +19,10 @@
     "dist"
   ],
   "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@devup-ui/webpack-plugin": "workspace:*",
+    "next": "^15.1"
+  },
   "devDependencies": {
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",

packages/react/package.json

@@ -2,14 +2,13 @@
   "name": "@devup-ui/react",
   "version": "0.1.1",
   "type": "module",
-  "dependencies": {
-    "react": "^19.0",
-    "csstype": "^3.1"
-  },
   "scripts": {
     "lint": "eslint",
     "build": "vite build"
   },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -20,6 +19,10 @@
     "dist"
   ],
   "types": "./dist/index.d.ts",
+  "dependencies": {
+    "react": "^19.0",
+    "csstype": "^3.1"
+  },
   "devDependencies": {
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",

packages/vite-plugin/package.json

@@ -6,13 +6,10 @@
     "lint": "eslint",
     "build": "tsc && vite build"
   },
-  "dependencies": {
-    "@devup-ui/wasm": "workspace:*"
-  },
-  "devDependencies": {
-    "vite-plugin-dts": "^4.5.0",
-    "typescript": "^5.7.2"
-  },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -22,7 +19,13 @@
   "files": [
     "dist"
   ],
-  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@devup-ui/wasm": "workspace:*"
+  },
+  "devDependencies": {
+    "vite-plugin-dts": "^4.5.0",
+    "typescript": "^5.7.2"
+  },
   "peerDependencies": {
     "vite": "*"
   }