From 0bd2c42334ef27f0698670f400aace2ef75ad3b0 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Wed, 12 Mar 2025 10:06:16 +0900
Subject: [PATCH] Support TsAsExpression

---
 .changeset/some-adults-build.md               |  5 +++
 libs/extractor/src/lib.rs                     | 43 +++++++++++++++++++
 ...tract_dynamic_style_props_with_type-2.snap | 18 ++++++++
 ...tract_dynamic_style_props_with_type-3.snap | 18 ++++++++
 ...extract_dynamic_style_props_with_type.snap | 18 ++++++++
 libs/extractor/src/style_extractor.rs         |  8 ++++
 6 files changed, 110 insertions(+)
 create mode 100644 .changeset/some-adults-build.md
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap

diff --git a/.changeset/some-adults-build.md b/.changeset/some-adults-build.md
new file mode 100644
index 00000000..dcba3a48
--- /dev/null
+++ b/.changeset/some-adults-build.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Support TsAsExpression
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 17e004f1..e714f50f 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -540,6 +540,49 @@ mod tests {
         .unwrap());
     }
 
+    #[test]
+    #[serial]
+    fn extract_dynamic_style_props_with_type() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={a as A} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={data[d as A] as B} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={"10px" as B} />;
+"#,
+            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__extract_dynamic_style_props_with_type-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
new file mode 100644
index 00000000..19f5dcb9
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={data[d as A] as B} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "data[d as A]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": data[d as A] }} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
new file mode 100644
index 00000000..8f1a463e
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={\"10px\" as B} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "10px",
+                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__extract_dynamic_style_props_with_type.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
new file mode 100644
index 00000000..b6c0a300
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={a as A} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" style={{ \"--d1\": a }} />;\n",
+}
diff --git a/libs/extractor/src/style_extractor.rs b/libs/extractor/src/style_extractor.rs
index b7dea643..584df41b 100644
--- a/libs/extractor/src/style_extractor.rs
+++ b/libs/extractor/src/style_extractor.rs
@@ -72,6 +72,7 @@ pub fn extract_style_from_expression<'a>(
     level: u8,
     selector: Option<&StyleSelector>,
 ) -> ExtractResult<'a> {
+    println!("extract_style_from_expression: {:?}", expression);
     let mut typo = false;
 
     if name.is_none() && selector.is_none() {
@@ -342,6 +343,13 @@ pub fn extract_style_from_expression<'a>(
                 tag: None,
                 style_order: None,
             },
+            Expression::TSAsExpression(exp) => extract_style_from_expression(
+                ast_builder,
+                name,
+                &mut exp.expression,
+                level,
+                selector,
+            ),
             Expression::ComputedMemberExpression(mem) => {
                 extract_style_from_member_expression(ast_builder, name, mem, level, selector)
             }