diff --git a/.changeset/eager-singers-cover.md b/.changeset/eager-singers-cover.md
new file mode 100644
index 00000000..e45fff43
--- /dev/null
+++ b/.changeset/eager-singers-cover.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Feat auto insertion className, style props
diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs
index a01866f7..10830240 100644
--- a/libs/extractor/src/prop_modify_utils.rs
+++ b/libs/extractor/src/prop_modify_utils.rs
@@ -6,8 +6,8 @@ use oxc_ast::AstBuilder;
 use oxc_ast::ast::JSXAttributeItem::Attribute;
 use oxc_ast::ast::JSXAttributeName::Identifier;
 use oxc_ast::ast::{
-    Expression, JSXAttributeItem, JSXAttributeValue, JSXExpression, ObjectPropertyKind,
-    PropertyKey, PropertyKind, TemplateElementValue,
+    Expression, JSXAttributeItem, JSXAttributeValue, JSXExpression, LogicalOperator,
+    ObjectPropertyKind, PropertyKey, PropertyKind, TemplateElementValue,
 };
 use oxc_span::SPAN;
 
@@ -21,6 +21,7 @@ pub fn modify_prop_object<'a>(
 ) {
     let mut class_name_prop = None;
     let mut style_prop = None;
+    let mut spread_props = vec![];
     for idx in (0..props.len()).rev() {
         let prop = props.remove(idx);
         match prop {
@@ -40,14 +41,20 @@ pub fn modify_prop_object<'a>(
                 }
                 props.insert(idx, ObjectPropertyKind::ObjectProperty(attr));
             }
-            _ => {
-                props.insert(idx, prop);
+            ObjectPropertyKind::SpreadProperty(spread) => {
+                spread_props.push(spread.argument.clone_in(ast_builder.allocator));
+                props.insert(idx, ObjectPropertyKind::SpreadProperty(spread));
             }
         }
     }
 
-    if let Some(ex) = get_class_name_expression(ast_builder, &class_name_prop, styles, style_order)
-    {
+    if let Some(ex) = get_class_name_expression(
+        ast_builder,
+        &class_name_prop,
+        styles,
+        style_order,
+        &spread_props,
+    ) {
         props.push(ObjectPropertyKind::ObjectProperty(
             ast_builder.alloc_object_property(
                 SPAN,
@@ -60,7 +67,9 @@ pub fn modify_prop_object<'a>(
             ),
         ));
     }
-    if let Some(ex) = get_style_expression(ast_builder, &style_prop, styles, &style_vars) {
+    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,
@@ -84,6 +93,7 @@ pub fn modify_props<'a>(
 ) {
     let mut class_name_prop = None;
     let mut style_prop = None;
+    let mut spread_props = vec![];
     for idx in (0..props.len()).rev() {
         let prop = props.remove(idx);
         match prop {
@@ -125,13 +135,19 @@ pub fn modify_props<'a>(
                 }
                 props.insert(idx, Attribute(attr));
             }
-            _ => {
-                props.insert(idx, prop);
+            JSXAttributeItem::SpreadAttribute(spread) => {
+                spread_props.push(spread.argument.clone_in(ast_builder.allocator));
+                props.insert(idx, JSXAttributeItem::SpreadAttribute(spread));
             }
         }
     }
-    if let Some(ex) = get_class_name_expression(ast_builder, &class_name_prop, styles, style_order)
-    {
+    if let Some(ex) = get_class_name_expression(
+        ast_builder,
+        &class_name_prop,
+        styles,
+        style_order,
+        &spread_props,
+    ) {
         props.push(Attribute(ast_builder.alloc_jsx_attribute(
             SPAN,
             Identifier(ast_builder.alloc_jsx_identifier(SPAN, "className")),
@@ -144,7 +160,9 @@ pub fn modify_props<'a>(
             }),
         )));
     }
