From c71fd19fae69e26a52a5dba6075bbe7dbf821544 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Thu, 5 Feb 2026 13:09:51 +0900
Subject: [PATCH 1/3] refactor(extractor): move integration tests to tests/
 directory

- Move 218 test functions from lib.rs to tests/all_tests.rs
- Reduce lib.rs from 13,500 lines to 375 lines (code only)
- Migrate 544 snapshot files from src/snapshots/ to tests/snapshots/
- All 1,221 tests pass (986 unit + 235 integration)

This separation improves code organization and compile times by
keeping test code separate from library code.
---
 libs/extractor/src/lib.rs                     | 13130 +---------------
 libs/extractor/tests/all_tests.rs             | 13128 +++++++++++++++
 .../all_tests__apply_typography-2.snap        |    12 +
 .../all_tests__apply_typography-3.snap        |    15 +
 .../all_tests__apply_typography.snap          |    12 +
 .../all_tests__apply_var_typography-2.snap    |     8 +
 .../all_tests__apply_var_typography-3.snap    |     8 +
 .../all_tests__apply_var_typography-4.snap    |    19 +
 .../all_tests__apply_var_typography.snap      |     8 +
 .../all_tests__at_rules_at_prefix-2.snap      |    25 +
 .../all_tests__at_rules_at_prefix-3.snap      |    25 +
 .../all_tests__at_rules_at_prefix.snap        |    25 +
 ...l_tests__at_rules_underscore_prefix-2.snap |    25 +
 ...l_tests__at_rules_underscore_prefix-3.snap |    25 +
 ...l_tests__at_rules_underscore_prefix-4.snap |    25 +
 ...all_tests__at_rules_underscore_prefix.snap |    25 +
 .../all_tests__avoid_same_name_component.snap |    19 +
 .../snapshots/all_tests__backtick_prop-2.snap |    18 +
 .../snapshots/all_tests__backtick_prop.snap   |    19 +
 .../all_tests__component_in_func.snap         |    61 +
 ...onditional_expression_with_selector-2.snap |    37 +
 ..._conditional_expression_with_selector.snap |    37 +
 .../all_tests__conditional_styles.snap        |    29 +
 ...tests__conditional_with_both_branches.snap |    49 +
 ...all_tests__container_at_rule_in_css-2.snap |    25 +
 .../all_tests__container_at_rule_in_css.snap  |    25 +
 .../snapshots/all_tests__convert_tag-10.snap  |     8 +
 .../snapshots/all_tests__convert_tag-11.snap  |     8 +
 .../snapshots/all_tests__convert_tag-12.snap  |     8 +
 .../snapshots/all_tests__convert_tag-13.snap  |    29 +
 .../snapshots/all_tests__convert_tag-14.snap  |    29 +
 .../snapshots/all_tests__convert_tag-15.snap  |    29 +
 .../snapshots/all_tests__convert_tag-16.snap  |    29 +
 .../snapshots/all_tests__convert_tag-17.snap  |    29 +
 .../snapshots/all_tests__convert_tag-18.snap  |    29 +
 .../snapshots/all_tests__convert_tag-19.snap  |    29 +
 .../snapshots/all_tests__convert_tag-2.snap   |     8 +
 .../snapshots/all_tests__convert_tag-20.snap  |    19 +
 .../snapshots/all_tests__convert_tag-21.snap  |    19 +
 .../snapshots/all_tests__convert_tag-3.snap   |     8 +
 .../snapshots/all_tests__convert_tag-4.snap   |     8 +
 .../snapshots/all_tests__convert_tag-5.snap   |     8 +
 .../snapshots/all_tests__convert_tag-6.snap   |     8 +
 .../snapshots/all_tests__convert_tag-7.snap   |    19 +
 .../snapshots/all_tests__convert_tag-8.snap   |     8 +
 .../snapshots/all_tests__convert_tag-9.snap   |     8 +
 .../snapshots/all_tests__convert_tag.snap     |     8 +
 ...__css_container_at_rule_with_selector.snap |    35 +
 .../all_tests__css_function_empty_object.snap |     8 +
 .../all_tests__css_function_no_args.snap      |     8 +
 ..._css_props_destructuring_assignment-2.snap |    59 +
 ...s__css_props_destructuring_assignment.snap |    39 +
 .../all_tests__css_variable_reassignment.snap |    19 +
 .../all_tests__css_with_template_literal.snap |    18 +
 .../all_tests__custom_selector-2.snap         |    23 +
 .../all_tests__custom_selector-3.snap         |    23 +
 .../snapshots/all_tests__custom_selector.snap |    23 +
 .../all_tests__default_import_usage.snap      |    19 +
 ...tests__dot_notation_theme_variables-2.snap |    29 +
 ...tests__dot_notation_theme_variables-3.snap |    19 +
 ...tests__dot_notation_theme_variables-4.snap |    19 +
 ...l_tests__dot_notation_theme_variables.snap |    19 +
 .../all_tests__duplicate_style_props.snap     |    19 +
 .../all_tests__dynamic_class_name_merge.snap  |    19 +
 .../snapshots/all_tests__enum_style_prop.snap |    18 +
 ...ll_tests__extract_advenced_selector-2.snap |    23 +
 ...ll_tests__extract_advenced_selector-3.snap |     8 +
 ...ll_tests__extract_advenced_selector-4.snap |    23 +
 ...ll_tests__extract_advenced_selector-5.snap |    23 +
 ...ll_tests__extract_advenced_selector-6.snap |    23 +
 ...ll_tests__extract_advenced_selector-7.snap |    43 +
 ...ll_tests__extract_advenced_selector-8.snap |    23 +
 .../all_tests__extract_advenced_selector.snap |    23 +
 ...ts__extract_class_name_from_component.snap |    53 +
 ...tract_compound_responsive_style_props.snap |    46 +
 ...tests__extract_conditional_selector-2.snap |    37 +
 ...tests__extract_conditional_selector-3.snap |     8 +
 ...tests__extract_conditional_selector-4.snap |    65 +
 ...l_tests__extract_conditional_selector.snap |    37 +
 ...s__extract_conditional_style_props-10.snap |     8 +
 ...s__extract_conditional_style_props-11.snap |    23 +
 ...ts__extract_conditional_style_props-2.snap |    27 +
 ...ts__extract_conditional_style_props-3.snap |    28 +
 ...ts__extract_conditional_style_props-4.snap |     8 +
 ...ts__extract_conditional_style_props-5.snap |    19 +
 ...ts__extract_conditional_style_props-6.snap |    19 +
 ...ts__extract_conditional_style_props-7.snap |    18 +
 ...ts__extract_conditional_style_props-8.snap |    18 +
 ...ts__extract_conditional_style_props-9.snap |    18 +
 ...ests__extract_conditional_style_props.snap |    29 +
 ...itional_style_props_with_class_name-2.snap |    41 +
 ...nditional_style_props_with_class_name.snap |     8 +
 ...tests__extract_dynamic_logical_case-2.snap |    18 +
 ...tests__extract_dynamic_logical_case-3.snap |    27 +
 ...tests__extract_dynamic_logical_case-4.snap |    18 +
 ...l_tests__extract_dynamic_logical_case.snap |    18 +
 ...xtract_dynamic_responsive_style_props.snap |    36 +
 ..._tests__extract_dynamic_style_props-2.snap |    18 +
 ..._tests__extract_dynamic_style_props-3.snap |    18 +
 ..._tests__extract_dynamic_style_props-4.snap |    18 +
 ...ll_tests__extract_dynamic_style_props.snap |    27 +
 ...tract_dynamic_style_props_with_type-2.snap |    18 +
 ...tract_dynamic_style_props_with_type-3.snap |    19 +
 ...extract_dynamic_style_props_with_type.snap |    18 +
 ..._tests__extract_enum_style_property-2.snap |     8 +
 ..._tests__extract_enum_style_property-3.snap |    49 +
 ..._tests__extract_enum_style_property-4.snap |    59 +
 ..._tests__extract_enum_style_property-5.snap |    49 +
 ..._tests__extract_enum_style_property-6.snap |   109 +
 ...ll_tests__extract_enum_style_property.snap |    29 +
 .../all_tests__extract_global_css-10.snap     |    43 +
 .../all_tests__extract_global_css-2.snap      |    26 +
 .../all_tests__extract_global_css-3.snap      |    26 +
 .../all_tests__extract_global_css-4.snap      |    26 +
 .../all_tests__extract_global_css-5.snap      |    26 +
 .../all_tests__extract_global_css-6.snap      |    26 +
 .../all_tests__extract_global_css-7.snap      |    26 +
 .../all_tests__extract_global_css-8.snap      |     8 +
 .../all_tests__extract_global_css-9.snap      |    26 +
 .../all_tests__extract_global_css.snap        |    26 +
 ...ests__extract_global_css_with_empty-2.snap |     8 +
 ...ests__extract_global_css_with_empty-3.snap |     8 +
 ...ests__extract_global_css_with_empty-4.snap |     8 +
 ...ests__extract_global_css_with_empty-5.snap |     8 +
 ...ests__extract_global_css_with_empty-6.snap |     8 +
 ..._tests__extract_global_css_with_empty.snap |     8 +
 ...extract_global_css_with_font_faces-10.snap |     8 +
 ..._extract_global_css_with_font_faces-2.snap |    19 +
 ..._extract_global_css_with_font_faces-3.snap |    18 +
 ..._extract_global_css_with_font_faces-4.snap |    19 +
 ..._extract_global_css_with_font_faces-5.snap |    19 +
 ..._extract_global_css_with_font_faces-6.snap |    18 +
 ..._extract_global_css_with_font_faces-7.snap |    49 +
 ..._extract_global_css_with_font_faces-8.snap |    15 +
 ..._extract_global_css_with_font_faces-9.snap |    15 +
 ...s__extract_global_css_with_font_faces.snap |    29 +
 ...ts__extract_global_css_with_imports-2.snap |    21 +
 ...ts__extract_global_css_with_imports-3.snap |    21 +
 ...ests__extract_global_css_with_imports.snap |    15 +
 ...s__extract_global_css_with_selector-2.snap |   145 +
 ...s__extract_global_css_with_selector-3.snap |   145 +
 ...s__extract_global_css_with_selector-4.snap |   213 +
 ...sts__extract_global_css_with_selector.snap |    77 +
 ...ct_global_css_with_template_literal-2.snap |     8 +
 ...ct_global_css_with_template_literal-3.snap |     8 +
 ...ct_global_css_with_template_literal-4.snap |     8 +
 ...ct_global_css_with_template_literal-5.snap |    15 +
 ...ct_global_css_with_template_literal-6.snap |     8 +
 ...ct_global_css_with_template_literal-7.snap |     8 +
 ...ct_global_css_with_template_literal-8.snap |     8 +
 ...ct_global_css_with_template_literal-9.snap |    15 +
 ...ract_global_css_with_template_literal.snap |    26 +
 ...tract_global_css_with_wrong_imports-2.snap |     8 +
 ...extract_global_css_with_wrong_imports.snap |    15 +
 .../all_tests__extract_just_tsx-2.snap        |     8 +
 .../all_tests__extract_just_tsx.snap          |     8 +
 ..._extract_just_tsx_in_multiple_files-2.snap |    29 +
 ..._extract_just_tsx_in_multiple_files-3.snap |    29 +
 ..._extract_just_tsx_in_multiple_files-4.snap |    29 +
 ...s__extract_just_tsx_in_multiple_files.snap |    29 +
 .../all_tests__extract_keyframs-10.snap       |    53 +
 .../all_tests__extract_keyframs-2.snap        |    45 +
 .../all_tests__extract_keyframs-3.snap        |    45 +
 .../all_tests__extract_keyframs-4.snap        |    45 +
 .../all_tests__extract_keyframs-5.snap        |    45 +
 .../all_tests__extract_keyframs-6.snap        |    45 +
 .../all_tests__extract_keyframs-7.snap        |    45 +
 .../all_tests__extract_keyframs-8.snap        |    45 +
 .../all_tests__extract_keyframs-9.snap        |   117 +
 .../all_tests__extract_keyframs.snap          |    35 +
 ...all_tests__extract_keyframs_literal-2.snap |    51 +
 .../all_tests__extract_keyframs_literal.snap  |    35 +
 .../all_tests__extract_logical_case-2.snap    |    19 +
 .../all_tests__extract_logical_case-3.snap    |    28 +
 .../all_tests__extract_logical_case-4.snap    |    19 +
 .../all_tests__extract_logical_case.snap      |    19 +
 ...all_tests__extract_nested_selector-10.snap |    37 +
 ...all_tests__extract_nested_selector-11.snap |    37 +
 .../all_tests__extract_nested_selector-2.snap |    37 +
 .../all_tests__extract_nested_selector-3.snap |    51 +
 .../all_tests__extract_nested_selector-4.snap |    23 +
 .../all_tests__extract_nested_selector-5.snap |    23 +
 .../all_tests__extract_nested_selector-6.snap |    23 +
 .../all_tests__extract_nested_selector-7.snap |    37 +
 .../all_tests__extract_nested_selector-8.snap |    37 +
 .../all_tests__extract_nested_selector-9.snap |    23 +
 .../all_tests__extract_nested_selector.snap   |    23 +
 ..._responsive_conditional_style_props-2.snap |    39 +
 ..._responsive_conditional_style_props-3.snap |    55 +
 ..._responsive_conditional_style_props-4.snap |    65 +
 ..._responsive_conditional_style_props-5.snap |    65 +
 ..._responsive_conditional_style_props-6.snap |    86 +
 ..._responsive_conditional_style_props-7.snap |    19 +
 ..._responsive_conditional_style_props-8.snap |    29 +
 ...ct_responsive_conditional_style_props.snap |    29 +
 ...itional_style_props_with_class_name-2.snap |    19 +
 ...nditional_style_props_with_class_name.snap |    39 +
 ...sts__extract_responsive_style_props-2.snap |    41 +
 ...tests__extract_responsive_style_props.snap |    39 +
 ...namic_value_conditional_style_props-2.snap |    18 +
 ...dynamic_value_conditional_style_props.snap |    18 +
 ..._same_value_conditional_style_props-2.snap |    19 +
 ..._same_value_conditional_style_props-3.snap |    19 +
 ..._same_value_conditional_style_props-4.snap |    19 +
 ..._same_value_conditional_style_props-5.snap |    19 +
 ..._same_value_conditional_style_props-6.snap |    19 +
 ...ct_same_value_conditional_style_props.snap |    19 +
 .../all_tests__extract_selector-10.snap       |    37 +
 .../all_tests__extract_selector-11.snap       |    37 +
 .../all_tests__extract_selector-12.snap       |    23 +
 .../all_tests__extract_selector-13.snap       |    23 +
 .../all_tests__extract_selector-14.snap       |    37 +
 .../all_tests__extract_selector-15.snap       |    37 +
 .../all_tests__extract_selector-16.snap       |    65 +
 .../all_tests__extract_selector-2.snap        |   101 +
 .../all_tests__extract_selector-3.snap        |    37 +
 .../all_tests__extract_selector-4.snap        |    37 +
 .../all_tests__extract_selector-5.snap        |    37 +
 .../all_tests__extract_selector-6.snap        |    65 +
 .../all_tests__extract_selector-7.snap        |    65 +
 .../all_tests__extract_selector-8.snap        |    37 +
 .../all_tests__extract_selector-9.snap        |    93 +
 .../all_tests__extract_selector.snap          |    37 +
 ...ests__extract_selector_with_literal-2.snap |    23 +
 ..._tests__extract_selector_with_literal.snap |    23 +
 ...s__extract_selector_with_responsive-2.snap |    65 +
 ...s__extract_selector_with_responsive-3.snap |    65 +
 ...sts__extract_selector_with_responsive.snap |    65 +
 ...xtract_static_css_class_name_props-10.snap |    93 +
 ...xtract_static_css_class_name_props-11.snap |     8 +
 ...xtract_static_css_class_name_props-12.snap |     8 +
 ...xtract_static_css_class_name_props-13.snap |     8 +
 ...xtract_static_css_class_name_props-14.snap |    19 +
 ...xtract_static_css_class_name_props-15.snap |     8 +
 ...xtract_static_css_class_name_props-16.snap |    19 +
 ...extract_static_css_class_name_props-2.snap |    19 +
 ...extract_static_css_class_name_props-3.snap |    29 +
 ...extract_static_css_class_name_props-4.snap |    19 +
 ...extract_static_css_class_name_props-5.snap |    37 +
 ...extract_static_css_class_name_props-6.snap |    29 +
 ...extract_static_css_class_name_props-7.snap |     8 +
 ...extract_static_css_class_name_props-8.snap |     8 +
 ...extract_static_css_class_name_props-9.snap |    37 +
 ...__extract_static_css_class_name_props.snap |    19 +
 ...extract_static_css_with_media_query-2.snap |    45 +
 ...extract_static_css_with_media_query-3.snap |    25 +
 ...__extract_static_css_with_media_query.snap |    25 +
 ...ests__extract_static_css_with_theme-2.snap |    19 +
 ...ests__extract_static_css_with_theme-3.snap |    19 +
 ..._tests__extract_static_css_with_theme.snap |    19 +
 .../all_tests__extract_style_props-2.snap     |    29 +
 .../all_tests__extract_style_props-3.snap     |    29 +
 .../all_tests__extract_style_props-4.snap     |    29 +
 .../all_tests__extract_style_props-5.snap     |    41 +
 .../all_tests__extract_style_props-6.snap     |    31 +
 .../all_tests__extract_style_props.snap       |    29 +
 ...extract_style_props_with_class_name-2.snap |    29 +
 ...extract_style_props_with_class_name-3.snap |    29 +
 ...extract_style_props_with_class_name-4.snap |    29 +
 ...extract_style_props_with_class_name-5.snap |    29 +
 ...extract_style_props_with_class_name-6.snap |    29 +
 ...extract_style_props_with_class_name-7.snap |    29 +
 ...extract_style_props_with_class_name-8.snap |    47 +
 ...extract_style_props_with_class_name-9.snap |    25 +
 ...__extract_style_props_with_class_name.snap |    29 +
 ...tract_style_props_with_default_import.snap |    41 +
 ...act_style_props_with_namespace_import.snap |    41 +
 ...sts__extract_style_props_with_var_css.snap |    19 +
 ...act_variable_style_props_with_style-2.snap |    18 +
 ...tract_variable_style_props_with_style.snap |    18 +
 ...all_tests__extract_wrong_global_css-2.snap |     8 +
 ...all_tests__extract_wrong_global_css-3.snap |     8 +
 .../all_tests__extract_wrong_global_css.snap  |    26 +
 .../all_tests__extract_wrong_keyframs.snap    |    45 +
 ...xtract_wrong_responsive_style_props-2.snap |    19 +
 ..._extract_wrong_responsive_style_props.snap |     8 +
 .../all_tests__global_css_at_rules-2.snap     |    29 +
 .../all_tests__global_css_at_rules-3.snap     |    29 +
 .../all_tests__global_css_at_rules-4.snap     |    86 +
 .../all_tests__global_css_at_rules.snap       |    29 +
 ..._fontfaces_multi_value_optimization-2.snap |    18 +
 ...ss_fontfaces_multi_value_optimization.snap |    20 +
 ..._global_css_fontfaces_object_syntax-2.snap |    29 +
 ...s__global_css_fontfaces_object_syntax.snap |    20 +
 .../all_tests__global_css_function.snap       |    43 +
 ..._global_css_layer_property_extraction.snap |    66 +
 .../all_tests__global_css_no_args.snap        |     8 +
 ...all_tests__global_css_with_font_faces.snap |    19 +
 .../all_tests__global_css_with_imports.snap   |    15 +
 .../all_tests__global_css_with_layer-2.snap   |    47 +
 .../all_tests__global_css_with_layer.snap     |    47 +
 ...__global_css_with_layer_in_selector-2.snap |    47 +
 ...ts__global_css_with_layer_in_selector.snap |    47 +
 ...ests__global_css_with_pseudo_selector.snap |    26 +
 .../all_tests__group_selector_props.snap      |    23 +
 .../all_tests__ignore_special_props-2.snap    |     8 +
 .../all_tests__ignore_special_props.snap      |    19 +
 ...sts__import_alias_custom_named_export.snap |    29 +
 ...ll_tests__import_alias_emotion_styled.snap |    29 +
 ..._tests__import_alias_multiple_aliases.snap |    19 +
 ...ll_tests__import_alias_renamed_import.snap |    29 +
 ...t_alias_skip_when_package_not_in_code.snap |     8 +
 ...tests__import_alias_styled_components.snap |    29 +
 ...s__import_alias_vanilla_extract_named.snap |    29 +
 .../snapshots/all_tests__import_main_css.snap |    29 +
 .../all_tests__import_wrong_component-2.snap  |     8 +
 .../all_tests__import_wrong_component.snap    |     8 +
 .../all_tests__keyframes_function.snap        |    35 +
 .../all_tests__keyframes_no_args.snap         |     8 +
 .../snapshots/all_tests__maintain_value.snap  |   111 +
 ...ll_tests__mask_properties_with_korean.snap |    79 +
 .../all_tests__media_query_selectors-2.snap   |    25 +
 .../all_tests__media_query_selectors-3.snap   |    25 +
 .../all_tests__media_query_selectors-4.snap   |    25 +
 .../all_tests__media_query_selectors-5.snap   |    51 +
 .../all_tests__media_query_selectors.snap     |    41 +
 .../all_tests__member_expression_style.snap   |    18 +
 .../all_tests__multiple_dynamic_values.snap   |    36 +
 .../all_tests__namespace_import_css.snap      |    19 +
 .../all_tests__namespace_import_usage.snap    |    19 +
 .../all_tests__negative_props-2.snap          |    18 +
 .../all_tests__negative_props-3.snap          |    18 +
 .../all_tests__negative_props-4.snap          |    18 +
 .../all_tests__negative_props-5.snap          |    19 +
 .../all_tests__negative_props-6.snap          |    19 +
 .../all_tests__negative_props-7.snap          |    39 +
 .../snapshots/all_tests__negative_props.snap  |    19 +
 .../all_tests__nested_conditional.snap        |    39 +
 .../all_tests__nested_theme_props.snap        |    51 +
 .../all_tests__optimize_aspect_ratio-2.snap   |    31 +
 .../all_tests__optimize_aspect_ratio-3.snap   |    31 +
 .../all_tests__optimize_aspect_ratio.snap     |    31 +
 .../snapshots/all_tests__optimize_func-2.snap |    19 +
 .../snapshots/all_tests__optimize_func-3.snap |    19 +
 .../snapshots/all_tests__optimize_func-4.snap |    19 +
 .../snapshots/all_tests__optimize_func-5.snap |    19 +
 .../snapshots/all_tests__optimize_func-6.snap |    19 +
 .../snapshots/all_tests__optimize_func-7.snap |    19 +
 .../snapshots/all_tests__optimize_func.snap   |    19 +
 .../all_tests__optimize_multi_css_value.snap  |    19 +
 ...rops_direct_array_responsive_select-2.snap |    81 +
 ..._props_direct_array_responsive_select.snap |    81 +
 ...ll_tests__props_direct_array_select-2.snap |    41 +
 ...ll_tests__props_direct_array_select-3.snap |    41 +
 ...ll_tests__props_direct_array_select-4.snap |    40 +
 ...ll_tests__props_direct_array_select-5.snap |    75 +
 ...ll_tests__props_direct_array_select-6.snap |    30 +
 ...ll_tests__props_direct_array_select-7.snap |    50 +
 .../all_tests__props_direct_array_select.snap |    31 +
 ...props_direct_hybrid_responsive_select.snap |    77 +
 ...ops_direct_object_responsive_select-2.snap |    81 +
 ...props_direct_object_responsive_select.snap |    81 +
 ...l_tests__props_direct_object_select-2.snap |    31 +
 ...l_tests__props_direct_object_select-3.snap |    50 +
 ...l_tests__props_direct_object_select-4.snap |    41 +
 ...all_tests__props_direct_object_select.snap |    31 +
 ...ct_variable_array_responsive_select-2.snap |    48 +
 ...rect_variable_array_responsive_select.snap |    75 +
 ...ect_variable_object_responsive_select.snap |    75 +
 ...props_direct_variable_object_select-2.snap |    18 +
 ...__props_direct_variable_object_select.snap |    41 +
 .../all_tests__props_direct_wrong.snap        |    21 +
 .../all_tests__props_multi_expression.snap    |   149 +
 .../snapshots/all_tests__props_prop.snap      |    19 +
 ...ts__props_wrong_direct_array_select-2.snap |    21 +
 ...ts__props_wrong_direct_array_select-3.snap |    21 +
 ...ts__props_wrong_direct_array_select-4.snap |    21 +
 ...ts__props_wrong_direct_array_select-5.snap |     8 +
 ...ests__props_wrong_direct_array_select.snap |    21 +
 ...s__props_wrong_direct_object_select-2.snap |    21 +
 ...s__props_wrong_direct_object_select-3.snap |    21 +
 ...s__props_wrong_direct_object_select-4.snap |    21 +
 ...sts__props_wrong_direct_object_select.snap |     8 +
 .../all_tests__remove_semicolon-2.snap        |    19 +
 .../all_tests__remove_semicolon-3.snap        |    19 +
 .../all_tests__remove_semicolon-4.snap        |    18 +
 .../all_tests__remove_semicolon-5.snap        |    18 +
 .../all_tests__remove_semicolon.snap          |    19 +
 .../all_tests__responsive_array_styles.snap   |    69 +
 .../snapshots/all_tests__rest_props-2.snap    |    61 +
 .../snapshots/all_tests__rest_props.snap      |    31 +
 ...ests__selector_refs_with_global_theme.snap |    67 +
 .../snapshots/all_tests__spread_props.snap    |    19 +
 .../snapshots/all_tests__style_order-2.snap   |    76 +
 .../snapshots/all_tests__style_order-3.snap   |    21 +
 .../snapshots/all_tests__style_order-4.snap   |    19 +
 .../snapshots/all_tests__style_order-5.snap   |    21 +
 .../snapshots/all_tests__style_order-6.snap   |    81 +
 .../snapshots/all_tests__style_order-7.snap   |    33 +
 .../snapshots/all_tests__style_order-8.snap   |    19 +
 .../snapshots/all_tests__style_order.snap     |    69 +
 .../snapshots/all_tests__style_order2-2.snap  |    81 +
 .../snapshots/all_tests__style_order2-3.snap  |    81 +
 .../snapshots/all_tests__style_order2.snap    |    81 +
 .../all_tests__style_order_prop.snap          |    21 +
 .../all_tests__style_prop_merge.snap          |    18 +
 .../all_tests__style_variables-10.snap        |     8 +
 .../all_tests__style_variables-11.snap        |     8 +
 .../all_tests__style_variables-2.snap         |     8 +
 .../all_tests__style_variables-3.snap         |     8 +
 .../all_tests__style_variables-4.snap         |     8 +
 .../all_tests__style_variables-5.snap         |     8 +
 .../all_tests__style_variables-6.snap         |     8 +
 .../all_tests__style_variables-7.snap         |    18 +
 .../all_tests__style_variables-8.snap         |     8 +
 .../all_tests__style_variables-9.snap         |     8 +
 .../snapshots/all_tests__style_variables.snap |     8 +
 .../all_tests__style_variables_mjs.snap       |     8 +
 .../snapshots/all_tests__style_vars_prop.snap |    19 +
 .../tests/snapshots/all_tests__styled-10.snap |    29 +
 .../tests/snapshots/all_tests__styled-11.snap |    19 +
 .../tests/snapshots/all_tests__styled-2.snap  |    29 +
 .../tests/snapshots/all_tests__styled-3.snap  |    19 +
 .../tests/snapshots/all_tests__styled-4.snap  |    19 +
 .../tests/snapshots/all_tests__styled-5.snap  |    19 +
 .../tests/snapshots/all_tests__styled-6.snap  |    29 +
 .../tests/snapshots/all_tests__styled-7.snap  |    43 +
 .../tests/snapshots/all_tests__styled-8.snap  |    53 +
 .../tests/snapshots/all_tests__styled-9.snap  |    19 +
 .../tests/snapshots/all_tests__styled.snap    |    29 +
 .../all_tests__styled_with_spread.snap        |     8 +
 .../all_tests__styled_with_variable-2.snap    |    29 +
 .../all_tests__styled_with_variable-3.snap    |    29 +
 .../all_tests__styled_with_variable-4.snap    |    33 +
 .../all_tests__styled_with_variable-5.snap    |    29 +
 .../all_tests__styled_with_variable.snap      |    29 +
 ...__styled_with_variable_like_emotion-2.snap |    27 +
 ...__styled_with_variable_like_emotion-3.snap |    27 +
 ...__styled_with_variable_like_emotion-4.snap |    27 +
 ...__styled_with_variable_like_emotion-5.snap |    36 +
 ...__styled_with_variable_like_emotion-6.snap |    36 +
 ...__styled_with_variable_like_emotion-7.snap |    36 +
 ...ts__styled_with_variable_like_emotion.snap |    28 +
 ...ed_with_variable_like_emotion_props-2.snap |    27 +
 ...ed_with_variable_like_emotion_props-3.snap |    36 +
 ...ed_with_variable_like_emotion_props-4.snap |    27 +
 ...yled_with_variable_like_emotion_props.snap |    28 +
 .../all_tests__support_transpile_cjs-2.snap   |    68 +
 .../all_tests__support_transpile_cjs-3.snap   |    68 +
 .../all_tests__support_transpile_cjs-4.snap   |    68 +
 .../all_tests__support_transpile_cjs-5.snap   |    68 +
 .../all_tests__support_transpile_cjs-6.snap   |    68 +
 .../all_tests__support_transpile_cjs-7.snap   |    33 +
 .../all_tests__support_transpile_cjs.snap     |    68 +
 .../all_tests__support_transpile_mjs-2.snap   |    68 +
 .../all_tests__support_transpile_mjs-3.snap   |    19 +
 .../all_tests__support_transpile_mjs-4.snap   |    18 +
 .../all_tests__support_transpile_mjs-5.snap   |    18 +
 .../all_tests__support_transpile_mjs-6.snap   |    18 +
 .../all_tests__support_transpile_mjs-7.snap   |    18 +
 .../all_tests__support_transpile_mjs-8.snap   |    18 +
 .../all_tests__support_transpile_mjs.snap     |    68 +
 .../all_tests__tailwind_arbitrary_values.snap |    39 +
 ..._tests__tailwind_classname_extraction.snap |    29 +
 ...__tailwind_classname_with_devup_props.snap |    39 +
 ...sts__tailwind_classname_with_variants.snap |    43 +
 .../all_tests__tailwind_full_integration.snap |   415 +
 ..._tailwind_mixed_with_devup_responsive.snap |   123 +
 .../all_tests__tailwind_negative_values.snap  |    29 +
 ...literal_with_function_call_expression.snap |    29 +
 ...plate_literal_with_logical_expression.snap |    39 +
 ..._literal_with_nested_template_literal.snap |    19 +
 ...literal_with_parenthesized_expression.snap |    39 +
 ...ind_template_literal_with_style_order.snap |    45 +
 ...late_literal_with_variable_expression.snap |    29 +
 ...ests__tailwind_with_all_variant_types.snap |   153 +
 .../all_tests__tailwind_with_as_prop.snap     |    19 +
 ...ind_with_conditional_template_literal.snap |    49 +
 .../all_tests__template_literal_props-2.snap  |    19 +
 .../all_tests__template_literal_props-3.snap  |    19 +
 .../all_tests__template_literal_props-4.snap  |    19 +
 .../all_tests__template_literal_props-5.snap  |     8 +
 .../all_tests__template_literal_props-6.snap  |    37 +
 .../all_tests__template_literal_props.snap    |    19 +
 ...tests__ternary_operator_in_selector-2.snap |    35 +
 ...tests__ternary_operator_in_selector-3.snap |    77 +
 ...l_tests__ternary_operator_in_selector.snap |    35 +
 .../snapshots/all_tests__theme_props.snap     |    37 +
 .../all_tests__theme_selector-2.snap          |    37 +
 .../all_tests__theme_selector-3.snap          |    65 +
 .../snapshots/all_tests__theme_selector.snap  |    23 +
 .../all_tests__typography_style.snap          |    12 +
 ..._vanilla_extract_all_exports_combined.snap |   118 +
 ...ll_tests__vanilla_extract_all_imports.snap |    79 +
 ...ll_tests__vanilla_extract_composition.snap |    69 +
 ...sts__vanilla_extract_constant_exports.snap |    19 +
 .../all_tests__vanilla_extract_container.snap |    45 +
 ...l_tests__vanilla_extract_create_var-2.snap |    19 +
 ...all_tests__vanilla_extract_create_var.snap |    29 +
 ...ct_css_ts_with_vanilla_extract_import.snap |    59 +
 ...ll_tests__vanilla_extract_font_face-2.snap |    30 +
 .../all_tests__vanilla_extract_font_face.snap |    28 +
 ...vanilla_extract_font_face_empty_props.snap |    27 +
 ...vanilla_extract_font_face_placeholder.snap |    49 +
 ..._vanilla_extract_font_face_with_style.snap |    29 +
 ...l_tests__vanilla_extract_global_theme.snap |    77 +
 ...nilla_extract_global_theme_empty_vars.snap |    19 +
 ...illa_extract_global_theme_placeholder.snap |    87 +
 ...anilla_extract_global_theme_with_vars.snap |    87 +
 ...__vanilla_extract_imports_combination.snap |    88 +
 ...sts__vanilla_extract_keyframes_export.snap |    71 +
 .../all_tests__vanilla_extract_layer.snap     |    47 +
 ...__vanilla_extract_layer_and_container.snap |    29 +
 ..._tests__vanilla_extract_media_queries.snap |    83 +
 ...__vanilla_extract_non_exported_styles.snap |    55 +
 ...s__vanilla_extract_non_exported_theme.snap |    53 +
 ...la_extract_selector_class_replacement.snap |    33 +
 ...__vanilla_extract_selector_references.snap |    47 +
 ...t_selector_refs_triggers_with_classes.snap |    85 +
 ...ll_tests__vanilla_extract_selectors-2.snap |    47 +
 .../all_tests__vanilla_extract_selectors.snap |    89 +
 ...nilla_extract_style_composition_empty.snap |     8 +
 ...la_extract_style_composition_multiple.snap |    39 +
 ...tests__vanilla_extract_style_css_js-2.snap |    29 +
 ...l_tests__vanilla_extract_style_css_js.snap |    29 +
 ...l_tests__vanilla_extract_style_css_ts.snap |    29 +
 ...sts__vanilla_extract_style_variants-2.snap |    69 +
 ...tests__vanilla_extract_style_variants.snap |    39 +
 ..._vanilla_extract_style_variants_mixed.snap |    79 +
 ...illa_extract_style_variants_with_base.snap |    59 +
 .../all_tests__vanilla_extract_supports.snap  |    35 +
 .../all_tests__vanilla_extract_theme-2.snap   |    77 +
 .../all_tests__vanilla_extract_theme.snap     |   114 +
 ...nilla_extract_theme_array_destructure.snap |    87 +
 ...nilla_extract_theme_export_variations.snap |    87 +
 ..._vanilla_extract_theme_vars_name_only.snap |    26 +
 ...ests__vanilla_extract_theme_with_vars.snap |    77 +
 ...nilla_extract_theme_without_vars_json.snap |    36 +
 ...nilla_extract_theme_without_vars_name.snap |    43 +
 .../all_tests__vanilla_extract_vars_only.snap |    29 +
 ...la_extract_with_at_container_selector.snap |    51 +
 ..._tests__vanilla_extract_with_computed.snap |    29 +
 ...a_extract_with_keyframes_and_global-2.snap |    43 +
 ...lla_extract_with_keyframes_and_global.snap |    45 +
 ..._vanilla_extract_with_pseudo_selector.snap |    33 +
 ...vanilla_extract_with_responsive_array.snap |    39 +
 ...ll_tests__vanilla_extract_with_spread.snap |    39 +
 ..._tests__vanilla_extract_with_variable.snap |    29 +
 .../snapshots/all_tests__with_prefix.snap     |    51 +
 .../all_tests__wrong_style_variables.snap     |     8 +
 ...ed_with_variable_like_emotion_props-2.snap |     8 +
 ...ed_with_variable_like_emotion_props-3.snap |     8 +
 ...ed_with_variable_like_emotion_props-4.snap |     8 +
 ...ed_with_variable_like_emotion_props-5.snap |     8 +
 ...yled_with_variable_like_emotion_props.snap |     8 +
 ...sts__alias_in_comment_not_transformed.snap |     6 +
 ...t__tests__css_ts_file_vanilla_extract.snap |     6 +
 ...ests__default_to_named_different_name.snap |     5 +
 ...ts__default_to_named_namespace_import.snap |     5 +
 ...it__tests__default_to_named_same_name.snap |     5 +
 ...o_named_with_additional_named_imports.snap |     5 +
 ...lt_to_named_with_aliased_named_import.snap |     5 +
 ...ort_alias_visit__tests__empty_aliases.snap |     5 +
 ...it__tests__multiple_imports_same_file.snap |     7 +
 ...visit__tests__named_import_with_alias.snap |     5 +
 ...rt_alias_visit__tests__named_to_named.snap |     5 +
 ...ests__named_to_named_namespace_import.snap |     5 +
 ...named_to_named_with_default_specifier.snap |     5 +
 ...alias_visit__tests__no_matching_alias.snap |     5 +
 ...t__tests__preserves_code_after_import.snap |    10 +
 ...sts__side_effect_import_no_specifiers.snap |     5 +
 ...alias_visit__tests__styled_components.snap |     5 +
 ...tests__parse_tailwind_to_styles_basic.snap |    36 +
 ...sts__parse_tailwind_to_styles_complex.snap |   110 +
 ...__parse_tailwind_to_styles_responsive.snap |    36 +
 ...ts__parse_tailwind_to_styles_variants.snap |    48 +
 .../extractor__tests__apply_typography-2.snap |     0
 .../extractor__tests__apply_typography-3.snap |     0
 .../extractor__tests__apply_typography.snap   |     0
 ...ractor__tests__apply_var_typography-2.snap |     0
 ...ractor__tests__apply_var_typography-3.snap |     0
 ...ractor__tests__apply_var_typography-4.snap |     0
 ...xtractor__tests__apply_var_typography.snap |     0
 ...xtractor__tests__at_rules_at_prefix-2.snap |     0
 ...xtractor__tests__at_rules_at_prefix-3.snap |     0
 .../extractor__tests__at_rules_at_prefix.snap |     0
 ...__tests__at_rules_underscore_prefix-2.snap |     0
 ...__tests__at_rules_underscore_prefix-3.snap |     0
 ...__tests__at_rules_underscore_prefix-4.snap |     0
 ...or__tests__at_rules_underscore_prefix.snap |     0
 ...tor__tests__avoid_same_name_component.snap |     0
 .../extractor__tests__backtick_prop-2.snap    |     0
 .../extractor__tests__backtick_prop.snap      |     0
 .../extractor__tests__component_in_func.snap  |     0
 ...onditional_expression_with_selector-2.snap |     0
 ..._conditional_expression_with_selector.snap |     0
 .../extractor__tests__conditional_styles.snap |     0
 ...tests__conditional_with_both_branches.snap |     0
 ...or__tests__container_at_rule_in_css-2.snap |     0
 ...ctor__tests__container_at_rule_in_css.snap |     0
 .../extractor__tests__convert_tag-10.snap     |     0
 .../extractor__tests__convert_tag-11.snap     |     0
 .../extractor__tests__convert_tag-12.snap     |     0
 .../extractor__tests__convert_tag-13.snap     |     0
 .../extractor__tests__convert_tag-14.snap     |     0
 .../extractor__tests__convert_tag-15.snap     |     0
 .../extractor__tests__convert_tag-16.snap     |     0
 .../extractor__tests__convert_tag-17.snap     |     0
 .../extractor__tests__convert_tag-18.snap     |     0
 .../extractor__tests__convert_tag-19.snap     |     0
 .../extractor__tests__convert_tag-2.snap      |     0
 .../extractor__tests__convert_tag-20.snap     |     0
 .../extractor__tests__convert_tag-21.snap     |     0
 .../extractor__tests__convert_tag-3.snap      |     0
 .../extractor__tests__convert_tag-4.snap      |     0
 .../extractor__tests__convert_tag-5.snap      |     0
 .../extractor__tests__convert_tag-6.snap      |     0
 .../extractor__tests__convert_tag-7.snap      |     0
 .../extractor__tests__convert_tag-8.snap      |     0
 .../extractor__tests__convert_tag-9.snap      |     0
 .../extractor__tests__convert_tag.snap        |     0
 ...__css_container_at_rule_with_selector.snap |     0
 ...tor__tests__css_function_empty_object.snap |     0
 ...xtractor__tests__css_function_no_args.snap |     0
 ..._css_props_destructuring_assignment-2.snap |     0
 ...s__css_props_destructuring_assignment.snap |     0
 ...tor__tests__css_variable_reassignment.snap |     0
 ...tor__tests__css_with_template_literal.snap |     0
 .../extractor__tests__custom_selector-2.snap  |     0
 .../extractor__tests__custom_selector-3.snap  |     0
 .../extractor__tests__custom_selector.snap    |     0
 ...xtractor__tests__default_import_usage.snap |     0
 ...tests__dot_notation_theme_variables-2.snap |     0
 ...tests__dot_notation_theme_variables-3.snap |     0
 ...tests__dot_notation_theme_variables-4.snap |     0
 ...__tests__dot_notation_theme_variables.snap |     0
 ...tractor__tests__duplicate_style_props.snap |     0
 ...ctor__tests__dynamic_class_name_merge.snap |     0
 .../extractor__tests__enum_style_prop.snap    |     0
 ...r__tests__extract_advenced_selector-2.snap |     0
 ...r__tests__extract_advenced_selector-3.snap |     0
 ...r__tests__extract_advenced_selector-4.snap |     0
 ...r__tests__extract_advenced_selector-5.snap |     0
 ...r__tests__extract_advenced_selector-6.snap |     0
 ...r__tests__extract_advenced_selector-7.snap |     0
 ...r__tests__extract_advenced_selector-8.snap |     0
 ...tor__tests__extract_advenced_selector.snap |     0
 ...ts__extract_class_name_from_component.snap |     0
 ...tract_compound_responsive_style_props.snap |     0
 ...tests__extract_conditional_selector-2.snap |     0
 ...tests__extract_conditional_selector-3.snap |     0
 ...tests__extract_conditional_selector-4.snap |     0
 ...__tests__extract_conditional_selector.snap |     0
 ...s__extract_conditional_style_props-10.snap |     0
 ...s__extract_conditional_style_props-11.snap |     0
 ...ts__extract_conditional_style_props-2.snap |     0
 ...ts__extract_conditional_style_props-3.snap |     0
 ...ts__extract_conditional_style_props-4.snap |     0
 ...ts__extract_conditional_style_props-5.snap |     0
 ...ts__extract_conditional_style_props-6.snap |     0
 ...ts__extract_conditional_style_props-7.snap |     0
 ...ts__extract_conditional_style_props-8.snap |     0
 ...ts__extract_conditional_style_props-9.snap |     0
 ...ests__extract_conditional_style_props.snap |     0
 ...itional_style_props_with_class_name-2.snap |     0
 ...nditional_style_props_with_class_name.snap |     0
 ...tests__extract_dynamic_logical_case-2.snap |     0
 ...tests__extract_dynamic_logical_case-3.snap |     0
 ...tests__extract_dynamic_logical_case-4.snap |     0
 ...__tests__extract_dynamic_logical_case.snap |     0
 ...xtract_dynamic_responsive_style_props.snap |     0
 ..._tests__extract_dynamic_style_props-2.snap |     0
 ..._tests__extract_dynamic_style_props-3.snap |     0
 ..._tests__extract_dynamic_style_props-4.snap |     0
 ...r__tests__extract_dynamic_style_props.snap |     0
 ...tract_dynamic_style_props_with_type-2.snap |     0
 ...tract_dynamic_style_props_with_type-3.snap |     0
 ...extract_dynamic_style_props_with_type.snap |     0
 ..._tests__extract_enum_style_property-2.snap |     0
 ..._tests__extract_enum_style_property-3.snap |     0
 ..._tests__extract_enum_style_property-4.snap |     0
 ..._tests__extract_enum_style_property-5.snap |     0
 ..._tests__extract_enum_style_property-6.snap |     0
 ...r__tests__extract_enum_style_property.snap |     0
 ...tractor__tests__extract_global_css-10.snap |     0
 ...xtractor__tests__extract_global_css-2.snap |     0
 ...xtractor__tests__extract_global_css-3.snap |     0
 ...xtractor__tests__extract_global_css-4.snap |     0
 ...xtractor__tests__extract_global_css-5.snap |     0
 ...xtractor__tests__extract_global_css-6.snap |     0
 ...xtractor__tests__extract_global_css-7.snap |     0
 ...xtractor__tests__extract_global_css-8.snap |     0
 ...xtractor__tests__extract_global_css-9.snap |     0
 .../extractor__tests__extract_global_css.snap |     0
 ...ests__extract_global_css_with_empty-2.snap |     0
 ...ests__extract_global_css_with_empty-3.snap |     0
 ...ests__extract_global_css_with_empty-4.snap |     0
 ...ests__extract_global_css_with_empty-5.snap |     0
 ...ests__extract_global_css_with_empty-6.snap |     0
 ..._tests__extract_global_css_with_empty.snap |     0
 ...extract_global_css_with_font_faces-10.snap |     0
 ..._extract_global_css_with_font_faces-2.snap |     0
 ..._extract_global_css_with_font_faces-3.snap |     0
 ..._extract_global_css_with_font_faces-4.snap |     0
 ..._extract_global_css_with_font_faces-5.snap |     0
 ..._extract_global_css_with_font_faces-6.snap |     0
 ..._extract_global_css_with_font_faces-7.snap |     0
 ..._extract_global_css_with_font_faces-8.snap |     0
 ..._extract_global_css_with_font_faces-9.snap |     0
 ...s__extract_global_css_with_font_faces.snap |     0
 ...ts__extract_global_css_with_imports-2.snap |     0
 ...ts__extract_global_css_with_imports-3.snap |     0
 ...ests__extract_global_css_with_imports.snap |     0
 ...s__extract_global_css_with_selector-2.snap |     0
 ...s__extract_global_css_with_selector-3.snap |     0
 ...s__extract_global_css_with_selector-4.snap |     0
 ...sts__extract_global_css_with_selector.snap |     0
 ...ct_global_css_with_template_literal-2.snap |     0
 ...ct_global_css_with_template_literal-3.snap |     0
 ...ct_global_css_with_template_literal-4.snap |     0
 ...ct_global_css_with_template_literal-5.snap |     0
 ...ct_global_css_with_template_literal-6.snap |     0
 ...ct_global_css_with_template_literal-7.snap |     0
 ...ct_global_css_with_template_literal-8.snap |     0
 ...ct_global_css_with_template_literal-9.snap |     0
 ...ract_global_css_with_template_literal.snap |     0
 ...tract_global_css_with_wrong_imports-2.snap |     0
 ...extract_global_css_with_wrong_imports.snap |     0
 .../extractor__tests__extract_just_tsx-2.snap |     0
 .../extractor__tests__extract_just_tsx.snap   |     0
 ..._extract_just_tsx_in_multiple_files-2.snap |     0
 ..._extract_just_tsx_in_multiple_files-3.snap |     0
 ..._extract_just_tsx_in_multiple_files-4.snap |     0
 ...s__extract_just_tsx_in_multiple_files.snap |     0
 ...extractor__tests__extract_keyframs-10.snap |     0
 .../extractor__tests__extract_keyframs-2.snap |     0
 .../extractor__tests__extract_keyframs-3.snap |     0
 .../extractor__tests__extract_keyframs-4.snap |     0
 .../extractor__tests__extract_keyframs-5.snap |     0
 .../extractor__tests__extract_keyframs-6.snap |     0
 .../extractor__tests__extract_keyframs-7.snap |     0
 .../extractor__tests__extract_keyframs-8.snap |     0
 .../extractor__tests__extract_keyframs-9.snap |     0
 .../extractor__tests__extract_keyframs.snap   |     0
 ...or__tests__extract_keyframs_literal-2.snap |     0
 ...ctor__tests__extract_keyframs_literal.snap |     0
 ...ractor__tests__extract_logical_case-2.snap |     0
 ...ractor__tests__extract_logical_case-3.snap |     0
 ...ractor__tests__extract_logical_case-4.snap |     0
 ...xtractor__tests__extract_logical_case.snap |     0
 ...or__tests__extract_nested_selector-10.snap |     0
 ...or__tests__extract_nested_selector-11.snap |     0
 ...tor__tests__extract_nested_selector-2.snap |     0
 ...tor__tests__extract_nested_selector-3.snap |     0
 ...tor__tests__extract_nested_selector-4.snap |     0
 ...tor__tests__extract_nested_selector-5.snap |     0
 ...tor__tests__extract_nested_selector-6.snap |     0
 ...tor__tests__extract_nested_selector-7.snap |     0
 ...tor__tests__extract_nested_selector-8.snap |     0
 ...tor__tests__extract_nested_selector-9.snap |     0
 ...actor__tests__extract_nested_selector.snap |     0
 ..._responsive_conditional_style_props-2.snap |     0
 ..._responsive_conditional_style_props-3.snap |     0
 ..._responsive_conditional_style_props-4.snap |     0
 ..._responsive_conditional_style_props-5.snap |     0
 ..._responsive_conditional_style_props-6.snap |     0
 ..._responsive_conditional_style_props-7.snap |     0
 ..._responsive_conditional_style_props-8.snap |     0
 ...ct_responsive_conditional_style_props.snap |     0
 ...itional_style_props_with_class_name-2.snap |     0
 ...nditional_style_props_with_class_name.snap |     0
 ...sts__extract_responsive_style_props-2.snap |     0
 ...tests__extract_responsive_style_props.snap |     0
 ...namic_value_conditional_style_props-2.snap |     0
 ...dynamic_value_conditional_style_props.snap |     0
 ..._same_value_conditional_style_props-2.snap |     0
 ..._same_value_conditional_style_props-3.snap |     0
 ..._same_value_conditional_style_props-4.snap |     0
 ..._same_value_conditional_style_props-5.snap |     0
 ..._same_value_conditional_style_props-6.snap |     0
 ...ct_same_value_conditional_style_props.snap |     0
 ...extractor__tests__extract_selector-10.snap |     0
 ...extractor__tests__extract_selector-11.snap |     0
 ...extractor__tests__extract_selector-12.snap |     0
 ...extractor__tests__extract_selector-13.snap |     0
 ...extractor__tests__extract_selector-14.snap |     0
 ...extractor__tests__extract_selector-15.snap |     0
 ...extractor__tests__extract_selector-16.snap |     0
 .../extractor__tests__extract_selector-2.snap |     0
 .../extractor__tests__extract_selector-3.snap |     0
 .../extractor__tests__extract_selector-4.snap |     0
 .../extractor__tests__extract_selector-5.snap |     0
 .../extractor__tests__extract_selector-6.snap |     0
 .../extractor__tests__extract_selector-7.snap |     0
 .../extractor__tests__extract_selector-8.snap |     0
 .../extractor__tests__extract_selector-9.snap |     0
 .../extractor__tests__extract_selector.snap   |     0
 ...ests__extract_selector_with_literal-2.snap |     0
 ..._tests__extract_selector_with_literal.snap |     0
 ...s__extract_selector_with_responsive-2.snap |     0
 ...s__extract_selector_with_responsive-3.snap |     0
 ...sts__extract_selector_with_responsive.snap |     0
 ...xtract_static_css_class_name_props-10.snap |     0
 ...xtract_static_css_class_name_props-11.snap |     0
 ...xtract_static_css_class_name_props-12.snap |     0
 ...xtract_static_css_class_name_props-13.snap |     0
 ...xtract_static_css_class_name_props-14.snap |     0
 ...xtract_static_css_class_name_props-15.snap |     0
 ...xtract_static_css_class_name_props-16.snap |     0
 ...extract_static_css_class_name_props-2.snap |     0
 ...extract_static_css_class_name_props-3.snap |     0
 ...extract_static_css_class_name_props-4.snap |     0
 ...extract_static_css_class_name_props-5.snap |     0
 ...extract_static_css_class_name_props-6.snap |     0
 ...extract_static_css_class_name_props-7.snap |     0
 ...extract_static_css_class_name_props-8.snap |     0
 ...extract_static_css_class_name_props-9.snap |     0
 ...__extract_static_css_class_name_props.snap |     0
 ...extract_static_css_with_media_query-2.snap |     0
 ...extract_static_css_with_media_query-3.snap |     0
 ...__extract_static_css_with_media_query.snap |     0
 ...ests__extract_static_css_with_theme-2.snap |     0
 ...ests__extract_static_css_with_theme-3.snap |     0
 ..._tests__extract_static_css_with_theme.snap |     0
 ...tractor__tests__extract_style_props-2.snap |     0
 ...tractor__tests__extract_style_props-3.snap |     0
 ...tractor__tests__extract_style_props-4.snap |     0
 ...tractor__tests__extract_style_props-5.snap |     0
 ...tractor__tests__extract_style_props-6.snap |     0
 ...extractor__tests__extract_style_props.snap |     0
 ...extract_style_props_with_class_name-2.snap |     0
 ...extract_style_props_with_class_name-3.snap |     0
 ...extract_style_props_with_class_name-4.snap |     0
 ...extract_style_props_with_class_name-5.snap |     0
 ...extract_style_props_with_class_name-6.snap |     0
 ...extract_style_props_with_class_name-7.snap |     0
 ...extract_style_props_with_class_name-8.snap |     0
 ...extract_style_props_with_class_name-9.snap |     0
 ...__extract_style_props_with_class_name.snap |     0
 ...tract_style_props_with_default_import.snap |     0
 ...act_style_props_with_namespace_import.snap |     0
 ...sts__extract_style_props_with_var_css.snap |     0
 ...act_variable_style_props_with_style-2.snap |     0
 ...tract_variable_style_props_with_style.snap |     0
 ...or__tests__extract_wrong_global_css-2.snap |     0
 ...or__tests__extract_wrong_global_css-3.snap |     0
 ...ctor__tests__extract_wrong_global_css.snap |     0
 ...ractor__tests__extract_wrong_keyframs.snap |     0
 ...xtract_wrong_responsive_style_props-2.snap |     0
 ..._extract_wrong_responsive_style_props.snap |     0
 ...tractor__tests__global_css_at_rules-2.snap |     0
 ...tractor__tests__global_css_at_rules-3.snap |     0
 ...tractor__tests__global_css_at_rules-4.snap |     0
 ...extractor__tests__global_css_at_rules.snap |     0
 ..._fontfaces_multi_value_optimization-2.snap |     0
 ...ss_fontfaces_multi_value_optimization.snap |     0
 ..._global_css_fontfaces_object_syntax-2.snap |     0
 ...s__global_css_fontfaces_object_syntax.snap |     0
 ...extractor__tests__global_css_function.snap |     0
 ..._global_css_layer_property_extraction.snap |     0
 .../extractor__tests__global_css_no_args.snap |     0
 ...or__tests__global_css_with_font_faces.snap |     0
 ...actor__tests__global_css_with_imports.snap |     0
 ...actor__tests__global_css_with_layer-2.snap |     0
 ...tractor__tests__global_css_with_layer.snap |     0
 ...__global_css_with_layer_in_selector-2.snap |     0
 ...ts__global_css_with_layer_in_selector.snap |     0
 ...ests__global_css_with_pseudo_selector.snap |     0
 ...xtractor__tests__group_selector_props.snap |     0
 ...ractor__tests__ignore_special_props-2.snap |     0
 ...xtractor__tests__ignore_special_props.snap |     0
 ...sts__import_alias_custom_named_export.snap |     0
 ...r__tests__import_alias_emotion_styled.snap |     0
 ..._tests__import_alias_multiple_aliases.snap |     0
 ...r__tests__import_alias_renamed_import.snap |     0
 ...t_alias_skip_when_package_not_in_code.snap |     0
 ...tests__import_alias_styled_components.snap |     0
 ...s__import_alias_vanilla_extract_named.snap |     0
 .../extractor__tests__import_main_css.snap    |     0
 ...ctor__tests__import_wrong_component-2.snap |     0
 ...ractor__tests__import_wrong_component.snap |     0
 .../extractor__tests__keyframes_function.snap |     0
 .../extractor__tests__keyframes_no_args.snap  |     0
 .../extractor__tests__maintain_value.snap     |     0
 ...r__tests__mask_properties_with_korean.snap |     0
 ...actor__tests__media_query_selectors-2.snap |     0
 ...actor__tests__media_query_selectors-3.snap |     0
 ...actor__tests__media_query_selectors-4.snap |     0
 ...actor__tests__media_query_selectors-5.snap |     0
 ...tractor__tests__media_query_selectors.snap |     0
 ...actor__tests__member_expression_style.snap |     0
 ...actor__tests__multiple_dynamic_values.snap |     0
 ...xtractor__tests__namespace_import_css.snap |     0
 ...ractor__tests__namespace_import_usage.snap |     0
 .../extractor__tests__negative_props-2.snap   |     0
 .../extractor__tests__negative_props-3.snap   |     0
 .../extractor__tests__negative_props-4.snap   |     0
 .../extractor__tests__negative_props-5.snap   |     0
 .../extractor__tests__negative_props-6.snap   |     0
 .../extractor__tests__negative_props-7.snap   |     0
 .../extractor__tests__negative_props.snap     |     0
 .../extractor__tests__nested_conditional.snap |     0
 .../extractor__tests__nested_theme_props.snap |     0
 ...actor__tests__optimize_aspect_ratio-2.snap |     0
 ...actor__tests__optimize_aspect_ratio-3.snap |     0
 ...tractor__tests__optimize_aspect_ratio.snap |     0
 .../extractor__tests__optimize_func-2.snap    |     0
 .../extractor__tests__optimize_func-3.snap    |     0
 .../extractor__tests__optimize_func-4.snap    |     0
 .../extractor__tests__optimize_func-5.snap    |     0
 .../extractor__tests__optimize_func-6.snap    |     0
 .../extractor__tests__optimize_func-7.snap    |     0
 .../extractor__tests__optimize_func.snap      |     0
 ...ctor__tests__optimize_multi_css_value.snap |     0
 ...rops_direct_array_responsive_select-2.snap |     0
 ..._props_direct_array_responsive_select.snap |     0
 ...r__tests__props_direct_array_select-2.snap |     0
 ...r__tests__props_direct_array_select-3.snap |     0
 ...r__tests__props_direct_array_select-4.snap |     0
 ...r__tests__props_direct_array_select-5.snap |     0
 ...r__tests__props_direct_array_select-6.snap |     0
 ...r__tests__props_direct_array_select-7.snap |     0
 ...tor__tests__props_direct_array_select.snap |     0
 ...props_direct_hybrid_responsive_select.snap |     0
 ...ops_direct_object_responsive_select-2.snap |     0
 ...props_direct_object_responsive_select.snap |     0
 ...__tests__props_direct_object_select-2.snap |     0
 ...__tests__props_direct_object_select-3.snap |     0
 ...__tests__props_direct_object_select-4.snap |     0
 ...or__tests__props_direct_object_select.snap |     0
 ...ct_variable_array_responsive_select-2.snap |     0
 ...rect_variable_array_responsive_select.snap |     0
 ...ect_variable_object_responsive_select.snap |     0
 ...props_direct_variable_object_select-2.snap |     0
 ...__props_direct_variable_object_select.snap |     0
 .../extractor__tests__props_direct_wrong.snap |     0
 ...ractor__tests__props_multi_expression.snap |     0
 .../extractor__tests__props_prop.snap         |     0
 ...ts__props_wrong_direct_array_select-2.snap |     0
 ...ts__props_wrong_direct_array_select-3.snap |     0
 ...ts__props_wrong_direct_array_select-4.snap |     0
 ...ts__props_wrong_direct_array_select-5.snap |     0
 ...ests__props_wrong_direct_array_select.snap |     0
 ...s__props_wrong_direct_object_select-2.snap |     0
 ...s__props_wrong_direct_object_select-3.snap |     0
 ...s__props_wrong_direct_object_select-4.snap |     0
 ...sts__props_wrong_direct_object_select.snap |     0
 .../extractor__tests__remove_semicolon-2.snap |     0
 .../extractor__tests__remove_semicolon-3.snap |     0
 .../extractor__tests__remove_semicolon-4.snap |     0
 .../extractor__tests__remove_semicolon-5.snap |     0
 .../extractor__tests__remove_semicolon.snap   |     0
 ...actor__tests__responsive_array_styles.snap |     0
 .../extractor__tests__rest_props-2.snap       |     0
 .../extractor__tests__rest_props.snap         |     0
 ...ests__selector_refs_with_global_theme.snap |     0
 .../extractor__tests__spread_props.snap       |     0
 .../extractor__tests__style_order-2.snap      |     0
 .../extractor__tests__style_order-3.snap      |     0
 .../extractor__tests__style_order-4.snap      |     0
 .../extractor__tests__style_order-5.snap      |     0
 .../extractor__tests__style_order-6.snap      |     0
 .../extractor__tests__style_order-7.snap      |     0
 .../extractor__tests__style_order-8.snap      |     0
 .../extractor__tests__style_order.snap        |     0
 .../extractor__tests__style_order2-2.snap     |     0
 .../extractor__tests__style_order2-3.snap     |     0
 .../extractor__tests__style_order2.snap       |     0
 .../extractor__tests__style_order_prop.snap   |     0
 .../extractor__tests__style_prop_merge.snap   |     0
 .../extractor__tests__style_variables-10.snap |     0
 .../extractor__tests__style_variables-11.snap |     0
 .../extractor__tests__style_variables-2.snap  |     0
 .../extractor__tests__style_variables-3.snap  |     0
 .../extractor__tests__style_variables-4.snap  |     0
 .../extractor__tests__style_variables-5.snap  |     0
 .../extractor__tests__style_variables-6.snap  |     0
 .../extractor__tests__style_variables-7.snap  |     0
 .../extractor__tests__style_variables-8.snap  |     0
 .../extractor__tests__style_variables-9.snap  |     0
 .../extractor__tests__style_variables.snap    |     0
 ...extractor__tests__style_variables_mjs.snap |     0
 .../extractor__tests__style_vars_prop.snap    |     0
 .../extractor__tests__styled-10.snap          |     0
 .../extractor__tests__styled-11.snap          |     0
 .../snapshots/extractor__tests__styled-2.snap |     0
 .../snapshots/extractor__tests__styled-3.snap |     0
 .../snapshots/extractor__tests__styled-4.snap |     0
 .../snapshots/extractor__tests__styled-5.snap |     0
 .../snapshots/extractor__tests__styled-6.snap |     0
 .../snapshots/extractor__tests__styled-7.snap |     0
 .../snapshots/extractor__tests__styled-8.snap |     0
 .../snapshots/extractor__tests__styled-9.snap |     0
 .../snapshots/extractor__tests__styled.snap   |     0
 .../extractor__tests__styled_with_spread.snap |     0
 ...ractor__tests__styled_with_variable-2.snap |     0
 ...ractor__tests__styled_with_variable-3.snap |     0
 ...ractor__tests__styled_with_variable-4.snap |     0
 ...ractor__tests__styled_with_variable-5.snap |     0
 ...xtractor__tests__styled_with_variable.snap |     0
 ...__styled_with_variable_like_emotion-2.snap |     0
 ...__styled_with_variable_like_emotion-3.snap |     0
 ...__styled_with_variable_like_emotion-4.snap |     0
 ...__styled_with_variable_like_emotion-5.snap |     0
 ...__styled_with_variable_like_emotion-6.snap |     0
 ...__styled_with_variable_like_emotion-7.snap |     0
 ...ts__styled_with_variable_like_emotion.snap |     0
 ...ed_with_variable_like_emotion_props-2.snap |     0
 ...ed_with_variable_like_emotion_props-3.snap |     0
 ...ed_with_variable_like_emotion_props-4.snap |     0
 ...yled_with_variable_like_emotion_props.snap |     0
 ...actor__tests__support_transpile_cjs-2.snap |     0
 ...actor__tests__support_transpile_cjs-3.snap |     0
 ...actor__tests__support_transpile_cjs-4.snap |     0
 ...actor__tests__support_transpile_cjs-5.snap |     0
 ...actor__tests__support_transpile_cjs-6.snap |     0
 ...actor__tests__support_transpile_cjs-7.snap |     0
 ...tractor__tests__support_transpile_cjs.snap |     0
 ...actor__tests__support_transpile_mjs-2.snap |     0
 ...actor__tests__support_transpile_mjs-3.snap |     0
 ...actor__tests__support_transpile_mjs-4.snap |     0
 ...actor__tests__support_transpile_mjs-5.snap |     0
 ...actor__tests__support_transpile_mjs-6.snap |     0
 ...actor__tests__support_transpile_mjs-7.snap |     0
 ...actor__tests__support_transpile_mjs-8.snap |     0
 ...tractor__tests__support_transpile_mjs.snap |     0
 ...tor__tests__tailwind_arbitrary_values.snap |     0
 ..._tests__tailwind_classname_extraction.snap |     0
 ...__tailwind_classname_with_devup_props.snap |     0
 ...sts__tailwind_classname_with_variants.snap |     0
 ...tor__tests__tailwind_full_integration.snap |     0
 ..._tailwind_mixed_with_devup_responsive.snap |     0
 ...ctor__tests__tailwind_negative_values.snap |     0
 ...literal_with_function_call_expression.snap |     0
 ...plate_literal_with_logical_expression.snap |     0
 ..._literal_with_nested_template_literal.snap |     0
 ...literal_with_parenthesized_expression.snap |     0
 ...ind_template_literal_with_style_order.snap |     0
 ...late_literal_with_variable_expression.snap |     0
 ...ests__tailwind_with_all_variant_types.snap |     0
 ...tractor__tests__tailwind_with_as_prop.snap |     0
 ...ind_with_conditional_template_literal.snap |     0
 ...ctor__tests__template_literal_props-2.snap |     0
 ...ctor__tests__template_literal_props-3.snap |     0
 ...ctor__tests__template_literal_props-4.snap |     0
 ...ctor__tests__template_literal_props-5.snap |     0
 ...ctor__tests__template_literal_props-6.snap |     0
 ...ractor__tests__template_literal_props.snap |     0
 ...tests__ternary_operator_in_selector-2.snap |     0
 ...tests__ternary_operator_in_selector-3.snap |     0
 ...__tests__ternary_operator_in_selector.snap |     0
 .../extractor__tests__theme_props.snap        |     0
 .../extractor__tests__theme_selector-2.snap   |     0
 .../extractor__tests__theme_selector-3.snap   |     0
 .../extractor__tests__theme_selector.snap     |     0
 .../extractor__tests__typography_style.snap   |     0
 ..._vanilla_extract_all_exports_combined.snap |     0
 ...r__tests__vanilla_extract_all_imports.snap |     0
 ...r__tests__vanilla_extract_composition.snap |     0
 ...sts__vanilla_extract_constant_exports.snap |     0
 ...tor__tests__vanilla_extract_container.snap |     0
 ...__tests__vanilla_extract_create_var-2.snap |     0
 ...or__tests__vanilla_extract_create_var.snap |     0
 ...ct_css_ts_with_vanilla_extract_import.snap |     0
 ...r__tests__vanilla_extract_font_face-2.snap |     0
 ...tor__tests__vanilla_extract_font_face.snap |     0
 ...vanilla_extract_font_face_empty_props.snap |     0
 ...vanilla_extract_font_face_placeholder.snap |     0
 ..._vanilla_extract_font_face_with_style.snap |     0
 ...__tests__vanilla_extract_global_theme.snap |     0
 ...nilla_extract_global_theme_empty_vars.snap |     0
 ...illa_extract_global_theme_placeholder.snap |     0
 ...anilla_extract_global_theme_with_vars.snap |     0
 ...__vanilla_extract_imports_combination.snap |     0
 ...sts__vanilla_extract_keyframes_export.snap |     0
 ...tractor__tests__vanilla_extract_layer.snap |     0
 ...__vanilla_extract_layer_and_container.snap |     0
 ..._tests__vanilla_extract_media_queries.snap |     0
 ...__vanilla_extract_non_exported_styles.snap |     0
 ...s__vanilla_extract_non_exported_theme.snap |     0
 ...la_extract_selector_class_replacement.snap |     0
 ...__vanilla_extract_selector_references.snap |     0
 ...t_selector_refs_triggers_with_classes.snap |     0
 ...r__tests__vanilla_extract_selectors-2.snap |     0
 ...tor__tests__vanilla_extract_selectors.snap |     0
 ...nilla_extract_style_composition_empty.snap |     0
 ...la_extract_style_composition_multiple.snap |     0
 ...tests__vanilla_extract_style_css_js-2.snap |     0
 ...__tests__vanilla_extract_style_css_js.snap |     0
 ...__tests__vanilla_extract_style_css_ts.snap |     0
 ...ests__vanilla_extract_style_no_length.snap |     0
 ...sts__vanilla_extract_style_variants-2.snap |     0
 ...tests__vanilla_extract_style_variants.snap |     0
 ..._vanilla_extract_style_variants_mixed.snap |     0
 ...illa_extract_style_variants_with_base.snap |     0
 ...ctor__tests__vanilla_extract_supports.snap |     0
 ...actor__tests__vanilla_extract_theme-2.snap |     0
 ...tractor__tests__vanilla_extract_theme.snap |     0
 ...nilla_extract_theme_array_destructure.snap |     0
 ...nilla_extract_theme_export_variations.snap |     0
 ..._vanilla_extract_theme_vars_name_only.snap |     0
 ...ests__vanilla_extract_theme_with_vars.snap |     0
 ...nilla_extract_theme_without_vars_json.snap |     0
 ...nilla_extract_theme_without_vars_name.snap |     0
 ...tor__tests__vanilla_extract_vars_only.snap |     0
 ...la_extract_with_at_container_selector.snap |     0
 ..._tests__vanilla_extract_with_computed.snap |     0
 ...a_extract_with_keyframes_and_global-2.snap |     0
 ...lla_extract_with_keyframes_and_global.snap |     0
 ..._vanilla_extract_with_pseudo_selector.snap |     0
 ...vanilla_extract_with_responsive_array.snap |     0
 ...r__tests__vanilla_extract_with_spread.snap |     0
 ..._tests__vanilla_extract_with_variable.snap |     0
 .../extractor__tests__with_prefix.snap        |     0
 ...tractor__tests__wrong_style_variables.snap |     0
 ...ed_with_variable_like_emotion_props-2.snap |     0
 ...ed_with_variable_like_emotion_props-3.snap |     0
 ...ed_with_variable_like_emotion_props-4.snap |     0
 ...ed_with_variable_like_emotion_props-5.snap |     0
 ...yled_with_variable_like_emotion_props.snap |     0
 ...or__utils__tests__wrap_array_filter_a.snap |     5 +
 ...__utils__tests__wrap_array_filter_a_b.snap |     5 +
 ...filter_className_quoteclass-namequote.snap |     5 +
 1113 files changed, 31922 insertions(+), 13128 deletions(-)
 create mode 100644 libs/extractor/tests/all_tests.rs
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_typography-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_typography-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_typography.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_var_typography-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_var_typography-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_var_typography-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__apply_var_typography.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__avoid_same_name_component.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__backtick_prop-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__backtick_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__component_in_func.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__conditional_styles.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__conditional_with_both_branches.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-12.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-13.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-14.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-15.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-16.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-17.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-18.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-19.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-20.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-21.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__convert_tag.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_container_at_rule_with_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_function_empty_object.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_function_no_args.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_variable_reassignment.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__css_with_template_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__custom_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__custom_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__custom_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__default_import_usage.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__duplicate_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__dynamic_class_name_merge.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__enum_style_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_advenced_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_class_name_from_component.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_compound_responsive_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_responsive_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_enum_style_property.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_logical_case-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_logical_case-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_logical_case-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_logical_case.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_nested_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-12.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-13.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-14.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-15.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-16.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-12.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-13.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-14.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-15.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-16.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_default_import.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_namespace_import.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_style_props_with_var_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_keyframs.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_at_rules-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_at_rules-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_at_rules-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_at_rules.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_function.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_layer_property_extraction.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_no_args.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_font_faces.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_imports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_layer-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_layer.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__global_css_with_pseudo_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__group_selector_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__ignore_special_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__ignore_special_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_custom_named_export.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_emotion_styled.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_multiple_aliases.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_renamed_import.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_skip_when_package_not_in_code.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_styled_components.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_alias_vanilla_extract_named.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_main_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_wrong_component-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__import_wrong_component.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__keyframes_function.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__keyframes_no_args.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__maintain_value.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__mask_properties_with_korean.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__media_query_selectors-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__media_query_selectors-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__media_query_selectors-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__media_query_selectors-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__media_query_selectors.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__member_expression_style.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__multiple_dynamic_values.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__namespace_import_css.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__namespace_import_usage.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__negative_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__nested_conditional.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__nested_theme_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_func.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__optimize_multi_css_value.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_array_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_hybrid_responsive_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_select-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_select-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_object_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_responsive_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_direct_wrong.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_multi_expression.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__remove_semicolon-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__remove_semicolon-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__remove_semicolon-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__remove_semicolon-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__remove_semicolon.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__responsive_array_styles.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__rest_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__rest_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__selector_refs_with_global_theme.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__spread_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order2-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order2-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_order_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_prop_merge.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_variables_mjs.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__style_vars_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-10.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-11.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled-9.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_spread.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_cjs.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-7.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-8.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__support_transpile_mjs.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_arbitrary_values.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_classname_extraction.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_devup_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_variants.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_full_integration.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_mixed_with_devup_responsive.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_negative_values.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_function_call_expression.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_logical_expression.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_nested_template_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_parenthesized_expression.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_style_order.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_variable_expression.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_with_all_variant_types.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_with_as_prop.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__tailwind_with_conditional_template_literal.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props-6.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__template_literal_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__theme_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__theme_selector-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__theme_selector-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__theme_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__typography_style.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_exports_combined.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_imports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_composition.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_constant_exports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_container.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_empty_props.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_placeholder.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_with_style.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_empty_vars.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_placeholder.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_with_vars.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_imports_combination.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_keyframes_export.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer_and_container.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_media_queries.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_styles.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_theme.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_class_replacement.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_references.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_refs_triggers_with_classes.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_empty.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_multiple.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_ts.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_mixed.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_with_base.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_supports.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_array_destructure.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_export_variations.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_vars_name_only.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_with_vars.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_json.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_name.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_vars_only.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_at_container_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_computed.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_pseudo_selector.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_responsive_array.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_spread.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_variable.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__with_prefix.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_style_variables.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-2.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-3.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-4.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-5.snap
 create mode 100644 libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__styled_components.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_basic.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_complex.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_responsive.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_variants.snap
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_typography-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_typography-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_typography.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_var_typography-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_var_typography-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_var_typography-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__apply_var_typography.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_at_prefix-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_at_prefix-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_at_prefix.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__at_rules_underscore_prefix.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__avoid_same_name_component.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__backtick_prop-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__backtick_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__component_in_func.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__conditional_expression_with_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__conditional_expression_with_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__conditional_styles.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__conditional_with_both_branches.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__container_at_rule_in_css-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__container_at_rule_in_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-12.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-13.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-14.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-15.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-16.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-17.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-18.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-19.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-20.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-21.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__convert_tag.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_container_at_rule_with_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_function_empty_object.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_function_no_args.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_props_destructuring_assignment.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_variable_reassignment.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__css_with_template_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__custom_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__custom_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__custom_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__default_import_usage.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__dot_notation_theme_variables-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__dot_notation_theme_variables-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__dot_notation_theme_variables-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__dot_notation_theme_variables.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__duplicate_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__dynamic_class_name_merge.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__enum_style_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_advenced_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_class_name_from_component.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_compound_responsive_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_selector-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_logical_case.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_enum_style_property.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_empty.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_font_faces.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_imports-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_imports-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_imports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_selector-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_template_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs_literal-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_keyframs_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_logical_case-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_logical_case-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_logical_case-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_logical_case.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_nested_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_responsive_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-12.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-13.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-14.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-15.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-16.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector_with_literal-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector_with_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector_with_responsive-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector_with_responsive-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_selector_with_responsive.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_class_name_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_media_query.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_theme-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_theme-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_static_css_with_theme.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_class_name.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_default_import.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_style_props_with_var_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_variable_style_props_with_style.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_global_css-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_global_css-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_global_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_keyframs.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_at_rules-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_at_rules-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_at_rules-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_at_rules.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_function.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_layer_property_extraction.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_no_args.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_font_faces.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_imports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_layer-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_layer.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_layer_in_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__global_css_with_pseudo_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__group_selector_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__ignore_special_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__ignore_special_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_custom_named_export.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_emotion_styled.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_multiple_aliases.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_renamed_import.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_styled_components.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_main_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_wrong_component-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__import_wrong_component.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__keyframes_function.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__keyframes_no_args.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__maintain_value.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__mask_properties_with_korean.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__media_query_selectors-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__media_query_selectors-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__media_query_selectors-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__media_query_selectors-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__media_query_selectors.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__member_expression_style.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__multiple_dynamic_values.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__namespace_import_css.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__namespace_import_usage.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__negative_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__nested_conditional.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__nested_theme_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_aspect_ratio-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_aspect_ratio-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_aspect_ratio.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_func.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__optimize_multi_css_value.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_responsive_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_array_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_responsive_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_select-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_select-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_object_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_variable_object_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_variable_object_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_direct_wrong.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_multi_expression.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_array_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__props_wrong_direct_object_select.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__remove_semicolon-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__remove_semicolon-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__remove_semicolon-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__remove_semicolon-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__remove_semicolon.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__responsive_array_styles.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__rest_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__rest_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__selector_refs_with_global_theme.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__spread_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order2-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order2-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_order_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_prop_merge.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_variables_mjs.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__style_vars_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-10.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-11.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled-9.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_spread.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_cjs.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-7.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs-8.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__support_transpile_mjs.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_arbitrary_values.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_classname_extraction.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_classname_with_devup_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_classname_with_variants.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_full_integration.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_mixed_with_devup_responsive.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_negative_values.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_function_call_expression.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_logical_expression.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_nested_template_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_parenthesized_expression.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_style_order.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_template_literal_with_variable_expression.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_with_all_variant_types.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_with_as_prop.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__tailwind_with_conditional_template_literal.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props-6.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__template_literal_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__ternary_operator_in_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__ternary_operator_in_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__ternary_operator_in_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__theme_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__theme_selector-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__theme_selector-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__theme_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__typography_style.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_all_imports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_composition.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_constant_exports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_container.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_create_var-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_create_var.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_font_face-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_font_face.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_global_theme.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_imports_combination.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_layer.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_media_queries.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_selector_references.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_selectors-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_selectors.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_css_js.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_no_length.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_variants.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_supports.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_vars_only.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_computed.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_spread.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__vanilla_extract_with_variable.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__with_prefix.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_style_variables.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-3.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-4.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-5.snap (100%)
 rename libs/extractor/{src => tests/snapshots}/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap (100%)
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a_b.snap
 create mode 100644 libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_className_quoteclass-namequote.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index a27c6177..9ccd70c9 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -12,7 +12,7 @@ mod util_type;
 mod utils;
 mod vanilla_extract;
 mod visit;
-use crate::extract_style::extract_style_value::ExtractStyleValue;
+pub use crate::extract_style::extract_style_value::ExtractStyleValue;
 use crate::visit::DevupVisitor;
 use css::file_map::get_file_num_by_filename;
 use oxc_allocator::Allocator;
@@ -268,7 +268,7 @@ pub fn extract(
 
 /// Extract class names from generated code for specific style names
 /// Used for two-pass vanilla-extract processing to resolve selector references
-fn extract_class_map_from_code(
+pub fn extract_class_map_from_code(
     filename: &str,
     partial_code: &str,
     option: &ExtractOption,
@@ -372,13129 +372,3 @@ pub fn has_devup_ui(filename: &str, code: &str, package: &str) -> bool {
 
     false
 }
-
-#[cfg(test)]
-mod tests {
-    use std::collections::BTreeSet;
-
-    use super::*;
-    use css::class_map::reset_class_map;
-    use css::file_map::reset_file_map;
-    use insta::assert_debug_snapshot;
-    use rstest::rstest;
-    use serial_test::serial;
-
-    #[derive(Debug)]
-    #[allow(dead_code)]
-    struct ToBTreeSet {
-        // used styles
-        pub(crate) styles: BTreeSet<ExtractStyleValue>,
-
-        // output source
-        pub(crate) code: String,
-    }
-
-    impl From<ExtractOutput> for ToBTreeSet {
-        fn from(output: ExtractOutput) -> Self {
-            Self {
-                styles: {
-                    let mut set = BTreeSet::new();
-                    set.extend(output.styles);
-                    set
-                },
-                code: output.code,
-            }
-        }
-    }
-
-    #[test]
-    fn test_extract_option_default() {
-        // Tests lines 90-91: ExtractOption::default()
-        let option = ExtractOption::default();
-        assert_eq!(option.package, "@devup-ui/react");
-        assert_eq!(option.css_dir, "@devup-ui/react");
-        assert!(!option.single_css);
-        assert!(!option.import_main_css);
-        assert!(option.import_aliases.is_empty());
-    }
-
-    #[test]
-    #[serial]
-    fn extract_just_tsx() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                "const a = 1;",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                },
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                "<Box gap={1} />",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                },
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn ignore_special_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id="id" />
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Input} from '@devup-ui/core'
-        <Input placeholder="a" maxLength="b" minLength="c" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn convert_tag() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as="section" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={"section"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={`section`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={"section"}></Box>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={`section`}></Box>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? "div":"section"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? `div`:`section`} w="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? undefined:"section"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? null:"section"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? "section":undefined} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? "section":null} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? null:undefined} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={Variable} w="100%" h="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b ? Variable : "section"} w="100%" h="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={{A: "section", B: "div", C: Variable, D, [key]: "section", ...rest}[key]} w="100%" h="100%" />
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={{A: "section", B: "div", C: Variable, D, ["key"]: "section", ...rest}["key"]} w="100%" h="100%" />
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={b === 1 ? "section" : "div"} w="100%" h="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={["div", "section"][b]} w="100%" h="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={["div", "section"][b]} w="100%" h="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // maintain object expression
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={Variable} w="100%" props={{animate:{duration: 1}}} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // maintain object expression
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box as={Variable} w="100%" props={{animate:{duration: 1}}}></Box>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn extract_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box padding={1} margin={2} wrong={} wrong2=<></> />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box as C} from '@devup-ui/core'
-                <C padding={1} margin={2} />
-                ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Input} from '@devup-ui/core'
-        <Input padding={1} margin={2} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Button} from '@devup-ui/core'
-        <Button padding={1} margin={2} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Flex} from '@devup-ui/core'
-        <Flex padding={1} margin={2} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Flex} from '@devup-ui/core'
-        <Flex padding={('-1')}/>
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_style_props_with_namespace_import() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import * as B from '@devup-ui/core'
-        <B.Flex padding={('-1')} className={B.css({
-            color: 'red'
-        })}/>
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_style_props_with_var_css() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {css} from '@devup-ui/core'
-        const newCss=css;
-        <div className={newCss({
-            color: 'red'
-        })}/>
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_style_props_with_default_import() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import B from '@devup-ui/core'
-        <B.Flex padding={('-1')} className={B.css({
-            color: 'red'
-        })}/>
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_style_props_with_class_name() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className="exists class name" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className="  exists class name  " />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className={"exists class name"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className={} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className={"a"+"b"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Image} from '@devup-ui/core'
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-        />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className={variable} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as C} from '@devup-ui/core'
-        <C padding={1} 
-      _hover={{
-        borderColor: true ? 'blue' : ``,
-      }}
- className={variable} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box, Button as DevupButton, Center, css } from '@devup-ui/core'
-import clsx from 'clsx'
-
-<DevupButton
-      boxSizing="border-box"
-      className={clsx(
-        variants[variant],
-        isError && variant === 'default' && errorClassNames,
-        className,
-      )}
-      typography={
-        isPrimary
-          ? {
-              sm: 'buttonS',
-              md: 'buttonM',
-            }[size]
-          : undefined
-      }
-      {...props}
-    />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_class_name_from_component() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {VStack as C} from '@devup-ui/core'
-        <C padding={1} margin={2} className={"a"+"b"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn extract_responsive_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[null,1]} margin={[2,null,4]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Flex } from "@devup-ui/core";
-<Flex display={['none', null, "flex"]}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_dynamic_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={someStyleVar} margin={someStyleVar2} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={Math.abs(5)} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg={data.buttonBgColor} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg={data.a.b.buttonBgColor} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_dynamic_style_props_with_type() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={a as A} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={data[d as A] as B} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={"10px" as B} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn remove_semicolon() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg="red;" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg="blue;;" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg={`${"green;"}`} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg={`${color};`} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box bg={`${color}` + ";"} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_dynamic_responsive_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[someStyleVar,null,someStyleVar1]} margin={[null,someStyleVar2]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_compound_responsive_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[someStyleVar,undefined,someStyleVar1]} margin={[null,someStyleVar2]} bg="red" />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_wrong_responsive_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[NaN,undefined,null]} margin={Infinity} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[1,,null]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_variable_style_props_with_style() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a} style={{ key:value }} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a} style={styles} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_conditional_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? "4px" : "3px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? c : d} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? "4px" : d} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? null : undefined} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? 1 : undefined} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? undefined : 2} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${a}px` : undefined} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? null : `${b}px`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${b}px` : undefined} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? undefined : null} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box _hover={b ? void 0 : { bg: "blue" }} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_same_value_conditional_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? "4px" : "4px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? 4 : 4} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `4px` : `4px`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${"1px"}` : `${"1px"}`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${"1"}px` : `${1}px`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${`1`}px` : `${"1"}px`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_same_dynamic_value_conditional_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? a : a} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? `${a}` : `${a}`} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_responsive_conditional_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={[null, a === b ? "4px" : "3px"]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-        <Box margin={["6px", a === b ? "4px" : "3px"]} />;
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? c : [d, e, f, "2px"]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? c : [d, e, f, x === y ? "4px" : "2px"]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? [d, e, f, x === y ? "4px" : "2px"] : c} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a === b ? [d, e, f, x === y ? "4px" : "2px"] : ["1px", "2px", "3px"]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={[null, a === b && "4px"]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={[null, a === b && "4px", c === d ? "5px" : null]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_logical_case() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a===b && "1px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a===b || "1px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a ?? "1px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={(a===1||a===2)&&b===3 && "1px"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_dynamic_logical_case() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a===b && a} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a===b || a} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={a ?? b} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={(a===1||a===2)&&b===3 && a} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn extract_responsive_conditional_style_props_with_class_name() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={[null, a === b ? (q > w ? "4px" : "8px") : "3px"]} className={"exists"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box margin={[null, a === b || "4px"]} className={"exists"} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          mx: 1
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Center} from '@devup-ui/core'
-    <Center
-      _active={
-        variant !== 'disabled' && {
-          boxShadow: 'none',
-          transform: 'scale(0.95)',
-        }
-      }
-      _hover={
-        variant !== 'disabled' && {
-          boxShadow: [
-            '0px 1px 3px 0px rgba(0, 0, 0, 0.25)',
-            null,
-            '0px 0px 15px 0px rgba(0, 0, 0, 0.25)',
-          ],
-        }
-      }
-      {...props}
-    >
-      {children}
-    </Center>
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          _themeDark: {
-            mx: 1
-          }
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          '_themeDark': {
-            mx: 1
-          }
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          _hover: {
-            mx: 1
-          }
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "_hover, _active": {
-            mx: 1
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "&:hover,                 &:active": {
-            mx: 1
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _nthLastChild={{
-          mx: 1
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box
-          selectors={{
-            "&:nth-last-child(2), &:nth-last-child(3)": {
-              mx: 1
-            },
-            _nthLastChild: {
-              mx: 2
-            }
-          }}
-         />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          ".dataTestId > &": {
-            mx: 1
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "_hover": {
-            mx: 1
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "_hover": {
-            selectors: {
-              ".dataTestId > &": {
-                color: "red"
-              }
-            }
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          ".test-picker__day--keyboard-selected": {
-            bg: "$primary"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "& .a, & .b": {
-            bg: "$primary"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          ".test-picker__day--keyboard-selected": {
-            _hover: {
-              bg: "$primary"
-            },
-            selectors: {
-              "&:active": {
-                bg: "$primary"
-              }
-            }
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          ".a, .b": {
-            _hover: {
-              bg: "$primary"
-            },
-            selectors: {
-              "&:active": {
-                bg: "$secondary"
-              }
-            }
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn optimize_func() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scale(0.95)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scale(0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scaleX(0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scaleY(0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scaleZ(0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scale(0deg, 0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box transform="scaleX(0deg) scaleY(0deg) scaleZ(0deg)" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_selector_with_literal() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _hover={`
-        background-color: red;
-        `} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box selectors={{
-          "&:hover":`
-          background-color: red;
-          ` 
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn extract_nested_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          _placeholder: {
-            color: "red"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          selectors: {
-            "&::placeholder, &:active": {
-              color: "blue"
-            }
-          },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          selectors: {
-            "&::placeholder": {
-              color: "red"
-            },
-            "&::placeholder, &:active": {
-              color: "blue"
-            }
-          },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          selectors: {
-            "&::placeholder": {
-              _active: {
-                color: "red",
-              }
-            },
-          },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-          selectors={{
-            "&::placeholder": {
-              _active: {
-                color: "red",
-              }
-            },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-          selectors={{
-            "&::placeholder": {
-              selectors: {
-                "&:active": {
-                  selectors: {
-                    "&:hover": {
-                      color: "red",
-                    }
-                  }
-                }
-              }
-            },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-          _placeholder={{
-            _active: {
-              _hover: {
-                color: "blue",
-              },
-              color: "red",
-            },
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-        selectors={{
-          _hover: {
-             selectors: {
-              "&:active, _hover": {
-                color: "red",
-              }
-             }
-          }
-        }}
-        />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-        selectors={{
-          _hover: {
-             selectors: {
-              "_themeDark": {
-                color: "red",
-              }
-             }
-          }
-        }}
-        />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-        selectors={{
-          _hover: {
-             selectors: {
-              "_themeDark,_active": {
-                color: "red",
-              }
-             }
-          }
-        }}
-        />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box 
-        selectors={{
-          _hover: {
-             selectors: {
-              "_themeDark,_placeholder": {
-                color: "red",
-              }
-             }
-          }
-        }}
-        />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_conditional_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={a===b ? undefined : {
-          mx: 1
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={a===b && {
-          mx: 1
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={a===b && {}} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={a===b && {
-          mx: 1,
-          my: 1
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_selector_with_responsive() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={{
-          mx: [1, 2]
-        }} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={[{
-          mx: 10
-        },{
-          mx: 20
-        }]} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box _hover={[`
-        margin-left: 10px;
-        margin-right: 10px;
-        `,{
-        marginLeft: '20px',
-        marginRight: '20px',
-        }]} />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_static_css_class_name_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`
-  background-color: red;
-`}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css as c } from "@devup-ui/core";
-<Box className={c`
-  background-color: red;
-`}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css({
-  bg:"red",
-  color:"blue"
-})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css as c } from "@devup-ui/core";
-<Box className={c({
-  bg:"red"
-})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css({
-  _hover: {
-    bg:"red",
-    color:"blue"
-  }
-})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-        <div className={css(a?{bg:"red"}:{bg:"blue"})}/>;
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css()}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css({})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css({
-  _hover:`
-  background-color: red;
-  color: blue;
-`
-})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css({
-  _hover:[`
-  background-color: red;
-  color: blue;
-`,{
-  backgroundColor: "green",
-  color: "yellow"
-}, `
-  background-color: red;
-  color: blue;
-`]
-})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css``}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`   `}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`  
- `}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css(...{bg: "red"})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css(...{})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css(...{...{bg: "red"}})}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_static_css_with_media_query() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`
-  @media (min-width: 768px) {
-    & {
-      background-color: red;
-    }
-  }
-`}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`
-  @media (min-width: 768px) {
-    &:hover {
-      background-color: red;
-    }
-    &:active {
-      background-color: blue;
-    }
-  }
-`}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<Box className={css`
-  @media (min-width: 768px) {
-    background-color: red;
-  }
-`}/>;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_static_css_with_theme() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box color="$nice" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box color={`$nice`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box color={("$nice")} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn apply_typography() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography="bold" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography={`bold`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography={a ? "bold" : "bold2"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn apply_var_typography() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography={variable} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography={bo ? a : b} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-        <Text typography={`${bo ? a : b}`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as DevupButton} from '@devup-ui/core'
-        <DevupButton
-      boxSizing="border-box"
-      className={className}
-      typography={typography}
-    >
-    </DevupButton>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn raise_error() {
-        reset_class_map();
-        reset_file_map();
-        assert!(
-            extract(
-                "test.wrong",
-                "@devup-ui/core;const a = 1;",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                },
-            )
-            .unwrap_err()
-            .to_string()
-            .starts_with("Unknown file extension")
-        );
-
-        reset_class_map();
-        reset_file_map();
-        assert_eq!(
-            extract(
-                "test.tsx",
-                "import {} '@devup-ui/core';\na a = 1;",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                },
-            )
-            .unwrap_err()
-            .to_string(),
-            "Parser panicked"
-        );
-    }
-
-    #[test]
-    #[serial]
-    fn import_wrong_component() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {W} from '@devup-ui/core'
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {W, useTheme} from '@devup-ui/core';
-useTheme();
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn support_transpile_mjs() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.mjs",
-                r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
-function c() {
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ e(
-      o,
-      {
-        _hover: {
-          bg: "blue"
-        },
-        bg: "$text",
-        color: "red",
-        children: "hello"
-      }
-    ),
-    /* @__PURE__ */ e(t, { typography: "header", children: "typo" }),
-    /* @__PURE__ */ e(i, { as: "section", mt: 2, children: "section" })
-  ] });
-}
-export {
-  c as Lib
-};"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
-function c() {
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ e(
-      o,
-      {
-        _hover: {
-          bg: "blue"
-        },
-        bg: "$text",
-        color: "red",
-        children: "hello"
-      }
-    ),
-    /* @__PURE__ */ e(t, { typography: "header", children: "typo" }),
-    /* @__PURE__ */ e(i, { as: "section", mt: 2, children: "section" })
-  ] });
-}
-export {
-  c as Lib
-};"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-import { Box as o } from "@devup-ui/core";
-e(o, { className: "a", bg: "red" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-import { Box as o } from "@devup-ui/core";
-e(o, { className: "a", bg: variable, style: { color: "blue" } })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-import { Box as o } from "@devup-ui/core";
-e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // conditional as
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-        import { Box as o } from "@devup-ui/core";
-        e(o, { as: b ? "div" : "section", className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-        import { Box as o } from "@devup-ui/core";
-        e(o, { as: Variable, className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-        import { Box as o } from "@devup-ui/core";
-        e(o, { as: b ? null : undefined, className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn support_transpile_cjs() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.cjs", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:"header",children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.cjs", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const {jsx:e1, jsxs:e2}=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e2("div",{children:[e1(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e1(r.Text,{typography:"header",children:"typo"}),e1(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:"header",children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:`header`,children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{["_hover"]:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{["_hover"]:{bg:"blue"},bg:"$text",[variable]:"red",children:"hello"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
-    }
-
-    #[test]
-    #[serial]
-    fn maintain_value() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} WebkitLineClamp={4} />
-        "#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn with_prefix() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex MozTabSize={4} WebkitLineClamp={4} msBorderRadius={4} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn optimize_aspect_ratio() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex aspectRatio={"200/400"} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex aspectRatio={"   200  /  400  "} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex aspectRatio={"   200.2  /  400.2  "} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn ternary_operator_in_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex _hover={a ? { bg: "red" } : undefined} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex _hover={a ? { bg: "red" } : {}} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex _hover={a ? { bg: "red",color:"blue" } : { fontWeight:"bold", color:"red" }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_rest_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={0.5} {...props} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import { VStack } from '@devup-ui/core'
-
-export default function Card({
-  children,
-  className,
-  ...props
-}) {
-  return (
-    <VStack
-      _active={{
-        boxShadow: 'none',
-        transform: 'scale(0.95)',
-      }}
-      className={className}
-      {...props}
-    >
-      {children}
-    </VStack>
-  )
-}
-
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_wrong_direct_array_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[][0]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][-10]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][+10]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][100]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { Box } from "@devup-ui/core";
-<Box padding={[1,,null][1]} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn negative_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={-1} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={-a} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={-(1+a)} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={-1*a} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={-(1)} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={(-1)} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box zIndex={[(-1),-2, -(3)]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_wrong_direct_object_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box opacity={{}[1]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5}["wrong"]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5}[`wrong`]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5}[1]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_conditional_style_props_with_class_name() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box as DevupButton} from '@devup-ui/core'
-        <DevupButton
-      className={className}
-      typography={typography}
-    >
-    </DevupButton>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][a]} className="ab" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_array_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][0]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5][a]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex bg={["$red", "$blue"][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex bg={[`$red`, `${variable}`][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Center} from '@devup-ui/core'
-<Center
-            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}
-          >
-          </Center>
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5, ...some][100]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={[1, 0.5, ...some][a]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_multi_expression() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {
-  Box,
-  Button as DevupButton,
-  Center,
-  css,
-} from '@devup-ui/core'
-
-<DevupButton
-    border={
-    {
-        primary: 'none',
-        default: '1px solid var(--border, #E4E4E4)',
-    }[variant]
-    }
-    className={className}
-    px={
-    {
-        false: { sm: '12px', md: '16px', lg: '20px' }[size],
-        true: { sm: '24px', md: '28px', lg: '32px' }[size],
-    }[(!!icon).toString()]
-    }
-/>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_object_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5}["a"]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5, ...any}["b"]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5, ...any}["some"]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex bg={{a:"$red", b:"$blue"}[idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_variable_object_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={{a:1, b:0.5}[a]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box bg={SOME_VAR[idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_object_responsive_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={{ "a": [1, 2, 3], "b": [4, 5, 6] }[idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn props_direct_variable_object_responsive_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={{ 0: [a, b, c], "1": [d, e, f] }[idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_array_responsive_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn props_direct_variable_array_responsive_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={[[a, b, c], [d, e, f]][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={[, [d, e, f]][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_hybrid_responsive_select() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn props_direct_wrong() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-;<Flex gap={true[1]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn test_component_in_func() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Flex} from '@devup-ui/core'
-PROCESS_DATA.map(({ id, title, content }, idx) => (
-          <MotionDiv key={idx}>
-            <Flex alignItems="center" gap={[3, null, 5, null, 10]}>
-            </Flex>
-          </MotionDiv>
-        ))
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn backtick_prop() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-            <Box bg={`black`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-            <Box bg={`${variable}`} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn group_selector_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-            <Box _groupHover={{ bg: "red" }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_duplicate_style_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-            <Box bg="red" background="red" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn avoid_same_name_component() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-import {Button} from '@devup/ui'
-            ;<Box bg="red" background="red" />
-            ;<Button bg="red" background="red" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn css_props_destructuring_assignment() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {css} from '@devup-ui/core'
-    <div className={css({
-       ...(a ? { bg: 'red' } : { bg: 'blue' }),
-       ...({ p: 1 }),
-     })} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {css} from '@devup-ui/core'
-    <div className={css({
-       ...(a ? { bg: 'red', border: "solid 1px red" } : { bg: 'blue' }),
-       ...({ p: 1,m: 1 }),
-     })} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn theme_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box _themeDark={{ display:"none" }} _themeLight={{ display: "flex" }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn nested_theme_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box _themeDark={{
-      selectors: {
-        "&:hover": {
-          color: "red",
-        }
-      },
-      _active: {
-        color: "blue",
-        _placeholder: {
-          color: "green",
-        },
-      },
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn template_literal_props() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box bg={`${"red"}`} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box m={`${1}`} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box m={`${-1}`} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box m={`${1} ${2}`} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box className={`  ${1} ${2}  `} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box className={`  ${1} ${2}  `}
-    _hover={{bg:"red"}}
-    _themeDark={{ _hover:{bg:"black"} }}
-    
-     />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn theme_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box _themeDark={{ _hover:{bg:"black"} }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box _hover={{bg:"white"}} _themeDark={{ _hover:{bg:"black"} }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box _hover={{bg:"white"}} _themeDark={{
-        selectors: {
-          '& :is(svg,img)': {
-            boxSize: '100%',
-            filter: 'brightness(0) invert(1)',
-          },
-        },
-      }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn custom_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box selectors={{
-    "&[aria-diabled='true']": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box selectors={{
-    "*[aria-diabled='true'] &:hover": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn style_order() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box styleOrder={20} p="4" _hover={{ bg: ["red", "blue"]}} selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.mjs",
-                r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
-function c() {
-  return  r("div", { children: [
-     e(
-      o,
-      {
-        _hover: {
-          bg: "blue"
-        },
-        bg: "$text",
-        color: "red",
-        children: "hello",
-        styleOrder: 10
-      }
-    ),
-     e(t, { typography: "header", children: "typo", styleOrder:20 }),
-     e(i, { as: "section", mt: 2, children: "section",styleOrder:30 })
-  ] });
-}
-export {
-  c as Lib
-};"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box className={css({color:"white", styleOrder:100})} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box className={css({color:"white"})} styleOrder={20} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box className={css({color:"white",styleOrder:30})} styleOrder={20} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box styleOrder={20} p="4" _hover={{ bg: ["red", "blue"]}}
-    className={css({color:"white", styleOrder:100})}
-
-     selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-<Box
-        aria-disabled={false}
-        bg="red"
-        className={css({
-          bg: 'blue',
-          styleOrder: 17,
-        })}
-        styleOrder={3}
-      />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box className={css({color:"white"})} styleOrder={} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn style_order2() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box styleOrder="20" p="4" _hover={{ bg: ["red", "blue"]}}
-    className={css({color:"white", styleOrder:"100"})}
-
-     selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box styleOrder={"20"} p="4" _hover={{ bg: ["red", "blue"]}}
-    className={css({color:"white", styleOrder:("100")})}
-
-     selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box, css} from '@devup-ui/core'
-    <Box styleOrder={`20`} p="4" _hover={{ bg: ["red", "blue"]}}
-    className={css({color:"white", styleOrder:`100`})}
-
-     selectors={{
-    "*[aria-diabled='true'] &": {
-      opacity: 0.5
-      }
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn style_variables() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box styleVars={{
-        c: "red"
-    }} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            "--d": "red"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            "--d": "red",
-            "e": "blue"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            variable
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            variable: true ? "red" : "blue"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box style={{ "--d": "red" }} styleVars={{
-            variable: true ? "red" : "blue"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box bg={color} style={{ "--d": "red" }} styleVars={{
-            variable: true ? "red" : "blue"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            ["hello"]: "red"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{
-            [true]: "red",
-            [1]: "blue",
-            [variable]: "green",
-            [2+2]: "yellow"
-        }} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={styleVars} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box styleVars={{...styleVars}} />
-                "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn wrong_style_variables() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.jsx",
-                r#"import {Box} from '@devup-ui/core'
-    <Box styleVars={} />
-            "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn style_variables_mjs() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.js",
-                r#"import { jsx as e } from "react/jsx-runtime";
-import { Box as o } from "@devup-ui/core";
-e(o, { styleVars: { c: "yellow" } })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  "div": {
-    bg: "red"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  div: {
-    bg: "blue"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  ["div"]: {
-    bg: "yellow"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  [`div`]: {
-    bg: "green"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  _hover: {
-    bg: "red"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  _placeholder: {
-    bg: "red"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  _nthLastChild: {
-    bg: "red"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss(...{})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss(...{div: {bg: "red"}})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // recursive spread
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss(...{div: {bg: "red"}, ...{span: {bg: "blue"}}})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_wrong_global_css() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-    [1]: {
-        bg: "red"
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss()
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss(1)
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  "div": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  "div": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  },
-  "span": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  "div": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  },
-  "span": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  ["div"]: {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  },
-  ["span"]: {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  },
-  "body[data-theme='dark']": {
-    bg: "red",
-    color: "blue",
-    _hover: {
-      bg: "blue",
-      color: "red"
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_template_literal() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss({
-      "div": `
-        background-color: red
-      `
-    })
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss({
-      "div": ``
-    })
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss({
-      "div": `     `
-    })
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss({
-      "div": `  
-         `
-    })
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss`
-    div {
-      background-color: red;
-      color: blue;
-    }
-    `
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss``
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss`           `
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss`         
-      `
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-    globalCss`:root {color-scheme: light dark}`
-    "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_imports() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: ["@devup-ui/core/css/global.css"]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: ["@devup-ui/core/css/global.css", "@devup-ui/core/css/global2.css"]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: [`@devup-ui/core/css/global3.css`, `@devup-ui/core/css/global4.css`]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_font_faces() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: "Roboto",
-      src: "url('/fonts/Roboto-Regular.ttf')",
-      fontWeight: 400,
-    },
-    {
-      fontFamily: "Roboto2",
-      src: "url('/fonts/Roboto-Regular.ttf')",
-      fontWeight: 400,
-    }
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: "Roboto",
-      src: `url('/fonts/Roboto-Regular.ttf')`,
-      fontWeight: `400`,
-    }
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: "Roboto",
-      src: "url('/fonts/Roboto-Regular.ttf')",
-    }
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [`
-  font-family: "Roboto";
-  src: "url('/fonts/Roboto-Regular.ttf')";
-  font-weight: 400;
-  `]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: "Roboto Hello",
-      src: "url('/fonts/Roboto-Regular.ttf')",
-      fontWeight: 400,
-    }
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: undefined,
-      src: "url('/fonts/Roboto-Regular.ttf')",
-      fontWeight: 400,
-    }
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  fontFaces: [
-    {
-      fontFamily: "Roboto Regular2",
-      src: "//fonts/Roboto-Regular.ttf",
-      fontWeight: 400,
-    },
-    {
-      fontFamily: "Roboto Regular",
-      src: "//fonts/Roboto Regular.ttf",
-      fontWeight: 400,
-    },
-    {
-      fontFamily: "Roboto Regular3",
-      src: "fonts/Roboto Regular.ttf",
-      fontWeight: 400,
-    },
-    {
-      fontFamily: "Roboto Regular4",
-      src: "local('fonts/Roboto Regular.ttf')",
-      fontWeight: 400,
-    },
-  ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: [{"url": "@devup-ui/core/css/global.css"}]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: [{"url": "@devup-ui/core/css/global.css", "query": "layer"}]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: [{"query": "layer"}]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_wrong_imports() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: [1, 2, "./test.css"]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  imports: {}
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_global_css_with_empty() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  "div": {}
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  div: {},
-  span: {}
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  div: ``
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({
-  div: ``,
-  span: ``
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss({})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from "@devup-ui/core";
-globalCss()
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_keyframs() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  "0%": { opacity: 0 },
-  "50%": { opacity: 0.5 },
-  "100%": { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  "0": { opacity: 0 },
-  "50": { opacity: 0.5 },
-  "100": { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  ["0"]: { opacity: 0 },
-  ["50"]: { opacity: 0.5 },
-  ["100"]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  [0]: { opacity: 0 },
-  [50]: { opacity: 0.5 },
-  [100]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  0: { opacity: 0 },
-  50: { opacity: 0.5 },
-  100: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  [`0`]: { opacity: 0 },
-  [`50`]: { opacity: 0.5 },
-  [`100`]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  [`0%`]: { opacity: 0 },
-  [`50%`]: { opacity: 0.5 },
-  [`100%`]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-
-keyframes({
-  [`0`]: { opacity: 0 },
-  [`50`]: { opacity: 0.5 },
-  [`100`]: { opacity: 1 }
-});
-keyframes({
-  [`0%`]: { opacity: 0 },
-  [`50%`]: { opacity: 0.5 },
-  [`100%`]: { opacity: 1 }
-});
-keyframes({
-  [`1%`]: { opacity: 0 },
-  [`50%`]: { opacity: 0.5 },
-  [`100%`]: { opacity: 1 }
-});
-keyframes({
-  [`0%`]: { opacity: 1 },
-  [`50%`]: { opacity: 0.5 },
-  [`100%`]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes(...{
-  [`0%`]: { opacity: 0, ...{color: "red"} },
-  [`50%`]: { opacity: 0.5 },
-  [`100%`]: { opacity: 1 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    #[test]
-    #[serial]
-    fn extract_wrong_keyframs() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  from: { opacity: 0 },
-  [true]: { opacity: 0.5 },
-  to: { opacity: 1, color: dy }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_keyframs_literal() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  from: `
-  background-color: red;
-  `,
-  to: `
-  background-color: blue;
-  `
-})
-
-keyframes`
-  from {
-    background-color: red;
-  }
-  to {
-    background-color: blue;
-  }
-`
-keyframes({
-  from: {
-    backgroundColor: "red"
-  },
-  to: {
-    backgroundColor: "blue"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { keyframes } from "@devup-ui/core";
-keyframes({
-  "0%": `
-  background-color: red;
-  color: blue;
-  `,
-  "100%": `
-  background-color: blue;
-  color: red;
-  `
-})
-
-keyframes`
-  0% {
-    background-color: red;
-    color: blue;
-  }
-  100% {
-    background-color: blue;
-    color: red;
-  }
-`
-keyframes({
-  "0%": {
-    backgroundColor: "red",
-    color: "blue"
-  },
-  "100%": {
-    backgroundColor: "blue",
-    color: "red"
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_just_tsx_in_multiple_files() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box padding={1} margin={2} wrong={} wrong2=<></> />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r"import {Box as C} from '@devup-ui/core'
-                <C padding={2} margin={3} />
-                ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test1.tsx",
-                r"import {Box} from '@devup-ui/core'
-        <Box padding={1} margin={2} wrong={} wrong2=<></> />
-        ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test1.tsx",
-                r"import {Box as C} from '@devup-ui/core'
-                <C padding={2} margin={3} />
-                ",
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn import_main_css() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box padding={1} margin={2} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: true,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn optimize_multi_css_value() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box fontFamily="Roboto, Arial, sans-serif" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_enum_style_property() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning="top-left" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // wrong case
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning="wrong" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning={a} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning={a} w="100%" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning={a} top="0px" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box positioning={[a, b, "top", "left", "wrong"]} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn extract_advenced_selector() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: ["test"],
-          bg: "red",
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: ["test", "test2"],
-          bg: "red",
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // empty
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: [],
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: [""],
-          _hover: {
-            bg: "blue"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: ["", ""],
-          _hover: {
-            bg: "blue"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box _is={{
-          params: ["test", variable],
-          _hover: {
-            bg: "blue"
-          }
-        }} />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-        globalCss({
-          "_is": {
-            params: ["test", variable],
-            _hover: {
-              bg: "blue"
-            },
-            bg: "red"
-          }
-        })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {css} from '@devup-ui/core'
-        css({
-          "_is": {
-            params: ["test"],
-            bg: "red"
-          }
-        })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_styled() {
-        // Test 1: styled.div`css`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.section`
-          background: red;
-          color: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 2: styled("div")`css`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("article")`
-          background: red;
-          color: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 3: styled("div")({ bg: "red" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("footer")({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 4: styled.div({ bg: "red" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.aside({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 5: styled(Component)({ bg: "red" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, Text} from '@devup-ui/core'
-        const StyledComponent = styled(Text)({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, Text} from '@devup-ui/core'
-        const StyledComponent = styled(Text)`
-          background: red;
-          color: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, VStack} from '@devup-ui/core'
-        const StyledComponent = styled(VStack)({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, VStack} from '@devup-ui/core'
-        const StyledComponent = styled(VStack)`
-          background: red;
-          color: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledComponent = styled(CustomComponent)({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledComponent = styled(CustomComponent)`
-          background: red;
-          color: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.aside<{ test: string }>({ bg: "red" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_styled_with_variable() {
-        // Test 1: styled.div({ bg: "$text" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.div({ bg: "$text", color: "$primary" })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 2: styled("div")({ color: "$primary" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")({ bg: "$text", fontSize: 16 })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 3: styled.div`css`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.div`
-          background: var(--text);
-          color: var(--primary);
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 4: styled(Component)({ bg: "$text" })
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, Box} from '@devup-ui/core'
-        const StyledComponent = styled(Box)({ bg: "$text", _hover: { bg: "$primary" } })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 5: styled("div")`css`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")`
-          background-color: var(--text);
-          padding: 16px;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_styled_with_variable_like_emotion() {
-        // Test 1: styled.div`css with ${variable}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const color = 'red';
-        const StyledDiv = styled.div`
-          color: ${color};
-          background: blue;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 2: styled("div")`css with ${variable}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const primaryColor = 'blue';
-        const padding = '16px';
-        const StyledDiv = styled("div")`
-          color: ${primaryColor};
-          padding: ${padding};
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const primaryColor = 'blue';
-        const padding = '16px';
-        const StyledDiv = styled("div")({ bg: primaryColor, padding })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const primaryColor = 'blue';
-        const padding = '16px';
-        const StyledDiv = styled.div({ bg: primaryColor, padding })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")`
-          color: ${obj.color};
-          padding: ${func()};
-          background: ${obj.func()};
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")({ bg: obj.bg, padding: func(), color: obj.color() })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.div({ bg: obj.bg, padding: func(), color: obj.color() })
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_styled_with_variable_like_emotion_props() {
-        // Test 3: styled.div`css with ${props => props.bg}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled.div`
-          background: ${props => props.bg};
-          color: red;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 4: styled(Component)`css with ${variable}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled, Box} from '@devup-ui/core'
-        const fontSize = '18px';
-        const StyledComponent = styled(Box)`
-          font-size: ${fontSize};
-          color: ${props => props.color || 'black'};
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 5: styled.div`css with multiple ${variables}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const margin = '10px';
-        const padding = '20px';
-        const StyledDiv = styled.div`
-          margin: ${margin};
-          padding: ${padding};
-          background: ${props => props.bg || 'white'};
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test 6: styled.div`css with ${expression}`
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const isActive = true;
-        const StyledDiv = styled.div`
-          color: ${isActive ? 'red' : 'blue'};
-          opacity: ${isActive ? 1 : 0.5};
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_wrong_styled_with_variable_like_emotion_props() {
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled(null)`
-          background: ${props => props.bg};
-          color: red;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div", "span")`
-          background: ${props => props.bg};
-          color: red;
-        `
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div", "span").filter(Boolean)
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")({ bg: "red" }, {})
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-        const StyledDiv = styled("div")({ bg: "red" }, {})``
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_mask_properties_with_korean() {
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r###"import {Box} from '@devup-ui/core'
-        <Box
-          aspectRatio="5.49"
-          bg="#752E2E"
-          h="22px"
-          maskImage="url('/icons/BI-타이틀.svg')"
-          maskRepeat="no-repeat"
-          maskSize="contain"
-          w="121px"
-        />
-        "###,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_dot_notation_theme_variables() {
-        // Test that dot notation theme variables (e.g., $primary.100) are correctly extracted
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box bg="$primary.100" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test multiple dot notation variables
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box bg="$gray.200" color="$blue.500" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test deep nested dot notation
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box bg="$color.brand.primary.100" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test dot notation in border shorthand
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-        <Box border="1px solid $border.primary" />
-        "#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_styled_with_spread() {
-        reset_class_map();
-        reset_file_map();
-        // Test styled with spread element
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {styled} from '@devup-ui/core'
-const baseStyles = { bg: "red" };
-const StyledDiv = styled.div({ ...baseStyles })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_css_function_no_args() {
-        reset_class_map();
-        reset_file_map();
-        // Test css() with no arguments
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {css} from '@devup-ui/core'
-const className = css()
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_css_function_empty_object() {
-        reset_class_map();
-        reset_file_map();
-        // Test css() with empty object
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {css} from '@devup-ui/core'
-const className = css({})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_keyframes_function() {
-        reset_class_map();
-        reset_file_map();
-        // Test keyframes() function
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {keyframes} from '@devup-ui/core'
-const spin = keyframes({
-    from: { transform: "rotate(0deg)" },
-    to: { transform: "rotate(360deg)" }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_function() {
-        reset_class_map();
-        reset_file_map();
-        // Test globalCss() function
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    body: { margin: 0, padding: 0 }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_conditional_styles() {
-        reset_class_map();
-        reset_file_map();
-        // Test conditional styles with both branches having different properties
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const Component = () => {
-    const isActive = true;
-    return <Box bg={isActive ? "red" : undefined} color={isActive ? undefined : "blue"} />;
-}
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_css_variable_reassignment() {
-        reset_class_map();
-        reset_file_map();
-        // Test css import reassignment
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {css as cssFunction} from '@devup-ui/core'
-const myCss = cssFunction;
-const className = myCss({ bg: "red" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_with_imports() {
-        reset_class_map();
-        reset_file_map();
-        // Test globalCss with @import
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    imports: ["https://fonts.googleapis.com/css?family=Roboto"]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_with_font_faces() {
-        reset_class_map();
-        reset_file_map();
-        // Test globalCss with fontFaces
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    fontFaces: [
-        {
-            fontFamily: "CustomFont",
-            src: "url('/fonts/custom.woff2')",
-            fontWeight: "400"
-        }
-    ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_with_pseudo_selector() {
-        reset_class_map();
-        reset_file_map();
-        // Test globalCss with pseudo selector (prefixed with _)
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    _hover: { bg: "red" }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_responsive_array_styles() {
-        reset_class_map();
-        reset_file_map();
-        // Test responsive array with multiple breakpoints
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box p={[1, 2, 3, 4]} m={[0, 1]} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_member_expression_style() {
-        reset_class_map();
-        reset_file_map();
-        // Test dynamic member expression for styles (obj[key])
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const colors = { primary: "blue", secondary: "red" };
-const key = "primary";
-<Box bg={colors[key]} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_dynamic_class_name_merge() {
-        reset_class_map();
-        reset_file_map();
-        // Test dynamic className merging with existing className
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const Component = ({ className }) => {
-    return <Box className={className} bg="red" />;
-}
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_typography_style() {
-        reset_class_map();
-        reset_file_map();
-        // Test typography prop
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Text} from '@devup-ui/core'
-<Text typography="$heading" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_css_with_template_literal() {
-        reset_class_map();
-        reset_file_map();
-        // Test css function with template literal containing expressions
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {css} from '@devup-ui/core'
-const size = 16;
-const className = css({ fontSize: `${size}px` })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_conditional_with_both_branches() {
-        reset_class_map();
-        reset_file_map();
-        // Test conditional where both branches have styles
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const isActive = true;
-<Box bg={isActive ? "red" : "blue"} p={isActive ? 4 : 2} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_spread_props() {
-        reset_class_map();
-        reset_file_map();
-        // Test spread props on component
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const Component = (props) => {
-    return <Box {...props} bg="red" />;
-}
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_nested_conditional() {
-        reset_class_map();
-        reset_file_map();
-        // Test nested conditional expressions
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const a = true;
-const b = false;
-<Box bg={a ? (b ? "red" : "blue") : "green"} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_style_prop_merge() {
-        reset_class_map();
-        reset_file_map();
-        // Test style prop merging with dynamic styles
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const color = "red";
-<Box style={{ padding: 10 }} bg={color} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_keyframes_no_args() {
-        reset_class_map();
-        reset_file_map();
-        // Test keyframes with no arguments
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {keyframes} from '@devup-ui/core'
-const spin = keyframes()
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_no_args() {
-        reset_class_map();
-        reset_file_map();
-        // Test globalCss with no arguments
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss()
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_default_import_usage() {
-        reset_class_map();
-        reset_file_map();
-        // Test using default import
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import DevUI from '@devup-ui/core'
-<DevUI.Box bg="red" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_namespace_import_usage() {
-        reset_class_map();
-        reset_file_map();
-        // Test using namespace import
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import * as DevUI from '@devup-ui/core'
-<DevUI.Box bg="red" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_namespace_import_css() {
-        reset_class_map();
-        reset_file_map();
-        // Test using namespace import with css function
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import * as DevUI from '@devup-ui/core'
-const className = DevUI.css({ bg: "red" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_enum_style_prop() {
-        reset_class_map();
-        reset_file_map();
-        // Test enum-like style mapping
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const variant = "primary";
-const colors = { primary: "blue", secondary: "red" };
-<Box bg={colors[variant]} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_style_vars_prop() {
-        reset_class_map();
-        reset_file_map();
-        // Test styleVars prop
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const dynamicColor = "blue";
-<Box styleVars={{ color: dynamicColor }} bg="var(--color)" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_props_prop() {
-        reset_class_map();
-        reset_file_map();
-        // Test props prop forwarding
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const extraProps = { onClick: () => {} };
-<Box props={extraProps} bg="red" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_style_order_prop() {
-        reset_class_map();
-        reset_file_map();
-        // Test styleOrder prop
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box styleOrder={1} bg="red" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_multiple_dynamic_values() {
-        reset_class_map();
-        reset_file_map();
-        // Test multiple dynamic values
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-const color = "red";
-const padding = 10;
-const margin = 5;
-<Box bg={color} p={padding} m={margin} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_media_query_selectors() {
-        // Test _print media query selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _print={{ bg: "white", color: "black" }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _screen media query selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _screen={{ bg: "blue" }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _speech media query selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _speech={{ display: "none" }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _all media query selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _all={{ fontFamily: "sans-serif" }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test multiple media query selectors combined
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box 
-    bg="red"
-    _print={{ bg: "white" }}
-    _screen={{ bg: "blue" }}
-/>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_at_rules_underscore_prefix() {
-        // Test _container at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _container={{ "(min-width: 400px)": { bg: "red" } }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _media at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _media={{ "(min-width: 768px)": { bg: "blue" } }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _supports at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _supports={{ "(display: grid)": { display: "grid" } }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test _container with named container
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box _container={{ "sidebar (min-width: 400px)": { p: 4 } }} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_at_rules_at_prefix() {
-        // Test @container at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box {...{"@container": { "(min-width: 400px)": { bg: "red" } }}} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test @media at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box {...{"@media": { "(min-width: 768px)": { bg: "blue" } }}} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test @supports at-rule
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box {...{"@supports": { "(display: flex)": { display: "flex" } }}} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_at_rules() {
-        // Test globalCss with @media nested inside selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    body: {
-        "@media": {
-            "(min-width: 768px)": { bg: "white" }
-        }
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test globalCss with @supports nested inside selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    ".grid-container": {
-        "@supports": {
-            "(display: grid)": { display: "grid" }
-        }
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test globalCss with @container nested inside selector
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    ".card": {
-        "@container": {
-            "(min-width: 400px)": { p: 4 }
-        }
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test globalCss with multiple at-rules nested inside selectors
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    body: {
-        bg: "gray",
-        "@media": {
-            "(min-width: 768px)": { bg: "white" },
-            "(prefers-color-scheme: dark)": { bg: "black" }
-        }
-    },
-    ".container": {
-        "@supports": {
-            "(display: grid)": { display: "grid" }
-        }
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_with_layer() {
-        // Test globalCss with @layer property
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    "*": {
-        "@layer": "reset",
-        margin: 0,
-        padding: 0
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test globalCss with @layer for multiple selectors
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {globalCss} from '@devup-ui/core'
-globalCss({
-    "*": {
-        "@layer": "reset",
-        boxSizing: "border-box"
-    },
-    body: {
-        "@layer": "base",
-        fontFamily: "sans-serif"
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: false,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    // ============================================================================
-    // VANILLA-EXTRACT API TESTS
-    // ============================================================================
-
-    /// Test vanilla-extract style files (.css.ts, .css.js)
-    /// Using vanilla-extract API (style, globalStyle, keyframes) from @devup-ui/react package
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_css_ts() {
-        reset_class_map();
-        reset_file_map();
-        // .css.ts file with style function (vanilla-extract API)
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "styles.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const container: string = style({ background: "red", padding: 16 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_css_js() {
-        reset_class_map();
-        reset_file_map();
-        // .css.js file with style function
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "styles.css.js",
-                r#"import { style } from '@devup-ui/react'
-export const wrapper = style({ backgroundColor: "white", margin: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // .css.js file with style function for link
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "components.css.js",
-                r#"import { style } from '@devup-ui/react'
-export const link = style({ color: "blue", textDecoration: "underline" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    /// Test .css.ts files with @vanilla-extract/css import (compatibility mode)
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_css_ts_with_vanilla_extract_import() {
-        reset_class_map();
-        reset_file_map();
-        // .css.ts file with import from @vanilla-extract/css (not @devup-ui/react)
-        // This should work the same as importing from @devup-ui/react
-        let mut import_aliases = HashMap::new();
-        import_aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "styles.css.ts",
-                r#"import { style } from '@vanilla-extract/css'
-export const hello = style({
-  cursor: 'pointer',
-  fontSize: 32,
-  paddingTop: '28px',
-  paddingBottom: '28px',
-})
-export const text = style({
-  color: 'var(--text)',
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_variable() {
-        reset_class_map();
-        reset_file_map();
-        // Variables should be evaluated at execution time
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "vars.css.ts",
-                r#"import { style } from '@devup-ui/react'
-const primaryColor = "blue";
-const spacing = 16;
-export const button = style({ background: primaryColor, padding: spacing })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_computed() {
-        reset_class_map();
-        reset_file_map();
-        // Computed values should be evaluated
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "computed.css.ts",
-                r#"import { style } from '@devup-ui/react'
-const base = 8;
-export const box = style({ padding: base * 2, margin: base / 2 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_spread() {
-        reset_class_map();
-        reset_file_map();
-        // Spread operator should work
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "spread.css.ts",
-                r#"import { style } from '@devup-ui/react'
-const baseStyle = { padding: 8, margin: 4 };
-export const extended = style({ ...baseStyle, background: "red" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_pseudo_selector() {
-        reset_class_map();
-        reset_file_map();
-        // devup-ui extension: _hover pseudo selector
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "hover.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const hoverButton = style({ background: "gray", _hover: { background: "blue" } })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_responsive_array() {
-        reset_class_map();
-        reset_file_map();
-        // devup-ui extension: responsive arrays
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "responsive.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const responsiveBox = style({ padding: [8, 16, 32] })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_keyframes_and_global() {
-        reset_class_map();
-        reset_file_map();
-        // .css.ts file with keyframes (vanilla-extract API)
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "animations.css.ts",
-                r#"import { keyframes, style } from '@devup-ui/react'
-export const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
-export const animated = style({ animation: "fadeIn 1s ease-in" })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // .css.ts file with globalStyle (vanilla-extract API)
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "global.css.ts",
-                r#"import { globalStyle } from '@devup-ui/react'
-globalStyle("body", { margin: 0, padding: 0 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_create_var() {
-        reset_class_map();
-        reset_file_map();
-        // createVar - CSS variable creation
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "vars.css.ts",
-                r#"import { createVar, style } from '@devup-ui/react'
-export const colorVar = createVar()
-export const box = style({
-  vars: {
-    [colorVar]: 'blue'
-  },
-  color: colorVar
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // fallbackVar - CSS variable with fallback
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "fallback.css.ts",
-                r#"import { createVar, fallbackVar, style } from '@devup-ui/react'
-export const colorVar = createVar()
-export const box = style({
-  color: fallbackVar(colorVar, 'red')
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_variants() {
-        reset_class_map();
-        reset_file_map();
-        // styleVariants - create multiple style variants
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "variants.css.ts",
-                r#"import { styleVariants } from '@devup-ui/react'
-export const background = styleVariants({
-  primary: { background: 'blue' },
-  secondary: { background: 'gray' },
-  danger: { background: 'red' }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // styleVariants with base style composition
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "variants-composed.css.ts",
-                r#"import { style, styleVariants } from '@devup-ui/react'
-const base = style({ padding: 12, borderRadius: 4 })
-export const button = styleVariants({
-  primary: [base, { background: 'blue', color: 'white' }],
-  secondary: [base, { background: 'gray', color: 'black' }]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_font_face() {
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // fontFace - define custom font
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "fonts.css.ts",
-                r#"import { fontFace, style } from '@devup-ui/react'
-const myFont = fontFace({
-  src: 'local("Comic Sans MS")'
-})
-export const text = style({
-  fontFamily: myFont
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // fontFace with multiple sources
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "fonts-multi.css.ts",
-                r#"import { fontFace, style } from '@devup-ui/react'
-const roboto = fontFace({
-  src: 'url("/fonts/Roboto.woff2") format("woff2")',
-  fontWeight: 400,
-  fontStyle: 'normal'
-})
-export const body = style({
-  fontFamily: roboto
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme() {
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // createTheme - define theme with variables
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme.css.ts",
-                r#"import { createTheme, style } from '@devup-ui/react'
-export const [themeClass, vars] = createTheme({
-  color: {
-    brand: 'blue',
-    text: 'black'
-  },
-  space: {
-    small: '4px',
-    medium: '8px',
-    large: '16px'
-  }
-})
-export const box = style({
-  color: vars.color.text,
-  padding: vars.space.medium
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // createThemeContract - type-safe theme contract
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-contract.css.ts",
-                r#"import { createThemeContract, createTheme, style } from '@devup-ui/react'
-const vars = createThemeContract({
-  color: {
-    brand: null,
-    text: null
-  }
-})
-export const lightTheme = createTheme(vars, {
-  color: {
-    brand: 'blue',
-    text: 'black'
-  }
-})
-export const darkTheme = createTheme(vars, {
-  color: {
-    brand: 'lightblue',
-    text: 'white'
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_layer() {
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // layer - CSS cascade layers
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "layers.css.ts",
-                r#"import { layer, style, globalStyle } from '@devup-ui/react'
-export const reset = layer('reset')
-export const base = layer('base')
-export const components = layer('components')
-globalStyle('*', {
-  '@layer': reset,
-  margin: 0,
-  padding: 0
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_container() {
-        reset_class_map();
-        reset_file_map();
-        // createContainer - container queries
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "container.css.ts",
-                r#"import { createContainer, style } from '@devup-ui/react'
-export const sidebar = createContainer()
-export const sidebarContainer = style({
-  containerName: sidebar,
-  containerType: 'inline-size'
-})
-export const responsive = style({
-  '@container': {
-    [`${sidebar} (min-width: 400px)`]: {
-      flexDirection: 'row'
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_global_theme() {
-        reset_class_map();
-        reset_file_map();
-        // createGlobalTheme - global theme variables on :root
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "global-theme.css.ts",
-                r#"import { createGlobalTheme } from '@devup-ui/react'
-export const vars = createGlobalTheme(':root', {
-  color: {
-    brand: 'blue',
-    text: 'black',
-    background: 'white'
-  },
-  font: {
-    body: 'system-ui, sans-serif'
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_composition() {
-        reset_class_map();
-        reset_file_map();
-        // style composition - array of styles
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "composition.css.ts",
-                r#"import { style } from '@devup-ui/react'
-const base = style({
-  padding: 12,
-  borderRadius: 4
-})
-const interactive = style({
-  cursor: 'pointer',
-  transition: 'all 0.2s'
-})
-export const button = style([base, interactive, {
-  background: 'blue',
-  color: 'white'
-}])
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_selectors() {
-        reset_class_map();
-        reset_file_map();
-        // complex selectors
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "selectors.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const button = style({
-  background: 'blue',
-  selectors: {
-    '&:hover': {
-      background: 'darkblue'
-    },
-    '&:focus': {
-      outline: '2px solid blue'
-    },
-    '&:active': {
-      transform: 'scale(0.98)'
-    },
-    '&:disabled': {
-      opacity: 0.5,
-      cursor: 'not-allowed'
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        reset_class_map();
-        reset_file_map();
-        // parent and sibling selectors
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "selectors-complex.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const parent = style({
-  background: 'white'
-})
-export const child = style({
-  selectors: {
-    [`${parent}:hover &`]: {
-      color: 'blue'
-    },
-    '& + &': {
-      marginTop: 8
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_media_queries() {
-        reset_class_map();
-        reset_file_map();
-        // @media queries
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "media.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const responsive = style({
-  display: 'block',
-  '@media': {
-    'screen and (min-width: 768px)': {
-      display: 'flex'
-    },
-    'screen and (min-width: 1024px)': {
-      display: 'grid'
-    },
-    '(prefers-color-scheme: dark)': {
-      background: 'black',
-      color: 'white'
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_supports() {
-        reset_class_map();
-        reset_file_map();
-        // @supports queries
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "supports.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const grid = style({
-  display: 'flex',
-  '@supports': {
-    '(display: grid)': {
-      display: 'grid'
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-    // END VANILLA-EXTRACT API TESTS
-
-    #[rstest]
-    #[case("test.tsx", "const x = 1;", "@devup-ui/react", false)] // no package string
-    #[case(
-        "test.invalid",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        false
-    )] // invalid extension
-    #[case(
-        "test.tsx",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // named import
-    #[case(
-        "test.tsx",
-        "// import from @devup-ui/react\nconst x = 1;",
-        "@devup-ui/react",
-        false
-    )] // in comment
-    #[case(
-        "test.tsx",
-        "import { Box } from '@devup-ui/core';",
-        "@devup-ui/react",
-        false
-    )] // different package
-    #[case(
-        "test.tsx",
-        "import Box from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // default import
-    #[case(
-        "test.tsx",
-        "import * as DevupUI from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // namespace import
-    #[case(
-        "test.tsx",
-        "import React from 'react';\nimport { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // multiple imports
-    #[case("test.tsx", "const pkg = '@devup-ui/react';", "@devup-ui/react", false)] // string literal
-    #[case(
-        "test.js",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .js
-    #[case(
-        "test.ts",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .ts
-    #[case(
-        "test.jsx",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .jsx
-    #[case(
-        "test.unknown",
-        "import { Box } from '@devup-ui/react';",
-        "@devup-ui/react",
-        false
-    )] // unsupported file extension
-    #[case(
-        "styles.css.ts",
-        "import { css } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .css.ts (devup-ui style)
-    #[case(
-        "styles.css.js",
-        "import { css } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .css.js (devup-ui style)
-    #[case(
-        "styles.css.ts",
-        "import { style } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .css.ts (vanilla-extract API from devup-ui)
-    #[case(
-        "styles.css.js",
-        "import { style } from '@devup-ui/react';",
-        "@devup-ui/react",
-        true
-    )] // .css.js (vanilla-extract API from devup-ui)
-    fn test_has_devup_ui(
-        #[case] filename: &str,
-        #[case] code: &str,
-        #[case] package: &str,
-        #[case] expected: bool,
-    ) {
-        assert_eq!(has_devup_ui(filename, code, package), expected);
-    }
-
-    // ============================================================================
-    // COVERAGE EDGE CASE TESTS
-    // ============================================================================
-
-    #[test]
-    #[serial]
-    fn test_container_at_rule_in_css() {
-        // Test @container at-rule (covers line 134 in extract_style_from_expression.rs)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<div className={css({
-  _container: {
-    "(min-width: 400px)": {
-      display: "flex"
-    }
-  }
-})} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test with @container prefix
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<div className={css({
-  "@container": {
-    "(min-width: 500px)": {
-      background: "blue"
-    }
-  }
-})} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_invalid_js_execution() {
-        // Test vanilla-extract file with invalid JS (covers line 107 fallback)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // This should fall back to regular extraction when JS execution fails
-        let result = extract(
-            "invalid.css.ts",
-            r#"import { style } from '@devup-ui/react'
-// Invalid JS that will cause execution to fail
-export const broken = style((() => { throw new Error("fail"); })())
-"#,
-            ExtractOption {
-                package: "@devup-ui/react".to_string(),
-                css_dir: "@devup-ui/react".to_string(),
-                single_css: true,
-                import_main_css: false,
-                import_aliases: HashMap::new(),
-            },
-        );
-        // Should not panic, may return error or empty styles
-        assert!(result.is_ok() || result.is_err());
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_empty_styles() {
-        // Test vanilla-extract file that produces empty styles (covers line 116)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // File with no style() calls
-        let result = extract(
-            "empty.css.ts",
-            r#"import { style } from '@devup-ui/react'
-// No actual style calls, just comments
-const unused = 1;
-"#,
-            ExtractOption {
-                package: "@devup-ui/react".to_string(),
-                css_dir: "@devup-ui/react".to_string(),
-                single_css: true,
-                import_main_css: false,
-                import_aliases: HashMap::new(),
-            },
-        );
-        assert!(result.is_ok());
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_constant_exports() {
-        // Test vanilla-extract file with constant exports (covers lines 576-577)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "constants.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const SPACING = 8;
-export const COLORS = { primary: 'blue', secondary: 'green' };
-export const box = style({ padding: SPACING })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_with_vars() {
-        // Test createTheme with array destructuring [themeClass, vars] (covers lines 406-430)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-vars.css.ts",
-                r#"import { createTheme } from '@devup-ui/react'
-export const [lightTheme, vars] = createTheme({
-  color: {
-    primary: 'blue',
-    secondary: 'green'
-  },
-  space: {
-    small: '4px',
-    medium: '8px'
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_non_exported_theme() {
-        // Test non-exported createTheme (covers theme branches without export)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "internal-theme.css.ts",
-                r#"import { createTheme, style } from '@devup-ui/react'
-const [internalTheme, themeVars] = createTheme({
-  colors: {
-    bg: 'white',
-    text: 'black'
-  }
-})
-export const themed = style({
-  background: 'red'
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_composition_empty() {
-        // Test style with empty composition array
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "empty-comp.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const empty = style([])
-export const withEmpty = style([{}])
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_variants_with_base() {
-        // Test styleVariants with base composition (covers lines 1165-1177)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "variants-base.css.ts",
-                r#"import { style, styleVariants } from '@devup-ui/react'
-const base = style({
-  padding: 8,
-  borderRadius: 4
-})
-export const sizes = styleVariants({
-  small: [base, { fontSize: 12 }],
-  medium: [base, { fontSize: 16 }],
-  large: [base, { fontSize: 20 }]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_layer_and_container() {
-        // Test layer() and createContainer() together (covers lines 1207-1216)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "layer-container.css.ts",
-                r#"import { layer, createContainer, style } from '@devup-ui/react'
-export const resetLayer = layer('reset')
-export const baseLayer = layer('base')
-export const myContainer = createContainer()
-export const containerStyle = style({
-  containerName: myContainer,
-  containerType: 'inline-size'
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_all_imports() {
-        // Test file that uses css, globalCss, and keyframes together (covers lines 1049, 1052)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "all-imports.css.ts",
-                r#"import { style, globalStyle, keyframes, createTheme } from '@devup-ui/react'
-export const [theme, vars] = createTheme({
-  color: { primary: 'blue' }
-})
-export const fadeIn = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 }
-})
-globalStyle('body', {
-  margin: 0
-})
-export const box = style({
-  animation: 'fadeIn 1s'
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_without_vars_name() {
-        // Test createTheme two-arg form (covers lines 1108, 1111)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-two-arg.css.ts",
-                r#"import { createThemeContract, createTheme } from '@devup-ui/react'
-const contract = createThemeContract({
-  color: {
-    brand: null,
-    text: null
-  }
-})
-export const darkTheme = createTheme(contract, {
-  color: {
-    brand: 'white',
-    text: 'lightgray'
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_font_face_with_style() {
-        // Test fontFace used in style (covers fontFace placeholder replacement)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "font-usage.css.ts",
-                r#"import { fontFace, style } from '@devup-ui/react'
-export const myFont = fontFace({
-  src: 'local("Comic Sans MS")',
-  fontWeight: 400
-})
-export const text = style({
-  fontFamily: myFont
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_vars_only() {
-        // Test createVar exports (covers lines 1191-1192)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "vars-only.css.ts",
-                r#"import { createVar, style, fallbackVar } from '@devup-ui/react'
-export const colorVar = createVar()
-export const sizeVar = createVar()
-export const box = style({
-  color: fallbackVar(colorVar, 'blue'),
-  fontSize: sizeVar
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_global_theme_empty_vars() {
-        // Test createGlobalTheme with empty vars (covers line 1142 branch)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "global-theme-empty.css.ts",
-                r#"import { createGlobalTheme, style } from '@devup-ui/react'
-export const emptyVars = createGlobalTheme(':root', {})
-export const box = style({ padding: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_non_exported_styles() {
-        // Test non-exported styles mixed with exported (covers export flag branches)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "mixed-exports.css.ts",
-                r#"import { style, keyframes, createVar, createContainer, layer } from '@devup-ui/react'
-const internalStyle = style({ padding: 4 })
-const internalKeyframe = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
-const internalVar = createVar()
-const internalContainer = createContainer()
-const internalLayer = layer('internal')
-export const publicStyle = style({ margin: 8 })
-"#,
-                ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_selector_references() {
-        // Test styles referencing each other in selectors (covers find_selector_references)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "selector-refs.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const parent = style({ background: 'white' })
-export const child = style({
-  selectors: {
-    [`${parent}:hover &`]: {
-      color: 'blue'
-    }
-  }
-})
-export const sibling = style({
-  selectors: {
-    [`${parent} + &`]: {
-      marginTop: 8
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_has_devup_ui_parser_panic() {
-        // Test has_devup_ui with invalid code that causes parser panic (covers line 202)
-        // Invalid syntax that will make the parser panic
-        let result = has_devup_ui(
-            "test.tsx",
-            "import {} '@devup-ui/react'; syntax error {{",
-            "@devup-ui/react",
-        );
-        assert!(!result);
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_fontfaces_object_syntax() {
-        // Test globalCss fontFaces with object syntax (covers lines 103, 115 in extract_global_style_from_expression.rs)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    fontFaces: [
-        {
-            fontFamily: "CustomFont",
-            src: "url('/fonts/custom.woff2')",
-            fontWeight: "400",
-            fontStyle: "normal"
-        }
-    ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test with multiple font properties to exercise disassemble_property
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    fontFaces: [
-        {
-            fontFamily: "MultiFont",
-            src: "url('/fonts/multi.woff2')",
-            fontWeight: "bold",
-            fontDisplay: "swap"
-        },
-        {
-            fontFamily: "AnotherFont",
-            src: "local('Arial')"
-        }
-    ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_fontfaces_multi_value_optimization() {
-        // Test fontFaces with font-family that needs multi-value optimization (covers line 69, 73-74)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    fontFaces: [
-        {
-            fontFamily: "'Custom Font', 'Fallback Font', sans-serif",
-            src: "local('Custom Font'), url('/fonts/custom.woff2') format('woff2')",
-            fontWeight: "400 700",
-            fontStyle: "normal"
-        }
-    ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test fontFaces with content property (another multi-optimize property)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    fontFaces: [
-        {
-            fontFamily: "IconFont",
-            src: "/fonts/icons.woff2"
-        }
-    ]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_conditional_expression_with_selector() {
-        // Test ConditionalExpression when name.is_none() and selector.is_some() (covers line 134)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<div className={css({
-  _hover: condition ? { bg: "blue" } : { bg: "red" }
-})} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test nested conditional within selector
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<div className={css({
-  selectors: {
-    "&:hover": condition ? { color: "blue" } : { color: "red" }
-  }
-})} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_non_vanilla_extract_file() {
-        // Test non-.css.ts file (covers line 154 - is_vanilla_extract = false path)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        let result = extract(
-            "regular.tsx",
-            r#"import { Box } from '@devup-ui/react'
-<Box bg="red" p={4} />
-"#,
-            ExtractOption {
-                package: "@devup-ui/react".to_string(),
-                css_dir: "@devup-ui/react".to_string(),
-                single_css: true,
-                import_main_css: false,
-                import_aliases: HashMap::new(),
-            },
-        );
-        assert!(result.is_ok());
-        let output = result.unwrap();
-        assert!(!output.code.is_empty());
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_execution_fallback() {
-        // Test vanilla-extract file with execution error (covers line 116 fallback)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        // Syntax error in JS execution will trigger fallback
-        let result = extract(
-            "error.css.ts",
-            r#"import { style } from '@devup-ui/react'
-const x = style({ padding: [[[}}} // invalid syntax
-"#,
-            ExtractOption {
-                package: "@devup-ui/react".to_string(),
-                css_dir: "@devup-ui/react".to_string(),
-                single_css: true,
-                import_main_css: false,
-                import_aliases: HashMap::new(),
-            },
-        );
-        // Should not panic - falls back to regular processing
-        assert!(result.is_ok() || result.is_err());
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_vanilla_extract_named() {
-        // Test @vanilla-extract/css named exports in regular .tsx files (NOT .css.ts)
-        // Note: .css.ts files use vanilla-extract's own processing which doesn't go through import aliases
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-
-        // Use regular .tsx file (not .css.ts) for import alias to work
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from '@vanilla-extract/css'
-const buttonStyle = css({ bg: 'red', p: 4 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_keyframes_export() {
-        // Test exported keyframes (covers lines 1052, 1152-1153)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "keyframes-export.css.ts",
-                r#"import { keyframes, style } from '@devup-ui/react'
-export const spin = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
-})
-const internal = keyframes({
-  '0%': { opacity: 0 },
-  '100%': { opacity: 1 }
-})
-export const spinner = style({ animation: spin })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_vars_name_only() {
-        // Test createTheme with vars_name but no vars_object_json (covers line 1301)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-vars-name.css.ts",
-                r#"import { createTheme } from '@devup-ui/react'
-export const myTheme = createTheme({
-  color: { primary: 'blue' }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_variants_mixed() {
-        // Test styleVariants with mixed base and no-base (covers lines 1161-1184)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "variants-mixed.css.ts",
-                r#"import { style, styleVariants } from '@devup-ui/react'
-const base = style({ borderRadius: 4, padding: 8 })
-export const buttons = styleVariants({
-  primary: [base, { background: 'blue', color: 'white' }],
-  secondary: { background: 'gray', color: 'black' },
-  danger: [base, { background: 'red' }]
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_global_theme_with_vars() {
-        // Test createGlobalTheme with CSS vars (covers lines 1142-1144)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "global-theme-vars.css.ts",
-                r#"import { createGlobalTheme, style } from '@devup-ui/react'
-export const vars = createGlobalTheme(':root', {
-  color: {
-    primary: 'blue',
-    secondary: 'green'
-  },
-  space: {
-    small: '4px',
-    large: '16px'
-  }
-})
-export const box = style({ padding: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_font_face_empty_props() {
-        // Test fontFace with minimal properties (covers line 1132-1135 empty props branch)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "fontface-minimal.css.ts",
-                r#"import { fontFace, style } from '@devup-ui/react'
-export const minimalFont = fontFace({})
-export const text = style({ fontFamily: minimalFont })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_imports_combination() {
-        // Test file with multiple import types (covers lines 1049, 1052 import generation)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "imports-combo.css.ts",
-                r#"import { style, globalStyle, keyframes, fontFace } from '@devup-ui/react'
-export const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
-export const myFont = fontFace({ src: 'local(Arial)' })
-globalStyle('body', { margin: 0, fontFamily: myFont })
-export const animated = style({ animation: fadeIn })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_export_variations() {
-        // Test createTheme with different export patterns (covers lines 1103-1111)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-exports.css.ts",
-                r#"import { createTheme, createThemeContract, style } from '@devup-ui/react'
-const contract = createThemeContract({
-  colors: { bg: null, text: null }
-})
-export const lightTheme = createTheme(contract, {
-  colors: { bg: 'white', text: 'black' }
-})
-const internalTheme = createTheme(contract, {
-  colors: { bg: 'gray', text: 'darkgray' }
-})
-export const box = style({ padding: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_style_composition_multiple() {
-        // Test style with multiple style objects in composition array (covers lines 728-729)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "multi-comp.css.ts",
-                r#"import { style } from '@devup-ui/react'
-const base = style({ padding: 8 })
-export const complex = style([base, { margin: 4 }, { color: 'blue' }])
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_selector_class_replacement() {
-        // Test selector references that need class name replacement (covers collected_styles_to_code_with_classes)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "selector-ref.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const parent = style({ display: 'flex' })
-export const child = style({
-  selectors: {
-    [`${parent}:hover &`]: { background: 'red' }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_all_exports_combined() {
-        // Test file with styles, keyframes, globalStyles, themes, vars, containers, layers, fontFaces combined
-        // Covers multiple import generation paths and code generation
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "all-combined.css.ts",
-                r#"import { style, globalStyle, keyframes, createVar, createContainer, layer, fontFace, createGlobalTheme, styleVariants } from '@devup-ui/react'
-export const myVar = createVar()
-export const myContainer = createContainer()
-export const myLayer = layer('components')
-export const myFont = fontFace({ src: 'local(Arial)' })
-export const vars = createGlobalTheme(':root', { color: { primary: 'blue' } })
-export const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
-globalStyle('body', { margin: 0 })
-const base = style({ padding: 8 })
-export const buttons = styleVariants({
-  primary: [base, { bg: 'blue' }],
-  secondary: { bg: 'gray' }
-})
-export const box = style({ fontFamily: myFont })
-"#,
-                ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_array_destructure() {
-        // Test createTheme with array destructuring [themeClass, vars] (covers lines 384, 386-387)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-array.css.ts",
-                r#"import { createTheme, style } from '@devup-ui/react'
-export const [themeClass, themeVars] = createTheme({
-  colors: { primary: 'blue', secondary: 'green' },
-  spacing: { small: '4px', medium: '8px' }
-})
-export const themed = style({ color: themeVars.colors.primary })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_font_face_placeholder() {
-        // Test fontFace placeholder remapping (covers lines 503-505)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "fontface-remap.css.ts",
-                r#"import { fontFace, style } from '@devup-ui/react'
-export const customFont = fontFace({
-  src: 'url("/fonts/custom.woff2")',
-  fontWeight: '400',
-  fontDisplay: 'swap'
-})
-export const secondFont = fontFace({
-  src: 'local("Helvetica")'
-})
-export const text = style({ fontFamily: customFont })
-export const heading = style({ fontFamily: secondFont })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_global_theme_placeholder() {
-        // Test createGlobalTheme placeholder remapping (covers global theme paths)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "globaltheme-remap.css.ts",
-                r#"import { createGlobalTheme, style } from '@devup-ui/react'
-export const lightVars = createGlobalTheme(':root', {
-  colors: { bg: 'white', text: 'black' }
-})
-export const darkVars = createGlobalTheme('.dark', {
-  colors: { bg: 'black', text: 'white' }
-})
-export const box = style({ padding: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_with_layer_in_selector() {
-        // Test globalCss with @layer inside selector object (covers lines 103, 115 in extract_global_style_from_expression.rs)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    ".button": {
-        "@layer": "components",
-        padding: "8px",
-        background: "blue"
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-
-        // Test with multiple selectors having @layer
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    ".card": {
-        "@layer": "layout",
-        display: "flex"
-    },
-    ".text": {
-        "@layer": "typography",
-        fontSize: "16px"
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_css_container_at_rule_with_selector() {
-        // Test @container at-rule within selector context (covers line 134)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { css } from "@devup-ui/core";
-<div className={css({
-  padding: 8,
-  "@container": {
-    "(min-width: 300px)": {
-      padding: 16
-    }
-  }
-})} />;
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_selector_refs_triggers_with_classes() {
-        // Test that triggers collected_styles_to_code_with_classes path (selector references)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "refs.css.ts",
-                r#"import { style, globalStyle, keyframes, createVar, fontFace, createContainer, layer } from '@devup-ui/react'
-export const colorVar = createVar()
-export const myContainer = createContainer()
-export const myLayer = layer('ui')
-export const myFont = fontFace({ src: 'local(Arial)' })
-export const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
-export const parent = style({ display: 'flex' })
-export const child = style({
-  selectors: {
-    [`${parent}:hover &`]: { color: 'red' }
-  }
-})
-globalStyle('body', { margin: 0 })
-"#,
-                ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_theme_without_vars_json() {
-        // Test createTheme that has vars_name but might not have vars_object_json (covers line 1111)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-simple.css.ts",
-                r#"import { createThemeContract, createTheme, style } from '@devup-ui/react'
-const contract = createThemeContract({
-  colors: { primary: null }
-})
-export const lightTheme = createTheme(contract, {
-  colors: { primary: 'blue' }
-})
-export const box = style({ padding: 8 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_global_css_layer_property_extraction() {
-        // Test globalCss with @layer property to trigger lines 103, 115 in extract_global_style_from_expression.rs
-        // The @layer property should be extracted and then filtered out, with layer set on remaining styles
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import { globalCss } from '@devup-ui/core'
-globalCss({
-    ".reset-box": {
-        "@layer": "reset",
-        margin: 0,
-        padding: 0,
-        boxSizing: "border-box"
-    }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_selector_refs_with_global_theme() {
-        // Test that triggers append_non_style_code with global themes (covers lines 1142-1144, 1221-1222)
-        // Need selector references + createGlobalTheme
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "theme-refs.css.ts",
-                r#"import { style, createGlobalTheme } from '@devup-ui/react'
-export const vars = createGlobalTheme(':root', {
-  colors: { primary: 'blue', secondary: 'green' }
-})
-export const parent = style({ background: 'white' })
-export const child = style({
-  selectors: {
-    [`${parent}:hover &`]: { color: 'red' }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_vanilla_extract_with_at_container_selector() {
-        // Test @container with selector context (covers line 134 in extract_style_from_expression.rs)
-        reset_class_map();
-        reset_file_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "container.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const card = style({
-  containerType: 'inline-size',
-  '@container': {
-    '(min-width: 400px)': {
-      display: 'grid',
-      gridTemplateColumns: '1fr 1fr'
-    }
-  }
-})
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_extract_class_map_from_code_parser_panic() {
-        // Test extract_class_map_from_code with invalid code that causes parser panic (covers line 153-154)
-        let mut style_names = HashSet::new();
-        style_names.insert("test".to_string());
-
-        let result = extract_class_map_from_code(
-            "test.tsx",
-            "const {{ invalid syntax {{{{",
-            &ExtractOption {
-                package: "@devup-ui/react".to_string(),
-                css_dir: "@devup-ui/react".to_string(),
-                single_css: true,
-                import_main_css: false,
-                import_aliases: HashMap::new(),
-            },
-            &style_names,
-        )
-        .unwrap();
-
-        assert!(result.is_empty());
-    }
-
-    // === Import Alias Tests ===
-
-    #[test]
-    #[serial]
-    fn test_import_alias_emotion_styled() {
-        // Test @emotion/styled default export → styled named export
-        // Uses devup-ui's styled syntax: styled.button({ ... }) or styled("button")({ ... })
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import styled from '@emotion/styled'
-const Button = styled.button({ bg: 'red', p: 4 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_styled_components() {
-        // Test styled-components default export → styled named export
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "styled-components".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import styled from 'styled-components'
-const Card = styled("div")({ bg: 'blue', m: 2 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_skip_when_package_not_in_code() {
-        // Test that extraction is skipped when neither package nor aliases are present
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import React from 'react'
-const element = <div>Hello</div>"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_renamed_import() {
-        // Test aliased import that's renamed locally: import myStyled from '@emotion/styled'
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import myStyled from '@emotion/styled'
-const Button = myStyled.button({ bg: 'green', p: 2 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_custom_named_export() {
-        // Test @emotion/styled default export → custom named export (emotionStyled, not styled)
-        // This tests when user configures alias to map to a non-standard named export
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import emotionStyled from '@emotion/styled'
-const Button = emotionStyled.button({ bg: 'purple', p: 3 })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_import_alias_multiple_aliases() {
-        // Test with multiple aliases configured
-        reset_class_map();
-        reset_file_map();
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-        aliases.insert(
-            "styled-components".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-
-        // Test with @emotion/styled member syntax
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import styled from '@emotion/styled'
-const Button = styled.button({ bg: 'red' })
-"#,
-                ExtractOption {
-                    package: "@devup-ui/react".to_string(),
-                    css_dir: "@devup-ui/react".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: aliases
-                },
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_classname_extraction() {
-        // Test Tailwind className extraction - classes should be replaced with devup-ui generated names
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="p-4 bg-red-500" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_classname_with_variants() {
-        // Test Tailwind with hover and responsive variants
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="p-4 hover:bg-blue-500 sm:p-8" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_classname_with_devup_props() {
-        // Test Tailwind className combined with devup-ui style props
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="p-4 bg-red-500" margin={2} />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_arbitrary_values() {
-        // Test Tailwind arbitrary values like w-[100px]
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="w-[100px] h-[50vh] text-[#ff0000]" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_negative_values() {
-        // Test Tailwind negative values like -m-4
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="-m-4 -translate-x-1/2" />
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_full_integration() {
-        // Comprehensive integration test: realistic multi-component scenario
-        // Tests multiple Tailwind features together in a real-world usage pattern
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "components/Card.tsx",
-                r#"import {Box, Flex, Text} from '@devup-ui/core'
-
-// Card component with comprehensive Tailwind usage
-export const Card = () => (
-  <Box className="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow dark:bg-gray-800">
-    <Flex className="flex-col gap-4 sm:flex-row sm:items-center">
-      <Box className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
-        <Text className="text-white font-bold text-lg">A</Text>
-      </Box>
-      <Box className="flex-1">
-        <Text className="text-gray-900 font-semibold text-xl dark:text-white">Title</Text>
-        <Text className="text-gray-500 text-sm mt-1 dark:text-gray-400">Subtitle</Text>
-      </Box>
-    </Flex>
-    <Box className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <Text className="text-gray-700 leading-relaxed dark:text-gray-300">
-        Content goes here with multiple Tailwind utilities combined.
-      </Text>
-    </Box>
-  </Box>
-)
-"#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_with_all_variant_types() {
-        // Test all variant types: responsive, state, dark mode
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className="p-2 sm:p-4 md:p-6 lg:p-8 xl:p-10 2xl:p-12 hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50 dark:bg-gray-900 dark:hover:bg-gray-800" />
-"#,
-                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_mixed_with_devup_responsive() {
-        // Test Tailwind className with devup-ui responsive array props
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box 
-  className="rounded-lg shadow-md hover:shadow-xl" 
-  p={[2, 4, 6]} 
-  bg={["red", "blue", "green"]}
-  display={["block", "flex"]}
-/>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_with_as_prop() {
-        // Test Tailwind className with "as" prop for polymorphic components
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box as="p" className="text-gray-900">text</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_with_conditional_template_literal() {
-        // Test Tailwind className with conditional expression in template literal
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${enabled ? 'text-green-500' : 'text-blue-500'} text-3xl pr-5`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_logical_expression() {
-        // Test LogicalExpression in template literal (covers lines 239-242, 290-292 in prop_modify_utils.rs)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${isActive && 'text-red-500'} ${fallback || 'text-blue-500'} p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_parenthesized_expression() {
-        // Test ParenthesizedExpression in template literal (covers lines 244-246, 295-296 in prop_modify_utils.rs)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${(cond ? 'text-red-500' : 'text-blue-500')} p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_nested_template_literal() {
-        // Test nested TemplateLiteral (covers lines 248, 299-302 in prop_modify_utils.rs)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${`text-${color}-500`} p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_variable_expression() {
-        // Test non-string expressions (variables/identifiers) - covers line 250 in prop_modify_utils.rs
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${dynamicClass} text-red-500 p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_function_call_expression() {
-        // Test function call expressions in template literal (covers line 250 default branch)
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box className={`${getClass()} text-blue-500 p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-
-    #[test]
-    #[serial]
-    fn test_tailwind_template_literal_with_style_order() {
-        // Test style_order parameter in build_tailwind_class_mapping (covers line 178)
-        // styleOrder prop must be set explicitly to trigger the style_order code path
-        reset_class_map();
-        reset_file_map();
-        assert_debug_snapshot!(ToBTreeSet::from(
-            extract(
-                "test.tsx",
-                r#"import {Box} from '@devup-ui/core'
-<Box styleOrder={5} className={`${enabled ? 'text-green-500' : 'text-blue-500'} p-4`}>
-  hello
-</Box>
-"#,
-                ExtractOption {
-                    package: "@devup-ui/core".to_string(),
-                    css_dir: "@devup-ui/core".to_string(),
-                    single_css: true,
-                    import_main_css: false,
-                    import_aliases: HashMap::new()
-                }
-            )
-            .unwrap()
-        ));
-    }
-}
diff --git a/libs/extractor/tests/all_tests.rs b/libs/extractor/tests/all_tests.rs
new file mode 100644
index 00000000..4d2fe80e
--- /dev/null
+++ b/libs/extractor/tests/all_tests.rs
@@ -0,0 +1,13128 @@
+use std::collections::{BTreeSet, HashMap, HashSet};
+
+use css::class_map::reset_class_map;
+use css::file_map::reset_file_map;
+use extractor::*;
+use insta::assert_debug_snapshot;
+use rstest::rstest;
+use serial_test::serial;
+
+#[derive(Debug)]
+#[allow(dead_code)]
+struct ToBTreeSet {
+    // used styles
+    pub(crate) styles: BTreeSet<ExtractStyleValue>,
+
+    // output source
+    pub(crate) code: String,
+}
+
+impl From<ExtractOutput> for ToBTreeSet {
+    fn from(output: ExtractOutput) -> Self {
+        Self {
+            styles: {
+                let mut set = BTreeSet::new();
+                set.extend(output.styles);
+                set
+            },
+            code: output.code,
+        }
+    }
+}
+
+#[test]
+fn test_extract_option_default() {
+    // Tests lines 90-91: ExtractOption::default()
+    let option = ExtractOption::default();
+    assert_eq!(option.package, "@devup-ui/react");
+    assert_eq!(option.css_dir, "@devup-ui/react");
+    assert!(!option.single_css);
+    assert!(!option.import_main_css);
+    assert!(option.import_aliases.is_empty());
+}
+
+#[test]
+#[serial]
+fn extract_just_tsx() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            "const a = 1;",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            },
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            "<Box gap={1} />",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            },
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn ignore_special_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id="id" />
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Input} from '@devup-ui/core'
+        <Input placeholder="a" maxLength="b" minLength="c" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn convert_tag() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as="section" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={"section"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={`section`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={"section"}></Box>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={`section`}></Box>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? "div":"section"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? `div`:`section`} w="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? undefined:"section"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? null:"section"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? "section":undefined} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? "section":null} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? null:undefined} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={Variable} w="100%" h="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b ? Variable : "section"} w="100%" h="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box as={{A: "section", B: "div", C: Variable, D, [key]: "section", ...rest}[key]} w="100%" h="100%" />
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+        <Box as={{A: "section", B: "div", C: Variable, D, ["key"]: "section", ...rest}["key"]} w="100%" h="100%" />
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={b === 1 ? "section" : "div"} w="100%" h="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={["div", "section"][b]} w="100%" h="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={["div", "section"][b]} w="100%" h="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // maintain object expression
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={Variable} w="100%" props={{animate:{duration: 1}}} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // maintain object expression
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box as={Variable} w="100%" props={{animate:{duration: 1}}}></Box>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn extract_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box padding={1} margin={2} wrong={} wrong2=<></> />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box as C} from '@devup-ui/core'
+                <C padding={1} margin={2} />
+                ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Input} from '@devup-ui/core'
+        <Input padding={1} margin={2} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Button} from '@devup-ui/core'
+        <Button padding={1} margin={2} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Flex} from '@devup-ui/core'
+        <Flex padding={1} margin={2} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Flex} from '@devup-ui/core'
+        <Flex padding={('-1')}/>
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_style_props_with_namespace_import() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import * as B from '@devup-ui/core'
+        <B.Flex padding={('-1')} className={B.css({
+            color: 'red'
+        })}/>
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_style_props_with_var_css() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {css} from '@devup-ui/core'
+        const newCss=css;
+        <div className={newCss({
+            color: 'red'
+        })}/>
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_style_props_with_default_import() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import B from '@devup-ui/core'
+        <B.Flex padding={('-1')} className={B.css({
+            color: 'red'
+        })}/>
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_style_props_with_class_name() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className="exists class name" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className="  exists class name  " />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={"exists class name"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={"a"+"b"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Image} from '@devup-ui/core'
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={variable} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as C} from '@devup-ui/core'
+        <C padding={1} 
+      _hover={{
+        borderColor: true ? 'blue' : ``,
+      }}
+ className={variable} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box, Button as DevupButton, Center, css } from '@devup-ui/core'
+import clsx from 'clsx'
+
+<DevupButton
+      boxSizing="border-box"
+      className={clsx(
+        variants[variant],
+        isError && variant === 'default' && errorClassNames,
+        className,
+      )}
+      typography={
+        isPrimary
+          ? {
+              sm: 'buttonS',
+              md: 'buttonM',
+            }[size]
+          : undefined
+      }
+      {...props}
+    />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_class_name_from_component() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {VStack as C} from '@devup-ui/core'
+        <C padding={1} margin={2} className={"a"+"b"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn extract_responsive_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[null,1]} margin={[2,null,4]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Flex } from "@devup-ui/core";
+<Flex display={['none', null, "flex"]}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_dynamic_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={someStyleVar} margin={someStyleVar2} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={Math.abs(5)} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg={data.buttonBgColor} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg={data.a.b.buttonBgColor} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_dynamic_style_props_with_type() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={a as A} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={data[d as A] as B} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={"10px" as B} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn remove_semicolon() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg="red;" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg="blue;;" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg={`${"green;"}`} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg={`${color};`} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box bg={`${color}` + ";"} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_dynamic_responsive_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[someStyleVar,null,someStyleVar1]} margin={[null,someStyleVar2]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_compound_responsive_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[someStyleVar,undefined,someStyleVar1]} margin={[null,someStyleVar2]} bg="red" />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_wrong_responsive_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[NaN,undefined,null]} margin={Infinity} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[1,,null]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_variable_style_props_with_style() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a} style={{ key:value }} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a} style={styles} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_conditional_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? "4px" : "3px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? c : d} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? "4px" : d} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? null : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? 1 : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? undefined : 2} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${a}px` : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? null : `${b}px`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${b}px` : undefined} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? undefined : null} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box _hover={b ? void 0 : { bg: "blue" }} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_same_value_conditional_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? "4px" : "4px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? 4 : 4} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `4px` : `4px`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${"1px"}` : `${"1px"}`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${"1"}px` : `${1}px`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${`1`}px` : `${"1"}px`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_same_dynamic_value_conditional_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? a : a} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? `${a}` : `${a}`} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_responsive_conditional_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={[null, a === b ? "4px" : "3px"]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+        <Box margin={["6px", a === b ? "4px" : "3px"]} />;
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? c : [d, e, f, "2px"]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? c : [d, e, f, x === y ? "4px" : "2px"]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? [d, e, f, x === y ? "4px" : "2px"] : c} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a === b ? [d, e, f, x === y ? "4px" : "2px"] : ["1px", "2px", "3px"]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={[null, a === b && "4px"]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={[null, a === b && "4px", c === d ? "5px" : null]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_logical_case() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a===b && "1px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a===b || "1px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a ?? "1px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={(a===1||a===2)&&b===3 && "1px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_dynamic_logical_case() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a===b && a} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a===b || a} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={a ?? b} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={(a===1||a===2)&&b===3 && a} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn extract_responsive_conditional_style_props_with_class_name() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={[null, a === b ? (q > w ? "4px" : "8px") : "3px"]} className={"exists"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={[null, a === b || "4px"]} className={"exists"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          mx: 1
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Center} from '@devup-ui/core'
+    <Center
+      _active={
+        variant !== 'disabled' && {
+          boxShadow: 'none',
+          transform: 'scale(0.95)',
+        }
+      }
+      _hover={
+        variant !== 'disabled' && {
+          boxShadow: [
+            '0px 1px 3px 0px rgba(0, 0, 0, 0.25)',
+            null,
+            '0px 0px 15px 0px rgba(0, 0, 0, 0.25)',
+          ],
+        }
+      }
+      {...props}
+    >
+      {children}
+    </Center>
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          _themeDark: {
+            mx: 1
+          }
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          '_themeDark': {
+            mx: 1
+          }
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          _hover: {
+            mx: 1
+          }
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "_hover, _active": {
+            mx: 1
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "&:hover,                 &:active": {
+            mx: 1
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _nthLastChild={{
+          mx: 1
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box
+          selectors={{
+            "&:nth-last-child(2), &:nth-last-child(3)": {
+              mx: 1
+            },
+            _nthLastChild: {
+              mx: 2
+            }
+          }}
+         />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".dataTestId > &": {
+            mx: 1
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "_hover": {
+            mx: 1
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "_hover": {
+            selectors: {
+              ".dataTestId > &": {
+                color: "red"
+              }
+            }
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".test-picker__day--keyboard-selected": {
+            bg: "$primary"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "& .a, & .b": {
+            bg: "$primary"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".test-picker__day--keyboard-selected": {
+            _hover: {
+              bg: "$primary"
+            },
+            selectors: {
+              "&:active": {
+                bg: "$primary"
+              }
+            }
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          ".a, .b": {
+            _hover: {
+              bg: "$primary"
+            },
+            selectors: {
+              "&:active": {
+                bg: "$secondary"
+              }
+            }
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn optimize_func() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scale(0.95)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scale(0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scaleX(0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scaleY(0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scaleZ(0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scale(0deg, 0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box transform="scaleX(0deg) scaleY(0deg) scaleZ(0deg)" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_selector_with_literal() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _hover={`
+        background-color: red;
+        `} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box selectors={{
+          "&:hover":`
+          background-color: red;
+          ` 
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn extract_nested_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          _placeholder: {
+            color: "red"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          selectors: {
+            "&::placeholder, &:active": {
+              color: "blue"
+            }
+          },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          selectors: {
+            "&::placeholder": {
+              color: "red"
+            },
+            "&::placeholder, &:active": {
+              color: "blue"
+            }
+          },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          selectors: {
+            "&::placeholder": {
+              _active: {
+                color: "red",
+              }
+            },
+          },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+          selectors={{
+            "&::placeholder": {
+              _active: {
+                color: "red",
+              }
+            },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+          selectors={{
+            "&::placeholder": {
+              selectors: {
+                "&:active": {
+                  selectors: {
+                    "&:hover": {
+                      color: "red",
+                    }
+                  }
+                }
+              }
+            },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+          _placeholder={{
+            _active: {
+              _hover: {
+                color: "blue",
+              },
+              color: "red",
+            },
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+        selectors={{
+          _hover: {
+             selectors: {
+              "&:active, _hover": {
+                color: "red",
+              }
+             }
+          }
+        }}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+        selectors={{
+          _hover: {
+             selectors: {
+              "_themeDark": {
+                color: "red",
+              }
+             }
+          }
+        }}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+        selectors={{
+          _hover: {
+             selectors: {
+              "_themeDark,_active": {
+                color: "red",
+              }
+             }
+          }
+        }}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box 
+        selectors={{
+          _hover: {
+             selectors: {
+              "_themeDark,_placeholder": {
+                color: "red",
+              }
+             }
+          }
+        }}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_conditional_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={a===b ? undefined : {
+          mx: 1
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={a===b && {
+          mx: 1
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={a===b && {}} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={a===b && {
+          mx: 1,
+          my: 1
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_selector_with_responsive() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={{
+          mx: [1, 2]
+        }} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={[{
+          mx: 10
+        },{
+          mx: 20
+        }]} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box _hover={[`
+        margin-left: 10px;
+        margin-right: 10px;
+        `,{
+        marginLeft: '20px',
+        marginRight: '20px',
+        }]} />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_static_css_class_name_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`
+  background-color: red;
+`}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css as c } from "@devup-ui/core";
+<Box className={c`
+  background-color: red;
+`}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({
+  bg:"red",
+  color:"blue"
+})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css as c } from "@devup-ui/core";
+<Box className={c({
+  bg:"red"
+})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({
+  _hover: {
+    bg:"red",
+    color:"blue"
+  }
+})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+        <div className={css(a?{bg:"red"}:{bg:"blue"})}/>;
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css()}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({
+  _hover:`
+  background-color: red;
+  color: blue;
+`
+})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css({
+  _hover:[`
+  background-color: red;
+  color: blue;
+`,{
+  backgroundColor: "green",
+  color: "yellow"
+}, `
+  background-color: red;
+  color: blue;
+`]
+})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css``}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`   `}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`  
+ `}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css(...{bg: "red"})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css(...{})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css(...{...{bg: "red"}})}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_static_css_with_media_query() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`
+  @media (min-width: 768px) {
+    & {
+      background-color: red;
+    }
+  }
+`}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`
+  @media (min-width: 768px) {
+    &:hover {
+      background-color: red;
+    }
+    &:active {
+      background-color: blue;
+    }
+  }
+`}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<Box className={css`
+  @media (min-width: 768px) {
+    background-color: red;
+  }
+`}/>;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_static_css_with_theme() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box color="$nice" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box color={`$nice`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box color={("$nice")} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn apply_typography() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography="bold" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography={`bold`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography={a ? "bold" : "bold2"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn apply_var_typography() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography={variable} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography={bo ? a : b} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+        <Text typography={`${bo ? a : b}`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as DevupButton} from '@devup-ui/core'
+        <DevupButton
+      boxSizing="border-box"
+      className={className}
+      typography={typography}
+    >
+    </DevupButton>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn raise_error() {
+    reset_class_map();
+    reset_file_map();
+    assert!(
+        extract(
+            "test.wrong",
+            "@devup-ui/core;const a = 1;",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            },
+        )
+        .unwrap_err()
+        .to_string()
+        .starts_with("Unknown file extension")
+    );
+
+    reset_class_map();
+    reset_file_map();
+    assert_eq!(
+        extract(
+            "test.tsx",
+            "import {} '@devup-ui/core';\na a = 1;",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            },
+        )
+        .unwrap_err()
+        .to_string(),
+        "Parser panicked"
+    );
+}
+
+#[test]
+#[serial]
+fn import_wrong_component() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {W} from '@devup-ui/core'
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {W, useTheme} from '@devup-ui/core';
+useTheme();
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn support_transpile_mjs() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.mjs",
+            r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
+function c() {
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e(
+      o,
+      {
+        _hover: {
+          bg: "blue"
+        },
+        bg: "$text",
+        color: "red",
+        children: "hello"
+      }
+    ),
+    /* @__PURE__ */ e(t, { typography: "header", children: "typo" }),
+    /* @__PURE__ */ e(i, { as: "section", mt: 2, children: "section" })
+  ] });
+}
+export {
+  c as Lib
+};"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.js",
+            r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
+function c() {
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e(
+      o,
+      {
+        _hover: {
+          bg: "blue"
+        },
+        bg: "$text",
+        color: "red",
+        children: "hello"
+      }
+    ),
+    /* @__PURE__ */ e(t, { typography: "header", children: "typo" }),
+    /* @__PURE__ */ e(i, { as: "section", mt: 2, children: "section" })
+  ] });
+}
+export {
+  c as Lib
+};"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.js",
+            r#"import { jsx as e } from "react/jsx-runtime";
+import { Box as o } from "@devup-ui/core";
+e(o, { className: "a", bg: "red" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.js",
+            r#"import { jsx as e } from "react/jsx-runtime";
+import { Box as o } from "@devup-ui/core";
+e(o, { className: "a", bg: variable, style: { color: "blue" } })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.js",
+            r#"import { jsx as e } from "react/jsx-runtime";
+import { Box as o } from "@devup-ui/core";
+e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // conditional as
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.js",
+                r#"import { jsx as e } from "react/jsx-runtime";
+        import { Box as o } from "@devup-ui/core";
+        e(o, { as: b ? "div" : "section", className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.js",
+                r#"import { jsx as e } from "react/jsx-runtime";
+        import { Box as o } from "@devup-ui/core";
+        e(o, { as: Variable, className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.js",
+                r#"import { jsx as e } from "react/jsx-runtime";
+        import { Box as o } from "@devup-ui/core";
+        e(o, { as: b ? null : undefined, className: "a", bg: variable, style: { color: "blue" }, props: { animate: { duration: 1 } } })
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn support_transpile_cjs() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.cjs", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:"header",children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.cjs", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const {jsx:e1, jsxs:e2}=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e2("div",{children:[e1(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e1(r.Text,{typography:"header",children:"typo"}),e1(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:"header",children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(r.Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(r.Text,{typography:`header`,children:"typo"}),e.jsx(r.Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{_hover:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{["_hover"]:{bg:"blue"},bg:"$text",color:"red",children:"hello"}),e.jsx(Text,{typography:`header`,children:"typo"}),e.jsx(Flex,{as:"section",mt:2,children:"section"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(extract("test.js", r#""use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),{Box,Text,Flex}=require("@devup-ui/react");function t(){return e.jsxs("div",{children:[e.jsx(Box,{["_hover"]:{bg:"blue"},bg:"$text",[variable]:"red",children:"hello"})]})}exports.Lib=t;"#, ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }).unwrap()));
+}
+
+#[test]
+#[serial]
+fn maintain_value() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.jsx",
+                r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} WebkitLineClamp={4} />
+        "#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn with_prefix() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex MozTabSize={4} WebkitLineClamp={4} msBorderRadius={4} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn optimize_aspect_ratio() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex aspectRatio={"200/400"} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex aspectRatio={"   200  /  400  "} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex aspectRatio={"   200.2  /  400.2  "} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn ternary_operator_in_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex _hover={a ? { bg: "red" } : undefined} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex _hover={a ? { bg: "red" } : {}} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex _hover={a ? { bg: "red",color:"blue" } : { fontWeight:"bold", color:"red" }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_rest_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={0.5} {...props} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import { VStack } from '@devup-ui/core'
+
+export default function Card({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <VStack
+      _active={{
+        boxShadow: 'none',
+        transform: 'scale(0.95)',
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </VStack>
+  )
+}
+
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_wrong_direct_array_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[][0]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][-10]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][+10]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][100]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box padding={[1,,null][1]} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn negative_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={-1} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={-a} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={-(1+a)} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={-1*a} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={-(1)} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={(-1)} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box zIndex={[(-1),-2, -(3)]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_wrong_direct_object_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box opacity={{}[1]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5}["wrong"]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5}[`wrong`]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5}[1]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_conditional_style_props_with_class_name() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box as DevupButton} from '@devup-ui/core'
+        <DevupButton
+      className={className}
+      typography={typography}
+    >
+    </DevupButton>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][a]} className="ab" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_array_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][0]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5][a]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex bg={["$red", "$blue"][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex bg={[`$red`, `${variable}`][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Center} from '@devup-ui/core'
+<Center
+            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}
+          >
+          </Center>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5, ...some][100]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={[1, 0.5, ...some][a]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_multi_expression() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {
+  Box,
+  Button as DevupButton,
+  Center,
+  css,
+} from '@devup-ui/core'
+
+<DevupButton
+    border={
+    {
+        primary: 'none',
+        default: '1px solid var(--border, #E4E4E4)',
+    }[variant]
+    }
+    className={className}
+    px={
+    {
+        false: { sm: '12px', md: '16px', lg: '20px' }[size],
+        true: { sm: '24px', md: '28px', lg: '32px' }[size],
+    }[(!!icon).toString()]
+    }
+/>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_object_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5}["a"]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5, ...any}["b"]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5, ...any}["some"]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex bg={{a:"$red", b:"$blue"}[idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_variable_object_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+        <Flex opacity={{a:1, b:0.5}[a]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box bg={SOME_VAR[idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_object_responsive_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={{ 0: [1, 2, 3], 1: [4, 5, 6] }[idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={{ "a": [1, 2, 3], "b": [4, 5, 6] }[idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn props_direct_variable_object_responsive_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={{ 0: [a, b, c], "1": [d, e, f] }[idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_array_responsive_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={[[1, 2, 3], [4, 5, 6]][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={[[1, 2, 3],[4, 5, 6]][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn props_direct_variable_array_responsive_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={[[a, b, c], [d, e, f]][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={[, [d, e, f]][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_hybrid_responsive_select() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={[[a, 1, c], [d, e, 2]][idx]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn props_direct_wrong() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+;<Flex gap={true[1]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn test_component_in_func() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Flex} from '@devup-ui/core'
+PROCESS_DATA.map(({ id, title, content }, idx) => (
+          <MotionDiv key={idx}>
+            <Flex alignItems="center" gap={[3, null, 5, null, 10]}>
+            </Flex>
+          </MotionDiv>
+        ))
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn backtick_prop() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg={`black`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg={`${variable}`} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn group_selector_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+            <Box _groupHover={{ bg: "red" }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_duplicate_style_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg="red" background="red" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn avoid_same_name_component() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+import {Button} from '@devup/ui'
+            ;<Box bg="red" background="red" />
+            ;<Button bg="red" background="red" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn css_props_destructuring_assignment() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {css} from '@devup-ui/core'
+    <div className={css({
+       ...(a ? { bg: 'red' } : { bg: 'blue' }),
+       ...({ p: 1 }),
+     })} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {css} from '@devup-ui/core'
+    <div className={css({
+       ...(a ? { bg: 'red', border: "solid 1px red" } : { bg: 'blue' }),
+       ...({ p: 1,m: 1 }),
+     })} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn theme_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _themeDark={{ display:"none" }} _themeLight={{ display: "flex" }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn nested_theme_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _themeDark={{
+      selectors: {
+        "&:hover": {
+          color: "red",
+        }
+      },
+      _active: {
+        color: "blue",
+        _placeholder: {
+          color: "green",
+        },
+      },
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn template_literal_props() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box bg={`${"red"}`} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box m={`${1}`} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box m={`${-1}`} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box m={`${1} ${2}`} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box className={`  ${1} ${2}  `} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box className={`  ${1} ${2}  `}
+    _hover={{bg:"red"}}
+    _themeDark={{ _hover:{bg:"black"} }}
+    
+     />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn theme_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _themeDark={{ _hover:{bg:"black"} }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _hover={{bg:"white"}} _themeDark={{ _hover:{bg:"black"} }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box _hover={{bg:"white"}} _themeDark={{
+        selectors: {
+          '& :is(svg,img)': {
+            boxSize: '100%',
+            filter: 'brightness(0) invert(1)',
+          },
+        },
+      }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn custom_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box selectors={{
+    "&[aria-diabled='true']": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box selectors={{
+    "*[aria-diabled='true'] &:hover": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn style_order() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box styleOrder={20} p="4" _hover={{ bg: ["red", "blue"]}} selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.mjs",
+            r#"import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Box as o, Text as t, Flex as i } from "@devup-ui/react";
+function c() {
+  return  r("div", { children: [
+     e(
+      o,
+      {
+        _hover: {
+          bg: "blue"
+        },
+        bg: "$text",
+        color: "red",
+        children: "hello",
+        styleOrder: 10
+      }
+    ),
+     e(t, { typography: "header", children: "typo", styleOrder:20 }),
+     e(i, { as: "section", mt: 2, children: "section",styleOrder:30 })
+  ] });
+}
+export {
+  c as Lib
+};"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box className={css({color:"white", styleOrder:100})} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box className={css({color:"white"})} styleOrder={20} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box className={css({color:"white",styleOrder:30})} styleOrder={20} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box styleOrder={20} p="4" _hover={{ bg: ["red", "blue"]}}
+    className={css({color:"white", styleOrder:100})}
+
+     selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+<Box
+        aria-disabled={false}
+        bg="red"
+        className={css({
+          bg: 'blue',
+          styleOrder: 17,
+        })}
+        styleOrder={3}
+      />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box className={css({color:"white"})} styleOrder={} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn style_order2() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box styleOrder="20" p="4" _hover={{ bg: ["red", "blue"]}}
+    className={css({color:"white", styleOrder:"100"})}
+
+     selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box styleOrder={"20"} p="4" _hover={{ bg: ["red", "blue"]}}
+    className={css({color:"white", styleOrder:("100")})}
+
+     selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box, css} from '@devup-ui/core'
+    <Box styleOrder={`20`} p="4" _hover={{ bg: ["red", "blue"]}}
+    className={css({color:"white", styleOrder:`100`})}
+
+     selectors={{
+    "*[aria-diabled='true'] &": {
+      opacity: 0.5
+      }
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn style_variables() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box styleVars={{
+        c: "red"
+    }} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            "--d": "red"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            "--d": "red",
+            "e": "blue"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            variable
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            variable: true ? "red" : "blue"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box style={{ "--d": "red" }} styleVars={{
+            variable: true ? "red" : "blue"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box bg={color} style={{ "--d": "red" }} styleVars={{
+            variable: true ? "red" : "blue"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            ["hello"]: "red"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{
+            [true]: "red",
+            [1]: "blue",
+            [variable]: "green",
+            [2+2]: "yellow"
+        }} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={styleVars} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box styleVars={{...styleVars}} />
+                "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn wrong_style_variables() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.jsx",
+            r#"import {Box} from '@devup-ui/core'
+    <Box styleVars={} />
+            "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn style_variables_mjs() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.js",
+            r#"import { jsx as e } from "react/jsx-runtime";
+import { Box as o } from "@devup-ui/core";
+e(o, { styleVars: { c: "yellow" } })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  "div": {
+    bg: "red"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  div: {
+    bg: "blue"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  ["div"]: {
+    bg: "yellow"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  [`div`]: {
+    bg: "green"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  _hover: {
+    bg: "red"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  _placeholder: {
+    bg: "red"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  _nthLastChild: {
+    bg: "red"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss(...{})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss(...{div: {bg: "red"}})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // recursive spread
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss(...{div: {bg: "red"}, ...{span: {bg: "blue"}}})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_wrong_global_css() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+    [1]: {
+        bg: "red"
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss()
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss(1)
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  "div": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  "div": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  },
+  "span": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  "div": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  },
+  "span": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  ["div"]: {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  },
+  ["span"]: {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  },
+  "body[data-theme='dark']": {
+    bg: "red",
+    color: "blue",
+    _hover: {
+      bg: "blue",
+      color: "red"
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_template_literal() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss({
+      "div": `
+        background-color: red
+      `
+    })
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss({
+      "div": ``
+    })
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss({
+      "div": `     `
+    })
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss({
+      "div": `  
+         `
+    })
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss`
+    div {
+      background-color: red;
+      color: blue;
+    }
+    `
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss``
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss`           `
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss`         
+      `
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+    globalCss`:root {color-scheme: light dark}`
+    "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_imports() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: ["@devup-ui/core/css/global.css"]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: ["@devup-ui/core/css/global.css", "@devup-ui/core/css/global2.css"]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: [`@devup-ui/core/css/global3.css`, `@devup-ui/core/css/global4.css`]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_font_faces() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: "Roboto",
+      src: "url('/fonts/Roboto-Regular.ttf')",
+      fontWeight: 400,
+    },
+    {
+      fontFamily: "Roboto2",
+      src: "url('/fonts/Roboto-Regular.ttf')",
+      fontWeight: 400,
+    }
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: "Roboto",
+      src: `url('/fonts/Roboto-Regular.ttf')`,
+      fontWeight: `400`,
+    }
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: "Roboto",
+      src: "url('/fonts/Roboto-Regular.ttf')",
+    }
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [`
+  font-family: "Roboto";
+  src: "url('/fonts/Roboto-Regular.ttf')";
+  font-weight: 400;
+  `]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: "Roboto Hello",
+      src: "url('/fonts/Roboto-Regular.ttf')",
+      fontWeight: 400,
+    }
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: undefined,
+      src: "url('/fonts/Roboto-Regular.ttf')",
+      fontWeight: 400,
+    }
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  fontFaces: [
+    {
+      fontFamily: "Roboto Regular2",
+      src: "//fonts/Roboto-Regular.ttf",
+      fontWeight: 400,
+    },
+    {
+      fontFamily: "Roboto Regular",
+      src: "//fonts/Roboto Regular.ttf",
+      fontWeight: 400,
+    },
+    {
+      fontFamily: "Roboto Regular3",
+      src: "fonts/Roboto Regular.ttf",
+      fontWeight: 400,
+    },
+    {
+      fontFamily: "Roboto Regular4",
+      src: "local('fonts/Roboto Regular.ttf')",
+      fontWeight: 400,
+    },
+  ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: [{"url": "@devup-ui/core/css/global.css"}]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: [{"url": "@devup-ui/core/css/global.css", "query": "layer"}]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: [{"query": "layer"}]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_wrong_imports() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: [1, 2, "./test.css"]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  imports: {}
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_global_css_with_empty() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  "div": {}
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  div: {},
+  span: {}
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  div: ``
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({
+  div: ``,
+  span: ``
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss({})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from "@devup-ui/core";
+globalCss()
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_keyframs() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  "0%": { opacity: 0 },
+  "50%": { opacity: 0.5 },
+  "100%": { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  "0": { opacity: 0 },
+  "50": { opacity: 0.5 },
+  "100": { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  ["0"]: { opacity: 0 },
+  ["50"]: { opacity: 0.5 },
+  ["100"]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  [0]: { opacity: 0 },
+  [50]: { opacity: 0.5 },
+  [100]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  0: { opacity: 0 },
+  50: { opacity: 0.5 },
+  100: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  [`0`]: { opacity: 0 },
+  [`50`]: { opacity: 0.5 },
+  [`100`]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  [`0%`]: { opacity: 0 },
+  [`50%`]: { opacity: 0.5 },
+  [`100%`]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+
+keyframes({
+  [`0`]: { opacity: 0 },
+  [`50`]: { opacity: 0.5 },
+  [`100`]: { opacity: 1 }
+});
+keyframes({
+  [`0%`]: { opacity: 0 },
+  [`50%`]: { opacity: 0.5 },
+  [`100%`]: { opacity: 1 }
+});
+keyframes({
+  [`1%`]: { opacity: 0 },
+  [`50%`]: { opacity: 0.5 },
+  [`100%`]: { opacity: 1 }
+});
+keyframes({
+  [`0%`]: { opacity: 1 },
+  [`50%`]: { opacity: 0.5 },
+  [`100%`]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes(...{
+  [`0%`]: { opacity: 0, ...{color: "red"} },
+  [`50%`]: { opacity: 0.5 },
+  [`100%`]: { opacity: 1 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+#[test]
+#[serial]
+fn extract_wrong_keyframs() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  from: { opacity: 0 },
+  [true]: { opacity: 0.5 },
+  to: { opacity: 1, color: dy }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_keyframs_literal() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  from: `
+  background-color: red;
+  `,
+  to: `
+  background-color: blue;
+  `
+})
+
+keyframes`
+  from {
+    background-color: red;
+  }
+  to {
+    background-color: blue;
+  }
+`
+keyframes({
+  from: {
+    backgroundColor: "red"
+  },
+  to: {
+    backgroundColor: "blue"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { keyframes } from "@devup-ui/core";
+keyframes({
+  "0%": `
+  background-color: red;
+  color: blue;
+  `,
+  "100%": `
+  background-color: blue;
+  color: red;
+  `
+})
+
+keyframes`
+  0% {
+    background-color: red;
+    color: blue;
+  }
+  100% {
+    background-color: blue;
+    color: red;
+  }
+`
+keyframes({
+  "0%": {
+    backgroundColor: "red",
+    color: "blue"
+  },
+  "100%": {
+    backgroundColor: "blue",
+    color: "red"
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_just_tsx_in_multiple_files() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box padding={1} margin={2} wrong={} wrong2=<></> />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r"import {Box as C} from '@devup-ui/core'
+                <C padding={2} margin={3} />
+                ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test1.tsx",
+            r"import {Box} from '@devup-ui/core'
+        <Box padding={1} margin={2} wrong={} wrong2=<></> />
+        ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test1.tsx",
+            r"import {Box as C} from '@devup-ui/core'
+                <C padding={2} margin={3} />
+                ",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn import_main_css() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box padding={1} margin={2} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: true,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn optimize_multi_css_value() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box fontFamily="Roboto, Arial, sans-serif" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_enum_style_property() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning="top-left" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // wrong case
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning="wrong" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning={a} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning={a} w="100%" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning={a} top="0px" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box positioning={[a, b, "top", "left", "wrong"]} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn extract_advenced_selector() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: ["test"],
+          bg: "red",
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: ["test", "test2"],
+          bg: "red",
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // empty
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: [],
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: [""],
+          _hover: {
+            bg: "blue"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: ["", ""],
+          _hover: {
+            bg: "blue"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box _is={{
+          params: ["test", variable],
+          _hover: {
+            bg: "blue"
+          }
+        }} />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+        globalCss({
+          "_is": {
+            params: ["test", variable],
+            _hover: {
+              bg: "blue"
+            },
+            bg: "red"
+          }
+        })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {css} from '@devup-ui/core'
+        css({
+          "_is": {
+            params: ["test"],
+            bg: "red"
+          }
+        })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_styled() {
+    // Test 1: styled.div`css`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.section`
+          background: red;
+          color: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 2: styled("div")`css`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("article")`
+          background: red;
+          color: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 3: styled("div")({ bg: "red" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("footer")({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 4: styled.div({ bg: "red" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.aside({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 5: styled(Component)({ bg: "red" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, Text} from '@devup-ui/core'
+        const StyledComponent = styled(Text)({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, Text} from '@devup-ui/core'
+        const StyledComponent = styled(Text)`
+          background: red;
+          color: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, VStack} from '@devup-ui/core'
+        const StyledComponent = styled(VStack)({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, VStack} from '@devup-ui/core'
+        const StyledComponent = styled(VStack)`
+          background: red;
+          color: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledComponent = styled(CustomComponent)({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledComponent = styled(CustomComponent)`
+          background: red;
+          color: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.aside<{ test: string }>({ bg: "red" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_styled_with_variable() {
+    // Test 1: styled.div({ bg: "$text" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.div({ bg: "$text", color: "$primary" })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 2: styled("div")({ color: "$primary" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")({ bg: "$text", fontSize: 16 })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 3: styled.div`css`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.div`
+          background: var(--text);
+          color: var(--primary);
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 4: styled(Component)({ bg: "$text" })
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, Box} from '@devup-ui/core'
+        const StyledComponent = styled(Box)({ bg: "$text", _hover: { bg: "$primary" } })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 5: styled("div")`css`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")`
+          background-color: var(--text);
+          padding: 16px;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_styled_with_variable_like_emotion() {
+    // Test 1: styled.div`css with ${variable}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const color = 'red';
+        const StyledDiv = styled.div`
+          color: ${color};
+          background: blue;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 2: styled("div")`css with ${variable}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const primaryColor = 'blue';
+        const padding = '16px';
+        const StyledDiv = styled("div")`
+          color: ${primaryColor};
+          padding: ${padding};
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const primaryColor = 'blue';
+        const padding = '16px';
+        const StyledDiv = styled("div")({ bg: primaryColor, padding })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const primaryColor = 'blue';
+        const padding = '16px';
+        const StyledDiv = styled.div({ bg: primaryColor, padding })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")`
+          color: ${obj.color};
+          padding: ${func()};
+          background: ${obj.func()};
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")({ bg: obj.bg, padding: func(), color: obj.color() })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.div({ bg: obj.bg, padding: func(), color: obj.color() })
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_styled_with_variable_like_emotion_props() {
+    // Test 3: styled.div`css with ${props => props.bg}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.div`
+          background: ${props => props.bg};
+          color: red;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 4: styled(Component)`css with ${variable}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled, Box} from '@devup-ui/core'
+        const fontSize = '18px';
+        const StyledComponent = styled(Box)`
+          font-size: ${fontSize};
+          color: ${props => props.color || 'black'};
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 5: styled.div`css with multiple ${variables}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const margin = '10px';
+        const padding = '20px';
+        const StyledDiv = styled.div`
+          margin: ${margin};
+          padding: ${padding};
+          background: ${props => props.bg || 'white'};
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test 6: styled.div`css with ${expression}`
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const isActive = true;
+        const StyledDiv = styled.div`
+          color: ${isActive ? 'red' : 'blue'};
+          opacity: ${isActive ? 1 : 0.5};
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_wrong_styled_with_variable_like_emotion_props() {
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled(null)`
+          background: ${props => props.bg};
+          color: red;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div", "span")`
+          background: ${props => props.bg};
+          color: red;
+        `
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div", "span").filter(Boolean)
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")({ bg: "red" }, {})
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled("div")({ bg: "red" }, {})``
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_mask_properties_with_korean() {
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r###"import {Box} from '@devup-ui/core'
+        <Box
+          aspectRatio="5.49"
+          bg="#752E2E"
+          h="22px"
+          maskImage="url('/icons/BI-타이틀.svg')"
+          maskRepeat="no-repeat"
+          maskSize="contain"
+          w="121px"
+        />
+        "###,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_dot_notation_theme_variables() {
+    // Test that dot notation theme variables (e.g., $primary.100) are correctly extracted
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box bg="$primary.100" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test multiple dot notation variables
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box bg="$gray.200" color="$blue.500" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test deep nested dot notation
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box bg="$color.brand.primary.100" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test dot notation in border shorthand
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box border="1px solid $border.primary" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_styled_with_spread() {
+    reset_class_map();
+    reset_file_map();
+    // Test styled with spread element
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {styled} from '@devup-ui/core'
+const baseStyles = { bg: "red" };
+const StyledDiv = styled.div({ ...baseStyles })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_css_function_no_args() {
+    reset_class_map();
+    reset_file_map();
+    // Test css() with no arguments
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {css} from '@devup-ui/core'
+const className = css()
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_css_function_empty_object() {
+    reset_class_map();
+    reset_file_map();
+    // Test css() with empty object
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {css} from '@devup-ui/core'
+const className = css({})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_keyframes_function() {
+    reset_class_map();
+    reset_file_map();
+    // Test keyframes() function
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {keyframes} from '@devup-ui/core'
+const spin = keyframes({
+    from: { transform: "rotate(0deg)" },
+    to: { transform: "rotate(360deg)" }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_function() {
+    reset_class_map();
+    reset_file_map();
+    // Test globalCss() function
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    body: { margin: 0, padding: 0 }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_conditional_styles() {
+    reset_class_map();
+    reset_file_map();
+    // Test conditional styles with both branches having different properties
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const Component = () => {
+    const isActive = true;
+    return <Box bg={isActive ? "red" : undefined} color={isActive ? undefined : "blue"} />;
+}
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_css_variable_reassignment() {
+    reset_class_map();
+    reset_file_map();
+    // Test css import reassignment
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {css as cssFunction} from '@devup-ui/core'
+const myCss = cssFunction;
+const className = myCss({ bg: "red" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_with_imports() {
+    reset_class_map();
+    reset_file_map();
+    // Test globalCss with @import
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    imports: ["https://fonts.googleapis.com/css?family=Roboto"]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_with_font_faces() {
+    reset_class_map();
+    reset_file_map();
+    // Test globalCss with fontFaces
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    fontFaces: [
+        {
+            fontFamily: "CustomFont",
+            src: "url('/fonts/custom.woff2')",
+            fontWeight: "400"
+        }
+    ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_with_pseudo_selector() {
+    reset_class_map();
+    reset_file_map();
+    // Test globalCss with pseudo selector (prefixed with _)
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    _hover: { bg: "red" }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_responsive_array_styles() {
+    reset_class_map();
+    reset_file_map();
+    // Test responsive array with multiple breakpoints
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box p={[1, 2, 3, 4]} m={[0, 1]} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_member_expression_style() {
+    reset_class_map();
+    reset_file_map();
+    // Test dynamic member expression for styles (obj[key])
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const colors = { primary: "blue", secondary: "red" };
+const key = "primary";
+<Box bg={colors[key]} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_dynamic_class_name_merge() {
+    reset_class_map();
+    reset_file_map();
+    // Test dynamic className merging with existing className
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const Component = ({ className }) => {
+    return <Box className={className} bg="red" />;
+}
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_typography_style() {
+    reset_class_map();
+    reset_file_map();
+    // Test typography prop
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Text} from '@devup-ui/core'
+<Text typography="$heading" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_css_with_template_literal() {
+    reset_class_map();
+    reset_file_map();
+    // Test css function with template literal containing expressions
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {css} from '@devup-ui/core'
+const size = 16;
+const className = css({ fontSize: `${size}px` })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_conditional_with_both_branches() {
+    reset_class_map();
+    reset_file_map();
+    // Test conditional where both branches have styles
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const isActive = true;
+<Box bg={isActive ? "red" : "blue"} p={isActive ? 4 : 2} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_spread_props() {
+    reset_class_map();
+    reset_file_map();
+    // Test spread props on component
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const Component = (props) => {
+    return <Box {...props} bg="red" />;
+}
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_nested_conditional() {
+    reset_class_map();
+    reset_file_map();
+    // Test nested conditional expressions
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const a = true;
+const b = false;
+<Box bg={a ? (b ? "red" : "blue") : "green"} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_style_prop_merge() {
+    reset_class_map();
+    reset_file_map();
+    // Test style prop merging with dynamic styles
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const color = "red";
+<Box style={{ padding: 10 }} bg={color} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_keyframes_no_args() {
+    reset_class_map();
+    reset_file_map();
+    // Test keyframes with no arguments
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {keyframes} from '@devup-ui/core'
+const spin = keyframes()
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_no_args() {
+    reset_class_map();
+    reset_file_map();
+    // Test globalCss with no arguments
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss()
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_default_import_usage() {
+    reset_class_map();
+    reset_file_map();
+    // Test using default import
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import DevUI from '@devup-ui/core'
+<DevUI.Box bg="red" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_namespace_import_usage() {
+    reset_class_map();
+    reset_file_map();
+    // Test using namespace import
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import * as DevUI from '@devup-ui/core'
+<DevUI.Box bg="red" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_namespace_import_css() {
+    reset_class_map();
+    reset_file_map();
+    // Test using namespace import with css function
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import * as DevUI from '@devup-ui/core'
+const className = DevUI.css({ bg: "red" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_enum_style_prop() {
+    reset_class_map();
+    reset_file_map();
+    // Test enum-like style mapping
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const variant = "primary";
+const colors = { primary: "blue", secondary: "red" };
+<Box bg={colors[variant]} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_style_vars_prop() {
+    reset_class_map();
+    reset_file_map();
+    // Test styleVars prop
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const dynamicColor = "blue";
+<Box styleVars={{ color: dynamicColor }} bg="var(--color)" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_props_prop() {
+    reset_class_map();
+    reset_file_map();
+    // Test props prop forwarding
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const extraProps = { onClick: () => {} };
+<Box props={extraProps} bg="red" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_style_order_prop() {
+    reset_class_map();
+    reset_file_map();
+    // Test styleOrder prop
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box styleOrder={1} bg="red" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_multiple_dynamic_values() {
+    reset_class_map();
+    reset_file_map();
+    // Test multiple dynamic values
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+const color = "red";
+const padding = 10;
+const margin = 5;
+<Box bg={color} p={padding} m={margin} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_media_query_selectors() {
+    // Test _print media query selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _print={{ bg: "white", color: "black" }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _screen media query selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _screen={{ bg: "blue" }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _speech media query selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _speech={{ display: "none" }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _all media query selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _all={{ fontFamily: "sans-serif" }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test multiple media query selectors combined
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box 
+    bg="red"
+    _print={{ bg: "white" }}
+    _screen={{ bg: "blue" }}
+/>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_at_rules_underscore_prefix() {
+    // Test _container at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _container={{ "(min-width: 400px)": { bg: "red" } }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _media at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _media={{ "(min-width: 768px)": { bg: "blue" } }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _supports at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _supports={{ "(display: grid)": { display: "grid" } }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test _container with named container
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box _container={{ "sidebar (min-width: 400px)": { p: 4 } }} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_at_rules_at_prefix() {
+    // Test @container at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box {...{"@container": { "(min-width: 400px)": { bg: "red" } }}} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test @media at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box {...{"@media": { "(min-width: 768px)": { bg: "blue" } }}} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test @supports at-rule
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box {...{"@supports": { "(display: flex)": { display: "flex" } }}} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_at_rules() {
+    // Test globalCss with @media nested inside selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    body: {
+        "@media": {
+            "(min-width: 768px)": { bg: "white" }
+        }
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test globalCss with @supports nested inside selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    ".grid-container": {
+        "@supports": {
+            "(display: grid)": { display: "grid" }
+        }
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test globalCss with @container nested inside selector
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    ".card": {
+        "@container": {
+            "(min-width: 400px)": { p: 4 }
+        }
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test globalCss with multiple at-rules nested inside selectors
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    body: {
+        bg: "gray",
+        "@media": {
+            "(min-width: 768px)": { bg: "white" },
+            "(prefers-color-scheme: dark)": { bg: "black" }
+        }
+    },
+    ".container": {
+        "@supports": {
+            "(display: grid)": { display: "grid" }
+        }
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_with_layer() {
+    // Test globalCss with @layer property
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    "*": {
+        "@layer": "reset",
+        margin: 0,
+        padding: 0
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test globalCss with @layer for multiple selectors
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {globalCss} from '@devup-ui/core'
+globalCss({
+    "*": {
+        "@layer": "reset",
+        boxSizing: "border-box"
+    },
+    body: {
+        "@layer": "base",
+        fontFamily: "sans-serif"
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: false,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+// ============================================================================
+// VANILLA-EXTRACT API TESTS
+// ============================================================================
+
+/// Test vanilla-extract style files (.css.ts, .css.js)
+/// Using vanilla-extract API (style, globalStyle, keyframes) from @devup-ui/react package
+#[test]
+#[serial]
+fn test_vanilla_extract_style_css_ts() {
+    reset_class_map();
+    reset_file_map();
+    // .css.ts file with style function (vanilla-extract API)
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "styles.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const container: string = style({ background: "red", padding: 16 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_css_js() {
+    reset_class_map();
+    reset_file_map();
+    // .css.js file with style function
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "styles.css.js",
+            r#"import { style } from '@devup-ui/react'
+export const wrapper = style({ backgroundColor: "white", margin: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // .css.js file with style function for link
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "components.css.js",
+            r#"import { style } from '@devup-ui/react'
+export const link = style({ color: "blue", textDecoration: "underline" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+/// Test .css.ts files with @vanilla-extract/css import (compatibility mode)
+#[test]
+#[serial]
+fn test_vanilla_extract_css_ts_with_vanilla_extract_import() {
+    reset_class_map();
+    reset_file_map();
+    // .css.ts file with import from @vanilla-extract/css (not @devup-ui/react)
+    // This should work the same as importing from @devup-ui/react
+    let mut import_aliases = HashMap::new();
+    import_aliases.insert(
+        "@vanilla-extract/css".to_string(),
+        ImportAlias::NamedToNamed,
+    );
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "styles.css.ts",
+            r#"import { style } from '@vanilla-extract/css'
+export const hello = style({
+  cursor: 'pointer',
+  fontSize: 32,
+  paddingTop: '28px',
+  paddingBottom: '28px',
+})
+export const text = style({
+  color: 'var(--text)',
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_variable() {
+    reset_class_map();
+    reset_file_map();
+    // Variables should be evaluated at execution time
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "vars.css.ts",
+            r#"import { style } from '@devup-ui/react'
+const primaryColor = "blue";
+const spacing = 16;
+export const button = style({ background: primaryColor, padding: spacing })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_computed() {
+    reset_class_map();
+    reset_file_map();
+    // Computed values should be evaluated
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "computed.css.ts",
+            r#"import { style } from '@devup-ui/react'
+const base = 8;
+export const box = style({ padding: base * 2, margin: base / 2 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_spread() {
+    reset_class_map();
+    reset_file_map();
+    // Spread operator should work
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "spread.css.ts",
+            r#"import { style } from '@devup-ui/react'
+const baseStyle = { padding: 8, margin: 4 };
+export const extended = style({ ...baseStyle, background: "red" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_pseudo_selector() {
+    reset_class_map();
+    reset_file_map();
+    // devup-ui extension: _hover pseudo selector
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "hover.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const hoverButton = style({ background: "gray", _hover: { background: "blue" } })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_responsive_array() {
+    reset_class_map();
+    reset_file_map();
+    // devup-ui extension: responsive arrays
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "responsive.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const responsiveBox = style({ padding: [8, 16, 32] })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_keyframes_and_global() {
+    reset_class_map();
+    reset_file_map();
+    // .css.ts file with keyframes (vanilla-extract API)
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "animations.css.ts",
+            r#"import { keyframes, style } from '@devup-ui/react'
+export const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+export const animated = style({ animation: "fadeIn 1s ease-in" })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // .css.ts file with globalStyle (vanilla-extract API)
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "global.css.ts",
+            r#"import { globalStyle } from '@devup-ui/react'
+globalStyle("body", { margin: 0, padding: 0 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_create_var() {
+    reset_class_map();
+    reset_file_map();
+    // createVar - CSS variable creation
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "vars.css.ts",
+            r#"import { createVar, style } from '@devup-ui/react'
+export const colorVar = createVar()
+export const box = style({
+  vars: {
+    [colorVar]: 'blue'
+  },
+  color: colorVar
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // fallbackVar - CSS variable with fallback
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "fallback.css.ts",
+            r#"import { createVar, fallbackVar, style } from '@devup-ui/react'
+export const colorVar = createVar()
+export const box = style({
+  color: fallbackVar(colorVar, 'red')
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_variants() {
+    reset_class_map();
+    reset_file_map();
+    // styleVariants - create multiple style variants
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "variants.css.ts",
+            r#"import { styleVariants } from '@devup-ui/react'
+export const background = styleVariants({
+  primary: { background: 'blue' },
+  secondary: { background: 'gray' },
+  danger: { background: 'red' }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // styleVariants with base style composition
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "variants-composed.css.ts",
+            r#"import { style, styleVariants } from '@devup-ui/react'
+const base = style({ padding: 12, borderRadius: 4 })
+export const button = styleVariants({
+  primary: [base, { background: 'blue', color: 'white' }],
+  secondary: [base, { background: 'gray', color: 'black' }]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_font_face() {
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // fontFace - define custom font
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "fonts.css.ts",
+            r#"import { fontFace, style } from '@devup-ui/react'
+const myFont = fontFace({
+  src: 'local("Comic Sans MS")'
+})
+export const text = style({
+  fontFamily: myFont
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // fontFace with multiple sources
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "fonts-multi.css.ts",
+            r#"import { fontFace, style } from '@devup-ui/react'
+const roboto = fontFace({
+  src: 'url("/fonts/Roboto.woff2") format("woff2")',
+  fontWeight: 400,
+  fontStyle: 'normal'
+})
+export const body = style({
+  fontFamily: roboto
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme() {
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // createTheme - define theme with variables
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme.css.ts",
+            r#"import { createTheme, style } from '@devup-ui/react'
+export const [themeClass, vars] = createTheme({
+  color: {
+    brand: 'blue',
+    text: 'black'
+  },
+  space: {
+    small: '4px',
+    medium: '8px',
+    large: '16px'
+  }
+})
+export const box = style({
+  color: vars.color.text,
+  padding: vars.space.medium
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // createThemeContract - type-safe theme contract
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-contract.css.ts",
+            r#"import { createThemeContract, createTheme, style } from '@devup-ui/react'
+const vars = createThemeContract({
+  color: {
+    brand: null,
+    text: null
+  }
+})
+export const lightTheme = createTheme(vars, {
+  color: {
+    brand: 'blue',
+    text: 'black'
+  }
+})
+export const darkTheme = createTheme(vars, {
+  color: {
+    brand: 'lightblue',
+    text: 'white'
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_layer() {
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // layer - CSS cascade layers
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "layers.css.ts",
+            r#"import { layer, style, globalStyle } from '@devup-ui/react'
+export const reset = layer('reset')
+export const base = layer('base')
+export const components = layer('components')
+globalStyle('*', {
+  '@layer': reset,
+  margin: 0,
+  padding: 0
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_container() {
+    reset_class_map();
+    reset_file_map();
+    // createContainer - container queries
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "container.css.ts",
+            r#"import { createContainer, style } from '@devup-ui/react'
+export const sidebar = createContainer()
+export const sidebarContainer = style({
+  containerName: sidebar,
+  containerType: 'inline-size'
+})
+export const responsive = style({
+  '@container': {
+    [`${sidebar} (min-width: 400px)`]: {
+      flexDirection: 'row'
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_global_theme() {
+    reset_class_map();
+    reset_file_map();
+    // createGlobalTheme - global theme variables on :root
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "global-theme.css.ts",
+            r#"import { createGlobalTheme } from '@devup-ui/react'
+export const vars = createGlobalTheme(':root', {
+  color: {
+    brand: 'blue',
+    text: 'black',
+    background: 'white'
+  },
+  font: {
+    body: 'system-ui, sans-serif'
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_composition() {
+    reset_class_map();
+    reset_file_map();
+    // style composition - array of styles
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "composition.css.ts",
+            r#"import { style } from '@devup-ui/react'
+const base = style({
+  padding: 12,
+  borderRadius: 4
+})
+const interactive = style({
+  cursor: 'pointer',
+  transition: 'all 0.2s'
+})
+export const button = style([base, interactive, {
+  background: 'blue',
+  color: 'white'
+}])
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_selectors() {
+    reset_class_map();
+    reset_file_map();
+    // complex selectors
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "selectors.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const button = style({
+  background: 'blue',
+  selectors: {
+    '&:hover': {
+      background: 'darkblue'
+    },
+    '&:focus': {
+      outline: '2px solid blue'
+    },
+    '&:active': {
+      transform: 'scale(0.98)'
+    },
+    '&:disabled': {
+      opacity: 0.5,
+      cursor: 'not-allowed'
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    reset_class_map();
+    reset_file_map();
+    // parent and sibling selectors
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "selectors-complex.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const parent = style({
+  background: 'white'
+})
+export const child = style({
+  selectors: {
+    [`${parent}:hover &`]: {
+      color: 'blue'
+    },
+    '& + &': {
+      marginTop: 8
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_media_queries() {
+    reset_class_map();
+    reset_file_map();
+    // @media queries
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "media.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const responsive = style({
+  display: 'block',
+  '@media': {
+    'screen and (min-width: 768px)': {
+      display: 'flex'
+    },
+    'screen and (min-width: 1024px)': {
+      display: 'grid'
+    },
+    '(prefers-color-scheme: dark)': {
+      background: 'black',
+      color: 'white'
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_supports() {
+    reset_class_map();
+    reset_file_map();
+    // @supports queries
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "supports.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const grid = style({
+  display: 'flex',
+  '@supports': {
+    '(display: grid)': {
+      display: 'grid'
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+// END VANILLA-EXTRACT API TESTS
+
+#[rstest]
+#[case("test.tsx", "const x = 1;", "@devup-ui/react", false)] // no package string
+#[case(
+    "test.invalid",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    false
+)] // invalid extension
+#[case(
+    "test.tsx",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // named import
+#[case(
+    "test.tsx",
+    "// import from @devup-ui/react\nconst x = 1;",
+    "@devup-ui/react",
+    false
+)] // in comment
+#[case(
+    "test.tsx",
+    "import { Box } from '@devup-ui/core';",
+    "@devup-ui/react",
+    false
+)] // different package
+#[case(
+    "test.tsx",
+    "import Box from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // default import
+#[case(
+    "test.tsx",
+    "import * as DevupUI from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // namespace import
+#[case(
+    "test.tsx",
+    "import React from 'react';\nimport { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // multiple imports
+#[case("test.tsx", "const pkg = '@devup-ui/react';", "@devup-ui/react", false)] // string literal
+#[case(
+    "test.js",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .js
+#[case(
+    "test.ts",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .ts
+#[case(
+    "test.jsx",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .jsx
+#[case(
+    "test.unknown",
+    "import { Box } from '@devup-ui/react';",
+    "@devup-ui/react",
+    false
+)] // unsupported file extension
+#[case(
+    "styles.css.ts",
+    "import { css } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .css.ts (devup-ui style)
+#[case(
+    "styles.css.js",
+    "import { css } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .css.js (devup-ui style)
+#[case(
+    "styles.css.ts",
+    "import { style } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .css.ts (vanilla-extract API from devup-ui)
+#[case(
+    "styles.css.js",
+    "import { style } from '@devup-ui/react';",
+    "@devup-ui/react",
+    true
+)] // .css.js (vanilla-extract API from devup-ui)
+fn test_has_devup_ui(
+    #[case] filename: &str,
+    #[case] code: &str,
+    #[case] package: &str,
+    #[case] expected: bool,
+) {
+    assert_eq!(has_devup_ui(filename, code, package), expected);
+}
+
+// ============================================================================
+// COVERAGE EDGE CASE TESTS
+// ============================================================================
+
+#[test]
+#[serial]
+fn test_container_at_rule_in_css() {
+    // Test @container at-rule (covers line 134 in extract_style_from_expression.rs)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<div className={css({
+  _container: {
+    "(min-width: 400px)": {
+      display: "flex"
+    }
+  }
+})} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test with @container prefix
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<div className={css({
+  "@container": {
+    "(min-width: 500px)": {
+      background: "blue"
+    }
+  }
+})} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_invalid_js_execution() {
+    // Test vanilla-extract file with invalid JS (covers line 107 fallback)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // This should fall back to regular extraction when JS execution fails
+    let result = extract(
+        "invalid.css.ts",
+        r#"import { style } from '@devup-ui/react'
+// Invalid JS that will cause execution to fail
+export const broken = style((() => { throw new Error("fail"); })())
+"#,
+        ExtractOption {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: true,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        },
+    );
+    // Should not panic, may return error or empty styles
+    assert!(result.is_ok() || result.is_err());
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_empty_styles() {
+    // Test vanilla-extract file that produces empty styles (covers line 116)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // File with no style() calls
+    let result = extract(
+        "empty.css.ts",
+        r#"import { style } from '@devup-ui/react'
+// No actual style calls, just comments
+const unused = 1;
+"#,
+        ExtractOption {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: true,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        },
+    );
+    assert!(result.is_ok());
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_constant_exports() {
+    // Test vanilla-extract file with constant exports (covers lines 576-577)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "constants.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const SPACING = 8;
+export const COLORS = { primary: 'blue', secondary: 'green' };
+export const box = style({ padding: SPACING })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_with_vars() {
+    // Test createTheme with array destructuring [themeClass, vars] (covers lines 406-430)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-vars.css.ts",
+            r#"import { createTheme } from '@devup-ui/react'
+export const [lightTheme, vars] = createTheme({
+  color: {
+    primary: 'blue',
+    secondary: 'green'
+  },
+  space: {
+    small: '4px',
+    medium: '8px'
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_non_exported_theme() {
+    // Test non-exported createTheme (covers theme branches without export)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "internal-theme.css.ts",
+            r#"import { createTheme, style } from '@devup-ui/react'
+const [internalTheme, themeVars] = createTheme({
+  colors: {
+    bg: 'white',
+    text: 'black'
+  }
+})
+export const themed = style({
+  background: 'red'
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_composition_empty() {
+    // Test style with empty composition array
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "empty-comp.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const empty = style([])
+export const withEmpty = style([{}])
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_variants_with_base() {
+    // Test styleVariants with base composition (covers lines 1165-1177)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "variants-base.css.ts",
+            r#"import { style, styleVariants } from '@devup-ui/react'
+const base = style({
+  padding: 8,
+  borderRadius: 4
+})
+export const sizes = styleVariants({
+  small: [base, { fontSize: 12 }],
+  medium: [base, { fontSize: 16 }],
+  large: [base, { fontSize: 20 }]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_layer_and_container() {
+    // Test layer() and createContainer() together (covers lines 1207-1216)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "layer-container.css.ts",
+            r#"import { layer, createContainer, style } from '@devup-ui/react'
+export const resetLayer = layer('reset')
+export const baseLayer = layer('base')
+export const myContainer = createContainer()
+export const containerStyle = style({
+  containerName: myContainer,
+  containerType: 'inline-size'
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_all_imports() {
+    // Test file that uses css, globalCss, and keyframes together (covers lines 1049, 1052)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "all-imports.css.ts",
+            r#"import { style, globalStyle, keyframes, createTheme } from '@devup-ui/react'
+export const [theme, vars] = createTheme({
+  color: { primary: 'blue' }
+})
+export const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 }
+})
+globalStyle('body', {
+  margin: 0
+})
+export const box = style({
+  animation: 'fadeIn 1s'
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_without_vars_name() {
+    // Test createTheme two-arg form (covers lines 1108, 1111)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-two-arg.css.ts",
+            r#"import { createThemeContract, createTheme } from '@devup-ui/react'
+const contract = createThemeContract({
+  color: {
+    brand: null,
+    text: null
+  }
+})
+export const darkTheme = createTheme(contract, {
+  color: {
+    brand: 'white',
+    text: 'lightgray'
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_font_face_with_style() {
+    // Test fontFace used in style (covers fontFace placeholder replacement)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "font-usage.css.ts",
+            r#"import { fontFace, style } from '@devup-ui/react'
+export const myFont = fontFace({
+  src: 'local("Comic Sans MS")',
+  fontWeight: 400
+})
+export const text = style({
+  fontFamily: myFont
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_vars_only() {
+    // Test createVar exports (covers lines 1191-1192)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "vars-only.css.ts",
+            r#"import { createVar, style, fallbackVar } from '@devup-ui/react'
+export const colorVar = createVar()
+export const sizeVar = createVar()
+export const box = style({
+  color: fallbackVar(colorVar, 'blue'),
+  fontSize: sizeVar
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_global_theme_empty_vars() {
+    // Test createGlobalTheme with empty vars (covers line 1142 branch)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "global-theme-empty.css.ts",
+            r#"import { createGlobalTheme, style } from '@devup-ui/react'
+export const emptyVars = createGlobalTheme(':root', {})
+export const box = style({ padding: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_non_exported_styles() {
+    // Test non-exported styles mixed with exported (covers export flag branches)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "mixed-exports.css.ts",
+            r#"import { style, keyframes, createVar, createContainer, layer } from '@devup-ui/react'
+const internalStyle = style({ padding: 4 })
+const internalKeyframe = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+const internalVar = createVar()
+const internalContainer = createContainer()
+const internalLayer = layer('internal')
+export const publicStyle = style({ margin: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_selector_references() {
+    // Test styles referencing each other in selectors (covers find_selector_references)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "selector-refs.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const parent = style({ background: 'white' })
+export const child = style({
+  selectors: {
+    [`${parent}:hover &`]: {
+      color: 'blue'
+    }
+  }
+})
+export const sibling = style({
+  selectors: {
+    [`${parent} + &`]: {
+      marginTop: 8
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_has_devup_ui_parser_panic() {
+    // Test has_devup_ui with invalid code that causes parser panic (covers line 202)
+    // Invalid syntax that will make the parser panic
+    let result = has_devup_ui(
+        "test.tsx",
+        "import {} '@devup-ui/react'; syntax error {{",
+        "@devup-ui/react",
+    );
+    assert!(!result);
+}
+
+#[test]
+#[serial]
+fn test_global_css_fontfaces_object_syntax() {
+    // Test globalCss fontFaces with object syntax (covers lines 103, 115 in extract_global_style_from_expression.rs)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    fontFaces: [
+        {
+            fontFamily: "CustomFont",
+            src: "url('/fonts/custom.woff2')",
+            fontWeight: "400",
+            fontStyle: "normal"
+        }
+    ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test with multiple font properties to exercise disassemble_property
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    fontFaces: [
+        {
+            fontFamily: "MultiFont",
+            src: "url('/fonts/multi.woff2')",
+            fontWeight: "bold",
+            fontDisplay: "swap"
+        },
+        {
+            fontFamily: "AnotherFont",
+            src: "local('Arial')"
+        }
+    ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_fontfaces_multi_value_optimization() {
+    // Test fontFaces with font-family that needs multi-value optimization (covers line 69, 73-74)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    fontFaces: [
+        {
+            fontFamily: "'Custom Font', 'Fallback Font', sans-serif",
+            src: "local('Custom Font'), url('/fonts/custom.woff2') format('woff2')",
+            fontWeight: "400 700",
+            fontStyle: "normal"
+        }
+    ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test fontFaces with content property (another multi-optimize property)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    fontFaces: [
+        {
+            fontFamily: "IconFont",
+            src: "/fonts/icons.woff2"
+        }
+    ]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_conditional_expression_with_selector() {
+    // Test ConditionalExpression when name.is_none() and selector.is_some() (covers line 134)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<div className={css({
+  _hover: condition ? { bg: "blue" } : { bg: "red" }
+})} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test nested conditional within selector
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<div className={css({
+  selectors: {
+    "&:hover": condition ? { color: "blue" } : { color: "red" }
+  }
+})} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_non_vanilla_extract_file() {
+    // Test non-.css.ts file (covers line 154 - is_vanilla_extract = false path)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    let result = extract(
+        "regular.tsx",
+        r#"import { Box } from '@devup-ui/react'
+<Box bg="red" p={4} />
+"#,
+        ExtractOption {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: true,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        },
+    );
+    assert!(result.is_ok());
+    let output = result.unwrap();
+    assert!(!output.code.is_empty());
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_execution_fallback() {
+    // Test vanilla-extract file with execution error (covers line 116 fallback)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    // Syntax error in JS execution will trigger fallback
+    let result = extract(
+        "error.css.ts",
+        r#"import { style } from '@devup-ui/react'
+const x = style({ padding: [[[}}} // invalid syntax
+"#,
+        ExtractOption {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: true,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        },
+    );
+    // Should not panic - falls back to regular processing
+    assert!(result.is_ok() || result.is_err());
+}
+
+#[test]
+#[serial]
+fn test_import_alias_vanilla_extract_named() {
+    // Test @vanilla-extract/css named exports in regular .tsx files (NOT .css.ts)
+    // Note: .css.ts files use vanilla-extract's own processing which doesn't go through import aliases
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@vanilla-extract/css".to_string(),
+        ImportAlias::NamedToNamed,
+    );
+
+    // Use regular .tsx file (not .css.ts) for import alias to work
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from '@vanilla-extract/css'
+const buttonStyle = css({ bg: 'red', p: 4 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_keyframes_export() {
+    // Test exported keyframes (covers lines 1052, 1152-1153)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "keyframes-export.css.ts",
+            r#"import { keyframes, style } from '@devup-ui/react'
+export const spin = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
+const internal = keyframes({
+  '0%': { opacity: 0 },
+  '100%': { opacity: 1 }
+})
+export const spinner = style({ animation: spin })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_vars_name_only() {
+    // Test createTheme with vars_name but no vars_object_json (covers line 1301)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-vars-name.css.ts",
+            r#"import { createTheme } from '@devup-ui/react'
+export const myTheme = createTheme({
+  color: { primary: 'blue' }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_variants_mixed() {
+    // Test styleVariants with mixed base and no-base (covers lines 1161-1184)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "variants-mixed.css.ts",
+            r#"import { style, styleVariants } from '@devup-ui/react'
+const base = style({ borderRadius: 4, padding: 8 })
+export const buttons = styleVariants({
+  primary: [base, { background: 'blue', color: 'white' }],
+  secondary: { background: 'gray', color: 'black' },
+  danger: [base, { background: 'red' }]
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_global_theme_with_vars() {
+    // Test createGlobalTheme with CSS vars (covers lines 1142-1144)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "global-theme-vars.css.ts",
+            r#"import { createGlobalTheme, style } from '@devup-ui/react'
+export const vars = createGlobalTheme(':root', {
+  color: {
+    primary: 'blue',
+    secondary: 'green'
+  },
+  space: {
+    small: '4px',
+    large: '16px'
+  }
+})
+export const box = style({ padding: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_font_face_empty_props() {
+    // Test fontFace with minimal properties (covers line 1132-1135 empty props branch)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "fontface-minimal.css.ts",
+            r#"import { fontFace, style } from '@devup-ui/react'
+export const minimalFont = fontFace({})
+export const text = style({ fontFamily: minimalFont })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_imports_combination() {
+    // Test file with multiple import types (covers lines 1049, 1052 import generation)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "imports-combo.css.ts",
+            r#"import { style, globalStyle, keyframes, fontFace } from '@devup-ui/react'
+export const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+export const myFont = fontFace({ src: 'local(Arial)' })
+globalStyle('body', { margin: 0, fontFamily: myFont })
+export const animated = style({ animation: fadeIn })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_export_variations() {
+    // Test createTheme with different export patterns (covers lines 1103-1111)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-exports.css.ts",
+            r#"import { createTheme, createThemeContract, style } from '@devup-ui/react'
+const contract = createThemeContract({
+  colors: { bg: null, text: null }
+})
+export const lightTheme = createTheme(contract, {
+  colors: { bg: 'white', text: 'black' }
+})
+const internalTheme = createTheme(contract, {
+  colors: { bg: 'gray', text: 'darkgray' }
+})
+export const box = style({ padding: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_style_composition_multiple() {
+    // Test style with multiple style objects in composition array (covers lines 728-729)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "multi-comp.css.ts",
+            r#"import { style } from '@devup-ui/react'
+const base = style({ padding: 8 })
+export const complex = style([base, { margin: 4 }, { color: 'blue' }])
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_selector_class_replacement() {
+    // Test selector references that need class name replacement (covers collected_styles_to_code_with_classes)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "selector-ref.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const parent = style({ display: 'flex' })
+export const child = style({
+  selectors: {
+    [`${parent}:hover &`]: { background: 'red' }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_all_exports_combined() {
+    // Test file with styles, keyframes, globalStyles, themes, vars, containers, layers, fontFaces combined
+    // Covers multiple import generation paths and code generation
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "all-combined.css.ts",
+                r#"import { style, globalStyle, keyframes, createVar, createContainer, layer, fontFace, createGlobalTheme, styleVariants } from '@devup-ui/react'
+export const myVar = createVar()
+export const myContainer = createContainer()
+export const myLayer = layer('components')
+export const myFont = fontFace({ src: 'local(Arial)' })
+export const vars = createGlobalTheme(':root', { color: { primary: 'blue' } })
+export const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+globalStyle('body', { margin: 0 })
+const base = style({ padding: 8 })
+export const buttons = styleVariants({
+  primary: [base, { bg: 'blue' }],
+  secondary: { bg: 'gray' }
+})
+export const box = style({ fontFamily: myFont })
+"#,
+                ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_array_destructure() {
+    // Test createTheme with array destructuring [themeClass, vars] (covers lines 384, 386-387)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-array.css.ts",
+            r#"import { createTheme, style } from '@devup-ui/react'
+export const [themeClass, themeVars] = createTheme({
+  colors: { primary: 'blue', secondary: 'green' },
+  spacing: { small: '4px', medium: '8px' }
+})
+export const themed = style({ color: themeVars.colors.primary })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_font_face_placeholder() {
+    // Test fontFace placeholder remapping (covers lines 503-505)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "fontface-remap.css.ts",
+            r#"import { fontFace, style } from '@devup-ui/react'
+export const customFont = fontFace({
+  src: 'url("/fonts/custom.woff2")',
+  fontWeight: '400',
+  fontDisplay: 'swap'
+})
+export const secondFont = fontFace({
+  src: 'local("Helvetica")'
+})
+export const text = style({ fontFamily: customFont })
+export const heading = style({ fontFamily: secondFont })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_global_theme_placeholder() {
+    // Test createGlobalTheme placeholder remapping (covers global theme paths)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "globaltheme-remap.css.ts",
+            r#"import { createGlobalTheme, style } from '@devup-ui/react'
+export const lightVars = createGlobalTheme(':root', {
+  colors: { bg: 'white', text: 'black' }
+})
+export const darkVars = createGlobalTheme('.dark', {
+  colors: { bg: 'black', text: 'white' }
+})
+export const box = style({ padding: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_with_layer_in_selector() {
+    // Test globalCss with @layer inside selector object (covers lines 103, 115 in extract_global_style_from_expression.rs)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    ".button": {
+        "@layer": "components",
+        padding: "8px",
+        background: "blue"
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+
+    // Test with multiple selectors having @layer
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    ".card": {
+        "@layer": "layout",
+        display: "flex"
+    },
+    ".text": {
+        "@layer": "typography",
+        fontSize: "16px"
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_css_container_at_rule_with_selector() {
+    // Test @container at-rule within selector context (covers line 134)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { css } from "@devup-ui/core";
+<div className={css({
+  padding: 8,
+  "@container": {
+    "(min-width: 300px)": {
+      padding: 16
+    }
+  }
+})} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_selector_refs_triggers_with_classes() {
+    // Test that triggers collected_styles_to_code_with_classes path (selector references)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "refs.css.ts",
+                r#"import { style, globalStyle, keyframes, createVar, fontFace, createContainer, layer } from '@devup-ui/react'
+export const colorVar = createVar()
+export const myContainer = createContainer()
+export const myLayer = layer('ui')
+export const myFont = fontFace({ src: 'local(Arial)' })
+export const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
+export const parent = style({ display: 'flex' })
+export const child = style({
+  selectors: {
+    [`${parent}:hover &`]: { color: 'red' }
+  }
+})
+globalStyle('body', { margin: 0 })
+"#,
+                ExtractOption { package: "@devup-ui/react".to_string(), css_dir: "@devup-ui/react".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_theme_without_vars_json() {
+    // Test createTheme that has vars_name but might not have vars_object_json (covers line 1111)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-simple.css.ts",
+            r#"import { createThemeContract, createTheme, style } from '@devup-ui/react'
+const contract = createThemeContract({
+  colors: { primary: null }
+})
+export const lightTheme = createTheme(contract, {
+  colors: { primary: 'blue' }
+})
+export const box = style({ padding: 8 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_global_css_layer_property_extraction() {
+    // Test globalCss with @layer property to trigger lines 103, 115 in extract_global_style_from_expression.rs
+    // The @layer property should be extracted and then filtered out, with layer set on remaining styles
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import { globalCss } from '@devup-ui/core'
+globalCss({
+    ".reset-box": {
+        "@layer": "reset",
+        margin: 0,
+        padding: 0,
+        boxSizing: "border-box"
+    }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_selector_refs_with_global_theme() {
+    // Test that triggers append_non_style_code with global themes (covers lines 1142-1144, 1221-1222)
+    // Need selector references + createGlobalTheme
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "theme-refs.css.ts",
+            r#"import { style, createGlobalTheme } from '@devup-ui/react'
+export const vars = createGlobalTheme(':root', {
+  colors: { primary: 'blue', secondary: 'green' }
+})
+export const parent = style({ background: 'white' })
+export const child = style({
+  selectors: {
+    [`${parent}:hover &`]: { color: 'red' }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_vanilla_extract_with_at_container_selector() {
+    // Test @container with selector context (covers line 134 in extract_style_from_expression.rs)
+    reset_class_map();
+    reset_file_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "container.css.ts",
+            r#"import { style } from '@devup-ui/react'
+export const card = style({
+  containerType: 'inline-size',
+  '@container': {
+    '(min-width: 400px)': {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr'
+    }
+  }
+})
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_extract_class_map_from_code_parser_panic() {
+    // Test extract_class_map_from_code with invalid code that causes parser panic (covers line 153-154)
+    let mut style_names = HashSet::new();
+    style_names.insert("test".to_string());
+
+    let result = extract_class_map_from_code(
+        "test.tsx",
+        "const {{ invalid syntax {{{{",
+        &ExtractOption {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: true,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        },
+        &style_names,
+    )
+    .unwrap();
+
+    assert!(result.is_empty());
+}
+
+// === Import Alias Tests ===
+
+#[test]
+#[serial]
+fn test_import_alias_emotion_styled() {
+    // Test @emotion/styled default export → styled named export
+    // Uses devup-ui's styled syntax: styled.button({ ... }) or styled("button")({ ... })
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@emotion/styled".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import styled from '@emotion/styled'
+const Button = styled.button({ bg: 'red', p: 4 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_import_alias_styled_components() {
+    // Test styled-components default export → styled named export
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "styled-components".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import styled from 'styled-components'
+const Card = styled("div")({ bg: 'blue', m: 2 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_import_alias_skip_when_package_not_in_code() {
+    // Test that extraction is skipped when neither package nor aliases are present
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@emotion/styled".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import React from 'react'
+const element = <div>Hello</div>"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_import_alias_renamed_import() {
+    // Test aliased import that's renamed locally: import myStyled from '@emotion/styled'
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@emotion/styled".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import myStyled from '@emotion/styled'
+const Button = myStyled.button({ bg: 'green', p: 2 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_import_alias_custom_named_export() {
+    // Test @emotion/styled default export → custom named export (emotionStyled, not styled)
+    // This tests when user configures alias to map to a non-standard named export
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@emotion/styled".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import emotionStyled from '@emotion/styled'
+const Button = emotionStyled.button({ bg: 'purple', p: 3 })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_import_alias_multiple_aliases() {
+    // Test with multiple aliases configured
+    reset_class_map();
+    reset_file_map();
+    let mut aliases = HashMap::new();
+    aliases.insert(
+        "@emotion/styled".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+    aliases.insert(
+        "styled-components".to_string(),
+        ImportAlias::DefaultToNamed("styled".to_string()),
+    );
+    aliases.insert(
+        "@vanilla-extract/css".to_string(),
+        ImportAlias::NamedToNamed,
+    );
+
+    // Test with @emotion/styled member syntax
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import styled from '@emotion/styled'
+const Button = styled.button({ bg: 'red' })
+"#,
+            ExtractOption {
+                package: "@devup-ui/react".to_string(),
+                css_dir: "@devup-ui/react".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: aliases
+            },
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_classname_extraction() {
+    // Test Tailwind className extraction - classes should be replaced with devup-ui generated names
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className="p-4 bg-red-500" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_classname_with_variants() {
+    // Test Tailwind with hover and responsive variants
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className="p-4 hover:bg-blue-500 sm:p-8" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_classname_with_devup_props() {
+    // Test Tailwind className combined with devup-ui style props
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className="p-4 bg-red-500" margin={2} />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_arbitrary_values() {
+    // Test Tailwind arbitrary values like w-[100px]
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className="w-[100px] h-[50vh] text-[#ff0000]" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_negative_values() {
+    // Test Tailwind negative values like -m-4
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className="-m-4 -translate-x-1/2" />
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_full_integration() {
+    // Comprehensive integration test: realistic multi-component scenario
+    // Tests multiple Tailwind features together in a real-world usage pattern
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "components/Card.tsx",
+                r#"import {Box, Flex, Text} from '@devup-ui/core'
+
+// Card component with comprehensive Tailwind usage
+export const Card = () => (
+  <Box className="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow dark:bg-gray-800">
+    <Flex className="flex-col gap-4 sm:flex-row sm:items-center">
+      <Box className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
+        <Text className="text-white font-bold text-lg">A</Text>
+      </Box>
+      <Box className="flex-1">
+        <Text className="text-gray-900 font-semibold text-xl dark:text-white">Title</Text>
+        <Text className="text-gray-500 text-sm mt-1 dark:text-gray-400">Subtitle</Text>
+      </Box>
+    </Flex>
+    <Box className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <Text className="text-gray-700 leading-relaxed dark:text-gray-300">
+        Content goes here with multiple Tailwind utilities combined.
+      </Text>
+    </Box>
+  </Box>
+)
+"#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_with_all_variant_types() {
+    // Test all variant types: responsive, state, dark mode
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {Box} from '@devup-ui/core'
+<Box className="p-2 sm:p-4 md:p-6 lg:p-8 xl:p-10 2xl:p-12 hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50 dark:bg-gray-900 dark:hover:bg-gray-800" />
+"#,
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
+            )
+            .unwrap()
+        ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_mixed_with_devup_responsive() {
+    // Test Tailwind className with devup-ui responsive array props
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box 
+  className="rounded-lg shadow-md hover:shadow-xl" 
+  p={[2, 4, 6]} 
+  bg={["red", "blue", "green"]}
+  display={["block", "flex"]}
+/>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_with_as_prop() {
+    // Test Tailwind className with "as" prop for polymorphic components
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box as="p" className="text-gray-900">text</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_with_conditional_template_literal() {
+    // Test Tailwind className with conditional expression in template literal
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${enabled ? 'text-green-500' : 'text-blue-500'} text-3xl pr-5`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_logical_expression() {
+    // Test LogicalExpression in template literal (covers lines 239-242, 290-292 in prop_modify_utils.rs)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${isActive && 'text-red-500'} ${fallback || 'text-blue-500'} p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_parenthesized_expression() {
+    // Test ParenthesizedExpression in template literal (covers lines 244-246, 295-296 in prop_modify_utils.rs)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${(cond ? 'text-red-500' : 'text-blue-500')} p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_nested_template_literal() {
+    // Test nested TemplateLiteral (covers lines 248, 299-302 in prop_modify_utils.rs)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${`text-${color}-500`} p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_variable_expression() {
+    // Test non-string expressions (variables/identifiers) - covers line 250 in prop_modify_utils.rs
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${dynamicClass} text-red-500 p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_function_call_expression() {
+    // Test function call expressions in template literal (covers line 250 default branch)
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box className={`${getClass()} text-blue-500 p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
+
+#[test]
+#[serial]
+fn test_tailwind_template_literal_with_style_order() {
+    // Test style_order parameter in build_tailwind_class_mapping (covers line 178)
+    // styleOrder prop must be set explicitly to trigger the style_order code path
+    reset_class_map();
+    reset_file_map();
+    assert_debug_snapshot!(ToBTreeSet::from(
+        extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+<Box styleOrder={5} className={`${enabled ? 'text-green-500' : 'text-blue-500'} p-4`}>
+  hello
+</Box>
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_dir: "@devup-ui/core".to_string(),
+                single_css: true,
+                import_main_css: false,
+                import_aliases: HashMap::new()
+            }
+        )
+        .unwrap()
+    ));
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_typography-2.snap b/libs/extractor/tests/snapshots/all_tests__apply_typography-2.snap
new file mode 100644
index 00000000..0a648f5b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_typography-2.snap
@@ -0,0 +1,12 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`bold`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Typography(
+            "bold",
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<span className=\"typo-bold\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_typography-3.snap b/libs/extractor/tests/snapshots/all_tests__apply_typography-3.snap
new file mode 100644
index 00000000..bf2439a8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_typography-3.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={a ? \"bold\" : \"bold2\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Typography(
+            "bold",
+        ),
+        Typography(
+            "bold2",
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<span className={a ? \"typo-bold\" : \"typo-bold2\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_typography.snap b/libs/extractor/tests/snapshots/all_tests__apply_typography.snap
new file mode 100644
index 00000000..62a18f1c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_typography.snap
@@ -0,0 +1,12 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography=\"bold\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Typography(
+            "bold",
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<span className=\"typo-bold\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_var_typography-2.snap b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-2.snap
new file mode 100644
index 00000000..ca4b2e90
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={bo ? a : b} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<span className={bo ? a ? `typo-${a}` : \"\" : b ? `typo-${b}` : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_var_typography-3.snap b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-3.snap
new file mode 100644
index 00000000..f13b13c3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={`${bo ? a : b}`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<span className={`typo-${`${bo ? a : b}`}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_var_typography-4.snap b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-4.snap
new file mode 100644
index 00000000..9cfaef63
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_var_typography-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      boxSizing=\"border-box\"\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "box-sizing",
+                value: "border-box",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${className || \"\"} a ${typography ? `typo-${typography}` : \"\"}`}>\n    </div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__apply_var_typography.snap b/libs/extractor/tests/snapshots/all_tests__apply_var_typography.snap
new file mode 100644
index 00000000..333c49d8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__apply_var_typography.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n        <Text typography={variable} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<span className={variable ? `typo-${variable}` : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-2.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-2.snap
new file mode 100644
index 00000000..cbf26d30
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-2.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@media\": { \"(min-width: 768px)\": { bg: \"blue\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-3.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-3.snap
new file mode 100644
index 00000000..3b52b2ff
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix-3.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@supports\": { \"(display: flex)\": { display: \"flex\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: flex)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix.snap
new file mode 100644
index 00000000..c1874862
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_at_prefix.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box {...{\"@container\": { \"(min-width: 400px)\": { bg: \"red\" } }}} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-2.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-2.snap
new file mode 100644
index 00000000..69667703
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-2.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _media={{ \"(min-width: 768px)\": { bg: \"blue\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-3.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-3.snap
new file mode 100644
index 00000000..7b3b7a18
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-3.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _supports={{ \"(display: grid)\": { display: \"grid\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-4.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-4.snap
new file mode 100644
index 00000000..7b6aea32
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix-4.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _container={{ \"sidebar (min-width: 400px)\": { p: 4 } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "sidebar (min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix.snap b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix.snap
new file mode 100644
index 00000000..5362ec2d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__at_rules_underscore_prefix.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _container={{ \"(min-width: 400px)\": { bg: \"red\" } }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__avoid_same_name_component.snap b/libs/extractor/tests/snapshots/all_tests__avoid_same_name_component.snap
new file mode 100644
index 00000000..df0b122c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__avoid_same_name_component.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Button } from \"@devup/ui\";\n<div className=\"a\" />;\n<Button bg=\"red\" background=\"red\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__backtick_prop-2.snap b/libs/extractor/tests/snapshots/all_tests__backtick_prop-2.snap
new file mode 100644
index 00000000..2189dc7b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__backtick_prop-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${variable}`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": `${variable}` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__backtick_prop.snap b/libs/extractor/tests/snapshots/all_tests__backtick_prop.snap
new file mode 100644
index 00000000..1d9b7b4e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__backtick_prop.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__component_in_func.snap b/libs/extractor/tests/snapshots/all_tests__component_in_func.snap
new file mode 100644
index 00000000..86af0abc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__component_in_func.snap
@@ -0,0 +1,61 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "align-items",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "40px",
+                level: 4,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nPROCESS_DATA.map(({ id, title, content }, idx) => <MotionDiv key={idx}>\n            <div className=\"a b c d e\">\n            </div>\n          </MotionDiv>);\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector-2.snap
new file mode 100644
index 00000000..793b7e85
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector-2.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<div className={css({\n  selectors: {\n    \"&:hover\": condition ? { color: \"blue\" } : { color: \"red\" }\n  }\n})} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={condition ? \"a\" : \"b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector.snap b/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector.snap
new file mode 100644
index 00000000..4f362a56
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__conditional_expression_with_selector.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<div className={css({\n  _hover: condition ? { bg: \"blue\" } : { bg: \"red\" }\n})} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={condition ? \"a\" : \"b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__conditional_styles.snap b/libs/extractor/tests/snapshots/all_tests__conditional_styles.snap
new file mode 100644
index 00000000..ea37b82b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__conditional_styles.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst Component = () => {\n    const isActive = true;\n    return <Box bg={isActive ? \"red\" : undefined} color={isActive ? undefined : \"blue\"} />;\n}\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst Component = () => {\n\tconst isActive = true;\n\treturn <div className={`${isActive ? \"a-a\" : \"\"} ${isActive ? \"\" : \"a-b\"}`} />;\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__conditional_with_both_branches.snap b/libs/extractor/tests/snapshots/all_tests__conditional_with_both_branches.snap
new file mode 100644
index 00000000..32cc37f3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__conditional_with_both_branches.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst isActive = true;\n<Box bg={isActive ? \"red\" : \"blue\"} p={isActive ? 4 : 2} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst isActive = true;\n<div className={`${isActive ? \"a-a\" : \"a-b\"} ${isActive ? \"a-c\" : \"a-d\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css-2.snap b/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css-2.snap
new file mode 100644
index 00000000..85e5ee79
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css-2.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<div className={css({\n  \"@container\": {\n    \"(min-width: 500px)\": {\n      background: \"blue\"\n    }\n  }\n})} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 500px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css.snap b/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css.snap
new file mode 100644
index 00000000..5655a7b1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__container_at_rule_in_css.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<div className={css({\n  _container: {\n    \"(min-width: 400px)\": {\n      display: \"flex\"\n    }\n  }\n})} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-10.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-10.snap
new file mode 100644
index 00000000..5b2b799c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-10.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? \"section\":undefined} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? <section /> : undefined}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-11.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-11.snap
new file mode 100644
index 00000000..21d26a91
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-11.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? \"section\":null} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? <section /> : null}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-12.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-12.snap
new file mode 100644
index 00000000..ed8f09c5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-12.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? null:undefined} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? null : undefined}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-13.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-13.snap
new file mode 100644
index 00000000..1c0d63f7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-13.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={Variable} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{<Variable className=\"a b\" />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-14.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-14.snap
new file mode 100644
index 00000000..88b92c10
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-14.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? Variable : \"section\"} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{b ? <Variable className=\"a b\" /> : <section className=\"a b\" />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-15.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-15.snap
new file mode 100644
index 00000000..86a67247
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-15.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={{A: \"section\", B: \"div\", C: Variable, D, [key]: \"section\", ...rest}[key]} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{{\n\tA: <section className=\"a b\" />,\n\tB: <div className=\"a b\" />,\n\tC: <Variable className=\"a b\" />,\n\tD: <D className=\"a b\" />,\n\t[key]: <section className=\"a b\" />,\n\t...rest\n}[key]}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-16.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-16.snap
new file mode 100644
index 00000000..467fbdfc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-16.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={{A: \"section\", B: \"div\", C: Variable, D, [\"key\"]: \"section\", ...rest}[\"key\"]} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{{\n\tA: <section className=\"a b\" />,\n\tB: <div className=\"a b\" />,\n\tC: <Variable className=\"a b\" />,\n\tD: <D className=\"a b\" />,\n\t[\"key\"]: <section className=\"a b\" />,\n\t...rest\n}[\"key\"]}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-17.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-17.snap
new file mode 100644
index 00000000..4d89f298
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-17.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b === 1 ? \"section\" : \"div\"} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{b === 1 ? <section className=\"a b\" /> : <div className=\"a b\" />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-18.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-18.snap
new file mode 100644
index 00000000..3872f1bc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-18.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={[\"div\", \"section\"][b]} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{[<div className=\"a b\" />, <section className=\"a b\" />][b]}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-19.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-19.snap
new file mode 100644
index 00000000..3872f1bc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-19.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={[\"div\", \"section\"][b]} w=\"100%\" h=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{[<div className=\"a b\" />, <section className=\"a b\" />][b]}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-2.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-2.snap
new file mode 100644
index 00000000..4adc42a0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={\"section\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<section />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-20.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-20.snap
new file mode 100644
index 00000000..bd423a95
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-20.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={Variable} w=\"100%\" props={{animate:{duration: 1}}} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{<Variable className=\"a\" {...{ animate: { duration: 1 } }} />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-21.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-21.snap
new file mode 100644
index 00000000..a04090c9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-21.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={Variable} w=\"100%\" props={{animate:{duration: 1}}}></Box>\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{<Variable className=\"a\" {...{ animate: { duration: 1 } }}></Variable>}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-3.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-3.snap
new file mode 100644
index 00000000..84706676
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={`section`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<section />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-4.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-4.snap
new file mode 100644
index 00000000..bc80e4a9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={\"section\"}></Box>\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<section></section>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-5.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-5.snap
new file mode 100644
index 00000000..a14df706
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={`section`}></Box>\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<section></section>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-6.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-6.snap
new file mode 100644
index 00000000..13823cd4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-6.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? \"div\":\"section\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? <div /> : <section />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-7.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-7.snap
new file mode 100644
index 00000000..c2b309f9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-7.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? `div`:`section`} w=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<>{b ? <div className=\"a\" /> : <section className=\"a\" />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-8.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-8.snap
new file mode 100644
index 00000000..0e9a52eb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? undefined:\"section\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? undefined : <section />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag-9.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag-9.snap
new file mode 100644
index 00000000..5e32baae
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag-9.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as={b ? null:\"section\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<>{b ? null : <section />}</>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__convert_tag.snap b/libs/extractor/tests/snapshots/all_tests__convert_tag.snap
new file mode 100644
index 00000000..1662b13d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__convert_tag.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box as=\"section\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<section />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_container_at_rule_with_selector.snap b/libs/extractor/tests/snapshots/all_tests__css_container_at_rule_with_selector.snap
new file mode 100644
index 00000000..f68014e1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_container_at_rule_with_selector.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<div className={css({\n  padding: 8,\n  \"@container\": {\n    \"(min-width: 300px)\": {\n      padding: 16\n    }\n  }\n})} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 300px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={\"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_function_empty_object.snap b/libs/extractor/tests/snapshots/all_tests__css_function_empty_object.snap
new file mode 100644
index 00000000..29c19083
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_function_empty_object.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {css} from '@devup-ui/core'\nconst className = css({})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const className = \"\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_function_no_args.snap b/libs/extractor/tests/snapshots/all_tests__css_function_no_args.snap
new file mode 100644
index 00000000..405516c5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_function_no_args.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {css} from '@devup-ui/core'\nconst className = css()\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const className = \"\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment-2.snap b/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment-2.snap
new file mode 100644
index 00000000..dd507a49
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment-2.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border",
+                value: "solid 1px red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d e ${a ? \"a b\" : \"c\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment.snap b/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment.snap
new file mode 100644
index 00000000..0e86aca1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_props_destructuring_assignment.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`c ${a ? \"a\" : \"b\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_variable_reassignment.snap b/libs/extractor/tests/snapshots/all_tests__css_variable_reassignment.snap
new file mode 100644
index 00000000..e3006ab7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_variable_reassignment.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {css as cssFunction} from '@devup-ui/core'\nconst myCss = cssFunction;\nconst className = myCss({ bg: \"red\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst myCss = cssFunction;\nconst className = \"a-a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__css_with_template_literal.snap b/libs/extractor/tests/snapshots/all_tests__css_with_template_literal.snap
new file mode 100644
index 00000000..c333b042
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__css_with_template_literal.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {css} from '@devup-ui/core'\nconst size = 16;\nconst className = css({ fontSize: `${size}px` })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "font-size",
+                level: 0,
+                identifier: "`${size}px`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst size = 16;\nconst className = \"a-a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__custom_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__custom_selector-2.snap
new file mode 100644
index 00000000..4c84a46e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__custom_selector-2.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__custom_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__custom_selector-3.snap
new file mode 100644
index 00000000..13bb8776
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__custom_selector-3.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__custom_selector.snap b/libs/extractor/tests/snapshots/all_tests__custom_selector.snap
new file mode 100644
index 00000000..abc0213e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__custom_selector.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&[aria-diabled='true']",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__default_import_usage.snap b/libs/extractor/tests/snapshots/all_tests__default_import_usage.snap
new file mode 100644
index 00000000..de035b1a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__default_import_usage.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import DevUI from '@devup-ui/core'\n<DevUI.Box bg=\"red\" />\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nimport DevUI from \"@devup-ui/core\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-2.snap b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-2.snap
new file mode 100644
index 00000000..43f74dba
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg=\"$gray.200\" color=\"$blue.500\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$gray.200",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$blue.500",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-3.snap b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-3.snap
new file mode 100644
index 00000000..12e7706c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg=\"$color.brand.primary.100\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$color.brand.primary.100",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-4.snap b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-4.snap
new file mode 100644
index 00000000..c538ab46
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box border=\"1px solid $border.primary\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "border",
+                value: "1px solid $border.primary",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables.snap b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables.snap
new file mode 100644
index 00000000..360c9346
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__dot_notation_theme_variables.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg=\"$primary.100\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary.100",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__duplicate_style_props.snap b/libs/extractor/tests/snapshots/all_tests__duplicate_style_props.snap
new file mode 100644
index 00000000..dcd471b6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__duplicate_style_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__dynamic_class_name_merge.snap b/libs/extractor/tests/snapshots/all_tests__dynamic_class_name_merge.snap
new file mode 100644
index 00000000..bd9e1d0f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__dynamic_class_name_merge.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst Component = ({ className }) => {\n    return <Box className={className} bg=\"red\" />;\n}\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst Component = ({ className }) => {\n\treturn <div className={`${className || \"\"} a-a`} />;\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__enum_style_prop.snap b/libs/extractor/tests/snapshots/all_tests__enum_style_prop.snap
new file mode 100644
index 00000000..3d5fc18d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__enum_style_prop.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst variant = \"primary\";\nconst colors = { primary: \"blue\", secondary: \"red\" };\n<Box bg={colors[variant]} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "colors[variant]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst variant = \"primary\";\nconst colors = {\n\tprimary: \"blue\",\n\tsecondary: \"red\"\n};\n<div className=\"a-a\" style={{ \"--a\": colors[variant] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-2.snap
new file mode 100644
index 00000000..d52dc2e9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-2.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [\"test\", \"test2\"],\n          bg: \"red\",\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is(test,test2)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-3.snap
new file mode 100644
index 00000000..f6fff4e3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [],\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-4.snap
new file mode 100644
index 00000000..58b94f9c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-4.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [\"\"],\n          _hover: {\n            bg: \"blue\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is():hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-5.snap
new file mode 100644
index 00000000..93b04c46
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-5.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [\"\", \"\"],\n          _hover: {\n            bg: \"blue\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is():hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-6.snap
new file mode 100644
index 00000000..6904429c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-6.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [\"test\", variable],\n          _hover: {\n            bg: \"blue\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is(test):hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-7.snap
new file mode 100644
index 00000000..5c268c62
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-7.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\n        globalCss({\n          \"_is\": {\n            params: [\"test\", variable],\n            _hover: {\n              bg: \"blue\"\n            },\n            bg: \"red\"\n          }\n        })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*:is(test):hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*:is(test)",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-8.snap
new file mode 100644
index 00000000..feef3ce8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector-8.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {css} from '@devup-ui/core'\n        css({\n          \"_is\": {\n            params: [\"test\"],\n            bg: \"red\"\n          }\n        })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is(test)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n\"a-a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector.snap b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector.snap
new file mode 100644
index 00000000..93a97aa8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_advenced_selector.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _is={{\n          params: [\"test\"],\n          bg: \"red\",\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:is(test)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_class_name_from_component.snap b/libs/extractor/tests/snapshots/all_tests__extract_class_name_from_component.snap
new file mode 100644
index 00000000..8d82b461
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_class_name_from_component.snap
@@ -0,0 +1,53 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {VStack as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" || \"\"} a b c d`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_compound_responsive_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_compound_responsive_style_props.snap
new file mode 100644
index 00000000..e873556c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_compound_responsive_style_props.snap
@@ -0,0 +1,46 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[someStyleVar,undefined,someStyleVar1]} margin={[null,someStyleVar2]} bg=\"red\" />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "someStyleVar2",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "someStyleVar",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 2,
+                identifier: "someStyleVar1",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a c e g\" style={{\n\t\"--b\": someStyleVar,\n\t\"--d\": someStyleVar1,\n\t\"--f\": someStyleVar2\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-2.snap
new file mode 100644
index 00000000..63d7233c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-2.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={a===b && {\n          mx: 1\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a b\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-3.snap
new file mode 100644
index 00000000..ab76112f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={a===b && {}} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-4.snap
new file mode 100644
index 00000000..ed8291fd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector-4.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={a===b && {\n          mx: 1,\n          my: 1\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-bottom",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a b c d\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector.snap
new file mode 100644
index 00000000..2b967fa0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_selector.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={a===b ? undefined : {\n          mx: 1\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-10.snap
new file mode 100644
index 00000000..d8dc1992
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-10.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? undefined : null} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-11.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-11.snap
new file mode 100644
index 00000000..c339b17c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-11.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box _hover={b ? void 0 : { bg: \"blue\" }} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={b ? \"\" : \"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-2.snap
new file mode 100644
index 00000000..bfaedb71
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-2.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? c : d} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": a === b ? c : d }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-3.snap
new file mode 100644
index 00000000..d5973280
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-3.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? \"4px\" : d} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"b\"} style={{ \"--c\": d }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-4.snap
new file mode 100644
index 00000000..12b55ace
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? null : undefined} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-5.snap
new file mode 100644
index 00000000..cc81b9bb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? 1 : undefined} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-6.snap
new file mode 100644
index 00000000..ceef3347
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-6.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? undefined : 2} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-7.snap
new file mode 100644
index 00000000..bdfeda52
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-7.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${a}px` : undefined} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${a}px`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} style={{ \"--b\": `${a}px` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-8.snap
new file mode 100644
index 00000000..33e84461
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-8.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? null : `${b}px`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${b}px`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"a\"} style={{ \"--b\": `${b}px` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-9.snap
new file mode 100644
index 00000000..2dbfff51
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props-9.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${b}px` : undefined} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${b}px`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} style={{ \"--b\": `${b}px` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props.snap
new file mode 100644
index 00000000..e86a4ef5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? \"4px\" : \"3px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "3px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name-2.snap
new file mode 100644
index 00000000..67874442
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name-2.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} className=\"ab\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`ab a ${{\n\t\"0\": \"b\",\n\t\"1\": \"c\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name.snap
new file mode 100644
index 00000000..1415ff48
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_conditional_style_props_with_class_name.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      className={className}\n      typography={typography}\n    >\n    </DevupButton>\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div className={`${className || \"\"} ${typography ? `typo-${typography}` : \"\"}`}>\n    </div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-2.snap
new file mode 100644
index 00000000..62be2fac
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a===b || a} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"a\"} style={{ \"--b\": a === b ? undefined : a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-3.snap
new file mode 100644
index 00000000..1ffb8bcf
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-3.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a ?? b} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "b",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": a !== null && a !== undefined ? a : b }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-4.snap
new file mode 100644
index 00000000..78fe2206
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={(a===1||a===2)&&b===3 && a} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={(a === 1 || a === 2) && b === 3 ? \"a\" : \"\"} style={{ \"--b\": (a === 1 || a === 2) && b === 3 ? a : undefined }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case.snap
new file mode 100644
index 00000000..13d775da
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_logical_case.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a===b && a} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} style={{ \"--b\": a === b ? a : undefined }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_responsive_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_responsive_style_props.snap
new file mode 100644
index 00000000..be0f51bd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_responsive_style_props.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[someStyleVar,null,someStyleVar1]} margin={[null,someStyleVar2]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "someStyleVar2",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "someStyleVar",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 2,
+                identifier: "someStyleVar1",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a c e\" style={{\n\t\"--b\": someStyleVar,\n\t\"--d\": someStyleVar1,\n\t\"--f\": someStyleVar2\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-2.snap
new file mode 100644
index 00000000..3a9434d5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={Math.abs(5)} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "Math.abs(5)",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": Math.abs(5) }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-3.snap
new file mode 100644
index 00000000..874f3533
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-3.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={data.buttonBgColor} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "data.buttonBgColor",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": data.buttonBgColor }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-4.snap
new file mode 100644
index 00000000..8c8e5cad
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={data.a.b.buttonBgColor} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "data.a.b.buttonBgColor",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": data.a.b.buttonBgColor }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props.snap
new file mode 100644
index 00000000..bf03b50c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={someStyleVar} margin={someStyleVar2} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "someStyleVar2",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "someStyleVar",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a c\" style={{\n\t\"--b\": someStyleVar,\n\t\"--d\": someStyleVar2\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-2.snap
new file mode 100644
index 00000000..c4ec2656
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={data[d as A] as B} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "data[d as A]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": data[d as A] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-3.snap
new file mode 100644
index 00000000..8209b358
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={\"10px\" as B} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "10px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type.snap b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type.snap
new file mode 100644
index 00000000..0266588d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_dynamic_style_props_with_type.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={a as A} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-2.snap
new file mode 100644
index 00000000..32588687
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning=\"wrong\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-3.snap
new file mode 100644
index 00000000..999674e5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-3.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning={a} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "bottom",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "right",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className={{\n\t\"bottom\": \"a-a\",\n\t\"bottom-left\": \"a-a a-b\",\n\t\"bottom-right\": \"a-a a-c\",\n\t\"left\": \"a-b\",\n\t\"right\": \"a-c\",\n\t\"top\": \"a-d\",\n\t\"top-left\": \"a-b a-d\",\n\t\"top-right\": \"a-c a-d\"\n}[a] || \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-4.snap
new file mode 100644
index 00000000..f44ed3fb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-4.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning={a} w=\"100%\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "bottom",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "right",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className={`a-e ${{\n\t\"bottom\": \"a-a\",\n\t\"bottom-left\": \"a-a a-b\",\n\t\"bottom-right\": \"a-a a-c\",\n\t\"left\": \"a-b\",\n\t\"right\": \"a-c\",\n\t\"top\": \"a-d\",\n\t\"top-left\": \"a-b a-d\",\n\t\"top-right\": \"a-c a-d\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-5.snap
new file mode 100644
index 00000000..d0403a39
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-5.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning={a} top=\"0px\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "bottom",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "right",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className={`a-d ${{\n\t\"bottom\": \"a-a\",\n\t\"bottom-left\": \"a-a a-b\",\n\t\"bottom-right\": \"a-a a-c\",\n\t\"left\": \"a-b\",\n\t\"right\": \"a-c\",\n\t\"top\": \"a-d\",\n\t\"top-left\": \"a-b a-d\",\n\t\"top-right\": \"a-c a-d\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-6.snap
new file mode 100644
index 00000000..2f2e2a8c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property-6.snap
@@ -0,0 +1,109 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning={[a, b, \"top\", \"left\", \"wrong\"]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "bottom",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "bottom",
+                value: "0",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "right",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "right",
+                value: "0",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className={`a-i a-j ${{\n\t\"bottom\": \"a-a\",\n\t\"bottom-left\": \"a-a a-b\",\n\t\"bottom-right\": \"a-a a-c\",\n\t\"left\": \"a-b\",\n\t\"right\": \"a-c\",\n\t\"top\": \"a-d\",\n\t\"top-left\": \"a-b a-d\",\n\t\"top-right\": \"a-c a-d\"\n}[a] || \"\"} ${{\n\t\"bottom\": \"a-e\",\n\t\"bottom-left\": \"a-e a-f\",\n\t\"bottom-right\": \"a-e a-g\",\n\t\"left\": \"a-f\",\n\t\"right\": \"a-g\",\n\t\"top\": \"a-h\",\n\t\"top-left\": \"a-f a-h\",\n\t\"top-right\": \"a-g a-h\"\n}[b] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property.snap b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property.snap
new file mode 100644
index 00000000..393b9b93
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_enum_style_property.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box positioning=\"top-left\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "left",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "top",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-10.snap
new file mode 100644
index 00000000..ab2ceb7d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-10.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}, ...{span: {bg: \"blue\"}}})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-2.snap
new file mode 100644
index 00000000..9a4be9c4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-2.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {\n    bg: \"blue\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-3.snap
new file mode 100644
index 00000000..f9243ce9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-3.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"yellow\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "yellow",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-4.snap
new file mode 100644
index 00000000..962bf63f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-4.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [`div`]: {\n    bg: \"green\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-5.snap
new file mode 100644
index 00000000..917b8ecd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-5.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _hover: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-6.snap
new file mode 100644
index 00000000..0955cf5b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-6.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _placeholder: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*::placeholder",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-7.snap
new file mode 100644
index 00000000..70a36a53
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-7.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  _nthLastChild: {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*:nth-last-child",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-8.snap
new file mode 100644
index 00000000..016b0c84
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css-9.snap
new file mode 100644
index 00000000..95e7b308
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css-9.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(...{div: {bg: \"red\"}})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css.snap
new file mode 100644
index 00000000..68971b94
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-2.snap
new file mode 100644
index 00000000..75d61198
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: {},\n  span: {}\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-3.snap
new file mode 100644
index 00000000..e32e79d4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-4.snap
new file mode 100644
index 00000000..f63c2af9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  div: ``,\n  span: ``\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-5.snap
new file mode 100644
index 00000000..42ce0164
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({})\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-6.snap
new file mode 100644
index 00000000..83d27bb4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty-6.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty.snap
new file mode 100644
index 00000000..2dae41d5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_empty.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {}\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-10.snap
new file mode 100644
index 00000000..a6cc3ad8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-10.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [{\"query\": \"layer\"}]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-2.snap
new file mode 100644
index 00000000..a45fe6b9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: `url('/fonts/Roboto-Regular.ttf')`,\n      fontWeight: `400`,\n    }\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "Roboto",
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-3.snap
new file mode 100644
index 00000000..4bc6c485
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-3.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n    }\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "Roboto",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-4.snap
new file mode 100644
index 00000000..de7bb235
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [`\n  font-family: \"Roboto\";\n  src: \"url('/fonts/Roboto-Regular.ttf')\";\n  font-weight: 400;\n  `]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "Roboto",
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-5.snap
new file mode 100644
index 00000000..885650f1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Hello\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Roboto Hello\"",
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-6.snap
new file mode 100644
index 00000000..ee3349a0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-6.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: undefined,\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-7.snap
new file mode 100644
index 00000000..bec8414f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-7.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto Regular2\",\n      src: \"//fonts/Roboto-Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular\",\n      src: \"//fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular3\",\n      src: \"fonts/Roboto Regular.ttf\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto Regular4\",\n      src: \"local('fonts/Roboto Regular.ttf')\",\n      fontWeight: 400,\n    },\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Roboto Regular\"",
+                    "font-weight": "400",
+                    "src": "url(\"//fonts/Roboto Regular.ttf\")",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Roboto Regular2\"",
+                    "font-weight": "400",
+                    "src": "url(//fonts/Roboto-Regular.ttf)",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Roboto Regular3\"",
+                    "font-weight": "400",
+                    "src": "url(\"fonts/Roboto Regular.ttf\")",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Roboto Regular4\"",
+                    "font-weight": "400",
+                    "src": "local('fonts/Roboto Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-8.snap
new file mode 100644
index 00000000..ed4d1f0d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-8.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [{\"url\": \"@devup-ui/core/css/global.css\"}]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "\"@devup-ui/core/css/global.css\"",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-9.snap
new file mode 100644
index 00000000..2868e9f6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces-9.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [{\"url\": \"@devup-ui/core/css/global.css\", \"query\": \"layer\"}]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "\"@devup-ui/core/css/global.css\" layer",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces.snap
new file mode 100644
index 00000000..e568fcf1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_font_faces.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  fontFaces: [\n    {\n      fontFamily: \"Roboto\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    },\n    {\n      fontFamily: \"Roboto2\",\n      src: \"url('/fonts/Roboto-Regular.ttf')\",\n      fontWeight: 400,\n    }\n  ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "Roboto",
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "Roboto2",
+                    "font-weight": "400",
+                    "src": "url('/fonts/Roboto-Regular.ttf')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-2.snap
new file mode 100644
index 00000000..3abd766d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-2.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\", \"@devup-ui/core/css/global2.css\"]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "@devup-ui/core/css/global.css",
+                file: "test.tsx",
+            },
+        ),
+        Import(
+            ExtractImport {
+                url: "@devup-ui/core/css/global2.css",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-3.snap
new file mode 100644
index 00000000..4e25842d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports-3.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [`@devup-ui/core/css/global3.css`, `@devup-ui/core/css/global4.css`]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "@devup-ui/core/css/global3.css",
+                file: "test.tsx",
+            },
+        ),
+        Import(
+            ExtractImport {
+                url: "@devup-ui/core/css/global4.css",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports.snap
new file mode 100644
index 00000000..faabf991
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_imports.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [\"@devup-ui/core/css/global.css\"]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "@devup-ui/core/css/global.css",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-2.snap
new file mode 100644
index 00000000..452c7b62
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-2.snap
@@ -0,0 +1,145 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-3.snap
new file mode 100644
index 00000000..452c7b62
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-3.snap
@@ -0,0 +1,145 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"span\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-4.snap
new file mode 100644
index 00000000..b520c5e2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector-4.snap
@@ -0,0 +1,213 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  [\"div\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  [\"span\"]: {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  },\n  \"body[data-theme='dark']\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body[data-theme='dark']:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body[data-theme='dark']",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body[data-theme='dark']",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body[data-theme='dark']:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "span:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector.snap
new file mode 100644
index 00000000..18e4c1fd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_selector.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  \"div\": {\n    bg: \"red\",\n    color: \"blue\",\n    _hover: {\n      bg: \"blue\",\n      color: \"red\"\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-2.snap
new file mode 100644
index 00000000..2025bf15
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": ``\n    })\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-3.snap
new file mode 100644
index 00000000..75a6bcf7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `     `\n    })\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-4.snap
new file mode 100644
index 00000000..2a5ae317
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `  \n         `\n    })\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-5.snap
new file mode 100644
index 00000000..b22562e7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-5.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`\n    div {\n      background-color: red;\n      color: blue;\n    }\n    `\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Css(
+            ExtractCss {
+                css: "div{background-color:red;color:blue}",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-6.snap
new file mode 100644
index 00000000..f7c050e3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-6.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss``\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-7.snap
new file mode 100644
index 00000000..83f8745e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-7.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`           `\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-8.snap
new file mode 100644
index 00000000..42b10548
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`         \n      `\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-9.snap
new file mode 100644
index 00000000..2993ac12
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal-9.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss`:root {color-scheme: light dark}`\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Css(
+            ExtractCss {
+                css: ":root{color-scheme:light dark}",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal.snap
new file mode 100644
index 00000000..443d60ed
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_template_literal.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\n    globalCss({\n      \"div\": `\n        background-color: red\n      `\n    })\n    \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "div",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports-2.snap
new file mode 100644
index 00000000..3451bbf7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: {}\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports.snap b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports.snap
new file mode 100644
index 00000000..77350431
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_global_css_with_wrong_imports.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n  imports: [1, 2, \"./test.css\"]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "./test.css",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx-2.snap
new file mode 100644
index 00000000..2fc2e06a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\", \"<Box gap={1} />\", ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box gap={1} />",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx.snap
new file mode 100644
index 00000000..53d58b5b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\", \"const a = 1;\", ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const a = 1;",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-2.snap
new file mode 100644
index 00000000..497b00ab
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box as C} from '@devup-ui/core'\n                <C padding={2} margin={3} />\n                \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-c a-d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-3.snap
new file mode 100644
index 00000000..aae5b18c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test1.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} margin={2} wrong={} wrong2=<></> />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-1.css\";\n<div className=\"b-a b-b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-4.snap
new file mode 100644
index 00000000..fb28542f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files-4.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test1.tsx\",\nr\"import {Box as C} from '@devup-ui/core'\n                <C padding={2} margin={3} />\n                \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-1.css\";\n<div className=\"b-c b-d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files.snap b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files.snap
new file mode 100644
index 00000000..55812671
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_just_tsx_in_multiple_files.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} margin={2} wrong={} wrong2=<></> />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-10.snap
new file mode 100644
index 00000000..983fc4e8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-10.snap
@@ -0,0 +1,53 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes(...{\n  [`0%`]: { opacity: 0, ...{color: \"red\"} },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "color",
+                            value: "red",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-2.snap
new file mode 100644
index 00000000..47dbab08
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-2.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": { opacity: 0 },\n  \"50%\": { opacity: 0.5 },\n  \"100%\": { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-3.snap
new file mode 100644
index 00000000..457d9867
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-3.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0\": { opacity: 0 },\n  \"50\": { opacity: 0.5 },\n  \"100\": { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-4.snap
new file mode 100644
index 00000000..72f266df
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-4.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [\"0\"]: { opacity: 0 },\n  [\"50\"]: { opacity: 0.5 },\n  [\"100\"]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-5.snap
new file mode 100644
index 00000000..e30fc4d8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-5.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [0]: { opacity: 0 },\n  [50]: { opacity: 0.5 },\n  [100]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-6.snap
new file mode 100644
index 00000000..04440c71
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-6.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  0: { opacity: 0 },\n  50: { opacity: 0.5 },\n  100: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-7.snap
new file mode 100644
index 00000000..f974e811
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-7.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-8.snap
new file mode 100644
index 00000000..1eaa5ea1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-8.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-9.snap
new file mode 100644
index 00000000..30be7d25
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs-9.snap
@@ -0,0 +1,117 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\n\nkeyframes({\n  [`0`]: { opacity: 0 },\n  [`50`]: { opacity: 0.5 },\n  [`100`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`1%`]: { opacity: 0 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n});\nkeyframes({\n  [`0%`]: { opacity: 1 },\n  [`50%`]: { opacity: 0.5 },\n  [`100%`]: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "1%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "50%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n\"a\";\n\"b\";\n\"c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs.snap
new file mode 100644
index 00000000..b2c23dde
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: { opacity: 0 },\n  to: { opacity: 1 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal-2.snap
new file mode 100644
index 00000000..7341a14e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal-2.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  \"0%\": `\n  background-color: red;\n  color: blue;\n  `,\n  \"100%\": `\n  background-color: blue;\n  color: red;\n  `\n})\n\nkeyframes`\n  0% {\n    background-color: red;\n    color: blue;\n  }\n  100% {\n    background-color: blue;\n    color: red;\n  }\n`\nkeyframes({\n  \"0%\": {\n    backgroundColor: \"red\",\n    color: \"blue\"\n  },\n  \"100%\": {\n    backgroundColor: \"blue\",\n    color: \"red\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "background-color",
+                            value: "red",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                        ExtractStaticStyle {
+                            property: "color",
+                            value: "blue",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "background-color",
+                            value: "blue",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                        ExtractStaticStyle {
+                            property: "color",
+                            value: "red",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n\"a\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal.snap b/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal.snap
new file mode 100644
index 00000000..eebd7e6c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_keyframs_literal.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: `\n  background-color: red;\n  `,\n  to: `\n  background-color: blue;\n  `\n})\n\nkeyframes`\n  from {\n    background-color: red;\n  }\n  to {\n    background-color: blue;\n  }\n`\nkeyframes({\n  from: {\n    backgroundColor: \"red\"\n  },\n  to: {\n    backgroundColor: \"blue\"\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "background-color",
+                            value: "red",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "background-color",
+                            value: "blue",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n\"a\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_logical_case-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-2.snap
new file mode 100644
index 00000000..102deb4c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a===b || \"1px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"\" : \"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_logical_case-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-3.snap
new file mode 100644
index 00000000..9164a0e4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-3.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a ?? \"1px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a !== null && a !== undefined ? \"a\" : \"c\"} style={{ \"--b\": a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_logical_case-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-4.snap
new file mode 100644
index 00000000..193b9862
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_logical_case-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={(a===1||a===2)&&b===3 && \"1px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={(a === 1 || a === 2) && b === 3 ? \"a\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_logical_case.snap b/libs/extractor/tests/snapshots/all_tests__extract_logical_case.snap
new file mode 100644
index 00000000..8c39237b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_logical_case.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a===b && \"1px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-10.snap
new file mode 100644
index 00000000..81363936
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-10.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_active\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-11.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-11.snap
new file mode 100644
index 00000000..4800970b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-11.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark,_placeholder\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-2.snap
new file mode 100644
index 00000000..ec0d40f6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-2.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-3.snap
new file mode 100644
index 00000000..7704109b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-3.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder\": {\n              color: \"red\"\n            },\n            \"&::placeholder, &:active\": {\n              color: \"blue\"\n            }\n          },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-4.snap
new file mode 100644
index 00000000..5167687c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-4.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          selectors: {\n            \"&::placeholder\": {\n              _active: {\n                color: \"red\",\n              }\n            },\n          },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-5.snap
new file mode 100644
index 00000000..ded1a883
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-5.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n          selectors={{\n            \"&::placeholder\": {\n              _active: {\n                color: \"red\",\n              }\n            },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&::placeholder:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-6.snap
new file mode 100644
index 00000000..25db2a3d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-6.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n          selectors={{\n            \"&::placeholder\": {\n              selectors: {\n                \"&:active\": {\n                  selectors: {\n                    \"&:hover\": {\n                      color: \"red\",\n                    }\n                  }\n                }\n              }\n            },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&::placeholder:active:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-7.snap
new file mode 100644
index 00000000..661b4c35
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-7.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n          _placeholder={{\n            _active: {\n              _hover: {\n                color: \"blue\",\n              },\n              color: \"red\",\n            },\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&::placeholder:active:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&::placeholder:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-8.snap
new file mode 100644
index 00000000..fd5738f6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-8.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"&:active, _hover\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-9.snap
new file mode 100644
index 00000000..b367b5c2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector-9.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box \n        selectors={{\n          _hover: {\n             selectors: {\n              \"_themeDark\": {\n                color: \"red\",\n              }\n             }\n          }\n        }}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_nested_selector.snap b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector.snap
new file mode 100644
index 00000000..24d54a1c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_nested_selector.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          _placeholder: {\n            color: \"red\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-2.snap
new file mode 100644
index 00000000..0fce92f4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-2.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n        <Box margin={[\"6px\", a === b ? \"4px\" : \"3px\"]} />;\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "3px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "6px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${a === b ? \"b\" : \"c\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-3.snap
new file mode 100644
index 00000000..449c3e2c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-3.snap
@@ -0,0 +1,55 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? c : [d, e, f, \"2px\"]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "2px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"a c e g\"} style={{\n\t\"--b\": a === b ? c : d,\n\t\"--d\": e,\n\t\"--f\": f\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-4.snap
new file mode 100644
index 00000000..be4e474c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-4.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? c : [d, e, f, x === y ? \"4px\" : \"2px\"]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "2px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : `a c e ${x === y ? \"g\" : \"h\"}`} style={{\n\t\"--b\": a === b ? c : d,\n\t\"--d\": e,\n\t\"--f\": f\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-5.snap
new file mode 100644
index 00000000..8781be46
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-5.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : c} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "2px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? `a c e ${x === y ? \"g\" : \"h\"}` : \"a\"} style={{\n\t\"--b\": a === b ? d : c,\n\t\"--d\": e,\n\t\"--f\": f\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-6.snap
new file mode 100644
index 00000000..9dee2c0f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-6.snap
@@ -0,0 +1,86 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? [d, e, f, x === y ? \"4px\" : \"2px\"] : [\"1px\", \"2px\", \"3px\"]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "2px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "2px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "3px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? `a c e ${x === y ? \"g\" : \"h\"}` : \"i j k\"} style={{\n\t\"--b\": d,\n\t\"--d\": e,\n\t\"--f\": f\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-7.snap
new file mode 100644
index 00000000..faac4b4f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-7.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={[null, a === b && \"4px\"]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-8.snap
new file mode 100644
index 00000000..39a24743
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props-8.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={[null, a === b && \"4px\", c === d ? \"5px\" : null]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "5px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${a === b ? \"a\" : \"\"} ${c === d ? \"b\" : \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props.snap
new file mode 100644
index 00000000..4267fdf0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={[null, a === b ? \"4px\" : \"3px\"]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "3px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a === b ? \"a\" : \"b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name-2.snap
new file mode 100644
index 00000000..a45a32a5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={[null, a === b || \"4px\"]} className={\"exists\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`exists ${a === b ? \"\" : \"a\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name.snap
new file mode 100644
index 00000000..883bb4b7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_conditional_style_props_with_class_name.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={[null, a === b ? (q > w ? \"4px\" : \"8px\") : \"3px\"]} className={\"exists\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "3px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`exists ${a === b ? q > w ? \"a\" : \"b\" : \"c\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props-2.snap
new file mode 100644
index 00000000..84617a2f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props-2.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Flex } from \"@devup-ui/core\";\n<Flex display={['none', null, \"flex\"]}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "none",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d e f\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props.snap
new file mode 100644
index 00000000..d0cdf190
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_responsive_style_props.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[null,1]} margin={[2,null,4]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props-2.snap
new file mode 100644
index 00000000..cb262996
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${a}` : `${a}`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "`${a}`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": `${a}` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props.snap
new file mode 100644
index 00000000..92607e1b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_dynamic_value_conditional_style_props.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? a : a} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-2.snap
new file mode 100644
index 00000000..8f6a408b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? 4 : 4} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-3.snap
new file mode 100644
index 00000000..4adff3fd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `4px` : `4px`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-4.snap
new file mode 100644
index 00000000..36e804d5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${\"1px\"}` : `${\"1px\"}`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-5.snap
new file mode 100644
index 00000000..58a939d6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${\"1\"}px` : `${1}px`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-6.snap
new file mode 100644
index 00000000..37ff79b5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props-6.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? `${`1`}px` : `${\"1\"}px`} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props.snap
new file mode 100644
index 00000000..5a17a268
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_same_value_conditional_style_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a === b ? \"4px\" : \"4px\"} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-10.snap
new file mode 100644
index 00000000..397f96ac
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-10.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".dataTestId > &\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ".dataTestId > &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ".dataTestId > &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-11.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-11.snap
new file mode 100644
index 00000000..60abe3e4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-11.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"_hover\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-12.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-12.snap
new file mode 100644
index 00000000..7364ae28
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-12.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"_hover\": {\n            selectors: {\n              \".dataTestId > &\": {\n                color: \"red\"\n              }\n            }\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ".dataTestId > &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-13.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-13.snap
new file mode 100644
index 00000000..3306ca60
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-13.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".test-picker__day--keyboard-selected\": {\n            bg: \"$primary\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .test-picker__day--keyboard-selected",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-14.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-14.snap
new file mode 100644
index 00000000..73ee9403
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-14.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"& .a, & .b\": {\n            bg: \"$primary\"\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-15.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-15.snap
new file mode 100644
index 00000000..a60f7328
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-15.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".test-picker__day--keyboard-selected\": {\n            _hover: {\n              bg: \"$primary\"\n            },\n            selectors: {\n              \"&:active\": {\n                bg: \"$primary\"\n              }\n            }\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .test-picker__day--keyboard-selected:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .test-picker__day--keyboard-selected:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-16.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-16.snap
new file mode 100644
index 00000000..b06e156d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-16.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \".a, .b\": {\n            _hover: {\n              bg: \"$primary\"\n            },\n            selectors: {\n              \"&:active\": {\n                bg: \"$secondary\"\n              }\n            }\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$secondary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .a:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$secondary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& .b:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-2.snap
new file mode 100644
index 00000000..ef4c4f0f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-2.snap
@@ -0,0 +1,101 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Center} from '@devup-ui/core'\n    <Center\n      _active={\n        variant !== 'disabled' && {\n          boxShadow: 'none',\n          transform: 'scale(0.95)',\n        }\n      }\n      _hover={\n        variant !== 'disabled' && {\n          boxShadow: [\n            '0px 1px 3px 0px rgba(0, 0, 0, 0.25)',\n            null,\n            '0px 0px 15px 0px rgba(0, 0, 0, 0.25)',\n          ],\n        }\n      }\n      {...props}\n    >\n      {children}\n    </Center>\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "align-items",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 0 15px 0 #00000040",
+                level: 2,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 1px 3px 0 #00000040",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "justify-content",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.95)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`a b c ${variant !== \"disabled\" ? \"d e\" : \"\"} ${variant !== \"disabled\" ? \"f g\" : \"\"} ${props?.className || \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-3.snap
new file mode 100644
index 00000000..c985facc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-3.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          _themeDark: {\n            mx: 1\n          }\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-4.snap
new file mode 100644
index 00000000..fffba4e9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-4.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          '_themeDark': {\n            mx: 1\n          }\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-5.snap
new file mode 100644
index 00000000..30b3b275
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-5.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          _hover: {\n            mx: 1\n          }\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-6.snap
new file mode 100644
index 00000000..36591ad5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-6.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"_hover, _active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-7.snap
new file mode 100644
index 00000000..7b6f72cb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-7.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"&:hover,                 &:active\": {\n            mx: 1\n          }\n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-8.snap
new file mode 100644
index 00000000..162a12cb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-8.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _nthLastChild={{\n          mx: 1\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector-9.snap
new file mode 100644
index 00000000..76e7f076
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector-9.snap
@@ -0,0 +1,93 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box\n          selectors={{\n            \"&:nth-last-child(2), &:nth-last-child(3)\": {\n              mx: 1\n            },\n            _nthLastChild: {\n              mx: 2\n            }\n          }}\n         />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(2)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(3)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(2)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child(3)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:nth-last-child",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector.snap
new file mode 100644
index 00000000..862ed657
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          mx: 1\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal-2.snap
new file mode 100644
index 00000000..f296ba89
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal-2.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box selectors={{\n          \"&:hover\":`\n          background-color: red;\n          ` \n        }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal.snap
new file mode 100644
index 00000000..1f3a61cd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_literal.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box _hover={`\n        background-color: red;\n        `} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-2.snap
new file mode 100644
index 00000000..38981426
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-2.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={[{\n          mx: 10\n        },{\n          mx: 20\n        }]} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "40px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "80px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "40px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "80px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-3.snap
new file mode 100644
index 00000000..99ded852
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive-3.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={[`\n        margin-left: 10px;\n        margin-right: 10px;\n        `,{\n        marginLeft: '20px',\n        marginRight: '20px',\n        }]} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "10px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "20px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "10px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "20px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive.snap b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive.snap
new file mode 100644
index 00000000..9c9f2151
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_selector_with_responsive.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box _hover={{\n          mx: [1, 2]\n        }} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-left",
+                value: "8px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-right",
+                value: "8px",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-10.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-10.snap
new file mode 100644
index 00000000..3ac7c2ec
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-10.snap
@@ -0,0 +1,93 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:[`\n  background-color: red;\n  color: blue;\n`,{\n  backgroundColor: \"green\",\n  color: \"yellow\"\n}, `\n  background-color: red;\n  color: blue;\n`]\n})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "green",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 2,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 2,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "yellow",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a b c d e f\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-11.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-11.snap
new file mode 100644
index 00000000..f666441c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-11.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css``}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-12.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-12.snap
new file mode 100644
index 00000000..294ebbed
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-12.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`   `}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-13.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-13.snap
new file mode 100644
index 00000000..c2df8671
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-13.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`  \n `}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-14.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-14.snap
new file mode 100644
index 00000000..adfb8bb7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-14.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{bg: \"red\"})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-15.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-15.snap
new file mode 100644
index 00000000..da1e49a6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-15.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-16.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-16.snap
new file mode 100644
index 00000000..7ebf35e3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-16.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css(...{...{bg: \"red\"}})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-2.snap
new file mode 100644
index 00000000..c1af9631
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c`\n  background-color: red;\n`}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-3.snap
new file mode 100644
index 00000000..d858ba30
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  bg:\"red\",\n  color:\"blue\"\n})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-4.snap
new file mode 100644
index 00000000..0c606e91
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css as c } from \"@devup-ui/core\";\n<Box className={c({\n  bg:\"red\"\n})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-5.snap
new file mode 100644
index 00000000..e9d0cbff
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-5.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover: {\n    bg:\"red\",\n    color:\"blue\"\n  }\n})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-6.snap
new file mode 100644
index 00000000..1b12df10
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-6.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n        <div className={css(a?{bg:\"red\"}:{bg:\"blue\"})}/>;\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a ? \"a\" : \"b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-7.snap
new file mode 100644
index 00000000..d6b46d8e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-7.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css()}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-8.snap
new file mode 100644
index 00000000..98399a15
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<Box className={\"\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-9.snap
new file mode 100644
index 00000000..1022bc64
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props-9.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css({\n  _hover:`\n  background-color: red;\n  color: blue;\n`\n})}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props.snap
new file mode 100644
index 00000000..e64c00e5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_class_name_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  background-color: red;\n`}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-2.snap
new file mode 100644
index 00000000..8d437a70
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-2.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    &:hover {\n      background-color: red;\n    }\n    &:active {\n      background-color: blue;\n    }\n  }\n`}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width:768px)",
+                        selector: Some(
+                            "&:active",
+                        ),
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width:768px)",
+                        selector: Some(
+                            "&:hover",
+                        ),
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a b\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-3.snap
new file mode 100644
index 00000000..596f2857
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query-3.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    background-color: red;\n  }\n`}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width:768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query.snap
new file mode 100644
index 00000000..89677194
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_media_query.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n<Box className={css`\n  @media (min-width: 768px) {\n    & {\n      background-color: red;\n    }\n  }\n`}/>;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width:768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-2.snap
new file mode 100644
index 00000000..aa7bb91e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box color={`$nice`} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$nice",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-3.snap
new file mode 100644
index 00000000..1ca24db3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box color={(\"$nice\")} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$nice",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme.snap b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme.snap
new file mode 100644
index 00000000..586256b8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_static_css_with_theme.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box color=\"$nice\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$nice",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props-2.snap
new file mode 100644
index 00000000..cced6353
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box as C} from '@devup-ui/core'\n                <C padding={1} margin={2} />\n                \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props-3.snap
new file mode 100644
index 00000000..2ad0385a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Input} from '@devup-ui/core'\n        <Input padding={1} margin={2} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<input className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props-4.snap
new file mode 100644
index 00000000..7f428718
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props-4.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Button} from '@devup-ui/core'\n        <Button padding={1} margin={2} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<button className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props-5.snap
new file mode 100644
index 00000000..8b6f518e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props-5.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={1} margin={2} />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props-6.snap
new file mode 100644
index 00000000..b9771752
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props-6.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Flex} from '@devup-ui/core'\n        <Flex padding={('-1')}/>\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "-4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props.snap
new file mode 100644
index 00000000..1f286237
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} margin={2} wrong={} wrong2=<></> />\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-2.snap
new file mode 100644
index 00000000..be8617eb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"  exists class name  \" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"exists class name a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-3.snap
new file mode 100644
index 00000000..8030d784
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"exists class name\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"exists class name a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-4.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-4.snap
new file mode 100644
index 00000000..c26198bb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-4.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-5.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-5.snap
new file mode 100644
index 00000000..6cac4515
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-5.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={\"a\"+\"b\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" || \"\"} a b`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-6.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-6.snap
new file mode 100644
index 00000000..872d768f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-6.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Image} from '@devup-ui/core'\n        <Image\n          className={styles.logo}\n          src=\"/next.svg\"\n          alt=\"Next.js logo\"\n          width={180}\n          height={38}\n        />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "152px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "720px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo || \"\"} a b`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-7.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-7.snap
new file mode 100644
index 00000000..4e74bf36
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-7.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className={variable} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable || \"\"} a b`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-8.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-8.snap
new file mode 100644
index 00000000..bf9ab2fe
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-8.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} \n      _hover={{\n        borderColor: true ? 'blue' : ``,\n      }}\n className={variable} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "border-color",
+                value: "",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable || \"\"} a ${true ? \"b\" : \"c\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-9.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-9.snap
new file mode 100644
index 00000000..cecab222
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name-9.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box, Button as DevupButton, Center, css } from '@devup-ui/core'\nimport clsx from 'clsx'\n\n<DevupButton\n      boxSizing=\"border-box\"\n      className={clsx(\n        variants[variant],\n        isError && variant === 'default' && errorClassNames,\n        className,\n      )}\n      typography={\n        isPrimary\n          ? {\n              sm: 'buttonS',\n              md: 'buttonM',\n            }[size]\n          : undefined\n      }\n      {...props}\n    />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "box-sizing",
+                value: "border-box",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "buttonM",
+        ),
+        Typography(
+            "buttonS",
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} a ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"}`} style={props?.style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name.snap
new file mode 100644
index 00000000..4dd1b7ea
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_class_name.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as C} from '@devup-ui/core'\n        <C padding={1} margin={2} className=\"exists class name\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"exists class name a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_default_import.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_default_import.snap
new file mode 100644
index 00000000..295dd277
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_default_import.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "-4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport B from \"@devup-ui/core\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_namespace_import.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_namespace_import.snap
new file mode 100644
index 00000000..99913f4e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_namespace_import.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import * as B from '@devup-ui/core'\n        <B.Flex padding={('-1')} className={B.css({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "-4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport * as B from \"@devup-ui/core\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_var_css.snap b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_var_css.snap
new file mode 100644
index 00000000..93bed233
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_style_props_with_var_css.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr\"import {css} from '@devup-ui/core'\n        const newCss=css;\n        <div className={newCss({\n            color: 'red'\n        })}/>\n        \",\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nconst newCss = css;\n<div className={\"a\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style-2.snap
new file mode 100644
index 00000000..723b759d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a} style={styles} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{\n\t...{ \"--b\": a },\n\t...styles\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style.snap b/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style.snap
new file mode 100644
index 00000000..fdf960f8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_variable_style_props_with_style.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={a} style={{ key:value }} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{\n\t...{ \"--b\": a },\n\t...{ key: value }\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-2.snap
new file mode 100644
index 00000000..83d27bb4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss()\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-3.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-3.snap
new file mode 100644
index 00000000..0110f7f1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss(1)\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css.snap
new file mode 100644
index 00000000..cceab708
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_global_css.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from \"@devup-ui/core\";\nglobalCss({\n    [1]: {\n        bg: \"red\"\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "1",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_keyframs.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_keyframs.snap
new file mode 100644
index 00000000..0b5ed74a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_keyframs.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { keyframes } from \"@devup-ui/core\";\nkeyframes({\n  from: { opacity: 0 },\n  [true]: { opacity: 0.5 },\n  to: { opacity: 1, color: dy }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "true": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: ".5",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n\"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props-2.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props-2.snap
new file mode 100644
index 00000000..d3c2e086
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[1,,null]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props.snap b/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props.snap
new file mode 100644
index 00000000..8f384142
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__extract_wrong_responsive_style_props.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[NaN,undefined,null]} margin={Infinity} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-2.snap b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-2.snap
new file mode 100644
index 00000000..48ac8858
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \".grid-container\": {\n        \"@supports\": {\n            \"(display: grid)\": { display: \"grid\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: Some(
+                            ".grid-container",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-3.snap b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-3.snap
new file mode 100644
index 00000000..c0d6b052
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \".card\": {\n        \"@container\": {\n            \"(min-width: 400px)\": { p: 4 }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: Some(
+                            ".card",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-4.snap b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-4.snap
new file mode 100644
index 00000000..a573ae14
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules-4.snap
@@ -0,0 +1,86 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    body: {\n        bg: \"gray\",\n        \"@media\": {\n            \"(min-width: 768px)\": { bg: \"white\" },\n            \"(prefers-color-scheme: dark)\": { bg: \"black\" }\n        }\n    },\n    \".container\": {\n        \"@supports\": {\n            \"(display: grid)\": { display: \"grid\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: Some(
+                            ".container",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_at_rules.snap b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules.snap
new file mode 100644
index 00000000..5fb3b628
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_at_rules.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    body: {\n        \"@media\": {\n            \"(min-width: 768px)\": { bg: \"white\" }\n        }\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(min-width: 768px)",
+                        selector: Some(
+                            "body",
+                        ),
+                    },
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization-2.snap b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization-2.snap
new file mode 100644
index 00000000..d14fa452
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    fontFaces: [\n        {\n            fontFamily: \"IconFont\",\n            src: \"/fonts/icons.woff2\"\n        }\n    ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "IconFont",
+                    "src": "url(/fonts/icons.woff2)",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization.snap b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization.snap
new file mode 100644
index 00000000..ab4ae1c3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_multi_value_optimization.snap
@@ -0,0 +1,20 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    fontFaces: [\n        {\n            fontFamily: \"'Custom Font', 'Fallback Font', sans-serif\",\n            src: \"local('Custom Font'), url('/fonts/custom.woff2') format('woff2')\",\n            fontWeight: \"400 700\",\n            fontStyle: \"normal\"\n        }\n    ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "\"Custom Font\",\"Fallback Font\",sans-serif",
+                    "font-style": "normal",
+                    "font-weight": "400 700",
+                    "src": "local('Custom Font'),url('/fonts/custom.woff2') format('woff2')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax-2.snap b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax-2.snap
new file mode 100644
index 00000000..784e5d92
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    fontFaces: [\n        {\n            fontFamily: \"MultiFont\",\n            src: \"url('/fonts/multi.woff2')\",\n            fontWeight: \"bold\",\n            fontDisplay: \"swap\"\n        },\n        {\n            fontFamily: \"AnotherFont\",\n            src: \"local('Arial')\"\n        }\n    ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-display": "swap",
+                    "font-family": "MultiFont",
+                    "font-weight": "bold",
+                    "src": "url('/fonts/multi.woff2')",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "AnotherFont",
+                    "src": "local('Arial')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax.snap b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax.snap
new file mode 100644
index 00000000..c503416f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_fontfaces_object_syntax.snap
@@ -0,0 +1,20 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    fontFaces: [\n        {\n            fontFamily: \"CustomFont\",\n            src: \"url('/fonts/custom.woff2')\",\n            fontWeight: \"400\",\n            fontStyle: \"normal\"\n        }\n    ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "CustomFont",
+                    "font-style": "normal",
+                    "font-weight": "400",
+                    "src": "url('/fonts/custom.woff2')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_function.snap b/libs/extractor/tests/snapshots/all_tests__global_css_function.snap
new file mode 100644
index 00000000..2e0e454d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_function.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    body: { margin: 0, padding: 0 }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_layer_property_extraction.snap b/libs/extractor/tests/snapshots/all_tests__global_css_layer_property_extraction.snap
new file mode 100644
index 00000000..f9d89677
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_layer_property_extraction.snap
@@ -0,0 +1,66 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    \".reset-box\": {\n        \"@layer\": \"reset\",\n        margin: 0,\n        padding: 0,\n        boxSizing: \"border-box\"\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "box-sizing",
+                value: "border-box",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".reset-box",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".reset-box",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".reset-box",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_no_args.snap b/libs/extractor/tests/snapshots/all_tests__global_css_no_args.snap
new file mode 100644
index 00000000..e39611b6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_no_args.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss()\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: ";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_font_faces.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_font_faces.snap
new file mode 100644
index 00000000..92cc8ff1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_font_faces.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    fontFaces: [\n        {\n            fontFamily: \"CustomFont\",\n            src: \"url('/fonts/custom.woff2')\",\n            fontWeight: \"400\"\n        }\n    ]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        FontFace(
+            ExtractFontFace {
+                file: "test.tsx",
+                properties: {
+                    "font-family": "CustomFont",
+                    "font-weight": "400",
+                    "src": "url('/fonts/custom.woff2')",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_imports.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_imports.snap
new file mode 100644
index 00000000..f38ac223
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_imports.snap
@@ -0,0 +1,15 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    imports: [\"https://fonts.googleapis.com/css?family=Roboto\"]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Import(
+            ExtractImport {
+                url: "https://fonts.googleapis.com/css?family=Roboto",
+                file: "test.tsx",
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_layer-2.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer-2.snap
new file mode 100644
index 00000000..e7545953
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer-2.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \"*\": {\n        \"@layer\": \"reset\",\n        boxSizing: \"border-box\"\n    },\n    body: {\n        \"@layer\": \"base\",\n        fontFamily: \"sans-serif\"\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "box-sizing",
+                value: "border-box",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "sans-serif",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "base",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_layer.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer.snap
new file mode 100644
index 00000000..1081553c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    \"*\": {\n        \"@layer\": \"reset\",\n        margin: 0,\n        padding: 0\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector-2.snap
new file mode 100644
index 00000000..ec8066d2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector-2.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    \".card\": {\n        \"@layer\": \"layout\",\n        display: \"flex\"\n    },\n    \".text\": {\n        \"@layer\": \"typography\",\n        fontSize: \"16px\"\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".card",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "layout",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".text",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "typography",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector.snap
new file mode 100644
index 00000000..e318213d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_layer_in_selector.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { globalCss } from '@devup-ui/core'\nglobalCss({\n    \".button\": {\n        \"@layer\": \"components\",\n        padding: \"8px\",\n        background: \"blue\"\n    }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".button",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "components",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".button",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "components",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__global_css_with_pseudo_selector.snap b/libs/extractor/tests/snapshots/all_tests__global_css_with_pseudo_selector.snap
new file mode 100644
index 00000000..83ee060a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__global_css_with_pseudo_selector.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {globalCss} from '@devup-ui/core'\nglobalCss({\n    _hover: { bg: \"red\" }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*:hover",
+                        "test.tsx",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__group_selector_props.snap b/libs/extractor/tests/snapshots/all_tests__group_selector_props.snap
new file mode 100644
index 00000000..7df64397
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__group_selector_props.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[role=group]:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__ignore_special_props-2.snap b/libs/extractor/tests/snapshots/all_tests__ignore_special_props-2.snap
new file mode 100644
index 00000000..89a8a097
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__ignore_special_props-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Input} from '@devup-ui/core'\n        <Input placeholder=\"a\" maxLength=\"b\" minLength=\"c\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<input placeholder=\"a\" maxLength=\"b\" minLength=\"c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__ignore_special_props.snap b/libs/extractor/tests/snapshots/all_tests__ignore_special_props.snap
new file mode 100644
index 00000000..05fc3c5f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__ignore_special_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div ref={ref} data-test={1} role={2} children={[]} onClick={() => {}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_custom_named_export.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_custom_named_export.snap
new file mode 100644
index 00000000..babaf83f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_custom_named_export.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import emotionStyled from '@emotion/styled'\nconst Button = emotionStyled.button({ bg: 'purple', p: 3 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "purple",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, ...rest }) => <button {...rest} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_emotion_styled.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_emotion_styled.snap
new file mode 100644
index 00000000..9defe287
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_emotion_styled.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import styled from '@emotion/styled'\nconst Button = styled.button({ bg: 'red', p: 4 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, ...rest }) => <button {...rest} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_multiple_aliases.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_multiple_aliases.snap
new file mode 100644
index 00000000..3d877d3b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_multiple_aliases.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import styled from '@emotion/styled'\nconst Button = styled.button({ bg: 'red' })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, ...rest }) => <button {...rest} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_renamed_import.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_renamed_import.snap
new file mode 100644
index 00000000..551ae664
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_renamed_import.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import myStyled from '@emotion/styled'\nconst Button = myStyled.button({ bg: 'green', p: 2 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, ...rest }) => <button {...rest} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_skip_when_package_not_in_code.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_skip_when_package_not_in_code.snap
new file mode 100644
index 00000000..58c49319
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_skip_when_package_not_in_code.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import React from 'react'\nconst element = <div>Hello</div>\"#, ExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "import React from 'react'\nconst element = <div>Hello</div>",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_styled_components.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_styled_components.snap
new file mode 100644
index 00000000..72d3e764
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_styled_components.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import styled from 'styled-components'\nconst Card = styled(\"div\")({ bg: 'blue', m: 2 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Card = ({ style, className, ...rest }) => <div {...rest} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_alias_vanilla_extract_named.snap b/libs/extractor/tests/snapshots/all_tests__import_alias_vanilla_extract_named.snap
new file mode 100644
index 00000000..509e33bc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_alias_vanilla_extract_named.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { css } from '@vanilla-extract/css'\nconst buttonStyle = css({ bg: 'red', p: 4 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: aliases\n},).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst buttonStyle = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_main_css.snap b/libs/extractor/tests/snapshots/all_tests__import_main_css.snap
new file mode 100644
index 00000000..417af53e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_main_css.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box padding={1} margin={2} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: true,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_wrong_component-2.snap b/libs/extractor/tests/snapshots/all_tests__import_wrong_component-2.snap
new file mode 100644
index 00000000..fb883a66
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_wrong_component-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W, useTheme} from '@devup-ui/core';\nuseTheme();\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "import { W, useTheme } from \"@devup-ui/core\";\nuseTheme();\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__import_wrong_component.snap b/libs/extractor/tests/snapshots/all_tests__import_wrong_component.snap
new file mode 100644
index 00000000..937108dd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__import_wrong_component.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {W} from '@devup-ui/core'\n        \"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "import { W } from \"@devup-ui/core\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__keyframes_function.snap b/libs/extractor/tests/snapshots/all_tests__keyframes_function.snap
new file mode 100644
index 00000000..e561d5ba
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__keyframes_function.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {keyframes} from '@devup-ui/core'\nconst spin = keyframes({\n    from: { transform: \"rotate(0deg)\" },\n    to: { transform: \"rotate(360deg)\" }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "transform",
+                            value: "rotate(0)",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "transform",
+                            value: "rotate(360deg)",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst spin = \"a-a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__keyframes_no_args.snap b/libs/extractor/tests/snapshots/all_tests__keyframes_no_args.snap
new file mode 100644
index 00000000..85f42db1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__keyframes_no_args.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {keyframes} from '@devup-ui/core'\nconst spin = keyframes()\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const spin = \"\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__maintain_value.snap b/libs/extractor/tests/snapshots/all_tests__maintain_value.snap
new file mode 100644
index 00000000..c2b6b418
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__maintain_value.snap
@@ -0,0 +1,111 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} lineHeight={1} tabSize={4} MozTabSize={4} WebkitLineClamp={4} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "-moz-tab-size",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "-webkit-line-clamp",
+                value: "4",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-weight",
+                value: "900",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "line-height",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "scale",
+                value: "2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "tab-size",
+                value: "4",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g h i j\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__mask_properties_with_korean.snap b/libs/extractor/tests/snapshots/all_tests__mask_properties_with_korean.snap
new file mode 100644
index 00000000..7a4e27d5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__mask_properties_with_korean.snap
@@ -0,0 +1,79 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr###\"import {Box} from '@devup-ui/core'\n        <Box\n          aspectRatio=\"5.49\"\n          bg=\"#752E2E\"\n          h=\"22px\"\n          maskImage=\"url('/icons/BI-타이틀.svg')\"\n          maskRepeat=\"no-repeat\"\n          maskSize=\"contain\"\n          w=\"121px\"\n        />\n        \"###,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "aspect-ratio",
+                value: "5.49",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "#752E2E",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "22px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-image",
+                value: "url('/icons/BI-타이틀.svg')",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-repeat",
+                value: "no-repeat",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "mask-size",
+                value: "contain",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "121px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__media_query_selectors-2.snap b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-2.snap
new file mode 100644
index 00000000..879b0572
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-2.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _screen={{ bg: \"blue\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__media_query_selectors-3.snap b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-3.snap
new file mode 100644
index 00000000..fb508851
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-3.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _speech={{ display: \"none\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "speech",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__media_query_selectors-4.snap b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-4.snap
new file mode 100644
index 00000000..45cf222b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-4.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _all={{ fontFamily: \"sans-serif\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "sans-serif",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "all",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__media_query_selectors-5.snap b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-5.snap
new file mode 100644
index 00000000..4977f7e9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__media_query_selectors-5.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box \n    bg=\"red\"\n    _print={{ bg: \"white\" }}\n    _screen={{ bg: \"blue\" }}\n/>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b a-c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__media_query_selectors.snap b/libs/extractor/tests/snapshots/all_tests__media_query_selectors.snap
new file mode 100644
index 00000000..1f2f60fe
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__media_query_selectors.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box _print={{ bg: \"white\", color: \"black\" }} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "print",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__member_expression_style.snap b/libs/extractor/tests/snapshots/all_tests__member_expression_style.snap
new file mode 100644
index 00000000..e2edf0ea
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__member_expression_style.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst colors = { primary: \"blue\", secondary: \"red\" };\nconst key = \"primary\";\n<Box bg={colors[key]} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "colors[key]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst colors = {\n\tprimary: \"blue\",\n\tsecondary: \"red\"\n};\nconst key = \"primary\";\n<div className=\"a-a\" style={{ \"--a\": colors[key] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__multiple_dynamic_values.snap b/libs/extractor/tests/snapshots/all_tests__multiple_dynamic_values.snap
new file mode 100644
index 00000000..31ede14c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__multiple_dynamic_values.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst color = \"red\";\nconst padding = 10;\nconst margin = 5;\n<Box bg={color} p={padding} m={margin} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "color",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "margin",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "padding",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst color = \"red\";\nconst padding = 10;\nconst margin = 5;\n<div className=\"a-a a-b a-c\" style={{\n\t\"--a\": color,\n\t\"--b\": padding,\n\t\"--c\": margin\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__namespace_import_css.snap b/libs/extractor/tests/snapshots/all_tests__namespace_import_css.snap
new file mode 100644
index 00000000..d4b1b588
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__namespace_import_css.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import * as DevUI from '@devup-ui/core'\nconst className = DevUI.css({ bg: \"red\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nimport * as DevUI from \"@devup-ui/core\";\nconst className = \"a-a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__namespace_import_usage.snap b/libs/extractor/tests/snapshots/all_tests__namespace_import_usage.snap
new file mode 100644
index 00000000..91bc6fa0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__namespace_import_usage.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import * as DevUI from '@devup-ui/core'\n<DevUI.Box bg=\"red\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nimport * as DevUI from \"@devup-ui/core\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-2.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-2.snap
new file mode 100644
index 00000000..3957e052
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "z-index",
+                level: 0,
+                identifier: "-a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": -a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-3.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-3.snap
new file mode 100644
index 00000000..55729abb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-3.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1+a)} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "z-index",
+                level: 0,
+                identifier: "-(1+a)",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": -(1+a) }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-4.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-4.snap
new file mode 100644
index 00000000..cde9edf0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1*a} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "z-index",
+                level: 0,
+                identifier: "-1*a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": -1*a }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-5.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-5.snap
new file mode 100644
index 00000000..bc73dd1a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-6.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-6.snap
new file mode 100644
index 00000000..1d8fe050
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-6.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={(-1)} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props-7.snap b/libs/extractor/tests/snapshots/all_tests__negative_props-7.snap
new file mode 100644
index 00000000..f8418fb0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props-7.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={[(-1),-2, -(3)]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-2",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-3",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__negative_props.snap b/libs/extractor/tests/snapshots/all_tests__negative_props.snap
new file mode 100644
index 00000000..0aab69b4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__negative_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "z-index",
+                value: "-1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__nested_conditional.snap b/libs/extractor/tests/snapshots/all_tests__nested_conditional.snap
new file mode 100644
index 00000000..c8a050b8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__nested_conditional.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst a = true;\nconst b = false;\n<Box bg={a ? (b ? \"red\" : \"blue\") : \"green\"} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst a = true;\nconst b = false;\n<div className={a ? b ? \"a-a\" : \"a-b\" : \"a-c\"} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__nested_theme_props.snap b/libs/extractor/tests/snapshots/all_tests__nested_theme_props.snap
new file mode 100644
index 00000000..4fa2dcf7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__nested_theme_props.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{\n      selectors: {\n        \"&:hover\": {\n          color: \"red\",\n        }\n      },\n      _active: {\n        color: \"blue\",\n        _placeholder: {\n          color: \"green\",\n        },\n      },\n    }} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:active::placeholder",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-2.snap b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-2.snap
new file mode 100644
index 00000000..24e95852
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-2.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200  /  400  \"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "aspect-ratio",
+                value: "1/2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-3.snap b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-3.snap
new file mode 100644
index 00000000..e03c3798
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio-3.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"   200.2  /  400.2  \"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "aspect-ratio",
+                value: "200.2  /  400.2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio.snap b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio.snap
new file mode 100644
index 00000000..6931ca1e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_aspect_ratio.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex aspectRatio={\"200/400\"} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "aspect-ratio",
+                value: "1/2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-2.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-2.snap
new file mode 100644
index 00000000..7367a8fa
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scale(0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-3.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-3.snap
new file mode 100644
index 00000000..52e9a11e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scaleX(0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scaleX(0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-4.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-4.snap
new file mode 100644
index 00000000..8d55ddeb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scaleY(0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scaleY(0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-5.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-5.snap
new file mode 100644
index 00000000..fa46d15d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scaleZ(0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scaleZ(0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-6.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-6.snap
new file mode 100644
index 00000000..974dfdcc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-6.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scale(0deg, 0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(0,0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func-7.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func-7.snap
new file mode 100644
index 00000000..a87857c0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func-7.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scaleX(0deg) scaleY(0deg) scaleZ(0deg)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scaleX(0) scaleY(0) scaleZ(0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_func.snap b/libs/extractor/tests/snapshots/all_tests__optimize_func.snap
new file mode 100644
index 00000000..e1cc3165
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_func.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box transform=\"scale(0.95)\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.95)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__optimize_multi_css_value.snap b/libs/extractor/tests/snapshots/all_tests__optimize_multi_css_value.snap
new file mode 100644
index 00000000..2dd8bd96
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__optimize_multi_css_value.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box fontFamily=\"Roboto, Arial, sans-serif\" />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "Roboto,Arial,sans-serif",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select-2.snap
new file mode 100644
index 00000000..a5a03aca
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select-2.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "24px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b c d\",\n\t\"1\": \"e f g\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select.snap
new file mode 100644
index 00000000..e98474ba
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_responsive_select.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "24px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b c d\",\n\t\"1\": \"e f g\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-2.snap
new file mode 100644
index 00000000..f18b7507
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-2.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][a]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b\",\n\t\"1\": \"c\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-3.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-3.snap
new file mode 100644
index 00000000..49afbad7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-3.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[\"$red\", \"$blue\"][idx]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b\",\n\t\"1\": \"c\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-4.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-4.snap
new file mode 100644
index 00000000..ae5c11bf
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-4.snap
@@ -0,0 +1,40 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={[`$red`, `${variable}`][idx]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${variable}`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b\",\n\t\"1\": \"c\"\n}[idx] || \"\"}`} style={{ \"--d\": `${variable}` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-5.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-5.snap
new file mode 100644
index 00000000..0ac276db
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-5.snap
@@ -0,0 +1,75 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "align-items",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$appBg",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$solutionBg",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$webBg",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "justify-content",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a b c ${{\n\t\"0\": \"d\",\n\t\"1\": \"e\",\n\t\"2\": \"f\"\n}[categoryId - 1]}`}>\n          </div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-6.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-6.snap
new file mode 100644
index 00000000..b36ee6bf
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-6.snap
@@ -0,0 +1,30 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][100]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "opacity",
+                level: 0,
+                identifier: "some[100]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" style={{ \"--c\": some[100] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-7.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-7.snap
new file mode 100644
index 00000000..6f84cf8c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select-7.snap
@@ -0,0 +1,50 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5, ...some][a]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "opacity",
+                level: 0,
+                identifier: "some[a]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b\",\n\t\"1\": \"c\",\n\t\"2\": \"d\"\n}[a] || \"\"}`} style={{ \"--e\": some[a] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_array_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select.snap
new file mode 100644
index 00000000..0671d7a9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_array_select.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][0]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_hybrid_responsive_select.snap
new file mode 100644
index 00000000..4e675815
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_hybrid_responsive_select.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "8px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b d e\",\n\t\"1\": \"b g i\"\n}[idx] || \"\"}`} style={{\n\t\"--c\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--f\": c,\n\t\"--h\": e\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select-2.snap
new file mode 100644
index 00000000..bfa21a5d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select-2.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "24px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"a\": \"b c d\",\n\t\"b\": \"e f g\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select.snap
new file mode 100644
index 00000000..3e69d50d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_responsive_select.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "24px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b c d\",\n\t\"1\": \"e f g\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-2.snap
new file mode 100644
index 00000000..709983e8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-2.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-3.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-3.snap
new file mode 100644
index 00000000..421638cd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-3.snap
@@ -0,0 +1,50 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "opacity",
+                level: 0,
+                identifier: "any[`some`]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a b ${{\n\t\"a\": \"d\",\n\t\"b\": \"e\"\n}[\"some\"]}`} style={{ \"--c\": any[`some`] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-4.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-4.snap
new file mode 100644
index 00000000..55f7e566
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select-4.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex bg={{a:\"$red\", b:\"$blue\"}[idx]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"a\": \"b\",\n\t\"b\": \"c\"\n}[idx] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_object_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select.snap
new file mode 100644
index 00000000..21e7a96b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_object_select.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select-2.snap
new file mode 100644
index 00000000..90d6ec28
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select-2.snap
@@ -0,0 +1,48 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={[, [d, e, f]][idx]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{ \"1\": \"b d f\" }[idx] || \"\"}`} style={{\n\t\"--c\": d,\n\t\"--e\": e,\n\t\"--g\": f\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select.snap
new file mode 100644
index 00000000..3b73dfb2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_array_responsive_select.snap
@@ -0,0 +1,75 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "b",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b d f\",\n\t\"1\": \"b d f\"\n}[idx] || \"\"}`} style={{\n\t\"--c\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--e\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--g\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_responsive_select.snap
new file mode 100644
index 00000000..cf9df4be
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_responsive_select.snap
@@ -0,0 +1,75 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "a",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 0,
+                identifier: "d",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "b",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 1,
+                identifier: "e",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "c",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "gap",
+                level: 2,
+                identifier: "f",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"0\": \"b d f\",\n\t\"1\": \"b d f\"\n}[idx] || \"\"}`} style={{\n\t\"--c\": {\n\t\t0: a,\n\t\t1: d\n\t}[idx],\n\t\"--e\": {\n\t\t0: b,\n\t\t1: e\n\t}[idx],\n\t\"--g\": {\n\t\t0: c,\n\t\t1: f\n\t}[idx]\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select-2.snap
new file mode 100644
index 00000000..a92cc3b4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box bg={SOME_VAR[idx]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "SOME_VAR[idx]",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": SOME_VAR[idx] }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select.snap
new file mode 100644
index 00000000..5876b5b8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_variable_object_select.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: "1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${{\n\t\"a\": \"b\",\n\t\"b\": \"c\"\n}[a] || \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_direct_wrong.snap b/libs/extractor/tests/snapshots/all_tests__props_direct_wrong.snap
new file mode 100644
index 00000000..c602db09
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_direct_wrong.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n;<Flex gap={true[1]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_multi_expression.snap b/libs/extractor/tests/snapshots/all_tests__props_multi_expression.snap
new file mode 100644
index 00000000..0f0353ef
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_multi_expression.snap
@@ -0,0 +1,149 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {\n  Box,\n  Button as DevupButton,\n  Center,\n  css,\n} from '@devup-ui/core'\n\n<DevupButton\n    border={\n    {\n        primary: 'none',\n        default: '1px solid var(--border, #E4E4E4)',\n    }[variant]\n    }\n    className={className}\n    px={\n    {\n        false: { sm: '12px', md: '16px', lg: '20px' }[size],\n        true: { sm: '24px', md: '28px', lg: '32px' }[size],\n    }[(!!icon).toString()]\n    }\n/>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "border",
+                value: "1px solid var(--border,#E4E4E4)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border",
+                value: "none",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "20px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "24px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "28px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-left",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "12px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "20px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "24px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "28px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<button className={`${className || \"\"} ${{\n\t\"default\": \"a\",\n\t\"primary\": \"b\"\n}[variant] || \"\"} ${{\n\t\"false\": {\n\t\t\"lg\": \"c\",\n\t\t\"md\": \"d\",\n\t\t\"sm\": \"e\"\n\t}[size] || \"\",\n\t\"true\": {\n\t\t\"lg\": \"f\",\n\t\t\"md\": \"g\",\n\t\t\"sm\": \"h\"\n\t}[size] || \"\"\n}[(!!icon).toString()]} ${{\n\t\"false\": {\n\t\t\"lg\": \"i\",\n\t\t\"md\": \"j\",\n\t\t\"sm\": \"k\"\n\t}[size] || \"\",\n\t\"true\": {\n\t\t\"lg\": \"l\",\n\t\t\"md\": \"m\",\n\t\t\"sm\": \"n\"\n\t}[size] || \"\"\n}[(!!icon).toString()]}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_prop.snap b/libs/extractor/tests/snapshots/all_tests__props_prop.snap
new file mode 100644
index 00000000..44cf4f0a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_prop.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst extraProps = { onClick: () => {} };\n<Box props={extraProps} bg=\"red\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst extraProps = { onClick: () => {} };\n<div className=\"a-a\" {...extraProps} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-2.snap
new file mode 100644
index 00000000..bfb75fa3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-2.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][-10]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-3.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-3.snap
new file mode 100644
index 00000000..8c99221f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-3.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][+10]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-4.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-4.snap
new file mode 100644
index 00000000..55a48e49
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-4.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[1, 0.5][100]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-5.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-5.snap
new file mode 100644
index 00000000..dd61a847
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box padding={[1,,null][1]} />;\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select.snap
new file mode 100644
index 00000000..2d483277
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_array_select.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={[][0]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-2.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-2.snap
new file mode 100644
index 00000000..f945d968
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-2.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-3.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-3.snap
new file mode 100644
index 00000000..9b56e25c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-3.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-4.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-4.snap
new file mode 100644
index 00000000..4ee62c77
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select-4.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select.snap b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select.snap
new file mode 100644
index 00000000..265df176
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__props_wrong_direct_object_select.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box opacity={{}[1]} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__remove_semicolon-2.snap b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-2.snap
new file mode 100644
index 00000000..914992fb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg=\"blue;;\" />\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__remove_semicolon-3.snap b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-3.snap
new file mode 100644
index 00000000..13a5e5e4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${\"green;\"}`} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__remove_semicolon-4.snap b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-4.snap
new file mode 100644
index 00000000..e849bc52
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${color};`} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${color}`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": `${color}` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__remove_semicolon-5.snap b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-5.snap
new file mode 100644
index 00000000..14626b9e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__remove_semicolon-5.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg={`${color}` + \";\"} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "`${color}`+``",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{ \"--b\": `${color}`+`` }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__remove_semicolon.snap b/libs/extractor/tests/snapshots/all_tests__remove_semicolon.snap
new file mode 100644
index 00000000..0a479b49
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__remove_semicolon.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box bg=\"red;\" />\n\"#, ExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__responsive_array_styles.snap b/libs/extractor/tests/snapshots/all_tests__responsive_array_styles.snap
new file mode 100644
index 00000000..8f38d94c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__responsive_array_styles.snap
@@ -0,0 +1,69 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box p={[1, 2, 3, 4]} m={[0, 1]} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "12px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a a-b a-c a-d a-e a-f\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__rest_props-2.snap b/libs/extractor/tests/snapshots/all_tests__rest_props-2.snap
new file mode 100644
index 00000000..c98a07be
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__rest_props-2.snap
@@ -0,0 +1,61 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import { VStack } from '@devup-ui/core'\n\nexport default function Card({\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <VStack\n      _active={{\n        boxShadow: 'none',\n        transform: 'scale(0.95)',\n      }}\n      className={className}\n      {...props}\n    >\n      {children}\n    </VStack>\n  )\n}\n\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.95)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className, ...props }) {\n\treturn <div {...props} className={`${className || \"\"} a b c d`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__rest_props.snap b/libs/extractor/tests/snapshots/all_tests__rest_props.snap
new file mode 100644
index 00000000..6f780389
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__rest_props.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`a b ${props?.className || \"\"}`} style={props?.style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__selector_refs_with_global_theme.snap b/libs/extractor/tests/snapshots/all_tests__selector_refs_with_global_theme.snap
new file mode 100644
index 00000000..fef231fb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__selector_refs_with_global_theme.snap
@@ -0,0 +1,67 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-refs.css.ts\",\nr#\"import { style, createGlobalTheme } from '@devup-ui/react'\nexport const vars = createGlobalTheme(':root', {\n  colors: { primary: 'blue', secondary: 'green' }\n})\nexport const parent = style({ background: 'white' })\nexport const child = style({\n  selectors: {\n    [`${parent}:hover &`]: { color: 'red' }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-primary-global_theme_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "theme-refs.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-secondary-global_theme_0-1",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "theme-refs.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b\";\nexport const parent = \"a\";\n;\nexport const vars = { \"colors\": {\n\t\"primary\": \"var(--colors-primary-global_theme_0-0)\",\n\t\"secondary\": \"var(--colors-secondary-global_theme_0-1)\"\n} };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__spread_props.snap b/libs/extractor/tests/snapshots/all_tests__spread_props.snap
new file mode 100644
index 00000000..d9f877d6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__spread_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst Component = (props) => {\n    return <Box {...props} bg=\"red\" />;\n}\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst Component = (props) => {\n\treturn <div {...props} className={`a-a ${props?.className || \"\"}`} style={props?.style} />;\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-2.snap b/libs/extractor/tests/snapshots/all_tests__style_order-2.snap
new file mode 100644
index 00000000..42ade674
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-2.snap
@@ -0,0 +1,76 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return  r(\"div\", { children: [\n     e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\",\n        styleOrder: 10\n      }\n    ),\n     e(t, { typography: \"header\", children: \"typo\", styleOrder:20 }),\n     e(i, { as: \"section\", mt: 2, children: \"section\",styleOrder:30 })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    10,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    10,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    10,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    30,
+                ),
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nfunction c() {\n\treturn r(\"div\", { children: [\n\t\te(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexport { c as Lib };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-3.snap b/libs/extractor/tests/snapshots/all_tests__style_order-3.snap
new file mode 100644
index 00000000..55d6afbc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-3.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\", styleOrder:100})} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    100,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-4.snap b/libs/extractor/tests/snapshots/all_tests__style_order-4.snap
new file mode 100644
index 00000000..364552ea
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={20} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-5.snap b/libs/extractor/tests/snapshots/all_tests__style_order-5.snap
new file mode 100644
index 00000000..eea8685e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-5.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\",styleOrder:30})} styleOrder={20} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    30,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-6.snap b/libs/extractor/tests/snapshots/all_tests__style_order-6.snap
new file mode 100644
index 00000000..75604846
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-6.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    100,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-7.snap b/libs/extractor/tests/snapshots/all_tests__style_order-7.snap
new file mode 100644
index 00000000..d108f4ef
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-7.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    17,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    3,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div aria-disabled={false} className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order-8.snap b/libs/extractor/tests/snapshots/all_tests__style_order-8.snap
new file mode 100644
index 00000000..518ef694
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order-8.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box, css} from '@devup-ui/core'\n    <Box className={css({color:\"white\"})} styleOrder={} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order.snap b/libs/extractor/tests/snapshots/all_tests__style_order.snap
new file mode 100644
index 00000000..963950c6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order.snap
@@ -0,0 +1,69 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order2-2.snap b/libs/extractor/tests/snapshots/all_tests__style_order2-2.snap
new file mode 100644
index 00000000..0af21770
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order2-2.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    100,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order2-3.snap b/libs/extractor/tests/snapshots/all_tests__style_order2-3.snap
new file mode 100644
index 00000000..3f9c71a3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order2-3.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    100,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order2.snap b/libs/extractor/tests/snapshots/all_tests__style_order2.snap
new file mode 100644
index 00000000..8ecd76bc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order2.snap
@@ -0,0 +1,81 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    100,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "*[aria-diabled='true'] &",
+                    ),
+                ),
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    20,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_order_prop.snap b/libs/extractor/tests/snapshots/all_tests__style_order_prop.snap
new file mode 100644
index 00000000..c0d33b2e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_order_prop.snap
@@ -0,0 +1,21 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box styleOrder={1} bg=\"red\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    1,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<div className=\"a-a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_prop_merge.snap b/libs/extractor/tests/snapshots/all_tests__style_prop_merge.snap
new file mode 100644
index 00000000..4b8021c3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_prop_merge.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst color = \"red\";\n<Box style={{ padding: 10 }} bg={color} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "color",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst color = \"red\";\n<div className=\"a-a\" style={{\n\t...{ \"--a\": color },\n\t...{ padding: 10 }\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-10.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-10.snap
new file mode 100644
index 00000000..8ee8c48f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-10.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={styleVars} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={styleVars} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-11.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-11.snap
new file mode 100644
index 00000000..e7d247ff
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-11.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{...styleVars}} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ ...styleVars }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-2.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-2.snap
new file mode 100644
index 00000000..26c3490f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ \"--d\": \"red\" }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-3.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-3.snap
new file mode 100644
index 00000000..f037c25c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            \"--d\": \"red\",\n            \"e\": \"blue\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{\n\t\"--d\": \"red\",\n\t\"--e\": \"blue\"\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-4.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-4.snap
new file mode 100644
index 00000000..c7e7be65
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ \"--variable\": variable }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-5.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-5.snap
new file mode 100644
index 00000000..95c2e14c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ \"--variable\": true ? \"red\" : \"blue\" }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-6.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-6.snap
new file mode 100644
index 00000000..f25039ab
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-6.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{\n\t...{ \"--variable\": true ? \"red\" : \"blue\" },\n\t...{ \"--d\": \"red\" }\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-7.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-7.snap
new file mode 100644
index 00000000..a918ac0c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-7.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box bg={color} style={{ \"--d\": \"red\" }} styleVars={{\n            variable: true ? \"red\" : \"blue\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "color",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" style={{\n\t...{ \"--b\": color },\n\t...{ \"--variable\": true ? \"red\" : \"blue\" },\n\t...{ \"--d\": \"red\" }\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-8.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-8.snap
new file mode 100644
index 00000000..d1a4fb48
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-8.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            [\"hello\"]: \"red\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ [\"--hello\"]: \"red\" }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables-9.snap b/libs/extractor/tests/snapshots/all_tests__style_variables-9.snap
new file mode 100644
index 00000000..b46d40dc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables-9.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box styleVars={{\n            [true]: \"red\",\n            [1]: \"blue\",\n            [variable]: \"green\",\n            [2+2]: \"yellow\"\n        }} />\n                \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{\n\t[\"--true\"]: \"red\",\n\t[\"--1\"]: \"blue\",\n\t[`--${variable}`]: \"green\",\n\t[`--${2 + 2}`]: \"yellow\"\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables.snap b/libs/extractor/tests/snapshots/all_tests__style_variables.snap
new file mode 100644
index 00000000..f59a8c43
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={{\n        c: \"red\"\n    }} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div style={{ \"--c\": \"red\" }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_variables_mjs.snap b/libs/extractor/tests/snapshots/all_tests__style_variables_mjs.snap
new file mode 100644
index 00000000..789f1519
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_variables_mjs.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { styleVars: { c: \"yellow\" } })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "import { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", { style: { \"--c\": \"yellow\" } });\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__style_vars_prop.snap b/libs/extractor/tests/snapshots/all_tests__style_vars_prop.snap
new file mode 100644
index 00000000..22bfc42b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__style_vars_prop.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\nconst dynamicColor = \"blue\";\n<Box styleVars={{ color: dynamicColor }} bg=\"var(--color)\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "var(--color)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst dynamicColor = \"blue\";\n<div className=\"a-a\" style={{ \"--color\": dynamicColor }} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-10.snap b/libs/extractor/tests/snapshots/all_tests__styled-10.snap
new file mode 100644
index 00000000..7ace3caa
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-10.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledComponent = styled(CustomComponent)`\n          background: red;\n          color: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <CustomComponent {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-11.snap b/libs/extractor/tests/snapshots/all_tests__styled-11.snap
new file mode 100644
index 00000000..40cd9c85
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-11.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.aside<{ test: string }>({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <aside {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-2.snap b/libs/extractor/tests/snapshots/all_tests__styled-2.snap
new file mode 100644
index 00000000..b578980c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"article\")`\n          background: red;\n          color: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <article {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-3.snap b/libs/extractor/tests/snapshots/all_tests__styled-3.snap
new file mode 100644
index 00000000..84d813b3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"footer\")({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <footer {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-4.snap b/libs/extractor/tests/snapshots/all_tests__styled-4.snap
new file mode 100644
index 00000000..e3b12e80
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.aside({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <aside {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-5.snap b/libs/extractor/tests/snapshots/all_tests__styled-5.snap
new file mode 100644
index 00000000..f33b04a2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-5.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, Text} from '@devup-ui/core'\n        const StyledComponent = styled(Text)({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <span {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-6.snap b/libs/extractor/tests/snapshots/all_tests__styled-6.snap
new file mode 100644
index 00000000..57aa28e7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-6.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, Text} from '@devup-ui/core'\n        const StyledComponent = styled(Text)`\n          background: red;\n          color: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <span {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-7.snap b/libs/extractor/tests/snapshots/all_tests__styled-7.snap
new file mode 100644
index 00000000..8c8f0967
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-7.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, VStack} from '@devup-ui/core'\n        const StyledComponent = styled(VStack)({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <div {...rest} className={[\"a b a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-8.snap b/libs/extractor/tests/snapshots/all_tests__styled-8.snap
new file mode 100644
index 00000000..44153367
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-8.snap
@@ -0,0 +1,53 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, VStack} from '@devup-ui/core'\n        const StyledComponent = styled(VStack)`\n          background: red;\n          color: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <div {...rest} className={[\"a b a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled-9.snap b/libs/extractor/tests/snapshots/all_tests__styled-9.snap
new file mode 100644
index 00000000..03431464
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled-9.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledComponent = styled(CustomComponent)({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <CustomComponent {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled.snap b/libs/extractor/tests/snapshots/all_tests__styled.snap
new file mode 100644
index 00000000..435f0f55
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.section`\n          background: red;\n          color: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <section {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_spread.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_spread.snap
new file mode 100644
index 00000000..31e2f6df
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_spread.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\nconst baseStyles = { bg: \"red\" };\nconst StyledDiv = styled.div({ ...baseStyles })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const baseStyles = { bg: \"red\" };\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={className} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable-2.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-2.snap
new file mode 100644
index 00000000..68486f7d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")({ bg: \"$text\", fontSize: 16 })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable-3.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-3.snap
new file mode 100644
index 00000000..e68f9e6a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-3.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.div`\n          background: var(--text);\n          color: var(--primary);\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "var(--text)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--primary)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable-4.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-4.snap
new file mode 100644
index 00000000..3cbba4c3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-4.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, Box} from '@devup-ui/core'\n        const StyledComponent = styled(Box)({ bg: \"$text\", _hover: { bg: \"$primary\" } })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$primary",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable-5.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-5.snap
new file mode 100644
index 00000000..814ca258
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable-5.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")`\n          background-color: var(--text);\n          padding: 16px;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "var(--text)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable.snap
new file mode 100644
index 00000000..a0dd27d7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.div({ bg: \"$text\", color: \"$primary\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$primary",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-2.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-2.snap
new file mode 100644
index 00000000..37e34d89
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-2.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const primaryColor = 'blue';\n        const padding = '16px';\n        const StyledDiv = styled(\"div\")`\n          color: ${primaryColor};\n          padding: ${padding};\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "primaryColor",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "padding",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": primaryColor\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-3.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-3.snap
new file mode 100644
index 00000000..415562ad
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-3.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const primaryColor = 'blue';\n        const padding = '16px';\n        const StyledDiv = styled(\"div\")({ bg: primaryColor, padding })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "primaryColor",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "padding",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-4.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-4.snap
new file mode 100644
index 00000000..dc8059cd
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-4.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const primaryColor = 'blue';\n        const padding = '16px';\n        const StyledDiv = styled.div({ bg: primaryColor, padding })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "primaryColor",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "padding",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst primaryColor = \"blue\";\nconst padding = \"16px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-5.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-5.snap
new file mode 100644
index 00000000..0d6482c2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-5.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")`\n          color: ${obj.color};\n          padding: ${func()};\n          background: ${obj.func()};\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "obj.func()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "obj.color",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "func()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": func(),\n\t\t\"--b\": obj.color,\n\t\t\"--c\": obj.func()\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-6.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-6.snap
new file mode 100644
index 00000000..465bc35c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-6.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")({ bg: obj.bg, padding: func(), color: obj.color() })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "obj.bg",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "obj.color()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "func()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-7.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-7.snap
new file mode 100644
index 00000000..29bcd1da
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion-7.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.div({ bg: obj.bg, padding: func(), color: obj.color() })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "obj.bg",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "obj.color()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "func()",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion.snap
new file mode 100644
index 00000000..86453083
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const color = 'red';\n        const StyledDiv = styled.div`\n          color: ${color};\n          background: blue;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "color",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst color = \"red\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": color },\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-2.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-2.snap
new file mode 100644
index 00000000..1bd94f50
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-2.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled, Box} from '@devup-ui/core'\n        const fontSize = '18px';\n        const StyledComponent = styled(Box)`\n          font-size: ${fontSize};\n          color: ${props => props.color || 'black'};\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "(props=>props.color||`black`)(rest)",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "font-size",
+                level: 0,
+                identifier: "fontSize",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst fontSize = \"18px\";\nconst StyledComponent = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": fontSize,\n\t\t\"--b\": (props=>props.color||`black`)(rest)\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-3.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-3.snap
new file mode 100644
index 00000000..91ae0ed2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-3.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const margin = '10px';\n        const padding = '20px';\n        const StyledDiv = styled.div`\n          margin: ${margin};\n          padding: ${padding};\n          background: ${props => props.bg || 'white'};\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "(props=>props.bg||`white`)(rest)",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "margin",
+                level: 0,
+                identifier: "margin",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "padding",
+                level: 0,
+                identifier: "padding",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst margin = \"10px\";\nconst padding = \"20px\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": margin,\n\t\t\"--c\": (props=>props.bg||`white`)(rest)\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-4.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-4.snap
new file mode 100644
index 00000000..d5d50be2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props-4.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const isActive = true;\n        const StyledDiv = styled.div`\n          color: ${isActive ? 'red' : 'blue'};\n          opacity: ${isActive ? 1 : 0.5};\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "color",
+                level: 0,
+                identifier: "isActive?`red`:`blue`",
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "opacity",
+                level: 0,
+                identifier: "isActive?1:.5",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst isActive = true;\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": isActive?1:.5,\n\t\t\"--b\": isActive?`red`:`blue`\n\t},\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props.snap b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props.snap
new file mode 100644
index 00000000..4d5885b8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__styled_with_variable_like_emotion_props.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.div`\n          background: ${props => props.bg};\n          color: red;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "(props=>props.bg)(rest)",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <div {...rest} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": (props=>props.bg)(rest) },\n\t...style\n}} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-2.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-2.snap
new file mode 100644
index 00000000..12695a47
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-2.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const {jsx:e1, jsxs:e2}=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e2(\"div\",{children:[e1(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e1(r.Text,{typography:\"header\",children:\"typo\"}),e1(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst { jsx: e1, jsxs: e2 } = require(\"react/jsx-runtime\"), r = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e2(\"div\", { children: [\n\t\te1(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te1(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te1(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-3.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-3.snap
new file mode 100644
index 00000000..c91581b5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-3.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), r = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-4.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-4.snap
new file mode 100644
index 00000000..b0da7f1e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-4.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:`header`,children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), r = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-5.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-5.snap
new file mode 100644
index 00000000..2c757d6c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-5.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),{Box,Text,Flex}=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(Text,{typography:`header`,children:\"typo\"}),e.jsx(Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), { Box, Text, Flex } = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-6.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-6.snap
new file mode 100644
index 00000000..ad985b2b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-6.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),{Box,Text,Flex}=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(Box,{[\"_hover\"]:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(Text,{typography:`header`,children:\"typo\"}),e.jsx(Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), { Box, Text, Flex } = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-7.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-7.snap
new file mode 100644
index 00000000..e57bec88
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs-7.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),{Box,Text,Flex}=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(Box,{[\"_hover\"]:{bg:\"blue\"},bg:\"$text\",[variable]:\"red\",children:\"hello\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), { Box, Text, Flex } = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [e.jsx(\"div\", {\n\t\t[variable]: \"red\",\n\t\tchildren: \"hello\",\n\t\tclassName: \"a b\"\n\t})] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs.snap
new file mode 100644
index 00000000..0b326a71
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_cjs.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"react/jsx-runtime\"),r=require(\"@devup-ui/react\");function t(){return e.jsxs(\"div\",{children:[e.jsx(r.Box,{_hover:{bg:\"blue\"},bg:\"$text\",color:\"red\",children:\"hello\"}),e.jsx(r.Text,{typography:\"header\",children:\"typo\"}),e.jsx(r.Flex,{as:\"section\",mt:2,children:\"section\"})]})}exports.Lib=t;\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "\"use strict\";\nimport \"@devup-ui/react/devup-ui.css\";\nObject.defineProperty(exports, Symbol.toStringTag, { value: \"Module\" });\nconst e = require(\"react/jsx-runtime\"), r = require(\"@devup-ui/react\");\nfunction t() {\n\treturn e.jsxs(\"div\", { children: [\n\t\te.jsx(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\te.jsx(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\te.jsx(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexports.Lib = t;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-2.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-2.snap
new file mode 100644
index 00000000..3f1de874
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-2.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nfunction c() {\n\treturn /* @__PURE__ */ r(\"div\", { children: [\n\t\t/* @__PURE__ */ e(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\t/* @__PURE__ */ e(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\t/* @__PURE__ */ e(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexport { c as Lib };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-3.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-3.snap
new file mode 100644
index 00000000..571226c1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: \"red\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", { className: \"a a\" });\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-4.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-4.snap
new file mode 100644
index 00000000..4b44530e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" } })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "variable",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\tclassName: \"a a\",\n\tstyle: {\n\t\t...{ \"--b\": variable },\n\t\t...{ color: \"blue\" }\n\t}\n});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-5.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-5.snap
new file mode 100644
index 00000000..d2e6914a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-5.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\nimport { Box as o } from \"@devup-ui/core\";\ne(o, { className: \"a\", bg: variable, style: { color: \"blue\" }, ...props })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "variable",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: \"a a\",\n\tstyle: {\n\t\t...{ \"--b\": variable },\n\t\t...{ color: \"blue\" }\n\t}\n});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-6.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-6.snap
new file mode 100644
index 00000000..3e7d4b6b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-6.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\n        import { Box as o } from \"@devup-ui/core\";\n        e(o, { as: b ? \"div\" : \"section\", className: \"a\", bg: variable, style: { color: \"blue\" }, props: { animate: { duration: 1 } } })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "variable",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(b ? \"div\" : \"section\", {\n\tclassName: \"a a\",\n\tstyle: {\n\t\t...{ \"--b\": variable },\n\t\t...{ color: \"blue\" }\n\t},\n\t...{ animate: { duration: 1 } }\n});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-7.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-7.snap
new file mode 100644
index 00000000..e15736d3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-7.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\n        import { Box as o } from \"@devup-ui/core\";\n        e(o, { as: Variable, className: \"a\", bg: variable, style: { color: \"blue\" }, props: { animate: { duration: 1 } } })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "variable",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(Variable, {\n\tclassName: \"a a\",\n\tstyle: {\n\t\t...{ \"--b\": variable },\n\t\t...{ color: \"blue\" }\n\t},\n\t...{ animate: { duration: 1 } }\n});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-8.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-8.snap
new file mode 100644
index 00000000..7a2284ce
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs-8.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import { jsx as e } from \"react/jsx-runtime\";\n        import { Box as o } from \"@devup-ui/core\";\n        e(o, { as: b ? null : undefined, className: \"a\", bg: variable, style: { color: \"blue\" }, props: { animate: { duration: 1 } } })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "background",
+                level: 0,
+                identifier: "variable",
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(b ? null : undefined, {\n\tclassName: \"a a\",\n\tstyle: {\n\t\t...{ \"--b\": variable },\n\t\t...{ color: \"blue\" }\n\t},\n\t...{ animate: { duration: 1 } }\n});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs.snap b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs.snap
new file mode 100644
index 00000000..0ae66efa
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__support_transpile_mjs.snap
@@ -0,0 +1,68 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.mjs\",\nr#\"import { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nimport { Box as o, Text as t, Flex as i } from \"@devup-ui/react\";\nfunction c() {\n  return /* @__PURE__ */ r(\"div\", { children: [\n    /* @__PURE__ */ e(\n      o,\n      {\n        _hover: {\n          bg: \"blue\"\n        },\n        bg: \"$text\",\n        color: \"red\",\n        children: \"hello\"\n      }\n    ),\n    /* @__PURE__ */ e(t, { typography: \"header\", children: \"typo\" }),\n    /* @__PURE__ */ e(i, { as: \"section\", mt: 2, children: \"section\" })\n  ] });\n}\nexport {\n  c as Lib\n};\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "$text",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Typography(
+            "header",
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { jsxs as r, jsx as e } from \"react/jsx-runtime\";\nfunction c() {\n\treturn /* @__PURE__ */ r(\"div\", { children: [\n\t\t/* @__PURE__ */ e(\"div\", {\n\t\t\tchildren: \"hello\",\n\t\t\tclassName: \"a b c\"\n\t\t}),\n\t\t/* @__PURE__ */ e(\"span\", {\n\t\t\tchildren: \"typo\",\n\t\t\tclassName: \"typo-header\"\n\t\t}),\n\t\t/* @__PURE__ */ e(\"section\", {\n\t\t\tchildren: \"section\",\n\t\t\tclassName: \"d e\"\n\t\t})\n\t] });\n}\nexport { c as Lib };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_arbitrary_values.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_arbitrary_values.snap
new file mode 100644
index 00000000..97a2b157
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_arbitrary_values.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"w-[100px] h-[50vh] text-[#ff0000]\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#F00",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "50vh",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_classname_extraction.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_extraction.snap
new file mode 100644
index 00000000..ed9fdcfc
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_extraction.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"p-4 bg-red-500\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#EF4444",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_devup_props.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_devup_props.snap
new file mode 100644
index 00000000..e89b4fd8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_devup_props.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"p-4 bg-red-500\" margin={2} />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#EF4444",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_variants.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_variants.snap
new file mode 100644
index 00000000..504fe778
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_classname_with_variants.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"p-4 hover:bg-blue-500 sm:p-8\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#3B82F6",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "2rem",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_full_integration.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_full_integration.snap
new file mode 100644
index 00000000..b60de64e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_full_integration.snap
@@ -0,0 +1,415 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"components/Card.tsx\",\nr#\"import {Box, Flex, Text} from '@devup-ui/core'\n\n// Card component with comprehensive Tailwind usage\nexport const Card = () => (\n  <Box className=\"bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow dark:bg-gray-800\">\n    <Flex className=\"flex-col gap-4 sm:flex-row sm:items-center\">\n      <Box className=\"w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center\">\n        <Text className=\"text-white font-bold text-lg\">A</Text>\n      </Box>\n      <Box className=\"flex-1\">\n        <Text className=\"text-gray-900 font-semibold text-xl dark:text-white\">Title</Text>\n        <Text className=\"text-gray-500 text-sm mt-1 dark:text-gray-400\">Subtitle</Text>\n      </Box>\n    </Flex>\n    <Box className=\"mt-4 pt-4 border-t border-gray-200 dark:border-gray-700\">\n      <Text className=\"text-gray-700 leading-relaxed dark:text-gray-300\">\n        Content goes here with multiple Tailwind utilities combined.\n      </Text>\n    </Box>\n  </Box>\n)\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "align-items",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "align-items",
+                value: "center",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#1F2937",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#FFF",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-color",
+                value: "#374151",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-color",
+                value: "#E5E7EB",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: ".5rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "9999px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#111827",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#374151",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#6B7280",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#9CA3AF",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#D1D5DB",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#FFF",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#FFF",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex",
+                value: "1 1 0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "row",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: ".875rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "1.125rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "1.25rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-weight",
+                value: "600",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-weight",
+                value: "700",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "3rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "justify-content",
+                value: "center",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "line-height",
+                value: "1.625",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: ".25rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1.5rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-top",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transition-property",
+                value: "box-shadow",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "3rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n// Card component with comprehensive Tailwind usage\nexport const Card = () => <div className=\"ae af ag ah ai aj ak\">\n    <div className=\"t u v w x\">\n      <div className=\"d e f g h i j\">\n        <span className=\"a b c\">A</span>\n      </div>\n      <div className=\"s\">\n        <span className=\"k l m n\">Title</span>\n        <span className=\"o p q r\">Subtitle</span>\n      </div>\n    </div>\n    <div className=\"aa ab ac a-d\">\n      <span className=\"y z _\">\n        Content goes here with multiple Tailwind utilities combined.\n      </span>\n    </div>\n  </div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_mixed_with_devup_responsive.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_mixed_with_devup_responsive.snap
new file mode 100644
index 00000000..70dd1d7b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_mixed_with_devup_responsive.snap
@@ -0,0 +1,123 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box \n  className=\"rounded-lg shadow-md hover:shadow-xl\" \n  p={[2, 4, 6]} \n  bg={[\"red\", \"blue\", \"green\"]}\n  display={[\"block\", \"flex\"]}\n/>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "green",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: ".5rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "block",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "24px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "8px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g h i j k\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_negative_values.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_negative_values.snap
new file mode 100644
index 00000000..a35374e1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_negative_values.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"-m-4 -translate-x-1/2\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "-1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "translateX(-50%)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_function_call_expression.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_function_call_expression.snap
new file mode 100644
index 00000000..882fa8aa
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_function_call_expression.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${getClass()} text-blue-500 p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${getClass()} a b`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_logical_expression.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_logical_expression.snap
new file mode 100644
index 00000000..1981725e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_logical_expression.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${isActive && 'text-red-500'} ${fallback || 'text-blue-500'} p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#EF4444",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${isActive && \"b\"} ${fallback || \"c\"} a`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_nested_template_literal.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_nested_template_literal.snap
new file mode 100644
index 00000000..913fb65f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_nested_template_literal.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${`text-${color}-500`} p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${`text-${color}-500`} a`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_parenthesized_expression.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_parenthesized_expression.snap
new file mode 100644
index 00000000..ec6e705b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_parenthesized_expression.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${(cond ? 'text-red-500' : 'text-blue-500')} p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#EF4444",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${cond ? \"b\" : \"c\"} a`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_style_order.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_style_order.snap
new file mode 100644
index 00000000..9d36e675
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_style_order.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box styleOrder={5} className={`${enabled ? 'text-green-500' : 'text-blue-500'} p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#22C55E",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    5,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    5,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    5,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${enabled ? \"b\" : \"c\"} a`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_variable_expression.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_variable_expression.snap
new file mode 100644
index 00000000..6239515e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_template_literal_with_variable_expression.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${dynamicClass} text-red-500 p-4`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#EF4444",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${dynamicClass} a b`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_with_all_variant_types.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_with_all_variant_types.snap
new file mode 100644
index 00000000..3f0c90c7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_with_all_variant_types.snap
@@ -0,0 +1,153 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className=\"p-2 sm:p-4 md:p-6 lg:p-8 xl:p-10 2xl:p-12 hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50 dark:bg-gray-900 dark:hover:bg-gray-800\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#111827",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#1F2937",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark]:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "#3B82F6",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "box-shadow",
+                value: "0 0 0 2px var(--tw-ring-color)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:focus",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: ".5rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1.5rem",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "1rem",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "2.5rem",
+                level: 4,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "2rem",
+                level: 3,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "3rem",
+                level: 5,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.95)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d e f g h i j k l\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_with_as_prop.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_with_as_prop.snap
new file mode 100644
index 00000000..5cde1e9c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_with_as_prop.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box as=\"p\" className=\"text-gray-900\">text</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#111827",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<p className=\"a\">text</p>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__tailwind_with_conditional_template_literal.snap b/libs/extractor/tests/snapshots/all_tests__tailwind_with_conditional_template_literal.snap
new file mode 100644
index 00000000..940c01a9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__tailwind_with_conditional_template_literal.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n<Box className={`${enabled ? 'text-green-500' : 'text-blue-500'} text-3xl pr-5`}>\n  hello\n</Box>\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#22C55E",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "#3B82F6",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "1.875rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-right",
+                value: "1.25rem",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${enabled ? \"c\" : \"d\"} a b`}>\n  hello\n</div>;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props-2.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props-2.snap
new file mode 100644
index 00000000..eb9f8acf
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1}`} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props-3.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props-3.snap
new file mode 100644
index 00000000..99be8450
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props-3.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${-1}`} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "-4px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props-4.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props-4.snap
new file mode 100644
index 00000000..e641a3f2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props-4.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box m={`${1} ${2}`} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1 2",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props-5.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props-5.snap
new file mode 100644
index 00000000..8f2d9797
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div className={`${1} ${2}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props-6.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props-6.snap
new file mode 100644
index 00000000..00136444
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props-6.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box className={`  ${1} ${2}  `}\n    _hover={{bg:\"red\"}}\n    _themeDark={{ _hover:{bg:\"black\"} }}\n    \n     />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${1} ${2} a b`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__template_literal_props.snap b/libs/extractor/tests/snapshots/all_tests__template_literal_props.snap
new file mode 100644
index 00000000..5b1a53ac
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__template_literal_props.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box bg={`${\"red\"}`} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-2.snap
new file mode 100644
index 00000000..1420ed7a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-2.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : {}} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${a ? \"b\" : \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-3.snap
new file mode 100644
index 00000000..38b7c973
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector-3.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-weight",
+                value: "bold",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${a ? \"b c\" : \"d e\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector.snap b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector.snap
new file mode 100644
index 00000000..0bda113d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__ternary_operator_in_selector.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex _hover={a ? { bg: \"red\" } : undefined} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`a ${a ? \"b\" : \"\"}`} />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__theme_props.snap b/libs/extractor/tests/snapshots/all_tests__theme_props.snap
new file mode 100644
index 00000000..9132e3d3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__theme_props.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ display:\"none\" }} _themeLight={{ display: \"flex\" }} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=light] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__theme_selector-2.snap b/libs/extractor/tests/snapshots/all_tests__theme_selector-2.snap
new file mode 100644
index 00000000..09754ee5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__theme_selector-2.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__theme_selector-3.snap b/libs/extractor/tests/snapshots/all_tests__theme_selector-3.snap
new file mode 100644
index 00000000..929574a6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__theme_selector-3.snap
@@ -0,0 +1,65 @@
+---
+source: libs/extractor/tests/all_tests.rs
+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{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "filter",
+                value: "brightness(0) invert(1)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] & :is(svg,img)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "100%",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] & :is(svg,img)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "100%",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] & :is(svg,img)",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__theme_selector.snap b/libs/extractor/tests/snapshots/all_tests__theme_selector.snap
new file mode 100644
index 00000000..1996a1cb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__theme_selector.snap
@@ -0,0 +1,23 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box _themeDark={{ _hover:{bg:\"black\"} }} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        ":root[data-theme=dark] &:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__typography_style.snap b/libs/extractor/tests/snapshots/all_tests__typography_style.snap
new file mode 100644
index 00000000..505bfe67
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__typography_style.snap
@@ -0,0 +1,12 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Text} from '@devup-ui/core'\n<Text typography=\"$heading\" />\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Typography(
+            "$heading",
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\n<span className=\"typo-$heading\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_exports_combined.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_exports_combined.snap
new file mode 100644
index 00000000..852d01ed
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_exports_combined.snap
@@ -0,0 +1,118 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"all-combined.css.ts\",\nr#\"import { style, globalStyle, keyframes, createVar, createContainer, layer, fontFace, createGlobalTheme, styleVariants } from '@devup-ui/react'\nexport const myVar = createVar()\nexport const myContainer = createContainer()\nexport const myLayer = layer('components')\nexport const myFont = fontFace({ src: 'local(Arial)' })\nexport const vars = createGlobalTheme(':root', { color: { primary: 'blue' } })\nexport const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\nglobalStyle('body', { margin: 0 })\nconst base = style({ padding: 8 })\nexport const buttons = styleVariants({\n  primary: [base, { bg: 'blue' }],\n  secondary: { bg: 'gray' }\n})\nexport const box = style({ fontFamily: myFont })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-primary-global_theme_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "all-combined.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "all-combined.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "all-combined.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "src": "local(Arial)",
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a\";\nexport const box = \"b\";\n;\n;\n;\nexport const fade = \"c\";\nexport const buttons = {\n\tprimary: \"a d\",\n\tsecondary: \"e\"\n};\nexport const myLayer = \"--var-0\";\nexport const myVar = \"__devup_font_0_0\";\nexport const myFont = \"__container_0__\";\nexport const vars = \"components\";\nexport const myContainer = { \"color\": { \"primary\": \"var(--color-primary-global_theme_0-0)\" } };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_imports.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_imports.snap
new file mode 100644
index 00000000..d43dbcf6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_all_imports.snap
@@ -0,0 +1,79 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"all-imports.css.ts\",\nr#\"import { style, globalStyle, keyframes, createTheme } from '@devup-ui/react'\nexport const [theme, vars] = createTheme({\n  color: { primary: 'blue' }\n})\nexport const fadeIn = keyframes({\n  from: { opacity: 0 },\n  to: { opacity: 1 }\n})\nglobalStyle('body', {\n  margin: 0\n})\nexport const box = style({\n  animation: 'fadeIn 1s'\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-primary-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_theme",
+                        "all-imports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "fadeIn 1s",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "all-imports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const [theme, vars] = [\"f0_theme\", { \"color\": { \"primary\": \"var(--color-primary-style_0-0)\" } }];\n;\n;\nexport const fadeIn = \"b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_composition.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_composition.snap
new file mode 100644
index 00000000..05960b3f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_composition.snap
@@ -0,0 +1,69 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"composition.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nconst base = style({\n  padding: 12,\n  borderRadius: 4\n})\nconst interactive = style({\n  cursor: 'pointer',\n  transition: 'all 0.2s'\n})\nexport const button = style([base, interactive, {\n  background: 'blue',\n  color: 'white'\n}])\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "pointer",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transition",
+                value: "all .2s",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a b\";\nexport const button = \"a b c d e f\";\nconst interactive = \"c d\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_constant_exports.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_constant_exports.snap
new file mode 100644
index 00000000..4fbdc6b9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_constant_exports.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"constants.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const SPACING = 8;\nexport const COLORS = { primary: 'blue', secondary: 'green' };\nexport const box = style({ padding: SPACING })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const COLORS = {\n\tprimary: \"blue\",\n\tsecondary: \"green\"\n};\nexport const SPACING = 8;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_container.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_container.snap
new file mode 100644
index 00000000..4a4d6d16
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_container.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"container.css.ts\",\nr#\"import { createContainer, style } from '@devup-ui/react'\nexport const sidebar = createContainer()\nexport const sidebarContainer = style({\n  containerName: sidebar,\n  containerType: 'inline-size'\n})\nexport const responsive = style({\n  '@container': {\n    [`${sidebar} (min-width: 400px)`]: {\n      flexDirection: 'row'\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "container-name",
+                value: "__container_0__",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "container-type",
+                value: "inline-size",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "row",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "__container_0__ (min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsive = \"a\";\nexport const sidebarContainer = \"b c\";\nexport const sidebar = \"__container_0__\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var-2.snap
new file mode 100644
index 00000000..78de850a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var-2.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"fallback.css.ts\",\nr#\"import { createVar, fallbackVar, style } from '@devup-ui/react'\nexport const colorVar = createVar()\nexport const box = style({\n  color: fallbackVar(colorVar, 'red')\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var-0,red)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const colorVar = \"--var-0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var.snap
new file mode 100644
index 00000000..9e7aa67d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_create_var.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"vars.css.ts\",\nr#\"import { createVar, style } from '@devup-ui/react'\nexport const colorVar = createVar()\nexport const box = style({\n  vars: {\n    [colorVar]: 'blue'\n  },\n  color: colorVar\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--var-0",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var-0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\nexport const colorVar = \"--var-0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
new file mode 100644
index 00000000..451bf3e2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"styles.css.ts\",\nr#\"import { style } from '@vanilla-extract/css'\nexport const hello = style({\n  cursor: 'pointer',\n  fontSize: 32,\n  paddingTop: '28px',\n  paddingBottom: '28px',\n})\nexport const text = style({\n  color: 'var(--text)',\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--text)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "pointer",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "128px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-bottom",
+                value: "28px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding-top",
+                value: "28px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const hello = \"a b c d\";\nexport const text = \"e\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face-2.snap
new file mode 100644
index 00000000..24e85d71
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face-2.snap
@@ -0,0 +1,30 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"fonts-multi.css.ts\",\nr#\"import { fontFace, style } from '@devup-ui/react'\nconst roboto = fontFace({\n  src: 'url(\"/fonts/Roboto.woff2\") format(\"woff2\")',\n  fontWeight: 400,\n  fontStyle: 'normal'\n})\nexport const body = style({\n  fontFamily: roboto\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "fonts-multi.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "font-style": "normal",
+                    "font-weight": "400",
+                    "src": "url(\"/fonts/Roboto.woff2\") format(\"woff2\")",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const body = \"a\";\n;\nconst roboto = \"__devup_font_0_0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face.snap
new file mode 100644
index 00000000..811db8a3
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face.snap
@@ -0,0 +1,28 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"fonts.css.ts\",\nr#\"import { fontFace, style } from '@devup-ui/react'\nconst myFont = fontFace({\n  src: 'local(\"Comic Sans MS\")'\n})\nexport const text = style({\n  fontFamily: myFont\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "fonts.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "src": "local(\"Comic Sans MS\")",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const text = \"a\";\n;\nconst myFont = \"__devup_font_0_0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_empty_props.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_empty_props.snap
new file mode 100644
index 00000000..085c08a5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_empty_props.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"fontface-minimal.css.ts\",\nr#\"import { fontFace, style } from '@devup-ui/react'\nexport const minimalFont = fontFace({})\nexport const text = style({ fontFamily: minimalFont })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "fontface-minimal.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const text = \"a\";\n;\nexport const minimalFont = \"__devup_font_0_0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_placeholder.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_placeholder.snap
new file mode 100644
index 00000000..153a973d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_placeholder.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"fontface-remap.css.ts\",\nr#\"import { fontFace, style } from '@devup-ui/react'\nexport const customFont = fontFace({\n  src: 'url(\"/fonts/custom.woff2\")',\n  fontWeight: '400',\n  fontDisplay: 'swap'\n})\nexport const secondFont = fontFace({\n  src: 'local(\"Helvetica\")'\n})\nexport const text = style({ fontFamily: customFont })\nexport const heading = style({ fontFamily: secondFont })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_1",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "fontface-remap.css.ts",
+                properties: {
+                    "font-display": "swap",
+                    "font-family": "__devup_font_0_0",
+                    "font-weight": "400",
+                    "src": "url(\"/fonts/custom.woff2\")",
+                },
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "fontface-remap.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_1",
+                    "src": "local(\"Helvetica\")",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const heading = \"a\";\nexport const text = \"b\";\n;\n;\nexport const customFont = \"__devup_font_0_0\";\nexport const secondFont = \"__devup_font_0_1\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_with_style.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_with_style.snap
new file mode 100644
index 00000000..8bf68772
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_font_face_with_style.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"font-usage.css.ts\",\nr#\"import { fontFace, style } from '@devup-ui/react'\nexport const myFont = fontFace({\n  src: 'local(\"Comic Sans MS\")',\n  fontWeight: 400\n})\nexport const text = style({\n  fontFamily: myFont\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__devup_font_0_0",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "font-usage.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "font-weight": "400",
+                    "src": "local(\"Comic Sans MS\")",
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const text = \"a\";\n;\nexport const myFont = \"__devup_font_0_0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme.snap
new file mode 100644
index 00000000..ce0ff8ba
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"global-theme.css.ts\",\nr#\"import { createGlobalTheme } from '@devup-ui/react'\nexport const vars = createGlobalTheme(':root', {\n  color: {\n    brand: 'blue',\n    text: 'black',\n    background: 'white'\n  },\n  font: {\n    body: 'system-ui, sans-serif'\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-background-global_theme_0-2",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand-global_theme_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text-global_theme_0-1",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--font-body-global_theme_0-3",
+                value: "system-ui,sans-serif",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\n;\nexport const vars = {\n\t\"color\": {\n\t\t\"brand\": \"var(--color-brand-global_theme_0-0)\",\n\t\t\"text\": \"var(--color-text-global_theme_0-1)\",\n\t\t\"background\": \"var(--color-background-global_theme_0-2)\"\n\t},\n\t\"font\": { \"body\": \"var(--font-body-global_theme_0-3)\" }\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_empty_vars.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_empty_vars.snap
new file mode 100644
index 00000000..ebea668a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_empty_vars.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"global-theme-empty.css.ts\",\nr#\"import { createGlobalTheme, style } from '@devup-ui/react'\nexport const emptyVars = createGlobalTheme(':root', {})\nexport const box = style({ padding: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const emptyVars = {};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_placeholder.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_placeholder.snap
new file mode 100644
index 00000000..eeb7c67c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_placeholder.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"globaltheme-remap.css.ts\",\nr#\"import { createGlobalTheme, style } from '@devup-ui/react'\nexport const lightVars = createGlobalTheme(':root', {\n  colors: { bg: 'white', text: 'black' }\n})\nexport const darkVars = createGlobalTheme('.dark', {\n  colors: { bg: 'black', text: 'white' }\n})\nexport const box = style({ padding: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-bg-global_theme_0-0",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "globaltheme-remap.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-bg-global_theme_1-0",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".dark",
+                        "globaltheme-remap.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-text-global_theme_0-1",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "globaltheme-remap.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-text-global_theme_1-1",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".dark",
+                        "globaltheme-remap.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\n;\n;\nexport const darkVars = { \"colors\": {\n\t\"bg\": \"var(--colors-bg-global_theme_1-0)\",\n\t\"text\": \"var(--colors-text-global_theme_1-1)\"\n} };\nexport const lightVars = { \"colors\": {\n\t\"bg\": \"var(--colors-bg-global_theme_0-0)\",\n\t\"text\": \"var(--colors-text-global_theme_0-1)\"\n} };\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_with_vars.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_with_vars.snap
new file mode 100644
index 00000000..febbd08d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_global_theme_with_vars.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"global-theme-vars.css.ts\",\nr#\"import { createGlobalTheme, style } from '@devup-ui/react'\nexport const vars = createGlobalTheme(':root', {\n  color: {\n    primary: 'blue',\n    secondary: 'green'\n  },\n  space: {\n    small: '4px',\n    large: '16px'\n  }\n})\nexport const box = style({ padding: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-primary-global_theme_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-secondary-global_theme_0-1",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-large-global_theme_0-3",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-small-global_theme_0-2",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ":root",
+                        "global-theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\n;\nexport const vars = {\n\t\"color\": {\n\t\t\"primary\": \"var(--color-primary-global_theme_0-0)\",\n\t\t\"secondary\": \"var(--color-secondary-global_theme_0-1)\"\n\t},\n\t\"space\": {\n\t\t\"small\": \"var(--space-small-global_theme_0-2)\",\n\t\t\"large\": \"var(--space-large-global_theme_0-3)\"\n\t}\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_imports_combination.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_imports_combination.snap
new file mode 100644
index 00000000..ac436251
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_imports_combination.snap
@@ -0,0 +1,88 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"imports-combo.css.ts\",\nr#\"import { style, globalStyle, keyframes, fontFace } from '@devup-ui/react'\nexport const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\nexport const myFont = fontFace({ src: 'local(Arial)' })\nglobalStyle('body', { margin: 0, fontFamily: myFont })\nexport const animated = style({ animation: fadeIn })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "myFont",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__font_0__",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "imports-combo.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "imports-combo.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "imports-combo.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "src": "local(Arial)",
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const animated = \"a\";\n;\n;\nexport const myFont = \"b\";\nexport const fadeIn = \"__devup_font_0_0\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_keyframes_export.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_keyframes_export.snap
new file mode 100644
index 00000000..2f792b1f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_keyframes_export.snap
@@ -0,0 +1,71 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"keyframes-export.css.ts\",\nr#\"import { keyframes, style } from '@devup-ui/react'\nexport const spin = keyframes({\n  from: { transform: 'rotate(0deg)' },\n  to: { transform: 'rotate(360deg)' }\n})\nconst internal = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 }\n})\nexport const spinner = style({ animation: spin })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "spin",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "0%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "100%": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "transform",
+                            value: "rotate(0)",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "transform",
+                            value: "rotate(360deg)",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const spinner = \"a\";\nconst internal = \"b\";\nexport const spin = \"c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer.snap
new file mode 100644
index 00000000..06c8b96b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"layers.css.ts\",\nr#\"import { layer, style, globalStyle } from '@devup-ui/react'\nexport const reset = layer('reset')\nexport const base = layer('base')\nexport const components = layer('components')\nglobalStyle('*', {\n  '@layer': reset,\n  margin: 0,\n  padding: 0\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: Some(
+                    "reset",
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\n;\nexport const base = \"base\";\nexport const components = \"components\";\nexport const reset = \"reset\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer_and_container.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer_and_container.snap
new file mode 100644
index 00000000..0d0b6bf8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_layer_and_container.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"layer-container.css.ts\",\nr#\"import { layer, createContainer, style } from '@devup-ui/react'\nexport const resetLayer = layer('reset')\nexport const baseLayer = layer('base')\nexport const myContainer = createContainer()\nexport const containerStyle = style({\n  containerName: myContainer,\n  containerType: 'inline-size'\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "container-name",
+                value: "__container_0__",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "container-type",
+                value: "inline-size",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const containerStyle = \"a b\";\nexport const myContainer = \"__container_0__\";\nexport const baseLayer = \"base\";\nexport const resetLayer = \"reset\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_media_queries.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_media_queries.snap
new file mode 100644
index 00000000..02d7b790
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_media_queries.snap
@@ -0,0 +1,83 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"media.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const responsive = style({\n  display: 'block',\n  '@media': {\n    'screen and (min-width: 768px)': {\n      display: 'flex'\n    },\n    'screen and (min-width: 1024px)': {\n      display: 'grid'\n    },\n    '(prefers-color-scheme: dark)': {\n      background: 'black',\n      color: 'white'\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "block",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen and (min-width: 768px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen and (min-width: 1024px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsive = \"a b c d e\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_styles.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_styles.snap
new file mode 100644
index 00000000..0292f6bb
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_styles.snap
@@ -0,0 +1,55 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"mixed-exports.css.ts\",\nr#\"import { style, keyframes, createVar, createContainer, layer } from '@devup-ui/react'\nconst internalStyle = style({ padding: 4 })\nconst internalKeyframe = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\nconst internalVar = createVar()\nconst internalContainer = createContainer()\nconst internalLayer = layer('internal')\nexport const publicStyle = style({ margin: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst internalStyle = \"a\";\nexport const publicStyle = \"b\";\nconst internalKeyframe = \"c\";\nconst internalVar = \"--var-0\";\nconst internalContainer = \"__container_0__\";\nconst internalLayer = \"internal\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_theme.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_theme.snap
new file mode 100644
index 00000000..245dc15b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_non_exported_theme.snap
@@ -0,0 +1,53 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"internal-theme.css.ts\",\nr#\"import { createTheme, style } from '@devup-ui/react'\nconst [internalTheme, themeVars] = createTheme({\n  colors: {\n    bg: 'white',\n    text: 'black'\n  }\n})\nexport const themed = style({\n  background: 'red'\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-bg-style_0-0",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_internalTheme",
+                        "internal-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-text-style_0-1",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_internalTheme",
+                        "internal-theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const themed = \"a\";\nconst [internalTheme, themeVars] = [\"f0_internalTheme\", { \"colors\": {\n\t\"bg\": \"var(--colors-bg-style_0-0)\",\n\t\"text\": \"var(--colors-text-style_0-1)\"\n} }];\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_class_replacement.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_class_replacement.snap
new file mode 100644
index 00000000..563e7cca
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_class_replacement.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"selector-ref.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const parent = style({ display: 'flex' })\nexport const child = style({\n  selectors: {\n    [`${parent}:hover &`]: { background: 'red' }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b\";\nexport const parent = \"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_references.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_references.snap
new file mode 100644
index 00000000..1214ec9c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_references.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"selector-refs.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const parent = style({ background: 'white' })\nexport const child = style({\n  selectors: {\n    [`${parent}:hover &`]: {\n      color: 'blue'\n    }\n  }\n})\nexport const sibling = style({\n  selectors: {\n    [`${parent} + &`]: {\n      marginTop: 8\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "32px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a + &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b\";\nexport const parent = \"a\";\nexport const sibling = \"c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_refs_triggers_with_classes.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_refs_triggers_with_classes.snap
new file mode 100644
index 00000000..4bbefad7
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selector_refs_triggers_with_classes.snap
@@ -0,0 +1,85 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"refs.css.ts\",\nr#\"import { style, globalStyle, keyframes, createVar, fontFace, createContainer, layer } from '@devup-ui/react'\nexport const colorVar = createVar()\nexport const myContainer = createContainer()\nexport const myLayer = layer('ui')\nexport const myFont = fontFace({ src: 'local(Arial)' })\nexport const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\nexport const parent = style({ display: 'flex' })\nexport const child = style({\n  selectors: {\n    [`${parent}:hover &`]: { color: 'red' }\n  }\n})\nglobalStyle('body', { margin: 0 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "red",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "refs.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        FontFace(
+            ExtractFontFace {
+                file: "refs.css.ts",
+                properties: {
+                    "font-family": "__devup_font_0_0",
+                    "src": "local(Arial)",
+                },
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b\";\nexport const parent = \"a\";\n;\n;\nexport const fade = \"c\";\nexport const myContainer = \"--var-0\";\nexport const colorVar = \"__devup_font_0_0\";\nexport const myLayer = \"__container_0__\";\nexport const myFont = \"ui\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors-2.snap
new file mode 100644
index 00000000..52b761b5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors-2.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"selectors-complex.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const parent = style({\n  background: 'white'\n})\nexport const child = style({\n  selectors: {\n    [`${parent}:hover &`]: {\n      color: 'blue'\n    },\n    '& + &': {\n      marginTop: 8\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "a:hover &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "32px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& + &",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b c\";\nexport const parent = \"a\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors.snap
new file mode 100644
index 00000000..948f53ec
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_selectors.snap
@@ -0,0 +1,89 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"selectors.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const button = style({\n  background: 'blue',\n  selectors: {\n    '&:hover': {\n      background: 'darkblue'\n    },\n    '&:focus': {\n      outline: '2px solid blue'\n    },\n    '&:active': {\n      transform: 'scale(0.98)'\n    },\n    '&:disabled': {\n      opacity: 0.5,\n      cursor: 'not-allowed'\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "darkblue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "not-allowed",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "outline",
+                value: "2px solid blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:focus",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.98)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b c d e f\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_empty.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_empty.snap
new file mode 100644
index 00000000..23cb53e4
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_empty.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"empty-comp.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const empty = style([])\nexport const withEmpty = style([{}])\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "export const empty = \"\";\nexport const withEmpty = \"\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_multiple.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_multiple.snap
new file mode 100644
index 00000000..0debe1b9
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_composition_multiple.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"multi-comp.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nconst base = style({ padding: 8 })\nexport const complex = style([base, { margin: 4 }, { color: 'blue' }])\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a\";\nexport const complex = \"a b c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js-2.snap
new file mode 100644
index 00000000..c1098fda
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"components.css.js\",\nr#\"import { style } from '@devup-ui/react'\nexport const link = style({ color: \"blue\", textDecoration: \"underline\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "text-decoration",
+                value: "underline",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const link = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js.snap
new file mode 100644
index 00000000..6e2b702a
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_js.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"styles.css.js\",\nr#\"import { style } from '@devup-ui/react'\nexport const wrapper = style({ backgroundColor: \"white\", margin: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const wrapper = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_ts.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_ts.snap
new file mode 100644
index 00000000..2d54637c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_css_ts.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"styles.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const container: string = style({ background: \"red\", padding: 16 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const container = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants-2.snap
new file mode 100644
index 00000000..e723238f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants-2.snap
@@ -0,0 +1,69 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"variants-composed.css.ts\",\nr#\"import { style, styleVariants } from '@devup-ui/react'\nconst base = style({ padding: 12, borderRadius: 4 })\nexport const button = styleVariants({\n  primary: [base, { background: 'blue', color: 'white' }],\n  secondary: [base, { background: 'gray', color: 'black' }]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a b\";\nexport const button = {\n\tprimary: \"a b c d\",\n\tsecondary: \"a b e f\"\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants.snap
new file mode 100644
index 00000000..f849ba3f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"variants.css.ts\",\nr#\"import { styleVariants } from '@devup-ui/react'\nexport const background = styleVariants({\n  primary: { background: 'blue' },\n  secondary: { background: 'gray' },\n  danger: { background: 'red' }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const background = {\n\tdanger: \"a\",\n\tprimary: \"b\",\n\tsecondary: \"c\"\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_mixed.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_mixed.snap
new file mode 100644
index 00000000..2ffcb586
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_mixed.snap
@@ -0,0 +1,79 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"variants-mixed.css.ts\",\nr#\"import { style, styleVariants } from '@devup-ui/react'\nconst base = style({ borderRadius: 4, padding: 8 })\nexport const buttons = styleVariants({\n  primary: [base, { background: 'blue', color: 'white' }],\n  secondary: { background: 'gray', color: 'black' },\n  danger: [base, { background: 'red' }]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a b\";\nexport const buttons = {\n\tdanger: \"a b c\",\n\tprimary: \"a b d e\",\n\tsecondary: \"f g\"\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_with_base.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_with_base.snap
new file mode 100644
index 00000000..91c5596c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_style_variants_with_base.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"variants-base.css.ts\",\nr#\"import { style, styleVariants } from '@devup-ui/react'\nconst base = style({\n  padding: 8,\n  borderRadius: 4\n})\nexport const sizes = styleVariants({\n  small: [base, { fontSize: 12 }],\n  medium: [base, { fontSize: 16 }],\n  large: [base, { fontSize: 20 }]\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "80px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst base = \"a b\";\nexport const sizes = {\n\tlarge: \"a b c\",\n\tmedium: \"a b d\",\n\tsmall: \"a b e\"\n};\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_supports.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_supports.snap
new file mode 100644
index 00000000..011376db
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_supports.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"supports.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const grid = style({\n  display: 'flex',\n  '@supports': {\n    '(display: grid)': {\n      display: 'grid'\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const grid = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme-2.snap
new file mode 100644
index 00000000..08f8be5e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme-2.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-contract.css.ts\",\nr#\"import { createThemeContract, createTheme, style } from '@devup-ui/react'\nconst vars = createThemeContract({\n  color: {\n    brand: null,\n    text: null\n  }\n})\nexport const lightTheme = createTheme(vars, {\n  color: {\n    brand: 'blue',\n    text: 'black'\n  }\n})\nexport const darkTheme = createTheme(vars, {\n  color: {\n    brand: 'lightblue',\n    text: 'white'\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand",
+                value: "lightblue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_darkTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_darkTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const darkTheme = \"f0_darkTheme\";\nexport const lightTheme = \"f0_lightTheme\";\n;\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme.snap
new file mode 100644
index 00000000..5b42c015
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme.snap
@@ -0,0 +1,114 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme.css.ts\",\nr#\"import { createTheme, style } from '@devup-ui/react'\nexport const [themeClass, vars] = createTheme({\n  color: {\n    brand: 'blue',\n    text: 'black'\n  },\n  space: {\n    small: '4px',\n    medium: '8px',\n    large: '16px'\n  }\n})\nexport const box = style({\n  color: vars.color.text,\n  padding: vars.space.medium\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text-style_0-1",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-large-style_0-4",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-medium-style_0-3",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-small-style_0-2",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--color-text-style_0-1)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "var(--space-medium-style_0-3)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\nexport const [themeClass, vars] = [\"f0_themeClass\", {\n\t\"color\": {\n\t\t\"brand\": \"var(--color-brand-style_0-0)\",\n\t\t\"text\": \"var(--color-text-style_0-1)\"\n\t},\n\t\"space\": {\n\t\t\"small\": \"var(--space-small-style_0-2)\",\n\t\t\"medium\": \"var(--space-medium-style_0-3)\",\n\t\t\"large\": \"var(--space-large-style_0-4)\"\n\t}\n}];\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_array_destructure.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_array_destructure.snap
new file mode 100644
index 00000000..64c81405
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_array_destructure.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-array.css.ts\",\nr#\"import { createTheme, style } from '@devup-ui/react'\nexport const [themeClass, themeVars] = createTheme({\n  colors: { primary: 'blue', secondary: 'green' },\n  spacing: { small: '4px', medium: '8px' }\n})\nexport const themed = style({ color: themeVars.colors.primary })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-primary-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme-array.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-secondary-style_0-1",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme-array.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--spacing-medium-style_0-3",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme-array.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--spacing-small-style_0-2",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_themeClass",
+                        "theme-array.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--colors-primary-style_0-0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const themed = \"a\";\nexport const [themeClass, themeVars] = [\"f0_themeClass\", {\n\t\"colors\": {\n\t\t\"primary\": \"var(--colors-primary-style_0-0)\",\n\t\t\"secondary\": \"var(--colors-secondary-style_0-1)\"\n\t},\n\t\"spacing\": {\n\t\t\"small\": \"var(--spacing-small-style_0-2)\",\n\t\t\"medium\": \"var(--spacing-medium-style_0-3)\"\n\t}\n}];\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_export_variations.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_export_variations.snap
new file mode 100644
index 00000000..fe117ae8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_export_variations.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-exports.css.ts\",\nr#\"import { createTheme, createThemeContract, style } from '@devup-ui/react'\nconst contract = createThemeContract({\n  colors: { bg: null, text: null }\n})\nexport const lightTheme = createTheme(contract, {\n  colors: { bg: 'white', text: 'black' }\n})\nconst internalTheme = createTheme(contract, {\n  colors: { bg: 'gray', text: 'darkgray' }\n})\nexport const box = style({ padding: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-bg",
+                value: "gray",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_internalTheme",
+                        "theme-exports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-bg",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-exports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-text",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-exports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-text",
+                value: "darkgray",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_internalTheme",
+                        "theme-exports.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nconst internalTheme = \"f0_internalTheme\";\nexport const lightTheme = \"f0_lightTheme\";\n;\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_vars_name_only.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_vars_name_only.snap
new file mode 100644
index 00000000..f01b25d8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_vars_name_only.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-vars-name.css.ts\",\nr#\"import { createTheme } from '@devup-ui/react'\nexport const myTheme = createTheme({\n  color: { primary: 'blue' }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-primary-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_myTheme",
+                        "theme-vars-name.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const myTheme = \"f0_myTheme\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_with_vars.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_with_vars.snap
new file mode 100644
index 00000000..4c534388
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_with_vars.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-vars.css.ts\",\nr#\"import { createTheme } from '@devup-ui/react'\nexport const [lightTheme, vars] = createTheme({\n  color: {\n    primary: 'blue',\n    secondary: 'green'\n  },\n  space: {\n    small: '4px',\n    medium: '8px'\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-primary-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-secondary-style_0-1",
+                value: "green",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-medium-style_0-3",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-small-style_0-2",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-vars.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const [lightTheme, vars] = [\"f0_lightTheme\", {\n\t\"color\": {\n\t\t\"primary\": \"var(--color-primary-style_0-0)\",\n\t\t\"secondary\": \"var(--color-secondary-style_0-1)\"\n\t},\n\t\"space\": {\n\t\t\"small\": \"var(--space-small-style_0-2)\",\n\t\t\"medium\": \"var(--space-medium-style_0-3)\"\n\t}\n}];\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_json.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_json.snap
new file mode 100644
index 00000000..647bf550
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_json.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-simple.css.ts\",\nr#\"import { createThemeContract, createTheme, style } from '@devup-ui/react'\nconst contract = createThemeContract({\n  colors: { primary: null }\n})\nexport const lightTheme = createTheme(contract, {\n  colors: { primary: 'blue' }\n})\nexport const box = style({ padding: 8 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--colors-primary",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_lightTheme",
+                        "theme-simple.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const lightTheme = \"f0_lightTheme\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_name.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_name.snap
new file mode 100644
index 00000000..9c6b6485
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_theme_without_vars_name.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"theme-two-arg.css.ts\",\nr#\"import { createThemeContract, createTheme } from '@devup-ui/react'\nconst contract = createThemeContract({\n  color: {\n    brand: null,\n    text: null\n  }\n})\nexport const darkTheme = createTheme(contract, {\n  color: {\n    brand: 'white',\n    text: 'lightgray'\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_darkTheme",
+                        "theme-two-arg.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text",
+                value: "lightgray",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f0_darkTheme",
+                        "theme-two-arg.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const darkTheme = \"f0_darkTheme\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_vars_only.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_vars_only.snap
new file mode 100644
index 00000000..2e7a3778
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_vars_only.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"vars-only.css.ts\",\nr#\"import { createVar, style, fallbackVar } from '@devup-ui/react'\nexport const colorVar = createVar()\nexport const sizeVar = createVar()\nexport const box = style({\n  color: fallbackVar(colorVar, 'blue'),\n  fontSize: sizeVar\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var-0,blue)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "font-size",
+                value: "var(--var-1)",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\nexport const colorVar = \"--var-0\";\nexport const sizeVar = \"--var-1\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_at_container_selector.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_at_container_selector.snap
new file mode 100644
index 00000000..3c70bc60
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_at_container_selector.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"container.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const card = style({\n  containerType: 'inline-size',\n  '@container': {\n    '(min-width: 400px)': {\n      display: 'grid',\n      gridTemplateColumns: '1fr 1fr'\n    }\n  }\n})\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "container-type",
+                value: "inline-size",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "grid-template-columns",
+                value: "1fr 1fr",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Container,
+                        query: "(min-width: 400px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const card = \"a b c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_computed.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_computed.snap
new file mode 100644
index 00000000..7078b3a8
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_computed.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"computed.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nconst base = 8;\nexport const box = style({ padding: base * 2, margin: base / 2 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global-2.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global-2.snap
new file mode 100644
index 00000000..96c1047f
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global-2.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"global.css.ts\",\nr#\"import { globalStyle } from '@devup-ui/react'\nglobalStyle(\"body\", { margin: 0, padding: 0 })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global.snap
new file mode 100644
index 00000000..8552f906
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_keyframes_and_global.snap
@@ -0,0 +1,45 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"animations.css.ts\",\nr#\"import { keyframes, style } from '@devup-ui/react'\nexport const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\nexport const animated = style({ animation: \"fadeIn 1s ease-in\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "fadeIn 1s ease-in",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                            layer: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const animated = \"a\";\nexport const fadeIn = \"b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_pseudo_selector.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_pseudo_selector.snap
new file mode 100644
index 00000000..9f047b05
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_pseudo_selector.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"hover.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const hoverButton = style({ background: \"gray\", _hover: { background: \"blue\" } })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const hoverButton = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_responsive_array.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_responsive_array.snap
new file mode 100644
index 00000000..add9cc66
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_responsive_array.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"responsive.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const responsiveBox = style({ padding: [8, 16, 32] })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "128px",
+                level: 2,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 1,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsiveBox = \"a b c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_spread.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_spread.snap
new file mode 100644
index 00000000..63b8d7ec
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_spread.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"spread.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nconst baseStyle = { padding: 8, margin: 4 };\nexport const extended = style({ ...baseStyle, background: \"red\" })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const extended = \"a b c\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_variable.snap b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_variable.snap
new file mode 100644
index 00000000..33c33116
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__vanilla_extract_with_variable.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"vars.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nconst primaryColor = \"blue\";\nconst spacing = 16;\nexport const button = style({ background: primaryColor, padding: spacing })\n\"#,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b\";\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__with_prefix.snap b/libs/extractor/tests/snapshots/all_tests__with_prefix.snap
new file mode 100644
index 00000000..c5dd5e11
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__with_prefix.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex MozTabSize={4} WebkitLineClamp={4} msBorderRadius={4} />\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "-moz-tab-size",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "-ms-border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "-webkit-line-clamp",
+                value: "4",
+                level: 0,
+                selector: None,
+                style_order: None,
+                layer: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+                layer: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"a b c d\" />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_style_variables.snap b/libs/extractor/tests/snapshots/all_tests__wrong_style_variables.snap
new file mode 100644
index 00000000..7c47665e
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_style_variables.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box styleVars={} />\n            \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: true, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "<div />;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-2.snap b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-2.snap
new file mode 100644
index 00000000..db18079c
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\", \"span\")`\n          background: ${props => props.bg};\n          color: red;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const StyledDiv = styled(\"div\", \"span\")`\n          background: ${(props) => props.bg};\n          color: red;\n        `;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-3.snap b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-3.snap
new file mode 100644
index 00000000..34aff2e2
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-3.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\", \"span\").filter(Boolean)\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const StyledDiv = styled(\"div\", \"span\").filter(Boolean);\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-4.snap b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-4.snap
new file mode 100644
index 00000000..54761411
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-4.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")({ bg: \"red\" }, {})\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const StyledDiv = styled(\"div\")({ bg: \"red\" }, {});\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-5.snap b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-5.snap
new file mode 100644
index 00000000..aa8d3421
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props-5.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(\"div\")({ bg: \"red\" }, {})``\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const StyledDiv = styled(\"div\")({ bg: \"red\" }, {})``;\n",
+}
diff --git a/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props.snap b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props.snap
new file mode 100644
index 00000000..ea85a4d1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/all_tests__wrong_styled_with_variable_like_emotion_props.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/tests/all_tests.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled(null)`\n          background: ${props => props.bg};\n          color: red;\n        `\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false,\n    import_aliases: HashMap::new()\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "const StyledDiv = styled(null)`\n          background: ${(props) => props.bg};\n          color: red;\n        `;\n",
+}
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap
new file mode 100644
index 00000000..c2831862
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap
@@ -0,0 +1,6 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"// This uses @emotion/styled but doesn't import it\nconst x = 1;\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+// This uses @emotion/styled but doesn't import it
+const x = 1;
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap
new file mode 100644
index 00000000..bda0523b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap
@@ -0,0 +1,6 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import { style } from '@vanilla-extract/css'\nexport const container = style({ background: 'red' })\"#,\n\"styles.css.ts\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import { style } from '@devup-ui/react';
+export const container = style({ background: 'red' })
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap
new file mode 100644
index 00000000..9acbadc5
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styledA from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+import { styled as styledA } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap
new file mode 100644
index 00000000..bafcafe1
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import * as Emotion from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+import * as Emotion from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap
new file mode 100644
index 00000000..d70f1f03
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+import { styled } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap
new file mode 100644
index 00000000..297ac075
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled, { css, keyframes } from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+import { styled, css, keyframes } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap
new file mode 100644
index 00000000..0af7d1a0
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled, { css as emotionCss } from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &emotion_alias())"
+---
+import { styled, css as emotionCss } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap
new file mode 100644
index 00000000..ce0d7512
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled from '@emotion/styled'\"#,\n\"test.tsx\", \"@devup-ui/react\", &HashMap::new())"
+---
+import styled from '@emotion/styled'
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap
new file mode 100644
index 00000000..50c8089b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap
@@ -0,0 +1,7 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled from '@emotion/styled'\nimport { style } from '@vanilla-extract/css'\nimport { useState } from 'react'\"#,\n\"test.tsx\", \"@devup-ui/react\", &combined_aliases())"
+---
+import { styled } from '@devup-ui/react';
+import { style } from '@devup-ui/react';
+import { useState } from 'react'
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap
new file mode 100644
index 00000000..b63d81ab
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import { style as myStyle } from '@vanilla-extract/css'\"#,\n\"test.tsx\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import { style as myStyle } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named.snap
new file mode 100644
index 00000000..26d93eaf
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import { style, globalStyle } from '@vanilla-extract/css'\"#,\n\"test.tsx\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import { style, globalStyle } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap
new file mode 100644
index 00000000..52120f70
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import * as VE from '@vanilla-extract/css'\"#,\n\"test.tsx\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import * as VE from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap
new file mode 100644
index 00000000..4491be92
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import vanillaDefault, { style } from '@vanilla-extract/css'\"#,\n\"test.tsx\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import { default as vanillaDefault, style } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap
new file mode 100644
index 00000000..3fb23269
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import { useState } from 'react'\"#, \"test.tsx\",\n\"@devup-ui/react\", &emotion_alias())"
+---
+import { useState } from 'react'
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap
new file mode 100644
index 00000000..d61c4531
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap
@@ -0,0 +1,10 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import { style } from '@vanilla-extract/css'\n\nexport const button = style({\n    background: 'blue',\n    padding: '8px',\n});\"#,\n\"test.css.ts\", \"@devup-ui/react\", &vanilla_extract_alias())"
+---
+import { style } from '@devup-ui/react';
+
+export const button = style({
+    background: 'blue',
+    padding: '8px',
+});
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap
new file mode 100644
index 00000000..1302f578
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import '@emotion/styled'\"#, \"test.tsx\",\n\"@devup-ui/react\", &emotion_alias())"
+---
+import '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__styled_components.snap b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__styled_components.snap
new file mode 100644
index 00000000..5effdcb6
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__import_alias_visit__tests__styled_components.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/import_alias_visit.rs
+expression: "transform_import_aliases(r#\"import styled from 'styled-components'\"#,\n\"test.tsx\", \"@devup-ui/react\", &styled_components_alias())"
+---
+import { styled } from '@devup-ui/react';
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_basic.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_basic.snap
new file mode 100644
index 00000000..8baa4082
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_basic.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/tailwind.rs
+expression: sort_styles(styles)
+---
+{
+    Static(
+        ExtractStaticStyle {
+            property: "background-color",
+            value: "#EF4444",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "display",
+            value: "flex",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "padding",
+            value: "1rem",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+}
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_complex.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_complex.snap
new file mode 100644
index 00000000..1d47576b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_complex.snap
@@ -0,0 +1,110 @@
+---
+source: libs/extractor/src/tailwind.rs
+expression: sort_styles(styles)
+---
+{
+    Static(
+        ExtractStaticStyle {
+            property: "align-items",
+            value: "center",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "background-color",
+            value: "#FFF",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "border-radius",
+            value: ".5rem",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "box-shadow",
+            value: "0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)",
+            level: 0,
+            selector: Some(
+                Selector(
+                    "&:hover",
+                ),
+            ),
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "box-shadow",
+            value: "0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "display",
+            value: "flex",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "justify-content",
+            value: "space-between",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "padding",
+            value: "1rem",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "transition-duration",
+            value: "200ms",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "transition-property",
+            value: "box-shadow",
+            level: 0,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+}
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_responsive.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_responsive.snap
new file mode 100644
index 00000000..429e176b
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_responsive.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/tailwind.rs
+expression: sort_styles(styles)
+---
+{
+    Static(
+        ExtractStaticStyle {
+            property: "background-color",
+            value: "#3B82F6",
+            level: 1,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "display",
+            value: "flex",
+            level: 3,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "padding",
+            value: "2rem",
+            level: 2,
+            selector: None,
+            style_order: None,
+            layer: None,
+        },
+    ),
+}
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_variants.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_variants.snap
new file mode 100644
index 00000000..4c4efe70
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__tailwind__tests__parse_tailwind_to_styles_variants.snap
@@ -0,0 +1,48 @@
+---
+source: libs/extractor/src/tailwind.rs
+expression: sort_styles(styles)
+---
+{
+    Static(
+        ExtractStaticStyle {
+            property: "background-color",
+            value: "#3B82F6",
+            level: 0,
+            selector: Some(
+                Selector(
+                    "&:hover",
+                ),
+            ),
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "color",
+            value: "#FFF",
+            level: 0,
+            selector: Some(
+                Selector(
+                    ":root[data-theme=dark] &",
+                ),
+            ),
+            style_order: None,
+            layer: None,
+        },
+    ),
+    Static(
+        ExtractStaticStyle {
+            property: "outline",
+            value: "2px solid transparent",
+            level: 0,
+            selector: Some(
+                Selector(
+                    "&:focus",
+                ),
+            ),
+            style_order: None,
+            layer: None,
+        },
+    ),
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_typography-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_typography-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_typography.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_typography.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_typography.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_var_typography-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_var_typography-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__apply_var_typography.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__apply_var_typography.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_at_prefix.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__at_rules_underscore_prefix.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__avoid_same_name_component.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__avoid_same_name_component.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__backtick_prop-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__backtick_prop-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__backtick_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__backtick_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__component_in_func.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__component_in_func.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_expression_with_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_expression_with_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_styles.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_styles.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_with_both_branches.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__conditional_with_both_branches.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__container_at_rule_in_css-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__container_at_rule_in_css-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__container_at_rule_in_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__container_at_rule_in_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-12.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-12.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-12.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-12.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-13.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-13.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-14.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-14.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-15.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-15.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-16.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-16.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-17.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-17.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-18.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-18.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-19.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-19.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-20.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-20.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-21.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-21.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__convert_tag.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__convert_tag.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_function_empty_object.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_function_empty_object.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_function_empty_object.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_function_empty_object.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_function_no_args.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_function_no_args.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_function_no_args.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_function_no_args.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_props_destructuring_assignment.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_props_destructuring_assignment.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_variable_reassignment.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_variable_reassignment.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_with_template_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__css_with_template_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__css_with_template_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__css_with_template_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__custom_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__default_import_usage.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__default_import_usage.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__dot_notation_theme_variables.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__duplicate_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__duplicate_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__dynamic_class_name_merge.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__dynamic_class_name_merge.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__enum_style_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__enum_style_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__enum_style_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__enum_style_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_advenced_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_class_name_from_component.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_class_name_from_component.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_conditional_style_props_with_class_name.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_logical_case.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_logical_case.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_responsive_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_dynamic_style_props_with_type.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_enum_style_property.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_empty.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_empty.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_font_faces.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_imports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_imports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_wrong_imports-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_global_css_with_wrong_imports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs_literal-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs_literal-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_keyframs_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_logical_case.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_nested_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_responsive_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_dynamic_value_conditional_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-12.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-12.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-13.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-13.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-14.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-14.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-15.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-15.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-16.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-16.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_literal-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_literal-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_selector_with_responsive.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-12.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-13.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-15.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_class_name_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_media_query.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_static_css_with_theme.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_class_name.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_default_import.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_default_import.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_var_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_style_props_with_var_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_variable_style_props_with_style-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_variable_style_props_with_style.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_variable_style_props_with_style.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_variable_style_props_with_style.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_global_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_keyframs.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_keyframs.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__extract_wrong_responsive_style_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_at_rules.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_multi_value_optimization.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_function.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_function.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_function.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_function.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_layer_property_extraction.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_layer_property_extraction.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_no_args.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_no_args.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_no_args.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_no_args.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_font_faces.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_font_faces.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_font_faces.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_font_faces.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_imports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_imports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_imports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_imports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_layer.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__group_selector_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__group_selector_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__ignore_special_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__ignore_special_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__ignore_special_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__ignore_special_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__ignore_special_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_custom_named_export.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_custom_named_export.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_emotion_styled.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_emotion_styled.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_multiple_aliases.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_multiple_aliases.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_renamed_import.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_renamed_import.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_styled_components.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_styled_components.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_main_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_main_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_main_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_main_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_wrong_component-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_wrong_component-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_wrong_component-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__import_wrong_component.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__import_wrong_component.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__import_wrong_component.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__keyframes_function.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__keyframes_function.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__keyframes_no_args.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__keyframes_no_args.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__keyframes_no_args.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__keyframes_no_args.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__maintain_value.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__maintain_value.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__mask_properties_with_korean.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__mask_properties_with_korean.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__media_query_selectors.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__member_expression_style.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__member_expression_style.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__member_expression_style.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__member_expression_style.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__multiple_dynamic_values.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__multiple_dynamic_values.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__multiple_dynamic_values.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__multiple_dynamic_values.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__namespace_import_css.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__namespace_import_css.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__namespace_import_usage.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__namespace_import_usage.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__negative_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__negative_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__nested_conditional.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__nested_conditional.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__nested_theme_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__nested_theme_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_aspect_ratio.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_func.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_multi_css_value.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__optimize_multi_css_value.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_responsive_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_responsive_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_array_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_responsive_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_responsive_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_object_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_variable_object_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_wrong.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_direct_wrong.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_multi_expression.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_multi_expression.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_array_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__props_wrong_direct_object_select.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__remove_semicolon-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__remove_semicolon-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__remove_semicolon.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__responsive_array_styles.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__responsive_array_styles.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__rest_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__rest_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__rest_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__rest_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__rest_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__selector_refs_with_global_theme.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__selector_refs_with_global_theme.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__spread_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__spread_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__spread_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__spread_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_order_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_prop_merge.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_prop_merge.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_prop_merge.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_prop_merge.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables_mjs.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_variables_mjs.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_variables_mjs.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__style_vars_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__style_vars_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-10.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-10.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-10.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-10.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-11.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-11.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-11.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-11.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-9.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-9.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled-9.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled-9.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_spread.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_spread.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_cjs.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-7.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-7.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-7.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-7.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-8.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-8.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-8.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs-8.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__support_transpile_mjs.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_arbitrary_values.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_arbitrary_values.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_arbitrary_values.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_arbitrary_values.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_classname_extraction.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_extraction.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_classname_extraction.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_extraction.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_classname_with_devup_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_with_devup_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_classname_with_devup_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_with_devup_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_classname_with_variants.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_with_variants.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_classname_with_variants.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_classname_with_variants.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_full_integration.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_full_integration.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_full_integration.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_full_integration.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_mixed_with_devup_responsive.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_mixed_with_devup_responsive.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_mixed_with_devup_responsive.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_mixed_with_devup_responsive.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_negative_values.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_negative_values.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_negative_values.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_negative_values.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_function_call_expression.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_function_call_expression.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_function_call_expression.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_function_call_expression.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_logical_expression.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_logical_expression.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_logical_expression.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_logical_expression.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_nested_template_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_nested_template_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_nested_template_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_nested_template_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_parenthesized_expression.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_parenthesized_expression.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_parenthesized_expression.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_parenthesized_expression.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_style_order.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_style_order.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_style_order.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_style_order.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_variable_expression.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_variable_expression.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_template_literal_with_variable_expression.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_template_literal_with_variable_expression.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_with_all_variant_types.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_all_variant_types.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_with_all_variant_types.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_all_variant_types.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_with_as_prop.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_as_prop.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_with_as_prop.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_as_prop.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__tailwind_with_conditional_template_literal.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_conditional_template_literal.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__tailwind_with_conditional_template_literal.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__tailwind_with_conditional_template_literal.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-6.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props-6.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__template_literal_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__ternary_operator_in_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__theme_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__theme_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__typography_style.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__typography_style.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__typography_style.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__typography_style.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_all_imports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_all_imports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_composition.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_composition.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_container.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_container.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_create_var.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_create_var.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_layer.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_layer.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_media_queries.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_media_queries.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_references.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_references.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selectors.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_selectors.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_supports.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_supports.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_vars_only.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_vars_only.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_computed.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_computed.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_spread.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_spread.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_variable.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__vanilla_extract_with_variable.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__with_prefix.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__with_prefix.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_style_variables.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_style_variables.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_style_variables.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-3.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-3.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-3.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-3.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-4.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-4.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-4.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-4.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-5.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-5.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-5.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-5.snap
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap b/libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
similarity index 100%
rename from libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
rename to libs/extractor/tests/snapshots/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a.snap b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a.snap
new file mode 100644
index 00000000..f107868d
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/utils.rs
+expression: code
+---
+a;
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a_b.snap b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a_b.snap
new file mode 100644
index 00000000..530f4920
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_a_b.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/utils.rs
+expression: code
+---
+[a,b].filter(Boolean).join(` `);
diff --git a/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_className_quoteclass-namequote.snap b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_className_quoteclass-namequote.snap
new file mode 100644
index 00000000..db9ba376
--- /dev/null
+++ b/libs/extractor/tests/snapshots/snapshots/extractor__utils__tests__wrap_array_filter_className_quoteclass-namequote.snap
@@ -0,0 +1,5 @@
+---
+source: libs/extractor/src/utils.rs
+expression: code
+---
+[className,`class-name`].filter(Boolean).join(` `);

From 7d81726583d45c91b7a2f1329c575a07094a6271 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Thu, 5 Feb 2026 13:23:36 +0900
Subject: [PATCH 2/3] refactor(extractor,css): add ExtractionContext for
 stateless extraction

Phase 2 foundation for Turbopack multi-core support:

- Add ExtractionContext struct (extractor/src/context.rs)
  - Holds class_map, file_map, prefix, debug state
  - Replaces global state for parallel extraction
  - Full test coverage (8 tests)

- Add context-aware CSS operations (css/src/context_ops.rs)
  - sheet_to_classname_with_context()
  - sheet_to_variable_name_with_context()
  - keyframes_to_keyframes_name_with_context()
  - Full test coverage (9 tests)

- Export ExtractionContext from extractor crate
- Add bimap dependency to extractor

This lays groundwork for threading context through DevupVisitor
and eliminating global state from core extraction logic.
---
 Cargo.lock                    |   1 +
 libs/css/src/context_ops.rs   | 436 ++++++++++++++++++++++++++++++++++
 libs/css/src/lib.rs           |   1 +
 libs/extractor/Cargo.toml     |   1 +
 libs/extractor/src/context.rs | 283 ++++++++++++++++++++++
 libs/extractor/src/lib.rs     |   2 +
 6 files changed, 724 insertions(+)
 create mode 100644 libs/css/src/context_ops.rs
 create mode 100644 libs/extractor/src/context.rs

diff --git a/Cargo.lock b/Cargo.lock
index 80676a64..3e9f9ec5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -679,6 +679,7 @@ dependencies = [
 name = "extractor"
 version = "0.1.0"
 dependencies = [
+ "bimap",
  "boa_engine",
  "css",
  "insta",
diff --git a/libs/css/src/context_ops.rs b/libs/css/src/context_ops.rs
new file mode 100644
index 00000000..0dd3164f
--- /dev/null
+++ b/libs/css/src/context_ops.rs
@@ -0,0 +1,436 @@
+//! Context-aware operations for CSS class name generation.
+//!
+//! These functions accept an `ExtractionContext` parameter instead of using
+//! global state, enabling stateless extraction for parallel processing.
+//!
+//! Each function has a corresponding global-state version in the parent module
+//! for backward compatibility.
+
+use crate::num_to_nm_base::num_to_nm_base;
+use crate::optimize_value::optimize_value;
+use bimap::BiHashMap;
+use std::collections::HashMap;
+
+/// Context state for CSS extraction (mirrors ExtractionContext from extractor crate)
+///
+/// This is a simplified view of the state needed by css crate functions.
+/// The extractor crate's ExtractionContext wraps this.
+#[derive(Debug, Default)]
+pub struct CssContext {
+    /// Maps filename → (style_key → class_number)
+    pub class_map: HashMap<String, HashMap<String, usize>>,
+    /// Bidirectional map: filename ↔ file_number
+    pub file_map: BiHashMap<String, usize>,
+    /// Optional prefix for all generated class names
+    pub prefix: Option<String>,
+    /// Debug mode flag
+    pub debug: bool,
+}
+
+impl CssContext {
+    /// Creates a new empty context.
+    #[must_use]
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Gets the file number for a filename, creating a new mapping if needed.
+    pub fn get_file_num(&mut self, filename: &str) -> usize {
+        let len = self.file_map.len();
+        if !self.file_map.contains_left(filename) {
+            self.file_map.insert(filename.to_string(), len);
+        }
+        *self.file_map.get_by_left(filename).unwrap()
+    }
+
+    /// Gets the filename for a file number.
+    #[must_use]
+    pub fn get_filename(&self, file_num: usize) -> Option<&str> {
+        self.file_map.get_by_right(&file_num).map(String::as_str)
+    }
+
+    /// Resets all state.
+    pub fn reset(&mut self) {
+        self.class_map.clear();
+        self.file_map.clear();
+    }
+}
+
+fn encode_selector(selector: &str) -> String {
+    let mut result = String::with_capacity(selector.len() * 2);
+    for c in selector.chars() {
+        match c {
+            '&' => result.push_str("_a_"),
+            ':' => result.push_str("_c_"),
+            '(' => result.push_str("_lp_"),
+            ')' => result.push_str("_rp_"),
+            '[' => result.push_str("_lb_"),
+            ']' => result.push_str("_rb_"),
+            '=' => result.push_str("_eq_"),
+            '>' => result.push_str("_gt_"),
+            '<' => result.push_str("_lt_"),
+            '~' => result.push_str("_tl_"),
+            '+' => result.push_str("_pl_"),
+            ' ' => result.push_str("_s_"),
+            '*' => result.push_str("_st_"),
+            '.' => result.push_str("_d_"),
+            '#' => result.push_str("_h_"),
+            ',' => result.push_str("_cm_"),
+            '"' => result.push_str("_dq_"),
+            '\'' => result.push_str("_sq_"),
+            '/' => result.push_str("_sl_"),
+            '\\' => result.push_str("_bs_"),
+            '%' => result.push_str("_pc_"),
+            '^' => result.push_str("_cr_"),
+            '$' => result.push_str("_dl_"),
+            '|' => result.push_str("_pp_"),
+            '@' => result.push_str("_at_"),
+            '!' => result.push_str("_ex_"),
+            '?' => result.push_str("_qm_"),
+            ';' => result.push_str("_sc_"),
+            '{' => result.push_str("_lc_"),
+            '}' => result.push_str("_rc_"),
+            '-' => result.push('-'),
+            '_' => result.push('_'),
+            _ if c.is_ascii_alphanumeric() => result.push(c),
+            _ => {
+                result.push_str("_u");
+                result.push_str(&format!("{:04x}", c as u32));
+                result.push('_');
+            }
+        }
+    }
+    result
+}
+
+/// Generate a class name for a style sheet entry (context-aware version).
+///
+/// This is the context-aware equivalent of `sheet_to_classname`.
+pub fn sheet_to_classname_with_context(
+    ctx: &mut CssContext,
+    property: &str,
+    level: u8,
+    value: Option<&str>,
+    selector: Option<&str>,
+    style_order: Option<u8>,
+    filename: Option<&str>,
+) -> String {
+    // Copy prefix to avoid borrow issues
+    let prefix = ctx.prefix.clone().unwrap_or_default();
+    let debug = ctx.debug;
+
+    // base style
+    let filename = if style_order == Some(0) {
+        None
+    } else {
+        filename
+    };
+    if debug {
+        let selector = selector.unwrap_or_default().trim();
+        let file_suffix = filename
+            .map(|v| format!("-{}", ctx.get_file_num(v)))
+            .unwrap_or_default();
+        format!(
+            "{}{}-{}-{}-{}-{}{}",
+            prefix,
+            property.trim(),
+            level,
+            optimize_value(value.unwrap_or_default()),
+            if selector.is_empty() {
+                String::new()
+            } else {
+                encode_selector(selector)
+            },
+            style_order.unwrap_or(255),
+            file_suffix,
+        )
+    } else {
+        let file_num_suffix = filename
+            .map(|v| format!("-{}", ctx.get_file_num(v)))
+            .unwrap_or_default();
+        let key = format!(
+            "{}-{}-{}-{}-{}{}",
+            property.trim(),
+            level,
+            optimize_value(value.unwrap_or_default()),
+            selector.unwrap_or_default().trim(),
+            style_order.unwrap_or(255),
+            file_num_suffix,
+        );
+        let filename_str = filename.map(|v| v.to_string()).unwrap_or_default();
+        let file_num = if !filename_str.is_empty() {
+            Some(ctx.get_file_num(&filename_str))
+        } else {
+            None
+        };
+        let file_entry = ctx.class_map.entry(filename_str).or_default();
+        let class_num = if let Some(&num) = file_entry.get(&key) {
+            num_to_nm_base(num)
+        } else {
+            let len = file_entry.len();
+            file_entry.insert(key, len);
+            num_to_nm_base(len)
+        };
+        if let Some(fnum) = file_num {
+            format!("{}{}-{}", prefix, num_to_nm_base(fnum), class_num)
+        } else {
+            format!("{}{}", prefix, class_num)
+        }
+    }
+}
+
+/// Generate a CSS variable name (context-aware version).
+///
+/// This is the context-aware equivalent of `sheet_to_variable_name`.
+pub fn sheet_to_variable_name_with_context(
+    ctx: &mut CssContext,
+    property: &str,
+    level: u8,
+    selector: Option<&str>,
+) -> String {
+    // Copy prefix to avoid borrow issues
+    let prefix = ctx.prefix.clone().unwrap_or_default();
+    let debug = ctx.debug;
+
+    if debug {
+        let selector = selector.unwrap_or_default().trim();
+        format!(
+            "--{}{}-{}-{}",
+            prefix,
+            property,
+            level,
+            if selector.is_empty() {
+                String::new()
+            } else {
+                encode_selector(selector)
+            }
+        )
+    } else {
+        let key = format!(
+            "{}-{}-{}",
+            property,
+            level,
+            selector.unwrap_or_default().trim()
+        );
+        let file_entry = ctx.class_map.entry(String::new()).or_default();
+        if let Some(&num) = file_entry.get(&key) {
+            format!("--{}{}", prefix, num_to_nm_base(num))
+        } else {
+            let len = file_entry.len();
+            file_entry.insert(key, len);
+            format!("--{}{}", prefix, num_to_nm_base(len))
+        }
+    }
+}
+
+/// Generate a keyframes animation name (context-aware version).
+///
+/// This is the context-aware equivalent of `keyframes_to_keyframes_name`.
+pub fn keyframes_to_keyframes_name_with_context(
+    ctx: &mut CssContext,
+    keyframes: &str,
+    filename: Option<&str>,
+) -> String {
+    // Copy prefix to avoid borrow issues
+    let prefix = ctx.prefix.clone().unwrap_or_default();
+    let debug = ctx.debug;
+
+    if debug {
+        format!("{}k-{keyframes}", prefix)
+    } else {
+        let key = format!("k-{keyframes}");
+        let filename_str = filename.map(|v| v.to_string()).unwrap_or_default();
+        let file_num = if !filename_str.is_empty() {
+            Some(ctx.get_file_num(&filename_str))
+        } else {
+            None
+        };
+        let file_entry = ctx.class_map.entry(filename_str).or_default();
+        let class_num = if let Some(&num) = file_entry.get(&key) {
+            num_to_nm_base(num).to_string()
+        } else {
+            let len = file_entry.len();
+            file_entry.insert(key, len);
+            num_to_nm_base(len).to_string()
+        };
+        if let Some(fnum) = file_num {
+            format!("{}{}-{}", prefix, num_to_nm_base(fnum), class_num)
+        } else {
+            format!("{}{}", prefix, class_num)
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_sheet_to_classname_basic() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+
+        assert_eq!(
+            sheet_to_classname_with_context(
+                &mut ctx,
+                "background",
+                0,
+                Some("red"),
+                None,
+                None,
+                None
+            ),
+            "a"
+        );
+        assert_eq!(
+            sheet_to_classname_with_context(&mut ctx, "color", 0, Some("blue"), None, None, None),
+            "b"
+        );
+        // Same style returns same class
+        assert_eq!(
+            sheet_to_classname_with_context(
+                &mut ctx,
+                "background",
+                0,
+                Some("red"),
+                None,
+                None,
+                None
+            ),
+            "a"
+        );
+    }
+
+    #[test]
+    fn test_sheet_to_classname_debug() {
+        let mut ctx = CssContext::new();
+        ctx.debug = true;
+
+        assert_eq!(
+            sheet_to_classname_with_context(
+                &mut ctx,
+                "background",
+                0,
+                Some("red"),
+                None,
+                None,
+                None
+            ),
+            "background-0-red--255"
+        );
+    }
+
+    #[test]
+    fn test_sheet_to_classname_with_prefix() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+        ctx.prefix = Some("app-".to_string());
+
+        assert_eq!(
+            sheet_to_classname_with_context(
+                &mut ctx,
+                "background",
+                0,
+                Some("red"),
+                None,
+                None,
+                None
+            ),
+            "app-a"
+        );
+    }
+
+    #[test]
+    fn test_sheet_to_classname_with_filename() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+
+        let class1 = sheet_to_classname_with_context(
+            &mut ctx,
+            "background",
+            0,
+            Some("red"),
+            None,
+            None,
+            Some("file1.tsx"),
+        );
+        let class2 = sheet_to_classname_with_context(
+            &mut ctx,
+            "background",
+            0,
+            Some("red"),
+            None,
+            None,
+            Some("file2.tsx"),
+        );
+        // Different files should have different prefixes
+        assert_ne!(class1, class2);
+    }
+
+    #[test]
+    fn test_sheet_to_variable_name_basic() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+
+        assert_eq!(
+            sheet_to_variable_name_with_context(&mut ctx, "background", 0, None),
+            "--a"
+        );
+        assert_eq!(
+            sheet_to_variable_name_with_context(&mut ctx, "color", 0, None),
+            "--b"
+        );
+    }
+
+    #[test]
+    fn test_sheet_to_variable_name_debug() {
+        let mut ctx = CssContext::new();
+        ctx.debug = true;
+
+        assert_eq!(
+            sheet_to_variable_name_with_context(&mut ctx, "background", 0, None),
+            "--background-0-"
+        );
+    }
+
+    #[test]
+    fn test_keyframes_basic() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+
+        assert_eq!(
+            keyframes_to_keyframes_name_with_context(&mut ctx, "spin", None),
+            "a"
+        );
+        assert_eq!(
+            keyframes_to_keyframes_name_with_context(&mut ctx, "spin", None),
+            "a"
+        );
+        assert_eq!(
+            keyframes_to_keyframes_name_with_context(&mut ctx, "fade", None),
+            "b"
+        );
+    }
+
+    #[test]
+    fn test_keyframes_debug() {
+        let mut ctx = CssContext::new();
+        ctx.debug = true;
+
+        assert_eq!(
+            keyframes_to_keyframes_name_with_context(&mut ctx, "spin", None),
+            "k-spin"
+        );
+    }
+
+    #[test]
+    fn test_keyframes_with_filename() {
+        let mut ctx = CssContext::new();
+        ctx.debug = false;
+
+        let name1 = keyframes_to_keyframes_name_with_context(&mut ctx, "spin", Some("file1.tsx"));
+        let name2 = keyframes_to_keyframes_name_with_context(&mut ctx, "spin", Some("file2.tsx"));
+        // Different files should have different prefixes
+        assert_ne!(name1, name2);
+    }
+}
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
index 456cd4bd..ad6b0de3 100644
--- a/libs/css/src/lib.rs
+++ b/libs/css/src/lib.rs
@@ -1,5 +1,6 @@
 pub mod class_map;
 mod constant;
+pub mod context_ops;
 pub mod debug;
 pub mod file_map;
 pub mod is_special_property;
diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml
index cc4936df..f183ae4f 100644
--- a/libs/extractor/Cargo.toml
+++ b/libs/extractor/Cargo.toml
@@ -19,6 +19,7 @@ strum = "0.27.2"
 strum_macros = "0.27.2"
 serde_json = "1.0"
 boa_engine = "0.21"
+bimap = "0.6.3"
 
 [dev-dependencies]
 insta = "1.46.3"
diff --git a/libs/extractor/src/context.rs b/libs/extractor/src/context.rs
new file mode 100644
index 00000000..d2e1cc66
--- /dev/null
+++ b/libs/extractor/src/context.rs
@@ -0,0 +1,283 @@
+//! Extraction context for stateless CSS extraction.
+//!
+//! This module provides `ExtractionContext` which holds all mutable state
+//! needed during CSS extraction. By passing context explicitly rather than
+//! using global state, we enable parallel file processing for Turbopack
+//! multi-core builds.
+//!
+//! # Usage
+//!
+//! ```rust,ignore
+//! use extractor::{ExtractionContext, extract_with_context, ExtractOption};
+//!
+//! // Create a shared context for the build
+//! let mut ctx = ExtractionContext::new();
+//!
+//! // Extract styles from multiple files (can be parallelized)
+//! let result1 = extract_with_context("file1.tsx", code1, options, &mut ctx)?;
+//! let result2 = extract_with_context("file2.tsx", code2, options, &mut ctx)?;
+//! ```
+
+use bimap::BiHashMap;
+use std::collections::HashMap;
+
+/// Extraction context holding all mutable state for CSS extraction.
+///
+/// This struct replaces the global `GLOBAL_CLASS_MAP`, `GLOBAL_FILE_MAP`,
+/// and `GLOBAL_PREFIX` statics, enabling stateless extraction that can
+/// be parallelized across multiple files.
+///
+/// # Thread Safety
+///
+/// The context itself is NOT thread-safe. For parallel extraction:
+/// - Use separate contexts per thread, then merge
+/// - Or wrap in `Arc<Mutex<ExtractionContext>>` if shared access needed
+///
+/// The WASM boundary maintains a single global context for backward
+/// compatibility with the existing JS API.
+#[derive(Debug, Default)]
+pub struct ExtractionContext {
+    /// Maps filename → (style_key → class_number)
+    ///
+    /// Used for generating unique, deterministic class names.
+    /// The outer key is the filename (empty string for global styles).
+    /// The inner map tracks which style combinations have been seen
+    /// and assigns sequential numbers for minimal class names.
+    pub(crate) class_map: HashMap<String, HashMap<String, usize>>,
+
+    /// Bidirectional map: filename ↔ file_number
+    ///
+    /// Used for per-file class name prefixes to avoid collisions
+    /// between files while keeping class names short.
+    pub(crate) file_map: BiHashMap<String, usize>,
+
+    /// Optional prefix for all generated class names.
+    ///
+    /// When set, all class names will be prefixed with this string.
+    /// Example: prefix "app-" → class names become "app-a", "app-b", etc.
+    pub(crate) prefix: Option<String>,
+
+    /// Debug mode flag.
+    ///
+    /// When true, generates human-readable class names for debugging.
+    /// Example: "background-0-red-hover-255" instead of "a"
+    pub(crate) debug: bool,
+}
+
+impl ExtractionContext {
+    /// Creates a new empty extraction context.
+    #[must_use]
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Creates a context with a specific prefix.
+    #[must_use]
+    pub fn with_prefix(prefix: Option<String>) -> Self {
+        Self {
+            prefix,
+            ..Default::default()
+        }
+    }
+
+    /// Sets the class name prefix.
+    pub fn set_prefix(&mut self, prefix: Option<String>) {
+        self.prefix = prefix;
+    }
+
+    /// Gets the current prefix.
+    #[must_use]
+    pub fn get_prefix(&self) -> Option<&str> {
+        self.prefix.as_deref()
+    }
+
+    /// Sets debug mode.
+    pub fn set_debug(&mut self, debug: bool) {
+        self.debug = debug;
+    }
+
+    /// Gets debug mode.
+    #[must_use]
+    pub fn is_debug(&self) -> bool {
+        self.debug
+    }
+
+    /// Resets the class map (for testing).
+    pub fn reset_class_map(&mut self) {
+        self.class_map.clear();
+    }
+
+    /// Resets the file map (for testing).
+    pub fn reset_file_map(&mut self) {
+        self.file_map.clear();
+    }
+
+    /// Resets all state (for testing).
+    pub fn reset(&mut self) {
+        self.class_map.clear();
+        self.file_map.clear();
+    }
+
+    /// Gets the file number for a filename, creating a new mapping if needed.
+    pub fn get_file_num(&mut self, filename: &str) -> usize {
+        let len = self.file_map.len();
+        if !self.file_map.contains_left(filename) {
+            self.file_map.insert(filename.to_string(), len);
+        }
+        *self.file_map.get_by_left(filename).unwrap()
+    }
+
+    /// Gets the filename for a file number.
+    #[must_use]
+    pub fn get_filename(&self, file_num: usize) -> Option<&str> {
+        self.file_map.get_by_right(&file_num).map(String::as_str)
+    }
+
+    /// Sets the class map from external data (for WASM interop).
+    pub fn set_class_map(&mut self, map: HashMap<String, HashMap<String, usize>>) {
+        self.class_map = map;
+    }
+
+    /// Gets a clone of the class map (for WASM interop).
+    #[must_use]
+    pub fn get_class_map(&self) -> HashMap<String, HashMap<String, usize>> {
+        self.class_map.clone()
+    }
+
+    /// Sets the file map from external data (for WASM interop).
+    pub fn set_file_map(&mut self, map: BiHashMap<String, usize>) {
+        self.file_map = map;
+    }
+
+    /// Gets a clone of the file map (for WASM interop).
+    #[must_use]
+    pub fn get_file_map(&self) -> BiHashMap<String, usize> {
+        self.file_map.clone()
+    }
+
+    /// Gets or creates a class number for a style key in a file.
+    ///
+    /// This is the core method for generating deterministic class names.
+    /// Given a style key (property-value-selector combination), it returns
+    /// a unique number that can be converted to a short class name.
+    pub fn get_or_create_class_num(&mut self, filename: &str, style_key: &str) -> usize {
+        let file_map = self.class_map.entry(filename.to_string()).or_default();
+        if let Some(&num) = file_map.get(style_key) {
+            num
+        } else {
+            let num = file_map.len();
+            file_map.insert(style_key.to_string(), num);
+            num
+        }
+    }
+
+    /// Gets an existing class number without creating a new one.
+    #[must_use]
+    pub fn get_class_num(&self, filename: &str, style_key: &str) -> Option<usize> {
+        self.class_map
+            .get(filename)
+            .and_then(|m| m.get(style_key).copied())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_new_context() {
+        let ctx = ExtractionContext::new();
+        assert!(ctx.class_map.is_empty());
+        assert!(ctx.file_map.is_empty());
+        assert!(ctx.prefix.is_none());
+        assert!(!ctx.debug);
+    }
+
+    #[test]
+    fn test_with_prefix() {
+        let ctx = ExtractionContext::with_prefix(Some("app-".to_string()));
+        assert_eq!(ctx.get_prefix(), Some("app-"));
+    }
+
+    #[test]
+    fn test_set_prefix() {
+        let mut ctx = ExtractionContext::new();
+        ctx.set_prefix(Some("test-".to_string()));
+        assert_eq!(ctx.get_prefix(), Some("test-"));
+        ctx.set_prefix(None);
+        assert_eq!(ctx.get_prefix(), None);
+    }
+
+    #[test]
+    fn test_debug_mode() {
+        let mut ctx = ExtractionContext::new();
+        assert!(!ctx.is_debug());
+        ctx.set_debug(true);
+        assert!(ctx.is_debug());
+    }
+
+    #[test]
+    fn test_file_num_mapping() {
+        let mut ctx = ExtractionContext::new();
+
+        // First file gets 0
+        assert_eq!(ctx.get_file_num("file1.tsx"), 0);
+        // Same file returns same number
+        assert_eq!(ctx.get_file_num("file1.tsx"), 0);
+        // Second file gets 1
+        assert_eq!(ctx.get_file_num("file2.tsx"), 1);
+        // Lookup by number
+        assert_eq!(ctx.get_filename(0), Some("file1.tsx"));
+        assert_eq!(ctx.get_filename(1), Some("file2.tsx"));
+        assert_eq!(ctx.get_filename(99), None);
+    }
+
+    #[test]
+    fn test_class_num_generation() {
+        let mut ctx = ExtractionContext::new();
+
+        // First style in file gets 0
+        assert_eq!(ctx.get_or_create_class_num("", "bg-red"), 0);
+        // Same style returns same number
+        assert_eq!(ctx.get_or_create_class_num("", "bg-red"), 0);
+        // Different style gets next number
+        assert_eq!(ctx.get_or_create_class_num("", "color-blue"), 1);
+        // Different file has its own numbering
+        assert_eq!(ctx.get_or_create_class_num("file.tsx", "bg-red"), 0);
+
+        // Lookup without creation
+        assert_eq!(ctx.get_class_num("", "bg-red"), Some(0));
+        assert_eq!(ctx.get_class_num("", "unknown"), None);
+    }
+
+    #[test]
+    fn test_reset() {
+        let mut ctx = ExtractionContext::new();
+        ctx.get_file_num("file.tsx");
+        ctx.get_or_create_class_num("", "style");
+
+        ctx.reset();
+
+        assert!(ctx.class_map.is_empty());
+        assert!(ctx.file_map.is_empty());
+    }
+
+    #[test]
+    fn test_set_and_get_maps() {
+        let mut ctx = ExtractionContext::new();
+
+        // Set class map
+        let mut class_map = HashMap::new();
+        let mut inner = HashMap::new();
+        inner.insert("key".to_string(), 42);
+        class_map.insert("file".to_string(), inner);
+        ctx.set_class_map(class_map.clone());
+        assert_eq!(ctx.get_class_map(), class_map);
+
+        // Set file map
+        let mut file_map = BiHashMap::new();
+        file_map.insert("test.tsx".to_string(), 5);
+        ctx.set_file_map(file_map.clone());
+        assert_eq!(ctx.get_file_map(), file_map);
+    }
+}
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 9ccd70c9..8dca25ca 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -1,5 +1,6 @@
 mod as_visit;
 mod component;
+pub mod context;
 mod css_utils;
 pub mod extract_style;
 mod extractor;
@@ -12,6 +13,7 @@ mod util_type;
 mod utils;
 mod vanilla_extract;
 mod visit;
+pub use crate::context::ExtractionContext;
 pub use crate::extract_style::extract_style_value::ExtractStyleValue;
 use crate::visit::DevupVisitor;
 use css::file_map::get_file_num_by_filename;

From 0d39819576d1efd24bed4521d18b6bb531d6f772 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Thu, 5 Feb 2026 13:42:10 +0900
Subject: [PATCH 3/3] feat(extractor): add extract_with_context() for stateless
 extraction

Add sync methods to ExtractionContext for global state interop:
- sync_to_globals(): push context state to global variables
- sync_from_globals(): pull global state back to context
- from_globals(): create context from current global state

Add extract_with_context() function that wraps extract() with
context synchronization, enabling stateless extraction for
parallel processing (e.g., Turbopack multi-core builds).

This is an incremental approach - internal modules still use
global state, but the new API provides the foundation for
future parallelization work.
---
 libs/extractor/src/context.rs | 37 +++++++++++++++++++++++++++++
 libs/extractor/src/lib.rs     | 44 +++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/libs/extractor/src/context.rs b/libs/extractor/src/context.rs
index d2e1cc66..cc864b5a 100644
--- a/libs/extractor/src/context.rs
+++ b/libs/extractor/src/context.rs
@@ -180,6 +180,43 @@ impl ExtractionContext {
     }
 }
 
+/// Synchronize context with global state (for incremental migration).
+///
+/// This allows using ExtractionContext while the codebase still uses global
+/// state internally. Once the full migration is complete, this can be removed.
+impl ExtractionContext {
+    /// Populate global state from this context.
+    ///
+    /// Call this before extraction to set up the global state.
+    pub fn sync_to_globals(&self) {
+        css::class_map::set_class_map(self.class_map.clone());
+        css::file_map::set_file_map(self.file_map.clone());
+        css::set_prefix(self.prefix.clone());
+        css::debug::set_debug(self.debug);
+    }
+
+    /// Populate this context from global state.
+    ///
+    /// Call this after extraction to capture any state changes.
+    pub fn sync_from_globals(&mut self) {
+        self.class_map = css::class_map::get_class_map();
+        self.file_map = css::file_map::get_file_map();
+        self.prefix = css::get_prefix();
+        self.debug = css::debug::is_debug();
+    }
+
+    /// Create a context initialized from current global state.
+    #[must_use]
+    pub fn from_globals() -> Self {
+        Self {
+            class_map: css::class_map::get_class_map(),
+            file_map: css::file_map::get_file_map(),
+            prefix: css::get_prefix(),
+            debug: css::debug::is_debug(),
+        }
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 8dca25ca..dfe2a9b2 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -268,6 +268,50 @@ pub fn extract(
     })
 }
 
+/// Extract styles from code using an explicit context instead of global state.
+///
+/// This function enables stateless extraction for parallel processing (e.g., Turbopack).
+/// It synchronizes the context with global state before extraction and captures any
+/// state changes afterward.
+///
+/// # Arguments
+///
+/// * `filename` - The source file path (used for file-specific class prefixes)
+/// * `code` - The source code to extract styles from
+/// * `option` - Extraction options (package name, CSS directory, etc.)
+/// * `ctx` - Mutable reference to the extraction context
+///
+/// # Example
+///
+/// ```rust,ignore
+/// use extractor::{ExtractionContext, extract_with_context, ExtractOption};
+///
+/// let mut ctx = ExtractionContext::new();
+/// let result = extract_with_context(
+///     "component.tsx",
+///     r#"import { Box } from '@devup-ui/react'; export default () => <Box bg="red" />"#,
+///     ExtractOption::default(),
+///     &mut ctx,
+/// )?;
+/// ```
+pub fn extract_with_context(
+    filename: &str,
+    code: &str,
+    option: ExtractOption,
+    ctx: &mut ExtractionContext,
+) -> Result<ExtractOutput, Box<dyn Error>> {
+    // Sync context state to globals before extraction
+    ctx.sync_to_globals();
+
+    // Perform extraction using existing implementation
+    let result = extract(filename, code, option);
+
+    // Capture any state changes back to context
+    ctx.sync_from_globals();
+
+    result
+}
+
 /// Extract class names from generated code for specific style names
 /// Used for two-pass vanilla-extract processing to resolve selector references
 pub fn extract_class_map_from_code(