diff --git a/.changeset/dull-eyes-eat.md b/.changeset/dull-eyes-eat.md
new file mode 100644
index 00000000..f75dea4e
--- /dev/null
+++ b/.changeset/dull-eyes-eat.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Refactor classname
diff --git a/libs/extractor/src/gen_class_name.rs b/libs/extractor/src/gen_class_name.rs
index 0c3183a1..72356f69 100644
--- a/libs/extractor/src/gen_class_name.rs
+++ b/libs/extractor/src/gen_class_name.rs
@@ -1,9 +1,10 @@
+use crate::prop_modify_utils::convert_class_name;
 use crate::{ExtractStyleProp, StyleProperty};
 use oxc_allocator::CloneIn;
 use oxc_ast::AstBuilder;
 use oxc_ast::ast::{
-    Expression, ObjectPropertyKind, PropertyKey,
-    PropertyKind, TemplateElement, TemplateElementValue,
+    Expression, PropertyKey, PropertyKind, TemplateElement,
+    TemplateElementValue,
 };
 use oxc_span::SPAN;
 
@@ -34,14 +35,14 @@ fn gen_class_name<'a>(
             }
             let target = st.extract();
 
-            Some(Expression::StringLiteral(ast_builder.alloc_string_literal(
+            Some(ast_builder.expression_string_literal(
                 SPAN,
                 ast_builder.atom(match &target {
                     StyleProperty::ClassName(cls) => cls,
                     StyleProperty::Variable { class_name, .. } => class_name,
                 }),
                 None,
-            )))
+            ))
         }
         ExtractStyleProp::StaticArray(res) => merge_expression_for_class_name(
             ast_builder,
@@ -58,59 +59,60 @@ fn gen_class_name<'a>(
             let consequent = consequent
                 .as_mut()
                 .and_then(|ref mut con| gen_class_name(ast_builder, con.as_mut(), style_order))
-                .unwrap_or_else(|| {
-                    Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None))
-                });
+                .unwrap_or_else(|| ast_builder.expression_string_literal(SPAN, "", None));
 
             let alternate = alternate
                 .as_mut()
                 .and_then(|ref mut alt| gen_class_name(ast_builder, alt, style_order))
-                .unwrap_or_else(|| {
-                    Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None))
-                });
+                .unwrap_or_else(|| ast_builder.expression_string_literal(SPAN, "", None));
             if is_same_expression(&consequent, &alternate) {
                 Some(consequent)
             } else {
-                Some(Expression::ConditionalExpression(
-                    ast_builder.alloc_conditional_expression(
-                        SPAN,
-                        condition.clone_in(ast_builder.allocator),
-                        consequent,
-                        alternate,
-                    ),
+                Some(ast_builder.expression_conditional(
+                    SPAN,
+                    condition.clone_in(ast_builder.allocator),
+                    consequent,
+                    alternate,
                 ))
             }
         }
         ExtractStyleProp::Expression { expression, .. } => {
             Some(expression.clone_in(ast_builder.allocator))
         }
-        ExtractStyleProp::MemberExpression { map, expression } => Some(
-            Expression::ComputedMemberExpression(ast_builder.alloc_computed_member_expression(
-                SPAN,
-                Expression::ObjectExpression(ast_builder.alloc_object_expression(
+        // direct select
+        ExtractStyleProp::MemberExpression { map, expression } => {
+            let exp =
+                Expression::ComputedMemberExpression(ast_builder.alloc_computed_member_expression(
                     SPAN,
-                    ast_builder.vec_from_iter(map.iter_mut().filter_map(|(key, value)| {
-                        gen_class_name(ast_builder, value.as_mut(), style_order).map(|expr| {
-                            ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property(
-                                SPAN,
-                                PropertyKind::Init,
-                                PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
+                    ast_builder.expression_object(
+                        SPAN,
+                        ast_builder.vec_from_iter(map.iter_mut().filter_map(|(key, value)| {
+                            gen_class_name(ast_builder, value.as_mut(), style_order).map(|expr| {
+                                ast_builder.object_property_kind_object_property(
                                     SPAN,
-                                    ast_builder.atom(key),
-                                    None,
-                                )),
-                                expr,
-                                false,
-                                false,
-                                false,
-                            ))
-                        })
-                    })),
-                )),
-                expression.clone_in(ast_builder.allocator),
-                false,
-            )),
-        ),
+                                    PropertyKind::Init,
+                                    PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
+                                        SPAN,
+                                        ast_builder.atom(key),
+                                        None,
+                                    )),
+                                    expr,
+                                    false,
+                                    false,
+                                    false,
+                                )
+                            })
+                        })),
+                    ),
+                    expression.clone_in(ast_builder.allocator),
+                    false,
+                ));
+            if let Expression::Identifier(_) = &expression {
+                Some(convert_class_name(ast_builder, &exp))
+            } else {
+                Some(exp)
+            }
+        }
     }
 }
 fn is_same_expression<'a>(a: &Expression<'a>, b: &Expression<'a>) -> bool {
@@ -196,21 +198,15 @@ pub fn merge_expression_for_class_name<'a>(
                 }
             }
 
-            Some(Expression::TemplateLiteral(
-                ast_builder.alloc_template_literal(
-                    SPAN,
-                    qu,
-                    oxc_allocator::Vec::from_iter_in(unknown_expr, ast_builder.allocator),
-                ),
+            Some(ast_builder.expression_template_literal(
+                SPAN,
+                qu,
+                oxc_allocator::Vec::from_iter_in(unknown_expr, ast_builder.allocator),
             ))
         }
     } else if class_name.is_empty() {
         None
     } else {
-        Some(Expression::StringLiteral(ast_builder.alloc_string_literal(
-            SPAN,
-            ast_builder.atom(&class_name),
-            None,
-        )))
+        Some(ast_builder.expression_string_literal(SPAN, ast_builder.atom(&class_name), None))
     }
 }
diff --git a/libs/extractor/src/gen_style.rs b/libs/extractor/src/gen_style.rs
index 90d4ad15..074608d9 100644
--- a/libs/extractor/src/gen_style.rs
+++ b/libs/extractor/src/gen_style.rs
@@ -19,11 +19,9 @@ pub fn gen_styles<'a>(
     if properties.is_empty() {
         return None;
     }
-    Some(Expression::ObjectExpression(
-        ast_builder.alloc_object_expression(
-            SPAN,
-            oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
-        ),
+    Some(ast_builder.expression_object(
+        SPAN,
+        oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
     ))
 }
 fn gen_style<'a>(
@@ -39,23 +37,18 @@ fn gen_style<'a>(
                 identifier,
                 ..
             } => {
-                properties.push(ObjectPropertyKind::ObjectProperty(
-                    ast_builder.alloc_object_property(
+                properties.push(ast_builder.object_property_kind_object_property(
+                    SPAN,
+                    PropertyKind::Init,
+                    PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
                         SPAN,
-                        PropertyKind::Init,
-                        PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
-                            SPAN,
-                            ast_builder.atom(&variable_name),
-                            None,
-                        )),
-                        Expression::Identifier(
-                            ast_builder
-                                .alloc_identifier_reference(SPAN, ast_builder.atom(&identifier)),
-                        ),
-                        false,
-                        false,
-                        false,
-                    ),
+                        ast_builder.atom(&variable_name),
+                        None,
+                    )),
+                    ast_builder.expression_identifier(SPAN, ast_builder.atom(&identifier)),
+                    false,
+                    false,
+                    false,
                 ));
             }
         },
@@ -79,26 +72,19 @@ fn gen_style<'a>(
             (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(
+                        properties.push(ast_builder.object_property_kind_object_property(
+                            SPAN,
+                            PropertyKind::Init,
+                            p.key.clone_in(ast_builder.allocator),
+                            ast_builder.expression_conditional(
                                 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,
+                                condition.clone_in(ast_builder.allocator),
+                                ast_builder.expression_identifier(SPAN, "undefined"),
+                                p.value.clone_in(ast_builder.allocator),
                             ),
+                            false,
+                            false,
+                            false,
                         ))
                     }
                 });
@@ -106,26 +92,19 @@ fn gen_style<'a>(
             (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(
+                        properties.push(ast_builder.object_property_kind_object_property(
+                            SPAN,
+                            PropertyKind::Init,
+                            p.key.clone_in(ast_builder.allocator),
+                            ast_builder.expression_conditional(
                                 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,
+                                condition.clone_in(ast_builder.allocator),
+                                p.value.clone_in(ast_builder.allocator),
+                                ast_builder.expression_identifier(SPAN, "undefined"),
                             ),
+                            false,
+                            false,
+                            false,
                         ))
                     }
                 });
@@ -146,23 +125,19 @@ fn gen_style<'a>(
                         {
                             if p.key.name() == q.key.name() {
                                 found = true;
-                                properties.push(ObjectPropertyKind::ObjectProperty(
-                                    ast_builder.alloc_object_property(
+                                properties.push(ast_builder.object_property_kind_object_property(
+                                    SPAN,
+                                    PropertyKind::Init,
+                                    p.key.clone_in(ast_builder.allocator),
+                                    ast_builder.expression_conditional(
                                         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),
-                                                q.value.clone_in(ast_builder.allocator),
-                                            ),
-                                        ),
-                                        false,
-                                        false,
-                                        false,
+                                        condition.clone_in(ast_builder.allocator),
+                                        p.value.clone_in(ast_builder.allocator),
+                                        q.value.clone_in(ast_builder.allocator),
                                     ),
+                                    false,
+                                    false,
+                                    false,
                                 ));
                                 break;
                             }
@@ -170,16 +145,14 @@ fn gen_style<'a>(
                     }
                     if !found {
                         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),
-                                    p.value.clone_in(ast_builder.allocator),
-                                    false,
-                                    false,
-                                    false,
-                                ),
+                            properties.push(ast_builder.object_property_kind_object_property(
+                                SPAN,
+                                PropertyKind::Init,
+                                p.key.clone_in(ast_builder.allocator),
+                                p.value.clone_in(ast_builder.allocator),
+                                false,
+                                false,
+                                false,
                             ));
                         }
                     }
@@ -199,16 +172,14 @@ fn gen_style<'a>(
                         }
                     }
                     if !found && let ObjectPropertyKind::ObjectProperty(q) = q {
-                        properties.push(ObjectPropertyKind::ObjectProperty(
-                            ast_builder.alloc_object_property(
-                                SPAN,
-                                PropertyKind::Init,
-                                q.key.clone_in(ast_builder.allocator),
-                                q.value.clone_in(ast_builder.allocator),
-                                false,
-                                false,
-                                false,
-                            ),
+                        properties.push(ast_builder.object_property_kind_object_property(
+                            SPAN,
+                            PropertyKind::Init,
+                            q.key.clone_in(ast_builder.allocator),
+                            q.value.clone_in(ast_builder.allocator),
+                            false,
+                            false,
+                            false,
                         ));
                     }
                 }
@@ -222,25 +193,18 @@ fn gen_style<'a>(
                     ..
                 } = style.extract()
                 {
-                    properties.push(ObjectPropertyKind::ObjectProperty(
-                        ast_builder.alloc_object_property(
+                    properties.push(ast_builder.object_property_kind_object_property(
+                        SPAN,
+                        PropertyKind::Init,
+                        PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
                             SPAN,
-                            PropertyKind::Init,
-                            PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
-                                SPAN,
-                                ast_builder.atom(&variable_name),
-                                None,
-                            )),
-                            Expression::Identifier(
-                                ast_builder.alloc_identifier_reference(
-                                    SPAN,
-                                    ast_builder.atom(&identifier),
-                                ),
-                            ),
-                            false,
-                            false,
-                            false,
-                        ),
+                            ast_builder.atom(&variable_name),
+                            None,
+                        )),
+                        ast_builder.expression_identifier(SPAN, ast_builder.atom(&identifier)),
+                        false,
+                        false,
+                        true,
                     ));
                 }
             }
@@ -264,72 +228,55 @@ fn gen_style<'a>(
             }
 
             for (key, value) in tmp_map {
-                properties.push(ObjectPropertyKind::ObjectProperty(
-                    ast_builder.alloc_object_property(
+                properties.push(ast_builder.object_property_kind_object_property(
+                    SPAN,
+                    PropertyKind::Init,
+                    PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
                         SPAN,
-                        PropertyKind::Init,
-                        PropertyKey::StringLiteral(ast_builder.alloc_string_literal(
-                            SPAN,
-                            ast_builder.atom(&key),
-                            None,
-                        )),
-                        if value.len() == 1 {
-                            // do not create object expression when property is single
-                            Expression::Identifier(
-                                ast_builder.alloc_identifier_reference(
-                                    SPAN,
-                                    ast_builder.atom(&value[0].1),
-                                ),
-                            )
-                        } else {
-                            Expression::ComputedMemberExpression(
-                                ast_builder.alloc_computed_member_expression(
+                        ast_builder.atom(&key),
+                        None,
+                    )),
+                    if value.len() == 1 {
+                        // do not create object expression when property is single
+                        ast_builder.expression_identifier(SPAN, ast_builder.atom(&value[0].1))
+                    } else {
+                        Expression::ComputedMemberExpression(
+                            ast_builder.alloc_computed_member_expression(
+                                SPAN,
+                                ast_builder.expression_object(
                                     SPAN,
-                                    Expression::ObjectExpression(
-                                        ast_builder.alloc_object_expression(
-                                            SPAN,
-                                            oxc_allocator::Vec::from_iter_in(
-                                                value
-                                                    .into_iter()
-                                                    .map(|(k, v)| {
-                                                        ObjectPropertyKind::ObjectProperty(
-                                                            ast_builder.alloc_object_property(
-                                                                SPAN,
-                                                                PropertyKind::Init,
-                                                                PropertyKey::StaticIdentifier(
-                                                                    ast_builder
-                                                                        .alloc_identifier_name(
-                                                                            SPAN,
-                                                                            ast_builder.atom(&k),
-                                                                        ),
-                                                                ),
-                                                                Expression::Identifier(
-                                                                    ast_builder
-                                                                        .alloc_identifier_reference(
-                                                                            SPAN,
-                                                                            ast_builder.atom(&v),
-                                                                        ),
-                                                                ),
-                                                                false,
-                                                                false,
-                                                                false,
-                                                            ),
-                                                        )
-                                                    })
-                                                    .collect::<Vec<_>>(),
-                                                ast_builder.allocator,
-                                            ),
-                                        ),
+                                    oxc_allocator::Vec::from_iter_in(
+                                        value
+                                            .into_iter()
+                                            .map(|(k, v)| {
+                                                ast_builder.object_property_kind_object_property(
+                                                    SPAN,
+                                                    PropertyKind::Init,
+                                                    ast_builder.property_key_static_identifier(
+                                                        SPAN,
+                                                        ast_builder.atom(&k),
+                                                    ),
+                                                    ast_builder.expression_identifier(
+                                                        SPAN,
+                                                        ast_builder.atom(&v),
+                                                    ),
+                                                    false,
+                                                    false,
+                                                    false,
+                                                )
+                                            })
+                                            .collect::<Vec<_>>(),
+                                        ast_builder.allocator,
                                     ),
-                                    expression.clone_in(ast_builder.allocator),
-                                    false,
                                 ),
-                            )
-                        },
-                        false,
-                        false,
-                        false,
-                    ),
+                                expression.clone_in(ast_builder.allocator),
+                                false,
+                            ),
+                        )
+                    },
+                    false,
+                    false,
+                    false,
                 ));
             }
         }
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 926a1d90..7dc9233a 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -1954,6 +1954,26 @@ import clsx from 'clsx'
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box as DevupButton} from '@devup-ui/core'
+        <DevupButton
+      boxSizing="border-box"
+      className={className}
+      typography={typography}
+    >
+    </DevupButton>
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]
@@ -2503,6 +2523,44 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
     }
 
+    #[test]
+    #[serial]
+    fn extract_conditional_style_props_with_class_name() {
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box as DevupButton} from '@devup-ui/core'
+        <DevupButton
+      className={className}
+      typography={typography}
+    >
+    </DevupButton>
+        "#,
+                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 opacity={[1, 0.5][a]} className="ab" />
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     #[test]
     #[serial]
     fn props_direct_array_select() {
diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs
index e4383d31..e653403f 100644
--- a/libs/extractor/src/prop_modify_utils.rs
+++ b/libs/extractor/src/prop_modify_utils.rs
@@ -55,31 +55,27 @@ pub fn modify_prop_object<'a>(
         style_order,
         &spread_props,
     ) {
-        props.push(ObjectPropertyKind::ObjectProperty(
-            ast_builder.alloc_object_property(
-                SPAN,
-                PropertyKind::Init,
-                PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "className")),
-                ex,
-                false,
-                false,
-                false,
-            ),
+        props.push(ast_builder.object_property_kind_object_property(
+            SPAN,
+            PropertyKind::Init,
+            ast_builder.property_key_static_identifier(SPAN, "className"),
+            ex,
+            false,
+            false,
+            false,
         ));
     }
     if let Some(ex) =
         get_style_expression(ast_builder, &style_prop, styles, &style_vars, &spread_props)
     {
-        props.push(ObjectPropertyKind::ObjectProperty(
-            ast_builder.alloc_object_property(
-                SPAN,
-                PropertyKind::Init,
-                PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "style")),
-                ex,
-                false,
-                false,
-                false,
-            ),
+        props.push(ast_builder.object_property_kind_object_property(
+            SPAN,
+            PropertyKind::Init,
+            ast_builder.property_key_static_identifier(SPAN, "style"),
+            ex,
+            false,
+            false,
+            false,
         ));
     }
 }
@@ -116,11 +112,7 @@ pub fn modify_props<'a>(
                             }
                         }
                         JSXAttributeValue::StringLiteral(literal) => {
-                            Some(Expression::StringLiteral(ast_builder.alloc_string_literal(
-                                SPAN,
-                                literal.value,
-                                None,
-                            )))
+                            Some(ast_builder.expression_string_literal(SPAN, literal.value, None))
                         }
                         _ => None,
                     };
@@ -148,28 +140,24 @@ pub fn modify_props<'a>(
         style_order,
         &spread_props,
     ) {
-        props.push(Attribute(ast_builder.alloc_jsx_attribute(
+        props.push(ast_builder.jsx_attribute_item_attribute(
             SPAN,
-            Identifier(ast_builder.alloc_jsx_identifier(SPAN, "className")),
+            ast_builder.jsx_attribute_name_identifier(SPAN, "className"),
             Some(if let Expression::StringLiteral(literal) = ex {
                 JSXAttributeValue::StringLiteral(literal)
             } else {
-                JSXAttributeValue::ExpressionContainer(
-                    ast_builder.alloc_jsx_expression_container(SPAN, ex.into()),
-                )
+                ast_builder.jsx_attribute_value_expression_container(SPAN, ex.into())
             }),
-        )));
+        ));
     }
     if let Some(ex) =
         get_style_expression(ast_builder, &style_prop, styles, &style_vars, &spread_props)
     {
-        props.push(Attribute(ast_builder.alloc_jsx_attribute(
+        props.push(ast_builder.jsx_attribute_item_attribute(
             SPAN,
-            Identifier(ast_builder.alloc_jsx_identifier(SPAN, "style")),
-            Some(JSXAttributeValue::ExpressionContainer(
-                ast_builder.alloc_jsx_expression_container(SPAN, ex.into()),
-            )),
-        )));
+            ast_builder.jsx_attribute_name_identifier(SPAN, "style"),
+            Some(ast_builder.jsx_attribute_value_expression_container(SPAN, ex.into())),
+        ));
     }
 }
 
@@ -251,100 +239,73 @@ fn merge_string_expressions<'a>(
 
     let mut string_literals: std::vec::Vec<String> = vec![];
     let mut other_expressions = vec![];