-    if let Some(ex) = get_style_expression(ast_builder, &style_prop, styles, &style_vars) {
+    if let Some(ex) =
+        get_style_expression(ast_builder, &style_prop, styles, &style_vars, &spread_props)
+    {
         props.push(Attribute(ast_builder.alloc_jsx_attribute(
             SPAN,
             Identifier(ast_builder.alloc_jsx_identifier(SPAN, "style")),
@@ -160,16 +178,30 @@ pub fn get_class_name_expression<'a>(
     class_name_prop: &Option<Expression<'a>>,
     styles: &mut [ExtractStyleProp<'a>],
     style_order: Option<u8>,
+    spread_props: &[Expression<'a>],
 ) -> Option<Expression<'a>> {
     // should modify class name prop
     merge_string_expressions(
         ast_builder,
         [
-            class_name_prop.clone_in(ast_builder.allocator),
+            class_name_prop
+                .as_ref()
+                .map(|class_name| convert_class_name(ast_builder, class_name)),
             gen_class_names(ast_builder, styles, style_order),
         ]
         .into_iter()
         .flatten()
+        .chain(spread_props.iter().map(|ex| {
+            convert_class_name(
+                ast_builder,
+                &Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
+                    SPAN,
+                    ex.clone_in(ast_builder.allocator),
+                    ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
+                    true,
+                )),
+            )
+        }))
         .collect::<Vec<_>>()
         .as_slice(),
     )
@@ -180,6 +212,7 @@ pub fn get_style_expression<'a>(
     style_prop: &Option<Expression<'a>>,
     styles: &[ExtractStyleProp<'a>],
     style_vars: &Option<Expression<'a>>,
+    spread_props: &[Expression<'a>],
 ) -> Option<Expression<'a>> {
     merge_object_expressions(
         ast_builder,
@@ -192,6 +225,14 @@ pub fn get_style_expression<'a>(
         ]
         .into_iter()
         .flatten()
+        .chain(spread_props.iter().map(|ex| {
+            Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
+                SPAN,
+                ex.clone_in(ast_builder.allocator),
+                ast_builder.identifier_name(SPAN, ast_builder.atom("style")),
+                true,
+            ))
+        }))
         .collect::<Vec<_>>()
         .as_slice(),
     )
@@ -210,9 +251,14 @@ 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 {
-        string_literals.push("".to_string());
+        if !prev_str {
+            string_literals.push("".to_string());
+            prev_str = false;
+        }
         if let Expression::StringLiteral(literal) = ex {
+            prev_str = true;
             if !string_literals.is_empty() {
                 string_literals
                     .last_mut()
@@ -273,12 +319,14 @@ fn merge_string_expressions<'a>(
                         let trimmed = s.trim();
                         if trimmed.is_empty() {
                             "".to_string()
-                        } else if idx > 0 && idx == string_literals.len() - 1 {
-                            if string_literals.len() == other_expressions.len() {
-                                format!(" {trimmed} ")
+                        } else if idx == string_literals.len() - 1 {
+                            let prefix = if idx == 0 { "" } else { " " };
+                            let suffix = if string_literals.len() == other_expressions.len() {
+                                " "
                             } else {
-                                format!(" {trimmed}")
-                            }
+                                ""
+                            };
+                            format!("{prefix}{trimmed}{suffix}")
                         } else if idx == string_literals.len() - 1 {
                             trimmed.to_string()
                         } else {
@@ -333,6 +381,35 @@ fn merge_object_expressions<'a>(
     ))
 }
 
+pub fn convert_class_name<'a>(
+    ast_builder: &AstBuilder<'a>,
+    class_name: &Expression<'a>,
+) -> Expression<'a> {
+    if matches!(
+        class_name,
+        Expression::StringLiteral(_)
+            | Expression::TemplateLiteral(_)
+            | Expression::NumericLiteral(_)
+    ) {
+        return class_name.clone_in(ast_builder.allocator);
+    }
+
+    // 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::Coalesce,
+            Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None)),
+        ),
+    )
+}
+
 pub fn convert_style_vars<'a>(
     ast_builder: &AstBuilder<'a>,
     style_vars: &Expression<'a>,
