Fix conditional style issue

Author: owjs3901

.changeset/sixty-wombats-sort.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix conditional style issue

libs/extractor/src/gen_style.rs

@@ -77,10 +77,59 @@ fn gen_style<'a>(
             (None, None) => {
                 return vec![];
             }
-            (Some(c), None) | (None, Some(c)) => {
-                gen_style(ast_builder, c)
-                    .into_iter()
-                    .for_each(|p| properties.push(p));
+            (None, Some(c)) => {
+                gen_style(ast_builder, c).into_iter().for_each(|p| {
+                    if let ObjectPropertyKind::ObjectProperty(p) = p {
+                        properties.push(ObjectPropertyKind::ObjectProperty(
+                            ast_builder.alloc_object_property(
+                                SPAN,
+                                PropertyKind::Init,
+                                p.key.clone_in(ast_builder.allocator),
+                                Expression::ConditionalExpression(
+                                    ast_builder.alloc_conditional_expression(
+                                        SPAN,
+                                        condition.clone_in(ast_builder.allocator),
+                                        Expression::Identifier(
+                                            ast_builder
+                                                .alloc_identifier_reference(SPAN, "undefined"),
+                                        ),
+                                        p.value.clone_in(ast_builder.allocator),
+                                    ),
+                                ),
+                                false,
+                                false,
+                                false,
+                            ),
+                        ))
+                    }
+                });
+            }
+            (Some(c), None) => {
+                gen_style(ast_builder, c).into_iter().for_each(|p| {
+                    if let ObjectPropertyKind::ObjectProperty(p) = p {
+                        properties.push(ObjectPropertyKind::ObjectProperty(
+                            ast_builder.alloc_object_property(
+                                SPAN,
+                                PropertyKind::Init,
+                                p.key.clone_in(ast_builder.allocator),
+                                Expression::ConditionalExpression(
+                                    ast_builder.alloc_conditional_expression(
+                                        SPAN,
+                                        condition.clone_in(ast_builder.allocator),
+                                        p.value.clone_in(ast_builder.allocator),
+                                        Expression::Identifier(
+                                            ast_builder
+                                                .alloc_identifier_reference(SPAN, "undefined"),
+                                        ),
+                                    ),
+                                ),
+                                false,
+                                false,
+                                false,
+                            ),
+                        ))
+                    }
+                });
             }
             (Some(c), Some(a)) => {
                 let collect_c = gen_style(ast_builder, c);

libs/extractor/src/lib.rs

@@ -655,6 +655,32 @@ mod tests {
             "test.tsx",
             r#"import { Box } from "@devup-ui/core";
 <Box margin={a === b ? undefined : 2} />;
+"#,
+            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 margin={a === b ? `${a}px` : undefined} />;
+"#,
+            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 margin={a === b ? null : `${b}px`} />;
 "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap

@@ -0,0 +1,17 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${a}px` : undefined} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${a}px`",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"d0\" : \"\"} style={{ \"--d1\": a === b ? `${a}px` : undefined }} />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap

@@ -0,0 +1,17 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? null : `${b}px`} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${b}px`",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"d0\"} style={{ \"--d1\": a === b ? undefined : `${b}px` }} />;\n",
+}

libs/extractor/src/style_extractor.rs

@@ -74,10 +74,6 @@ pub fn extract_style_from_expression<'a>(
     level: u8,
     selector: Option<&str>,
 ) -> ExtractResult<'a> {
-    println!(
-        "extract_style_from_expression: {:?} {:?} {:?}",
-        selector, name, expression
-    );
     let mut typo = false;
 
     if name.is_none() && selector.is_none() {
@@ -262,19 +258,7 @@ pub fn extract_style_from_expression<'a>(
         }
         typo = name == "typography";
     }
-    if let Some(value) = get_number_by_literal_expression(expression) {
-        name.map(|name| {
-            ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(Static(
-                ExtractStaticStyle::new(
-                    name,
-                    &value.to_string(),
-                    level,
-                    selector.map(|s| s.into()),
-                ),
-            ))])
-        })
-        .unwrap_or(ExtractResult::Maintain)
-    } else if let Some(value) = get_string_by_literal_expression(expression) {
+    if let Some(value) = get_string_by_literal_expression(expression) {
         name.map(|name| {
             ExtractResult::ExtractStyle(vec![ExtractStyleProp::Static(if typo {
                 Typography(value.as_str().to_string())