-    let mut prev_str = false;
-    for ex in expressions {
-        if !prev_str {
-            string_literals.push("".to_string());
-            prev_str = false;
-        }
+    let mut prev_str = String::new();
+    for (idx, ex) in expressions.iter().enumerate() {
         if let Expression::StringLiteral(literal) = ex {
-            prev_str = true;
-            if !string_literals.is_empty() {
-                string_literals
-                    .last_mut()
-                    .unwrap()
-                    .push_str(&format!(" {}", literal.value.trim()));
-            } else {
-                string_literals.push(literal.value.trim().to_string());
+            if !prev_str.trim().is_empty() {
+                prev_str.push(' ');
             }
+            prev_str.push_str(literal.value.trim());
         } else if let Expression::TemplateLiteral(template) = ex {
-            if !string_literals.is_empty() {
-                string_literals.last_mut().unwrap().push_str(&format!(
-                    " {}",
-                    template
-                        .quasis
-                        .iter()
-                        .map(|q| q.value.raw.trim())
-                        .filter(|q| !q.is_empty())
-                        .collect::<Vec<_>>()
-                        .join(" ")
-                ));
-            } else {
-                string_literals.push(
-                    template
-                        .quasis
-                        .iter()
-                        .map(|q| q.value.raw.as_str())
-                        .collect::<Vec<_>>()
-                        .join(" "),
-                );
+            for (idx, q) in template.quasis.iter().enumerate() {
+                if idx == 0 {
+                    if !prev_str.trim().is_empty() {
+                        prev_str.push(' ');
+                    }
+                    prev_str.push_str(&q.value.raw);
+                } else {
+                    if !prev_str.trim().is_empty() {
+                        string_literals.push(prev_str.clone());
+                    }
+                    if q.tail {
+                        prev_str = format!("{} ", q.value.raw);
+                    } else {
+                        string_literals.push(q.value.raw.into());
+                        prev_str = String::new();
+                    }
+                }
             }
             other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
         } else {
+            if !prev_str.ends_with(' ') {
+                string_literals.push(format!("{}{}", prev_str, if idx > 0 { " " } else { "" }));
+            } else if idx > 0 {
+                string_literals.push(" ".to_string());
+            } else {
+                string_literals.push("".to_string());
+            }
             other_expressions.push(ex.clone_in(ast_builder.allocator));
+            prev_str = " ".to_string();
         }
     }
+    if !prev_str.is_empty() {
+        string_literals.push(prev_str.trim_end().to_string());
+    }
     if other_expressions.is_empty() {
-        return Some(Expression::StringLiteral(
-            ast_builder.alloc_string_literal(
-                SPAN,
-                ast_builder.atom(
-                    &string_literals
-                        .iter()
-                        .map(|s| s.trim())
-                        .filter(|s| !s.is_empty())
-                        .collect::<Vec<_>>()
-                        .join(" "),
-                ),
-                None,
-            ),
+        return Some(ast_builder.expression_string_literal(
+            SPAN,
+            ast_builder.atom(string_literals.join("").trim()),
+            None,
         ));
     }
-    let literals = oxc_allocator::Vec::from_iter_in(
-        string_literals.iter().enumerate().map(|(idx, s)| {
-            ast_builder.template_element(
-                SPAN,
-                TemplateElementValue {
-                    raw: ast_builder.atom(&{
-                        let trimmed = s.trim();
-                        if trimmed.is_empty() {
-                            if idx == 0 {
-                                "".to_string()
-                            } else {
-                                " ".to_string()
-                            }
-                        } else {
-                            let prefix = if idx == 0 { "" } else { " " };
-                            let suffix = if string_literals.len() <= other_expressions.len() {
-                                " "
-                            } else {
-                                ""
-                            };
-                            format!("{prefix}{trimmed}{suffix}")
-                        }
-                    }),
-                    cooked: None,
-                },
-                false,
-            )
-        }),
-        ast_builder.allocator,
-    );
 
-    Some(Expression::TemplateLiteral(
-        ast_builder.alloc_template_literal(
+    Some(
+        ast_builder.expression_template_literal(
             SPAN,
-            literals,
+            oxc_allocator::Vec::from_iter_in(
+                string_literals.iter().enumerate().map(|(idx, s)| {
+                    let tail = idx == string_literals.len() - 1;
+                    ast_builder.template_element(
+                        SPAN,
+                        TemplateElementValue {
+                            raw: ast_builder.atom(s),
+                            cooked: None,
+                        },
+                        tail,
+                    )
+                }),
+                ast_builder.allocator,
+            ),
             oxc_allocator::Vec::from_iter_in(
                 other_expressions
                     .into_iter()
@@ -352,7 +313,7 @@ fn merge_string_expressions<'a>(
                 ast_builder.allocator,
             ),
         ),
-    ))
+    )
 }
 
 /// merge expressions to object expression
@@ -366,17 +327,14 @@ fn merge_object_expressions<'a>(
     if expressions.len() == 1 {
         return Some(expressions[0].clone_in(ast_builder.allocator));
     }
-    Some(Expression::ObjectExpression(
-        ast_builder.alloc_object_expression(
-            SPAN,
-            oxc_allocator::Vec::from_iter_in(
-                expressions.iter().map(|ex| {
-                    ObjectPropertyKind::SpreadProperty(
-                        ast_builder.alloc_spread_element(SPAN, ex.clone_in(ast_builder.allocator)),
-                    )
-                }),
-                ast_builder.allocator,
-            ),
+    Some(ast_builder.expression_object(
+        SPAN,
+        oxc_allocator::Vec::from_iter_in(
+            expressions.iter().map(|ex| {
+                ast_builder
+                    .object_property_kind_spread_property(SPAN, ex.clone_in(ast_builder.allocator))
+            }),
+            ast_builder.allocator,
         ),
     ))
 }
@@ -395,18 +353,11 @@ pub fn convert_class_name<'a>(
     }
 
     // wrap ( and ?? ''
-    Expression::LogicalExpression(
-        ast_builder.alloc_logical_expression(
-            SPAN,
-            Expression::ParenthesizedExpression(
-                ast_builder.alloc_parenthesized_expression(
-                    SPAN,
-                    class_name.clone_in(ast_builder.allocator),
-                ),
-            ),
-            LogicalOperator::Or,
-            Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None)),
-        ),
+    ast_builder.expression_logical(
+        SPAN,
+        ast_builder.expression_parenthesized(SPAN, class_name.clone_in(ast_builder.allocator)),
+        LogicalOperator::Or,
+        ast_builder.expression_string_literal(SPAN, "", None),
     )
 }
 
@@ -426,7 +377,7 @@ pub fn convert_style_vars<'a>(
                     etc => {
                         obj.properties.insert(
                             idx,
-                            ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property(
+                            ast_builder.object_property_kind_object_property(
                                 SPAN,
                                 PropertyKind::Init,
                                 PropertyKey::TemplateLiteral(ast_builder.alloc_template_literal(
@@ -451,7 +402,7 @@ pub fn convert_style_vars<'a>(
                                 false,
                                 false,
                                 true,
-                            )),
+                            ),
                         );
                         continue;
                     }
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
index 15555283..fd54ef0d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
@@ -4,5 +4,5 @@ expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@de
 ---
 ToBTreeSet {
     styles: {},
-    code: "<span className={bo ? `typo-${a}` : `typo-${b}`} />;\n",
+    code: "<span className={bo ? a ? `typo-${a}` : \"\" : b ? `typo-${b}` : \"\"} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
new file mode 100644
index 00000000..e1641577
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      boxSizing=\"border-box\"\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "boxSizing",
+                value: "border-box",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${className || \"\"} d0 ${typography ? `typo-${typography}` : \"\"}`}>\n    </div>;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
index 4040f940..6126d98a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
@@ -4,5 +4,5 @@ expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@de
 ---
 ToBTreeSet {
     styles: {},
-    code: "<span className={`typo-${variable}`} />;\n",
+    code: "<span className={variable ? `typo-${variable}` : \"\"} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
new file mode 100644
index 00000000..4cdab5ba
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
@@ -0,0 +1,38 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} className=\"ab\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "0.5",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`ab d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
new file mode 100644
index 00000000..e6901b53
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div className={`${className || \"\"} ${typography ? `typo-${typography}` : \"\"}`}>\n    </div>;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
index 36db27d8..46f45342 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
@@ -90,5 +90,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`d0 d1 d2 ${variant !== \"disabled\" ? \"d3 d4\" : \"\"} ${variant !== \"disabled\" ? \"d5 d6\" : \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`d0 d1 d2 ${variant !== \"disabled\" ? \"d3 d4\" : \"\"} ${variant !== \"disabled\" ? \"d5 d6\" : \"\"} ${props?.className || \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
index 177b279a..8c827d5d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
@@ -20,5 +20,5 @@ ToBTreeSet {
             "buttonS",
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] : \"\"} ${props?.className || \"\"}`} style={props?.style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"} ${props?.className || \"\"}`} style={props?.style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
index 3df2b8b6..60e459b0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
index 33a7c317..24ef4bef 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
index 070a07fd..7db32365 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
@@ -34,5 +34,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[a]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[a] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
index a1cbbcdf..829a5fbc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
@@ -34,5 +34,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
index 62cd0daf..f53be0d1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
@@ -34,5 +34,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[idx]}`} style={{ \"--d3\": `${variable}` }} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\"\n}[idx] || \"\"}`} style={{ \"--d3\": `${variable}` }} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
index 9f6e0476..15353be8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
@@ -43,5 +43,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\",\n\t\"2\": \"d3\"\n}[a]}`} style={{ \"--d4\": some[a] }} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1\",\n\t\"1\": \"d2\",\n\t\"2\": \"d3\"\n}[a] || \"\"}`} style={{ \"--d4\": some[a] }} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
index 082d643b..21772624 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d4\",\n\t\"1\": \"d1 d6 d8\"\n}[idx]}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d5\": c,\n\t\"--d7\": e\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d4\",\n\t\"1\": \"d1 d6 d8\"\n}[idx] || \"\"}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d5\": c,\n\t\"--d7\": e\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
index 68da5742..1e8ee477 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1 d2 d3\",\n\t\"b\": \"d4 d5 d6\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1 d2 d3\",\n\t\"b\": \"d4 d5 d6\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
index 79b8a4bd..62e0a2ae 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d2 d3\",\n\t\"1\": \"d4 d5 d6\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
index cb83568b..de83a95a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
@@ -34,5 +34,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1\",\n\t\"b\": \"d2\"\n}[idx]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1\",\n\t\"b\": \"d2\"\n}[idx] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
index 0ac67c6b..db97ec06 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d5\",\n\t\"1\": \"d1 d3 d5\"\n}[idx]}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d4\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--d6\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d5\",\n\t\"1\": \"d1 d3 d5\"\n}[idx] || \"\"}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d4\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--d6\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
index 7f02f9f0..21e24a6c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
@@ -70,5 +70,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d5\",\n\t\"1\": \"d1 d3 d5\"\n}[idx]}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d4\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--d6\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"0\": \"d1 d3 d5\",\n\t\"1\": \"d1 d3 d5\"\n}[idx] || \"\"}`} style={{\n\t\"--d2\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--d4\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--d6\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
index 05bbd539..6006f9fb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
@@ -34,5 +34,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1\",\n\t\"b\": \"d2\"\n}[a]}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d0 ${{\n\t\"a\": \"d1\",\n\t\"b\": \"d2\"\n}[a] || \"\"}`} />;\n",
 }
diff --git a/libs/extractor/src/style_extractor.rs b/libs/extractor/src/style_extractor.rs
index 82e3241c..da4d5c0a 100644
--- a/libs/extractor/src/style_extractor.rs
+++ b/libs/extractor/src/style_extractor.rs
@@ -430,29 +430,35 @@ pub fn extract_style_from_expression<'a>(
                     if typo {
                         ExtractResult::Extract {
                             styles: Some(vec![ExtractStyleProp::Expression {
-                                expression: ast_builder.expression_template_literal(
+                                expression: ast_builder.expression_conditional(
                                     SPAN,
-                                    ast_builder.vec_from_array([
-                                        ast_builder.template_element(
-                                            SPAN,
-                                            TemplateElementValue {
-                                                raw: ast_builder.atom("typo-"),
-                                                cooked: None,
-                                            },
-                                            false,
-                                        ),
-                                        ast_builder.template_element(
-                                            SPAN,
-                                            TemplateElementValue {
-                                                raw: ast_builder.atom(""),
-                                                cooked: None,
-                                            },
-                                            true,
-                                        ),
-                                    ]),
-                                    ast_builder.vec_from_array([
-                                        expression.clone_in(ast_builder.allocator)
-                                    ]),
+                                    ast_builder
+                                        .expression_identifier(SPAN, identifier.name.as_str()),
+                                    ast_builder.expression_template_literal(
+                                        SPAN,
+                                        ast_builder.vec_from_array([
+                                            ast_builder.template_element(
+                                                SPAN,
+                                                TemplateElementValue {
+                                                    raw: ast_builder.atom("typo-"),
+                                                    cooked: None,
+                                                },
+                                                false,
+                                            ),
+                                            ast_builder.template_element(
+                                                SPAN,
+                                                TemplateElementValue {
+                                                    raw: ast_builder.atom(""),
+                                                    cooked: None,
+                                                },
+                                                true,
+                                            ),
+                                        ]),
+                                        ast_builder.vec_from_array([
+                                            expression.clone_in(ast_builder.allocator)
+                                        ]),
+                                    ),
+                                    ast_builder.expression_string_literal(SPAN, "", None),
                                 ),
                                 styles: vec![],
                             }]),
@@ -516,31 +522,20 @@ pub fn extract_style_from_expression<'a>(
                     },
                     LogicalOperator::Coalesce => ExtractResult::Extract {
                         styles: Some(vec![ExtractStyleProp::Conditional {
-                            condition: Expression::LogicalExpression(
-                                ast_builder.alloc_logical_expression(
+                            condition: ast_builder.expression_logical(
+                                SPAN,
+                                ast_builder.expression_binary(
                                     SPAN,
-                                    Expression::BinaryExpression(
-                                        ast_builder.alloc_binary_expression(
-                                            SPAN,
-                                            logical.left.clone_in(ast_builder.allocator),
-                                            BinaryOperator::StrictInequality,
-                                            Expression::NullLiteral(
-                                                ast_builder.alloc_null_literal(SPAN),
-                                            ),
-                                        ),
-                                    ),
-                                    LogicalOperator::And,
-                                    Expression::BinaryExpression(
-                                        ast_builder.alloc_binary_expression(
-                                            SPAN,
-                                            logical.left.clone_in(ast_builder.allocator),
-                                            BinaryOperator::StrictInequality,
-                                            Expression::Identifier(
-                                                ast_builder
-                                                    .alloc_identifier_reference(SPAN, "undefined"),
-                                            ),
-                                        ),
-                                    ),
+                                    logical.left.clone_in(ast_builder.allocator),
+                                    BinaryOperator::StrictInequality,
+                                    ast_builder.expression_null_literal(SPAN),
+                                ),
+                                LogicalOperator::And,
+                                ast_builder.expression_binary(
+                                    SPAN,
+                                    logical.left.clone_in(ast_builder.allocator),
+                                    BinaryOperator::StrictInequality,
+                                    ast_builder.expression_identifier(SPAN, "undefined"),
                                 ),
                             ),
                             consequent: None,
diff --git a/libs/extractor/src/utils.rs b/libs/extractor/src/utils.rs
index 37e267a0..29d7433f 100644
--- a/libs/extractor/src/utils.rs
+++ b/libs/extractor/src/utils.rs
@@ -232,7 +232,6 @@ pub fn get_string_by_literal_expression(expr: &Expression) -> Option<String> {
 #[cfg(test)]
 mod tests {
     use oxc_allocator::Vec;
-    use oxc_ast::ast::{JSXAttributeName, JSXElementName};
 
     use super::*;
 
@@ -309,14 +308,10 @@ mod tests {
         assert_eq!(
             jsx_expression_to_number(
                 builder
-                    .alloc_jsx_attribute(
+                    .jsx_attribute(
                         SPAN,
-                        JSXAttributeName::Identifier(
-                            builder.alloc_jsx_identifier(SPAN, "styleOrder")
-                        ),
-                        Some(JSXAttributeValue::StringLiteral(
-                            builder.alloc_string_literal(SPAN, "1", None),
-                        )),
+                        builder.jsx_attribute_name_identifier(SPAN, "styleOrder"),
+                        Some(builder.jsx_attribute_value_string_literal(SPAN, "1", None)),
                     )
                     .value
                     .as_ref()
@@ -328,18 +323,14 @@ mod tests {
         assert_eq!(
             jsx_expression_to_number(
                 builder
-                    .alloc_jsx_attribute(
+                    .jsx_attribute(
                         SPAN,
-                        JSXAttributeName::Identifier(
-                            builder.alloc_jsx_identifier(SPAN, "styleOrder")
-                        ),
-                        Some(JSXAttributeValue::Element(builder.alloc_jsx_element(
+                        builder.jsx_attribute_name_identifier(SPAN, "styleOrder"),
+                        Some(builder.jsx_attribute_value_element(
                             SPAN,
-                            builder.alloc_jsx_opening_element(
+                            builder.jsx_opening_element(
                                 SPAN,
-                                JSXElementName::Identifier(
-                                    builder.alloc_jsx_identifier(SPAN, "div")
-                                ),
+                                builder.jsx_element_name_identifier(SPAN, "div"),
                                 Some(builder.ts_type_parameter_instantiation(
                                     SPAN,
                                     Vec::new_in(&allocator)
@@ -347,13 +338,11 @@ mod tests {
                                 Vec::new_in(&allocator),
                             ),
                             Vec::new_in(&allocator),
-                            Some(builder.alloc_jsx_closing_element(
+                            Some(builder.jsx_closing_element(
                                 SPAN,
-                                JSXElementName::Identifier(
-                                    builder.alloc_jsx_identifier(SPAN, "div")
-                                )
+                                builder.jsx_element_name_identifier(SPAN, "div"),
                             )),
-                        )))
+                        ))
                     )
                     .value
                     .as_ref()
diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs
index bf44ddd1..7c8584bc 100644
--- a/libs/extractor/src/visit.rs
+++ b/libs/extractor/src/visit.rs
@@ -13,7 +13,7 @@ use oxc_ast::ast::JSXAttributeItem::Attribute;
 use oxc_ast::ast::JSXAttributeName::Identifier;
 use oxc_ast::ast::{
     Argument, BindingPatternKind, CallExpression, Expression, ImportDeclaration,
-    ImportOrExportKind, JSXAttributeValue, JSXElement, JSXElementName, Program, PropertyKey,
+    ImportOrExportKind, JSXAttributeValue, JSXElement, Program, PropertyKey,
     Statement, VariableDeclarator, WithClause,
 };
 use oxc_ast_visit::VisitMut;
@@ -103,11 +103,9 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 && self.css_imports.contains_key(&css_import_key)
             {
                 if call.arguments.is_empty() {
-                    *it = Expression::StringLiteral(self.ast.alloc_string_literal(
-                        SPAN,
-                        self.ast.atom(""),
-                        None,
-                    ));
+                    *it = self
+                        .ast
+                        .expression_string_literal(SPAN, self.ast.atom(""), None);
                 } else if call.arguments.len() == 1 {
                     if let ExtractResult::Extract {
                         styles: Some(mut styles),
@@ -133,18 +131,14 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                         if let Some(cls) = class_name {
                             *it = cls;
                         } else {
-                            *it = Expression::StringLiteral(self.ast.alloc_string_literal(
-                                SPAN,
-                                self.ast.atom(""),
-                                None,
-                            ));
+                            *it = self
+                                .ast
+                                .expression_string_literal(SPAN, self.ast.atom(""), None);
                         }
                     } else {
-                        *it = Expression::StringLiteral(self.ast.alloc_string_literal(
-                            SPAN,
-                            self.ast.atom(""),
-                            None,
-                        ));
+                        *it = self
+                            .ast
+                            .expression_string_literal(SPAN, self.ast.atom(""), None);
                     }
                 }
             }
@@ -164,11 +158,9 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 });
 
                 if let StyleProperty::ClassName(cls) = css.extract() {
-                    *it = Expression::StringLiteral(self.ast.alloc_string_literal(
-                        SPAN,
-                        self.ast.atom(&cls),
-                        None,
-                    ));
+                    *it = self
+                        .ast
+                        .expression_string_literal(SPAN, self.ast.atom(&cls), None);
                 }
                 self.styles.insert(css);
             }
@@ -204,11 +196,11 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
             if let Some(kind) = element_kind
                 && it.arguments.len() > 1
             {
-                let mut tag = Expression::StringLiteral(self.ast.alloc_string_literal(
+                let mut tag = self.ast.expression_string_literal(
                     SPAN,
                     self.ast.atom(kind.to_tag().unwrap_or("div")),
                     None,
-                ));
+                );
                 let mut props_styles = vec![];
                 let mut style_order = None;
                 let mut style_vars = None;
@@ -381,11 +373,9 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
         let component_name = &opening_element.name.to_string();
         if let Some(kind) = self.imports.get(component_name) {
             let attrs = &mut opening_element.attributes;
-            let mut tag_name = Expression::StringLiteral(self.ast.alloc_string_literal(
-                SPAN,
-                kind.to_tag().unwrap_or("div"),
-                None,
-            ));
+            let mut tag_name =
+                self.ast
+                    .expression_string_literal(SPAN, kind.to_tag().unwrap_or("div"), None);
             let mut props_styles = vec![];
 
             // extract ExtractStyleProp and remain style and class name, just extract
@@ -453,9 +443,9 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 Expression::TemplateLiteral(literal) => Some(literal.quasis[0].value.raw.as_str()),
                 _ => None,
             } {
-                let ident = JSXElementName::Identifier(
-                    self.ast.alloc_jsx_identifier(SPAN, self.ast.atom(tag)),
-                );
+                let ident = self
+                    .ast
+                    .jsx_element_name_identifier(SPAN, self.ast.atom(tag));
 
                 if let Some(el) = &mut elem.closing_element {
                     el.name = ident.clone_in(self.ast.allocator);