diff --git a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
index 772c8d8d..09a66b94 100644
--- a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
index c9c9a383..5bd79204 100644
--- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
index e668bbfa..90629e79 100644
--- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
index c095b94e..3da1071f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\n        ))\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\n        ))\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
index ab102618..c9eb1653 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
index 25663f1d..6d85248d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
index 2b992f7b..eb196c12 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
index 104f080b..71a0dadc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
index 2dad3e36..866b0352 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
index c7d4557c..0bfa71c7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
index 2f5a8a07..35710bbf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
@@ -45,5 +45,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1 d2 d3`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" ?? \"\"} d0 d1 d2 d3`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-7.snap
deleted file mode 100644
index ab2ab31d..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-7.snap
+++ /dev/null
@@ -1,8 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import * as B from '@devup-ui/core'\n        <B.Flex padding={('-1')}/>\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
----
-ToBTreeSet {
-    styles: {},
-    code: "import * as B from \"@devup-ui/core\";\n<B.Flex padding={\"-1\"} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
index 39471513..bf8ef647 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" ?? \"\"} d0 d1`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
index a946c166..0e4c4d64 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo ?? \"\"} d0 d1`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
index 39660de1..b24eb8e8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable ?? \"\"} d0 d1`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
index 6bbe6ff7..dfafcdf2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
@@ -40,5 +40,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 ${true ? \"d1\" : \"d2\"}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable ?? \"\"} d0 ${true ? \"d1\" : \"d2\"}`} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
index b79669df..a9e1d535 100644
--- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
index cbce9c8a..4bb79319 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap
index 89a44c47..7d0e6b9e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1+a)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1+a)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap
index c9c7c84f..7174580f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1*a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1*a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
index 1992e451..ed2831c6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
index a9535f76..4e69601f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={(-1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={(-1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
index 67c19414..e7874561 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={[(-1),-2, -(3)]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={[(-1),-2, -(3)]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
index 571afcf7..56273a05 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 d41f0f0b..3df2b8b6 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 8011bed7..33a7c317 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 b84072ae..070a07fd 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 00edeb8d..a1cbbcdf 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 d505d133..62cd0daf 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
index fcbc5c6c..d8760a73 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
index 0f40092f..d36134ba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 962ef63e..9f6e0476 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
index f8e56f7b..1fb0b8b3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 65ddc04b..082d643b 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 4bd96a4e..68da5742 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ \"a\": [1, 2, 3], \"b\": [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ \"a\": [1, 2, 3], \"b\": [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 a461a5f7..79b8a4bd 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
index 19827ef0..260a1b2e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"b\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"b\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
index fdc9141d..de58979c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"some\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"some\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 261f6a0c..cb83568b 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
index e39cd919..a16e607e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"a\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"a\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_responsive_select-2.snap
deleted file mode 100644
index de7fd6bc..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_responsive_select-2.snap
+++ /dev/null
@@ -1,72 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ \"a\": [1, 2, 3], \"b\": [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "4px",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "8px",
-                level: 1,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "12px",
-                level: 2,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "16px",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "20px",
-                level: 1,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "24px",
-                level: 2,
-                selector: None,
-                basic: false,
-            },
-        ),
-    ],
-    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_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_responsive_select.snap
deleted file mode 100644
index de05bc96..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_responsive_select.snap
+++ /dev/null
@@ -1,72 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "4px",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "8px",
-                level: 1,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "12px",
-                level: 2,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "16px",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "20px",
-                level: 1,
-                selector: None,
-                basic: false,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "gap",
-                value: "24px",
-                level: 2,
-                selector: None,
-                basic: false,
-            },
-        ),
-    ],
-    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_select-10.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-10.snap
deleted file mode 100644
index 8a408fa0..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-10.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "background",
-                level: 0,
-                identifier: "[`var(--red)`, `${variable}`][idx]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [`var(--red)`, `${variable}`][idx] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-11.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-11.snap
deleted file mode 100644
index b0bec8af..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-11.snap
+++ /dev/null
@@ -1,44 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "justifyContent",
-                value: "center",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "alignItems",
-                value: "center",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "background",
-                level: 0,
-                identifier: "[\n\t\"var(--webBg)\",\n\t\"var(--appBg)\",\n\t\"var(--solutionBg)\"\n][categoryId - 1]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3\" style={{ \"--d4\": [\n\t\"var(--webBg)\",\n\t\"var(--appBg)\",\n\t\"var(--solutionBg)\"\n][categoryId - 1] }}>\n          </div>;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-12.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-12.snap
deleted file mode 100644
index 278f0345..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-12.snap
+++ /dev/null
@@ -1,44 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Center} from '@devup-ui/core'\n<Center bg={SOME_VAR[idx]}>\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "justifyContent",
-                value: "center",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "alignItems",
-                value: "center",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "background",
-                level: 0,
-                identifier: "SOME_VAR[idx]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3\" style={{ \"--d4\": SOME_VAR[idx] }}>\n          </div>;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-13.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-13.snap
deleted file mode 100644
index 15c6367a..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-13.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "background",
-                level: 0,
-                identifier: "({\n\ta: \"var(--red)\",\n\tb: \"var(--blue)\"\n})[idx]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": ({\n\ta: \"var(--red)\",\n\tb: \"var(--blue)\"\n})[idx] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-2.snap
deleted file mode 100644
index 9dace631..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-2.snap
+++ /dev/null
@@ -1,18 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-3.snap
deleted file mode 100644
index 1d157256..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-3.snap
+++ /dev/null
@@ -1,27 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "opacity",
-                value: "1",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-4.snap
deleted file mode 100644
index 596ca9a4..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-4.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "opacity",
-                level: 0,
-                identifier: "[1, .5][a]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [1, .5][a] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-5.snap
deleted file mode 100644
index 9de962c5..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-5.snap
+++ /dev/null
@@ -1,27 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"a\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "opacity",
-                value: "1",
-                level: 0,
-                selector: None,
-                basic: false,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-6.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-6.snap
deleted file mode 100644
index 898d5585..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-6.snap
+++ /dev/null
@@ -1,18 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"wrong\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-7.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-7.snap
deleted file mode 100644
index bc706aff..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-7.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "opacity",
-                level: 0,
-                identifier: "({\n\ta: 1,\n\tb: .5\n})[a]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": ({\n\ta: 1,\n\tb: .5\n})[a] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-8.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-8.snap
deleted file mode 100644
index a12961b8..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-8.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5, ...any}[\"some\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "opacity",
-                level: 0,
-                identifier: "({\n\ta: 1,\n\tb: .5,\n\t...any\n})[\"some\"]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": ({\n\ta: 1,\n\tb: .5,\n\t...any\n})[\"some\"] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap
deleted file mode 100644
index b6634d48..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select-9.snap
+++ /dev/null
@@ -1,26 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "background",
-                level: 0,
-                identifier: "[\"var(--red)\", \"var(--blue)\"][idx]",
-                selector: None,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1\" style={{ \"--d2\": [\"var(--red)\", \"var(--blue)\"][idx] }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_select.snap
deleted file mode 100644
index adfc95fa..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_select.snap
+++ /dev/null
@@ -1,18 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-    ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\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 e63cd1d9..0ac67c6b 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, b, c], [d, e, f]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[[a, b, c], [d, e, f]][idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 0b0b9284..7f02f9f0 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [a, b, c], \"1\": [d, e, f] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [a, b, c], \"1\": [d, e, f] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
index cdac3959..03a48bdd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n<Box bg={SOME_VAR[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box bg={SOME_VAR[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
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 17c30427..05bbd539 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
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[a]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_responsive_select.snap
deleted file mode 100644
index ec4d52cd..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_responsive_select.snap
+++ /dev/null
@@ -1,66 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={{ 0: [a, b, c], \"1\": [d, e, f] }[idx]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
----
-ExtractOutput {
-    styles: [
-        Static(
-            ExtractStaticStyle {
-                property: "display",
-                value: "flex",
-                level: 0,
-                selector: None,
-                basic: true,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 0,
-                identifier: "a",
-                selector: None,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 1,
-                identifier: "b",
-                selector: None,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 2,
-                identifier: "c",
-                selector: None,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 0,
-                identifier: "d",
-                selector: None,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 1,
-                identifier: "e",
-                selector: None,
-            },
-        ),
-        Dynamic(
-            ExtractDynamicStyle {
-                property: "gap",
-                level: 2,
-                identifier: "f",
-                selector: None,
-            },
-        ),
-    ],
-    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_wrong_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
index 331196e6..a1a4f994 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
index 17e12352..8a010553 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][+10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][+10]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
index 0dc9d863..0dca1a5c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
index 1a76f543..f3c5f77d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[][0]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
index f15fa95c..05d5b461 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"wrong\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[\"wrong\"]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
index 42466b4c..439b1656 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[`wrong`]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[`wrong`]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
index 4e344847..257f077a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={{a:1, b:0.5}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
index 8225408d..230e15af 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box opacity={{}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box opacity={{}[1]} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {},
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
index a59494cb..58e5952c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className=\"d0 d1\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`d0 d1 ${props?.className ?? \"\"}`} style={props?.style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
index bfa9a81f..cdc5b156 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:100})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}}\n    className={css({color:\"white\", styleOrder:100})}\n\n     selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
index 1a450fb6..c0a944e2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box, css} from '@devup-ui/core'\n<Box\n        aria-disabled={false}\n        bg=\"red\"\n        className={css({\n          bg: 'blue',\n          styleOrder: 17,\n        })}\n        styleOrder={3}\n      />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n<Box\n        aria-disabled={false}\n        bg=\"red\"\n        className={css({\n          bg: 'blue',\n          styleOrder: 17,\n        })}\n        styleOrder={3}\n      />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order.snap b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
index cdb88952..1e4ac7e5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}} selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleOrder={20} p=\"4\" _hover={{ bg: [\"red\", \"blue\"]}} selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs-2.snap
deleted file mode 100644
index dc4c9b76..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs-2.snap
+++ /dev/null
@@ -1,8 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\"\n        }} />\n                \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
----
-ToBTreeSet {
-    styles: {},
-    code: "<div style={{ \"--d\": \"red\" }} />;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
index dfd2cf8b..6bbd684b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
@@ -14,5 +14,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: \"a d0\",\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" }\n\t}\n});\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: `a d0 ${props?.className ?? \"\"}`,\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" },\n\t\t...props?.style\n\t}\n});\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
index cdec6904..baa5ac6a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
index d3ec1a85..422c4c23 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${-1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${-1}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
index 20b92dfe..f82086e3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1} ${2}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1} ${2}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
index d065a5ed..61ef62b8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box bg={`${\"red\"}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box bg={`${\"red\"}`} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
index a5fabb5b..6bdef372 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : {}} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : {}} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
index 8b38ec7d..80ae2a87 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\",color:\"blue\" } : { fontWeight:\"bold\", color:\"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\",color:\"blue\" } : { fontWeight:\"bold\", color:\"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
index 347e27b0..32dabb9a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : undefined} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : undefined} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
index 1b6835a1..968dc9f1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ display:\"none\" }} _themeLight={{ display: \"flex\" }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ display:\"none\" }} _themeLight={{ display: \"flex\" }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
index dca5b205..edf4be79 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
index 6db189e0..3f33ec52 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{\n        selectors: {\n          '& :is(svg,img)': {\n            boxSize: '100%',\n            filter: 'brightness(0) invert(1)',\n          },\n        },\n      }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _hover={{bg:\"white\"}} _themeDark={{\n        selectors: {\n          '& :is(svg,img)': {\n            boxSize: '100%',\n            filter: 'brightness(0) invert(1)',\n          },\n        },\n      }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
index 4e186e63..63fcad9c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {