Merge pull request #281 from dev-five-git/optimize-aspect-ratio

Add aspect ratio

Author: owjs3901

.changeset/grumpy-heads-thank.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Optimize aspect-ratio by gcd

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<StyleSelector>) -> 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::<u32>())
+                        .collect::<Vec<_>>()[..]
+                    {
+                        let gcd = gcd(a, b);
+                        format!("{}/{}", a / gcd, b / gcd)
+                    } else {
+                        value.to_string()
+                    }
+                } else {
+                    value.to_string()
+                }
             } else {
                 convert_value(value)
             }),

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'
+        <Flex aspectRatio={"200/400"} />
+        "#,
+                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'
+        <Flex aspectRatio={"   200  /  400  "} />
+        "#,
+                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'
+        <Flex aspectRatio={"   200.2  /  400.2  "} />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     #[test]
     #[serial]
     fn ternary_operator_in_selector() {

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        <Flex aspectRatio={\"   200  /  400  \"} />\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<div className=\"d0 d1\" />;\n",
+}

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        <Flex aspectRatio={\"   200.2  /  400.2  \"} />\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<div className=\"d0 d1\" />;\n",
+}

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        <Flex aspectRatio={\"200/400\"} />\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<div className=\"d0 d1\" />;\n",
+}

libs/extractor/src/utils.rs

@@ -110,6 +110,10 @@ pub(super) fn get_string_by_literal_expression(expr: &Expression) -> Option<Stri
         })
 }
 
+pub fn gcd(a: u32, b: u32) -> u32 {
+    if b == 0 { a } else { gcd(b, a % b) }
+}
+
 #[cfg(test)]
 mod tests {
     use oxc_allocator::Vec;