From 4e4bcf1f41fc1764d8201728305659a3f511dce9 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Tue, 1 Jul 2025 22:24:26 +0900
Subject: [PATCH] Optimize dynamic value

---
 .changeset/four-glasses-tickle.md             |  5 ++
 libs/css/src/lib.rs                           | 32 ++++++++
 libs/extractor/src/extract_style/mod.rs       |  2 +-
 libs/extractor/src/lib.rs                     | 79 +++++++++++++++++++
 .../extractor__tests__remove_semicolon-2.snap | 18 +++++
 .../extractor__tests__remove_semicolon-3.snap | 18 +++++
 .../extractor__tests__remove_semicolon-4.snap | 18 +++++
 .../extractor__tests__remove_semicolon-5.snap | 18 +++++
 .../extractor__tests__remove_semicolon.snap   | 18 +++++
 9 files changed, 207 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/four-glasses-tickle.md
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap

diff --git a/.changeset/four-glasses-tickle.md b/.changeset/four-glasses-tickle.md
new file mode 100644
index 00000000..a1470ebe
--- /dev/null
+++ b/.changeset/four-glasses-tickle.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Apply optimize_value to dynamic value, remove semicolon on optimize_value
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
index b1acdc44..54fb9d20 100644
--- a/libs/css/src/lib.rs
+++ b/libs/css/src/lib.rs
@@ -375,6 +375,22 @@ pub fn optimize_value(value: &str) -> String {
     if ret.contains("0") {
         ret = ZERO_RE.replace_all(&ret, "${1}0").to_string();
     }
+    // remove ; from dynamic value
+    for str_symbol in ["", "`", "\"", "'"] {
+        if ret.ends_with(&format!(";{}", str_symbol)) {
+            ret = format!(
+                "{}{}",
+                ret[..ret.len() - str_symbol.len() - 1].trim_end_matches(';'),
+                str_symbol
+            );
+        } else if ret.ends_with(&format!(";{})", str_symbol)) {
+            ret = format!(
+                "{}{})",
+                ret[..ret.len() - str_symbol.len() - 2].trim_end_matches(';'),
+                str_symbol
+            );
+        }
+    }
     ret
 }
 
@@ -534,12 +550,24 @@ mod tests {
         assert_eq!(optimize_value("-0vw -0vw"), "0 0");
         assert_eq!(optimize_value("scale(0px)"), "scale(0)");
         assert_eq!(optimize_value("scale(-0px)"), "scale(0)");
+        assert_eq!(optimize_value("scale(-0px);"), "scale(0)");
+        assert_eq!(optimize_value("red;"), "red");
         assert_eq!(optimize_value("translate(0px)"), "translate(0)");
         assert_eq!(optimize_value("translate(-0px,0px)"), "translate(0,0)");
         assert_eq!(optimize_value("translate(-0px, 0px)"), "translate(0,0)");
         assert_eq!(optimize_value("translate(0px, 0px)"), "translate(0,0)");
         assert_eq!(optimize_value("translate(0px, 0px)"), "translate(0,0)");
         assert_eq!(optimize_value("translate(10px, 0px)"), "translate(10px,0)");
+        assert_eq!(optimize_value("\"red\""), "\"red\"");
+        assert_eq!(optimize_value("'red'"), "'red'");
+        assert_eq!(optimize_value("`red`"), "`red`");
+        assert_eq!(optimize_value("\"red;\""), "\"red\"");
+        assert_eq!(optimize_value("'red;'"), "'red'");
+        assert_eq!(optimize_value("`red;`"), "`red`");
+        assert_eq!(optimize_value("(\"red;\")"), "(\"red\")");
+        assert_eq!(optimize_value("(`red;`)"), "(`red`)");
+        assert_eq!(optimize_value("('red;')"), "('red')");
+        assert_eq!(optimize_value("('red') + 'blue;'"), "('red') + 'blue'");
         assert_eq!(
             optimize_value("translateX(0px) translateY(0px)"),
             "translateX(0) translateY(0)"
@@ -578,6 +606,10 @@ mod tests {
             sheet_to_classname("background", 0, Some("red"), None, None),
             sheet_to_classname("  background  ", 0, Some("  red  "), None, None),
         );
+        assert_eq!(
+            sheet_to_classname("background", 0, Some("red"), None, None),
+            sheet_to_classname("  background  ", 0, Some("red;"), None, None),
+        );
         assert_eq!(
             sheet_to_classname("background", 0, Some("rgba(255, 0, 0,    0.5)"), None, None),
             sheet_to_classname("background", 0, Some("rgba(255,0,0,0.5)"), None, None),
diff --git a/libs/extractor/src/extract_style/mod.rs b/libs/extractor/src/extract_style/mod.rs
index 51ab3d14..d001aa2d 100644
--- a/libs/extractor/src/extract_style/mod.rs
+++ b/libs/extractor/src/extract_style/mod.rs
@@ -158,7 +158,7 @@ impl ExtractDynamicStyle {
         Self {
             property: short_to_long(property),
             level,
-            identifier: identifier.to_string(),
+            identifier: optimize_value(identifier),
             selector,
             style_order: None,
         }
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 1a1abf11..faa0ca94 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -735,6 +735,85 @@ mod tests {
         ));
     }
 
+    #[test]
+    #[serial]
+    fn remove_semicolon() {
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box } from "@devup-ui/core";
+<Box bg="red;" />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box } from "@devup-ui/core";
+<Box bg="blue;;" />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box } from "@devup-ui/core";
+<Box bg={`${"green;"}`} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box } from "@devup-ui/core";
+<Box bg={`${color};`} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import { Box } from "@devup-ui/core";
+<Box bg={`${color}` + ";"} />
+"#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     #[test]
     #[serial]
     fn extract_dynamic_responsive_style_props() {
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
new file mode 100644
index 00000000..8afd571c
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg=\"blue;;\" />\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
new file mode 100644
index 00000000..65e9157a
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${\"green;\"}`} />\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
new file mode 100644
index 00000000..c5503d21
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${color};`} />\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${color}`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": `${color}` }} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap
new file mode 100644
index 00000000..d4fda619
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${color}` + \";\"} />\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${color}` + \"\"",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": `${color}` + \"\" }} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
new file mode 100644
index 00000000..94dfe5fb
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg=\"red;\" />\n\"#, ExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}