From b9b94c5373b7179992ab51579ea36285c0a0336b Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Thu, 16 Jan 2025 10:05:28 +0900 Subject: [PATCH 1/2] Minify css Add Grid --- .changeset/cyan-houses-visit.md | 5 ++++ libs/css/src/lib.rs | 9 ++++++++ libs/extractor/src/component.rs | 23 +++++++++++++++++++ libs/extractor/src/lib.rs | 10 ++------ ...__extract_static_css_class_name_props.snap | 2 +- 5 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 .changeset/cyan-houses-visit.md diff --git a/.changeset/cyan-houses-visit.md b/.changeset/cyan-houses-visit.md new file mode 100644 index 00000000..7ed7753f --- /dev/null +++ b/.changeset/cyan-houses-visit.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Add grid, minify css diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs index d127017d..b8744b66 100644 --- a/libs/css/src/lib.rs +++ b/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(); diff --git a/libs/extractor/src/component.rs b/libs/extractor/src/component.rs index ccdbeeab..1b5fc11d 100644 --- a/libs/extractor/src/component.rs +++ b/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 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, + })] + ); } } diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 0dbe4b71..bbc2a267 100644 --- a/libs/extractor/src/lib.rs +++ b/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", diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap index a7c932f9..ffcff171 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n;\n", } From 242a6c21bc25273b37ff546ea7d38b564adee631 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Thu, 16 Jan 2025 10:23:54 +0900 Subject: [PATCH 2/2] Update package --- .changeset/mean-zebras-raise.md | 9 +++++++++ bindings/devup-ui-wasm/package.json | 13 ++++++++----- packages/next-plugin/package.json | 13 ++++++++----- packages/react/package.json | 11 +++++++---- packages/vite-plugin/package.json | 19 +++++++++++-------- packages/webpack-plugin/package.json | 11 +++++++---- 6 files changed, 50 insertions(+), 26 deletions(-) create mode 100644 .changeset/mean-zebras-raise.md diff --git a/.changeset/mean-zebras-raise.md b/.changeset/mean-zebras-raise.md new file mode 100644 index 00000000..8d09d480 --- /dev/null +++ b/.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 diff --git a/bindings/devup-ui-wasm/package.json b/bindings/devup-ui-wasm/package.json index dd8e4ca6..f433393c 100644 --- a/bindings/devup-ui-wasm/package.json +++ b/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" } diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json index 0e7ef7ff..6706cd2a 100644 --- a/packages/next-plugin/package.json +++ b/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", diff --git a/packages/react/package.json b/packages/react/package.json index ae497118..808ddc7b 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index e35d0217..776365c5 100644 --- a/packages/vite-plugin/package.json +++ b/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": "*" } diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 0ffe8489..05e5b23b 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -6,9 +6,10 @@ "lint": "eslint", "build": "tsc && vite build" }, - "dependencies": { - "@devup-ui/wasm": "workspace:*" - }, + "sideEffects": false, + "main": "./dist/index.cjs", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", "exports": { ".": { "import": "./dist/index.js", @@ -22,7 +23,9 @@ "files": [ "dist" ], - "types": "./dist/index.d.ts", + "dependencies": { + "@devup-ui/wasm": "workspace:*" + }, "devDependencies": { "vite": "^6.0.7", "@types/webpack": "^5.28.5",