From 02b7ad592c86ea41c533a50d79b1debbf579a432 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 02:41:36 +0900 Subject: [PATCH 1/2] Add aspect ratio --- .../src/extract_style/extract_static_style.rs | 17 ++++++- libs/extractor/src/lib.rs | 49 +++++++++++++++++++ ...actor__tests__optimize_aspect_ratio-2.snap | 29 +++++++++++ ...actor__tests__optimize_aspect_ratio-3.snap | 29 +++++++++++ ...tractor__tests__optimize_aspect_ratio.snap | 29 +++++++++++ libs/extractor/src/utils.rs | 4 ++ 6 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap create mode 100644 libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap diff --git a/libs/extractor/src/extract_style/extract_static_style.rs b/libs/extractor/src/extract_style/extract_static_style.rs index a062280c..acb53172 100644 --- a/libs/extractor/src/extract_style/extract_static_style.rs +++ b/libs/extractor/src/extract_style/extract_static_style.rs @@ -8,7 +8,7 @@ use crate::{ extract_style::{ ExtractStyleProperty, constant::MAINTAIN_VALUE_PROPERTIES, style_property::StyleProperty, }, - utils::convert_value, + utils::{convert_value, gcd}, }; #[derive(Debug, PartialEq, Clone, Eq, Hash, Ord, PartialOrd)] @@ -30,7 +30,20 @@ impl ExtractStaticStyle { pub fn new(property: &str, value: &str, level: u8, selector: Option) -> Self { Self { value: optimize_value(&if MAINTAIN_VALUE_PROPERTIES.contains(property) { - value.to_string() + if property == "aspect-ratio" && value.contains("/") { + if let [Ok(a), Ok(b)] = value + .split('/') + .map(|v| v.trim().parse::()) + .collect::>()[..] + { + let gcd = gcd(a, b); + format!("{}/{}", a / gcd, b / gcd) + } else { + value.to_string() + } + } else { + value.to_string() + } } else { convert_value(value) }), diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 2ee91b40..1afe1313 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -2962,6 +2962,55 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props }) )); } + #[test] + #[serial] + fn optimize_aspect_ratio() { + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.jsx", + r#"import {Flex} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap() + )); + + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.jsx", + r#"import {Flex} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap() + )); + + reset_class_map(); + assert_debug_snapshot!(ToBTreeSet::from( + extract( + "test.jsx", + r#"import {Flex} from '@devup-ui/core' + + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap() + )); + } + #[test] #[serial] fn ternary_operator_in_selector() { diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap new file mode 100644 index 00000000..f0f942c2 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap @@ -0,0 +1,29 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())" +--- +ToBTreeSet { + styles: { + Static( + ExtractStaticStyle { + property: "aspect-ratio", + value: "1/2", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "display", + value: "flex", + level: 0, + selector: None, + style_order: Some( + 0, + ), + }, + ), + }, + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap new file mode 100644 index 00000000..85bb0fe9 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap @@ -0,0 +1,29 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())" +--- +ToBTreeSet { + styles: { + Static( + ExtractStaticStyle { + property: "aspect-ratio", + value: "200.2 / 400.2", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "display", + value: "flex", + level: 0, + selector: None, + style_order: Some( + 0, + ), + }, + ), + }, + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap new file mode 100644 index 00000000..8873e66f --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap @@ -0,0 +1,29 @@ +--- +source: libs/extractor/src/lib.rs +expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n \n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())" +--- +ToBTreeSet { + styles: { + Static( + ExtractStaticStyle { + property: "aspect-ratio", + value: "1/2", + level: 0, + selector: None, + style_order: None, + }, + ), + Static( + ExtractStaticStyle { + property: "display", + value: "flex", + level: 0, + selector: None, + style_order: Some( + 0, + ), + }, + ), + }, + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", +} diff --git a/libs/extractor/src/utils.rs b/libs/extractor/src/utils.rs index 688af976..0852775e 100644 --- a/libs/extractor/src/utils.rs +++ b/libs/extractor/src/utils.rs @@ -110,6 +110,10 @@ pub(super) fn get_string_by_literal_expression(expr: &Expression) -> Option u32 { + if b == 0 { a } else { gcd(b, a % b) } +} + #[cfg(test)] mod tests { use oxc_allocator::Vec; From c1c4f52668d0c15209fc8166d4e44ab03be71b75 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 3 Aug 2025 02:42:51 +0900 Subject: [PATCH 2/2] Add aspect ratio --- .changeset/grumpy-heads-thank.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-heads-thank.md diff --git a/.changeset/grumpy-heads-thank.md b/.changeset/grumpy-heads-thank.md new file mode 100644 index 00000000..f751e70d --- /dev/null +++ b/.changeset/grumpy-heads-thank.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Optimize aspect-ratio by gcd