From 0533b5d1673f3a88c437e9e13b7a60eb4c03ac55 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Thu, 8 Jan 2026 22:54:48 +0900
Subject: [PATCH 01/31] Add ve case

---
 libs/extractor/src/lib.rs | 694 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 694 insertions(+)

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 78f2b7c1..ad1d1db5 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -9020,6 +9020,676 @@ const margin = 5;
         ));
     }
 
+    /*
+    // ============================================================================
+    // VANILLA-EXTRACT API TESTS (commented out until style/globalStyle support)
+    // ============================================================================
+
+    /// 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();
+        // .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 = 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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        // .css.ts file with style function using camelCase CSS properties
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "button.css.ts",
+                r#"import { style } from '@devup-ui/react'
+export const button = style({ backgroundColor: "blue", color: "white", padding: 8 })
+"#,
+                ExtractOption {
+                    package: "@devup-ui/react".to_string(),
+                    css_dir: "@devup-ui/react".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        // .css.ts file with multiple style exports
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "theme.css.ts",
+                r#"import { style } from '@devup-ui/react'
+export const primaryButton = style({ backgroundColor: "blue", color: "white" })
+export const secondaryButton = style({ backgroundColor: "gray", color: "black" })
+export const card = style({ padding: 16, borderRadius: "8px" })
+"#,
+                ExtractOption {
+                    package: "@devup-ui/react".to_string(),
+                    css_dir: "@devup-ui/react".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_style_css_js() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_with_responsive_and_pseudo() {
+        reset_class_map();
+        // .css.ts file with responsive values (devup-ui extension)
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "responsive.css.ts",
+                r#"import { style } from '@devup-ui/react'
+export const responsiveBox = style({ padding: [8, 16, 32], display: ["block", "flex"] })
+"#,
+                ExtractOption {
+                    package: "@devup-ui/react".to_string(),
+                    css_dir: "@devup-ui/react".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_map();
+        // .css.ts file with selectors (vanilla-extract style)
+        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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_with_keyframes_and_global() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_create_var() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_style_variants() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_font_face() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_theme() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_layer() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_container() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_global_theme() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_composition() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_selectors() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_media_queries() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_supports() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+    */
+    // END VANILLA-EXTRACT API TESTS
+
     #[rstest]
     #[case("test.tsx", "const x = 1;", "@devup-ui/react", false)] // no package string
     #[case(
@@ -9083,6 +9753,30 @@ const margin = 5;
         "@devup-ui/react",
         true
     )] // .jsx
+    #[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,

From 118417a62b2dfa6188d63baf9996b0d41121fb37 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Fri, 9 Jan 2026 00:41:48 +0900
Subject: [PATCH 02/31] Add ve case

---
 Cargo.lock                                    | 1010 ++++++++++++++-
 libs/extractor/Cargo.toml                     |    4 +
 libs/extractor/src/lib.rs                     |  119 +-
 ...r__tests__vanilla_extract_composition.snap |   63 +
 ...tor__tests__vanilla_extract_container.snap |   40 +
 ...__tests__vanilla_extract_create_var-2.snap |   18 +
 ...or__tests__vanilla_extract_create_var.snap |   27 +
 ...r__tests__vanilla_extract_font_face-2.snap |   18 +
 ...tor__tests__vanilla_extract_font_face.snap |   18 +
 ...__tests__vanilla_extract_global_theme.snap |    8 +
 ...tractor__tests__vanilla_extract_layer.snap |   57 +
 ..._tests__vanilla_extract_media_queries.snap |   54 +
 ...r__tests__vanilla_extract_selectors-2.snap |   44 +
 ...tor__tests__vanilla_extract_selectors.snap |   83 ++
 ...tests__vanilla_extract_style_css_js-2.snap |   27 +
 ...__tests__vanilla_extract_style_css_js.snap |   27 +
 ...__tests__vanilla_extract_style_css_ts.snap |   27 +
 ...sts__vanilla_extract_style_variants-2.snap |   63 +
 ...tests__vanilla_extract_style_variants.snap |   36 +
 ...ctor__tests__vanilla_extract_supports.snap |   27 +
 ...actor__tests__vanilla_extract_theme-2.snap |    8 +
 ...tractor__tests__vanilla_extract_theme.snap |    8 +
 ..._tests__vanilla_extract_with_computed.snap |   27 +
 ...a_extract_with_keyframes_and_global-2.snap |   41 +
 ...lla_extract_with_keyframes_and_global.snap |   42 +
 ..._vanilla_extract_with_pseudo_selector.snap |   31 +
 ...vanilla_extract_with_responsive_array.snap |   36 +
 ...r__tests__vanilla_extract_with_spread.snap |   36 +
 ..._tests__vanilla_extract_with_variable.snap |   27 +
 libs/extractor/src/vanilla_extract.rs         | 1100 +++++++++++++++++
 30 files changed, 3087 insertions(+), 39 deletions(-)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
 create mode 100644 libs/extractor/src/vanilla_extract.rs

diff --git a/Cargo.lock b/Cargo.lock
index dc0972cf..a0546edc 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2,6 +2,12 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "adler2"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
+
 [[package]]
 name = "aho-corasick"
 version = "1.1.4"
@@ -38,6 +44,12 @@ version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5192cca8006f1fd4f7237516f40fa183bb07f8fbdfedaa0036de5ea9b0b45e78"
 
+[[package]]
+name = "arrayvec"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
+
 [[package]]
 name = "async-trait"
 version = "0.1.89"
@@ -55,6 +67,12 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
 [[package]]
 name = "base64-simd"
 version = "0.8.0"
@@ -74,12 +92,180 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "bincode"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36eaf5d7b090263e8150820482d5d93cd964a81e4019913c972f4edcc6edb740"
+dependencies = [
+ "bincode_derive",
+ "serde",
+ "unty",
+]
+
+[[package]]
+name = "bincode_derive"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf95709a440f45e986983918d0e8a1f30a9b1df04918fc828670606804ac3c09"
+dependencies = [
+ "virtue",
+]
+
 [[package]]
 name = "bitflags"
 version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
 
+[[package]]
+name = "block-buffer"
+version = "0.10.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3078c7629b62d3f0439517fa394996acacc5cbc91c5a20d8c658e77abd503a71"
+dependencies = [
+ "generic-array",
+]
+
+[[package]]
+name = "boa_ast"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c340fe0f0b267787095cbe35240c6786ff19da63ec7b69367ba338eace8169b"
+dependencies = [
+ "bitflags",
+ "boa_interner",
+ "boa_macros",
+ "boa_string",
+ "indexmap",
+ "num-bigint",
+ "rustc-hash",
+]
+
+[[package]]
+name = "boa_engine"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f620c3f06f51e65c0504ddf04978be1b814ac6586f0b45f6019801ab5efd37f9"
+dependencies = [
+ "arrayvec",
+ "bitflags",
+ "boa_ast",
+ "boa_gc",
+ "boa_interner",
+ "boa_macros",
+ "boa_parser",
+ "boa_profiler",
+ "boa_string",
+ "bytemuck",
+ "cfg-if",
+ "dashmap",
+ "fast-float2",
+ "hashbrown 0.15.5",
+ "icu_normalizer",
+ "indexmap",
+ "intrusive-collections",
+ "itertools 0.13.0",
+ "num-bigint",
+ "num-integer",
+ "num-traits",
+ "num_enum",
+ "once_cell",
+ "pollster",
+ "portable-atomic",
+ "rand",
+ "regress",
+ "rustc-hash",
+ "ryu-js",
+ "serde",
+ "serde_json",
+ "sptr",
+ "static_assertions",
+ "tap",
+ "thin-vec",
+ "thiserror",
+ "time",
+]
+
+[[package]]
+name = "boa_gc"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2425c0b7720d42d73eaa6a883fbb77a5c920da8694964a3d79a67597ac55cce2"
+dependencies = [
+ "boa_macros",
+ "boa_profiler",
+ "boa_string",
+ "hashbrown 0.15.5",
+ "thin-vec",
+]
+
+[[package]]
+name = "boa_interner"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42407a3b724cfaecde8f7d4af566df4b56af32a2f11f0956f5570bb974e7f749"
+dependencies = [
+ "boa_gc",
+ "boa_macros",
+ "hashbrown 0.15.5",
+ "indexmap",
+ "once_cell",
+ "phf 0.11.3",
+ "rustc-hash",
+ "static_assertions",
+]
+
+[[package]]
+name = "boa_macros"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fd3f870829131332587f607a7ff909f1af5fc523fd1b192db55fbbdf52e8d3c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "boa_parser"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9cc142dac798cdc6e2dbccfddeb50f36d2523bb977a976e19bdb3ae19b740804"
+dependencies = [
+ "bitflags",
+ "boa_ast",
+ "boa_interner",
+ "boa_macros",
+ "boa_profiler",
+ "fast-float2",
+ "icu_properties",
+ "num-bigint",
+ "num-traits",
+ "regress",
+ "rustc-hash",
+]
+
+[[package]]
+name = "boa_profiler"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4064908e7cdf9b6317179e9b04dcb27f1510c1c144aeab4d0394014f37a0f922"
+
+[[package]]
+name = "boa_string"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7debc13fbf7997bf38bf8e9b20f1ad5e2a7d27a900e1f6039fe244ce30f589b5"
+dependencies = [
+ "fast-float2",
+ "paste",
+ "rustc-hash",
+ "sptr",
+ "static_assertions",
+]
+
 [[package]]
 name = "bumpalo"
 version = "3.19.1"
@@ -89,6 +275,26 @@ dependencies = [
  "allocator-api2",
 ]
 
+[[package]]
+name = "bytemuck"
+version = "1.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fbdf580320f38b612e485521afda1ee26d10cc9884efaaa750d383e13e3c5f4"
+dependencies = [
+ "bytemuck_derive",
+]
+
+[[package]]
+name = "bytemuck_derive"
+version = "1.10.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f9abbd1bc6865053c427f7198e6af43bfdedc55ab791faed4fbd361d789575ff"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "cast"
 version = "0.3.0"
@@ -214,6 +420,24 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "417bef24afe1460300965a25ff4a24b8b45ad011948302ec221e8a0a81eb2c79"
 
+[[package]]
+name = "cpufeatures"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59ed5838eebb26a2bb2e58f6d5b5316989ae9d08bab10e0e6d103e656d1b0280"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "crc32fast"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
+dependencies = [
+ "cfg-if",
+]
+
 [[package]]
 name = "criterion"
 version = "0.8.0"
@@ -280,19 +504,52 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "460fbee9c2c2f33933d720630a6a0bac33ba7053db5344fac858d4b8952d77d5"
 
+[[package]]
+name = "crypto-common"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78c8292055d1c1df0cce5d180393dc8cce0abec0a7102adb6c7b1eef6016d60a"
+dependencies = [
+ "generic-array",
+ "typenum",
+]
+
 [[package]]
 name = "css"
 version = "0.1.0"
 dependencies = [
  "bimap",
  "once_cell",
- "phf",
+ "phf 0.13.1",
  "regex",
  "rstest",
  "serde",
  "serial_test",
 ]
 
+[[package]]
+name = "dashmap"
+version = "6.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5041cc499144891f3790297212f32a74fb938e5136a14943f338ef9e0ae276cf"
+dependencies = [
+ "cfg-if",
+ "crossbeam-utils",
+ "hashbrown 0.14.5",
+ "lock_api",
+ "once_cell",
+ "parking_lot_core",
+]
+
+[[package]]
+name = "deranged"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ececcb659e7ba858fb4f10388c250a7252eb0a27373f1a72b8748afdd248e587"
+dependencies = [
+ "powerfmt",
+]
+
 [[package]]
 name = "devup-ui-wasm"
 version = "0.1.0"
@@ -313,6 +570,27 @@ dependencies = [
  "wasm-bindgen-test",
 ]
 
+[[package]]
+name = "digest"
+version = "0.10.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
+dependencies = [
+ "block-buffer",
+ "crypto-common",
+]
+
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "dragonbox_ecma"
 version = "0.0.5"
@@ -351,6 +629,7 @@ dependencies = [
 name = "extractor"
 version = "0.1.0"
 dependencies = [
+ "boa_engine",
  "css",
  "insta",
  "oxc_allocator",
@@ -358,15 +637,24 @@ dependencies = [
  "oxc_ast_visit",
  "oxc_codegen",
  "oxc_parser",
+ "oxc_semantic",
  "oxc_span",
  "oxc_syntax",
- "phf",
+ "oxc_transformer",
+ "phf 0.13.1",
  "rstest",
+ "serde_json",
  "serial_test",
  "strum",
  "strum_macros",
 ]
 
+[[package]]
+name = "fast-float2"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8eb564c5c7423d25c886fb561d1e4ee69f72354d16918afa32c08811f6b6a55"
+
 [[package]]
 name = "fastrand"
 version = "2.3.0"
@@ -379,6 +667,28 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a3076410a55c90011c298b04d0cfa770b00fa04e1e3c97d3f6c9de105a03844"
 
+[[package]]
+name = "flate2"
+version = "1.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfe33edd8e85a12a67454e37f8c75e730830d83e313556ab9ebf9ee7fbeb3bfb"
+dependencies = [
+ "crc32fast",
+ "miniz_oxide",
+]
+
+[[package]]
+name = "foldhash"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
+
+[[package]]
+name = "foldhash"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
+
 [[package]]
 name = "futures"
 version = "0.3.31"
@@ -474,6 +784,27 @@ dependencies = [
  "slab",
 ]
 
+[[package]]
+name = "generic-array"
+version = "0.14.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+dependencies = [
+ "typenum",
+ "version_check",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.3.4"
@@ -503,6 +834,23 @@ dependencies = [
  "zerocopy",
 ]
 
+[[package]]
+name = "hashbrown"
+version = "0.14.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1"
+
+[[package]]
+name = "hashbrown"
+version = "0.15.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
+dependencies = [
+ "allocator-api2",
+ "equivalent",
+ "foldhash 0.1.5",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.16.1"
@@ -510,6 +858,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
 dependencies = [
  "allocator-api2",
+ "equivalent",
+ "foldhash 0.2.0",
 ]
 
 [[package]]
@@ -518,6 +868,124 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
+[[package]]
+name = "icu_collections"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db2fa452206ebee18c4b5c2274dbf1de17008e874b4dc4f0aea9d01ca79e4526"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locid"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13acbb8371917fc971be86fc8057c41a64b521c184808a698c02acc242dbf637"
+dependencies = [
+ "displaydoc",
+ "litemap",
+ "tinystr",
+ "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locid_transform"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "01d11ac35de8e40fdeda00d9e1e9d92525f3f9d887cdd7aa81d727596788b54e"
+dependencies = [
+ "displaydoc",
+ "icu_locid",
+ "icu_locid_transform_data",
+ "icu_provider",
+ "tinystr",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locid_transform_data"
+version = "1.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7515e6d781098bf9f7205ab3fc7e9709d34554ae0b21ddbcb5febfa4bc7df11d"
+
+[[package]]
+name = "icu_normalizer"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "19ce3e0da2ec68599d193c93d088142efd7f9c5d6fc9b803774855747dc6a84f"
+dependencies = [
+ "displaydoc",
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "utf16_iter",
+ "utf8_iter",
+ "write16",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "1.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c5e8338228bdc8ab83303f16b797e177953730f601a96c25d10cb3ab0daa0cb7"
+
+[[package]]
+name = "icu_properties"
+version = "1.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93d6020766cfc6302c15dbbc9c8778c37e62c14427cb7f6e601d849e092aeef5"
+dependencies = [
+ "displaydoc",
+ "icu_collections",
+ "icu_locid_transform",
+ "icu_properties_data",
+ "icu_provider",
+ "tinystr",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "1.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85fb8799753b75aee8d2a21d7c14d9f38921b54b3dbda10f5a3c7a7b82dba5e2"
+
+[[package]]
+name = "icu_provider"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ed421c8a8ef78d3e2dbc98a973be2f3770cb42b606e3ab18d6237c4dfde68d9"
+dependencies = [
+ "displaydoc",
+ "icu_locid",
+ "icu_provider_macros",
+ "stable_deref_trait",
+ "tinystr",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_provider_macros"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ec89e9337638ecdc08744df490b221a7399bf8d164eb52a665454e60e075ad6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "indexmap"
 version = "2.12.0"
@@ -525,7 +993,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6717a8d2a5a929a1a2eb43a12812498ed141a0bcfb7e8f7844fbdbe4303bba9f"
 dependencies = [
  "equivalent",
- "hashbrown",
+ "hashbrown 0.16.1",
 ]
 
 [[package]]
@@ -540,6 +1008,15 @@ dependencies = [
  "tempfile",
 ]
 
+[[package]]
+name = "intrusive-collections"
+version = "0.9.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "189d0897e4cbe8c75efedf3502c18c887b05046e59d28404d4d8e46cbc4d1e86"
+dependencies = [
+ "memoffset",
+]
+
 [[package]]
 name = "itertools"
 version = "0.13.0"
@@ -598,6 +1075,12 @@ version = "0.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "df1d3c3b53da64cf5760482273a98e575c651a67eec7f77df96b5b642de8f039"
 
+[[package]]
+name = "litemap"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23fb14cb19457329c82206317a5663005a4d404783dc74f4252769b0d5f42856"
+
 [[package]]
 name = "lock_api"
 version = "0.4.14"
@@ -619,6 +1102,15 @@ version = "2.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
 
+[[package]]
+name = "memoffset"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "488016bfae457b036d996092f6cb448677611ce4449e970ceaf42695203f218a"
+dependencies = [
+ "autocfg",
+]
+
 [[package]]
 name = "minicov"
 version = "0.3.7"
@@ -629,6 +1121,25 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "miniz_oxide"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
+dependencies = [
+ "adler2",
+ "simd-adler32",
+]
+
+[[package]]
+name = "nom"
+version = "8.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df9761775871bdef83bee530e60050f7e54b1105350d6884eb0fb4f46c2f9405"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "nonmax"
 version = "0.5.5"
@@ -652,8 +1163,15 @@ checksum = "a5e44f723f1133c9deac646763579fdb3ac745e418f2a7af9cd0c431da1f20b9"
 dependencies = [
  "num-integer",
  "num-traits",
+ "serde",
 ]
 
+[[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
 [[package]]
 name = "num-integer"
 version = "0.1.46"
@@ -673,6 +1191,37 @@ dependencies = [
  "libm",
 ]
 
+[[package]]
+name = "num_enum"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1207a7e20ad57b847bbddc6776b968420d38292bbfe2089accff5e19e82454c"
+dependencies = [
+ "num_enum_derive",
+ "rustversion",
+]
+
+[[package]]
+name = "num_enum_derive"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff32365de1b6743cb203b710788263c44a03de03802daf96092f2da4fe6ba4d7"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "num_threads"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c7398b9c8b70908f6371f47ed36737907c87c52af34c268fed0bf0ceb92ead9"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.21.3"
@@ -697,6 +1246,22 @@ version = "4.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c6901729fa79e91a0913333229e9ca5dc725089d1c363b2f4b4760709dc4a52"
 
+[[package]]
+name = "oxc-browserslist"
+version = "2.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6b48a7bf4591453d69792e735a8025b2c2c33ab75e02754023284ad17cfbbe04"
+dependencies = [
+ "bincode",
+ "flate2",
+ "nom",
+ "rustc-hash",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "time",
+]
+
 [[package]]
 name = "oxc-miette"
 version = "2.6.0"
@@ -731,7 +1296,7 @@ checksum = "07f4ba3148223230c546c1064c2795ece78b647ca75c9e98d42418dd4d5e4cd7"
 dependencies = [
  "allocator-api2",
  "bumpalo",
- "hashbrown",
+ "hashbrown 0.16.1",
  "oxc_data_structures",
  "rustc-hash",
 ]
@@ -759,7 +1324,7 @@ version = "0.106.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3788ddf2f5da12f0eca87c849bc33016b4bf11eea2b92980bb751e0b6a83b51a"
 dependencies = [
- "phf",
+ "phf 0.13.1",
  "proc-macro2",
  "quote",
  "syn",
@@ -798,11 +1363,27 @@ dependencies = [
  "rustc-hash",
 ]
 
+[[package]]
+name = "oxc_compat"
+version = "0.106.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bd0ffbed285a4f1d8dab0fdac33e2fc0cddb9e68e2221838c9d6fd57a45182c"
+dependencies = [
+ "cow-utils",
+ "oxc-browserslist",
+ "oxc_syntax",
+ "rustc-hash",
+ "serde",
+]
+
 [[package]]
 name = "oxc_data_structures"
 version = "0.106.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8c6253c51f3836c35d932153398aa7582706f8e39876eae0d7163311f419afc1"
+dependencies = [
+ "ropey",
+]
 
 [[package]]
 name = "oxc_diagnostics"
@@ -880,7 +1461,7 @@ dependencies = [
  "oxc_ast_macros",
  "oxc_diagnostics",
  "oxc_span",
- "phf",
+ "phf 0.13.1",
  "rustc-hash",
  "unicode-id-start",
 ]
@@ -901,7 +1482,7 @@ dependencies = [
  "oxc_index",
  "oxc_span",
  "oxc_syntax",
- "phf",
+ "phf 0.13.1",
  "rustc-hash",
  "self_cell",
 ]
@@ -948,10 +1529,57 @@ dependencies = [
  "oxc_estree",
  "oxc_index",
  "oxc_span",
- "phf",
+ "phf 0.13.1",
  "unicode-id-start",
 ]
 
+[[package]]
+name = "oxc_transformer"
+version = "0.106.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aba5c1dca33ef51651f955fd90b1c005d8ea8ea570b220f7616ccdab50179b53"
+dependencies = [
+ "base64",
+ "compact_str",
+ "indexmap",
+ "itoa",
+ "memchr",
+ "oxc_allocator",
+ "oxc_ast",
+ "oxc_ast_visit",
+ "oxc_compat",
+ "oxc_data_structures",
+ "oxc_diagnostics",
+ "oxc_ecmascript",
+ "oxc_regular_expression",
+ "oxc_semantic",
+ "oxc_span",
+ "oxc_syntax",
+ "oxc_traverse",
+ "rustc-hash",
+ "serde",
+ "serde_json",
+ "sha1",
+]
+
+[[package]]
+name = "oxc_traverse"
+version = "0.106.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "936417f4b572d4ca1ce4ac1aaf66f5f6d76d7302d486ed5c92af14d18f9e9155"
+dependencies = [
+ "itoa",
+ "oxc_allocator",
+ "oxc_ast",
+ "oxc_ast_visit",
+ "oxc_data_structures",
+ "oxc_ecmascript",
+ "oxc_semantic",
+ "oxc_span",
+ "oxc_syntax",
+ "rustc-hash",
+]
+
 [[package]]
 name = "page_size"
 version = "0.6.0"
@@ -985,23 +1613,49 @@ dependencies = [
  "windows-link",
 ]
 
+[[package]]
+name = "paste"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a"
+
 [[package]]
 name = "percent-encoding"
 version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
+[[package]]
+name = "phf"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078"
+dependencies = [
+ "phf_macros 0.11.3",
+ "phf_shared 0.11.3",
+]
+
 [[package]]
 name = "phf"
 version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c1562dc717473dbaa4c1f85a36410e03c047b2e7df7f45ee938fbef64ae7fadf"
 dependencies = [
- "phf_macros",
- "phf_shared",
+ "phf_macros 0.13.1",
+ "phf_shared 0.13.1",
  "serde",
 ]
 
+[[package]]
+name = "phf_generator"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d"
+dependencies = [
+ "phf_shared 0.11.3",
+ "rand",
+]
+
 [[package]]
 name = "phf_generator"
 version = "0.13.1"
@@ -1009,7 +1663,20 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "135ace3a761e564ec88c03a77317a7c6b80bb7f7135ef2544dbe054243b89737"
 dependencies = [
  "fastrand",
- "phf_shared",
+ "phf_shared 0.13.1",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216"
+dependencies = [
+ "phf_generator 0.11.3",
+ "phf_shared 0.11.3",
+ "proc-macro2",
+ "quote",
+ "syn",
 ]
 
 [[package]]
@@ -1018,13 +1685,22 @@ version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "812f032b54b1e759ccd5f8b6677695d5268c588701effba24601f6932f8269ef"
 dependencies = [
- "phf_generator",
- "phf_shared",
+ "phf_generator 0.13.1",
+ "phf_shared 0.13.1",
  "proc-macro2",
  "quote",
  "syn",
 ]
 
+[[package]]
+name = "phf_shared"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
+dependencies = [
+ "siphasher",
+]
+
 [[package]]
 name = "phf_shared"
 version = "0.13.1"
@@ -1074,6 +1750,33 @@ dependencies = [
  "plotters-backend",
 ]
 
+[[package]]
+name = "pollster"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f3a9f18d041e6d0e102a0a46750538147e5e8992d3b4873aaafee2520b00ce3"
+
+[[package]]
+name = "portable-atomic"
+version = "1.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f89776e4d69bb58bc6993e99ffa1d11f228b839984854c7daeb5d37f87cbe950"
+
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85eae3c4ed2f50dcfe72643da4befc30deadb458a9b590d720cde2f2b1e97da9"
+dependencies = [
+ "zerocopy",
+]
+
 [[package]]
 name = "proc-macro-crate"
 version = "3.4.0"
@@ -1107,6 +1810,36 @@ version = "5.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
 
+[[package]]
+name = "rand"
+version = "0.8.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+dependencies = [
+ "libc",
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom 0.2.16",
+]
+
 [[package]]
 name = "rayon"
 version = "1.11.0"
@@ -1165,12 +1898,32 @@ version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a2d987857b319362043e95f5353c0535c1f58eec5336fdfcf626430af7def58"
 
+[[package]]
+name = "regress"
+version = "0.10.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2057b2325e68a893284d1538021ab90279adac1139957ca2a74426c6f118fb48"
+dependencies = [
+ "hashbrown 0.16.1",
+ "memchr",
+]
+
 [[package]]
 name = "relative-path"
 version = "1.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ba39f3699c378cd8970968dcbff9c43159ea4cfbd88d43c00b22f2ef10a435d2"
 
+[[package]]
+name = "ropey"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93411e420bcd1a75ddd1dc3caf18c23155eda2c090631a85af21ba19e97093b5"
+dependencies = [
+ "smallvec",
+ "str_indices",
+]
+
 [[package]]
 name = "rstest"
 version = "0.26.1"
@@ -1240,6 +1993,12 @@ version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a50f4cf475b65d88e057964e0e9bb1f0aa9bbb2036dc65c64596b42932536984"
 
+[[package]]
+name = "ryu-js"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dd29631678d6fb0903b69223673e122c32e9ae559d0960a38d574695ebc0ea15"
+
 [[package]]
 name = "same-file"
 version = "1.0.6"
@@ -1367,6 +2126,17 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "sha1"
+version = "0.10.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3bf829a2d51ab4a5ddf1352d8470c140cadc8301b2ae1789db023f01cedd6ba"
+dependencies = [
+ "cfg-if",
+ "cpufeatures",
+ "digest",
+]
+
 [[package]]
 name = "sheet"
 version = "0.1.0"
@@ -1388,6 +2158,12 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
 
+[[package]]
+name = "simd-adler32"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e320a6c5ad31d271ad523dcf3ad13e2767ad8b1cb8f047f75a8aeaf8da139da2"
+
 [[package]]
 name = "similar"
 version = "2.7.0"
@@ -1418,12 +2194,30 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b7c388c1b5e93756d0c740965c41e8822f866621d41acbdf6336a6a168f8840c"
 
+[[package]]
+name = "sptr"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b9b39299b249ad65f3b7e96443bad61c02ca5cd3589f46cb6d610a0fd6c0d6a"
+
+[[package]]
+name = "stable_deref_trait"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
+
 [[package]]
 name = "static_assertions"
 version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
 
+[[package]]
+name = "str_indices"
+version = "0.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d08889ec5408683408db66ad89e0e1f93dff55c73a4ccc71c427d5b277ee47e6"
+
 [[package]]
 name = "strum"
 version = "0.27.2"
@@ -1453,6 +2247,23 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tap"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
+
 [[package]]
 name = "tempfile"
 version = "3.24.0"
@@ -1460,7 +2271,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "655da9c7eb6305c55742045d5a8d2037996d61d8de95806335c7c86ce0f82e9c"
 dependencies = [
  "fastrand",
- "getrandom",
+ "getrandom 0.3.4",
  "once_cell",
  "rustix",
  "windows-sys 0.61.2",
@@ -1477,6 +2288,12 @@ dependencies = [
  "unicode-width",
 ]
 
+[[package]]
+name = "thin-vec"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "144f754d318415ac792f9d69fc87abbbfc043ce2ef041c60f16ad828f638717d"
+
 [[package]]
 name = "thiserror"
 version = "2.0.17"
@@ -1497,6 +2314,50 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "time"
+version = "0.3.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91e7d9e3bb61134e77bde20dd4825b97c010155709965fedf0f49bb138e52a9d"
+dependencies = [
+ "deranged",
+ "itoa",
+ "js-sys",
+ "libc",
+ "num-conv",
+ "num_threads",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "40868e7c1d2f0b8d73e4a8c7f0ff63af4f6d19be117e90bd73eb1d62cf831c6b"
+
+[[package]]
+name = "time-macros"
+version = "0.2.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "30cfb0125f12d9c277f35663a0a33f8c30190f4e4574868a330595412d34ebf3"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
+[[package]]
+name = "tinystr"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9117f5d4db391c1cf6927e7bea3db74b9a1c1add8f7eda9ffd5364f40f57b82f"
+dependencies = [
+ "displaydoc",
+ "zerovec",
+]
+
 [[package]]
 name = "tinytemplate"
 version = "1.2.1"
@@ -1537,6 +2398,12 @@ dependencies = [
  "winnow",
 ]
 
+[[package]]
+name = "typenum"
+version = "1.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "562d481066bde0658276a35467c4af00bdc6ee726305698a55b86e61d7ad82bb"
+
 [[package]]
 name = "unicode-id-start"
 version = "1.4.0"
@@ -1567,6 +2434,36 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
 
+[[package]]
+name = "unty"
+version = "0.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d49784317cd0d1ee7ec5c716dd598ec5b4483ea832a2dced265471cc0f690ae"
+
+[[package]]
+name = "utf16_iter"
+version = "1.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c8232dd3cdaed5356e0f716d285e4b40b932ac434100fe9b7e0e8e935b9e6246"
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+
+[[package]]
+name = "version_check"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
+
+[[package]]
+name = "virtue"
+version = "0.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "051eb1abcf10076295e815102942cc58f9d5e3b4560e46e53c21e8ff6f3af7b1"
+
 [[package]]
 name = "vsimd"
 version = "0.8.0"
@@ -1583,6 +2480,12 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
 [[package]]
 name = "wasip2"
 version = "1.0.1+wasi-0.2.4"
@@ -1826,6 +2729,42 @@ version = "0.46.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f17a85883d4e6d00e8a97c586de764dabcc06133f7f1d55dce5cdc070ad7fe59"
 
+[[package]]
+name = "write16"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1890f4022759daae28ed4fe62859b1236caebfc61ede2f63ed4e695f3f6d936"
+
+[[package]]
+name = "writeable"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e9df38ee2d2c3c5948ea468a8406ff0db0b29ae1ffde1bcf20ef305bcc95c51"
+
+[[package]]
+name = "yoke"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "120e6aef9aa629e3d4f52dc8cc43a015c7724194c97dfaf45180d2daf2b77f40"
+dependencies = [
+ "serde",
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2380878cad4ac9aac1e2435f3eb4020e8374b5f13c296cb75b4620ff8e229154"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
 [[package]]
 name = "zerocopy"
 version = "0.8.30"
@@ -1846,6 +2785,49 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "zerofrom"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50cc42e0333e05660c3587f3bf9d0478688e15d870fab3346451ce7f8c9fbea5"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zerovec"
+version = "0.10.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aa2b893d79df23bfb12d5461018d408ea19dfafe76c2c7ef6d4eba614f8ff079"
+dependencies = [
+ "yoke",
+ "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6eafa6dfb17584ea3e2bd6e76e0cc15ad7af12b09abdd1ca55961bed9b1063c6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "zmij"
 version = "1.0.8"
diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml
index 874adef2..77b5957e 100644
--- a/libs/extractor/Cargo.toml
+++ b/libs/extractor/Cargo.toml
@@ -11,10 +11,14 @@ oxc_allocator = "0.106.0"
 oxc_ast = "0.106.0"
 oxc_ast_visit = "0.106.0"
 oxc_codegen = "0.106.0"
+oxc_transformer = "0.106.0"
+oxc_semantic = "0.106.0"
 css = { path = "../css" }
 phf = "0.13"
 strum = "0.27.2"
 strum_macros = "0.27.2"
+serde_json = "1.0"
+boa_engine = "0.20"
 
 [dev-dependencies]
 insta = "1.45.1"
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index ad1d1db5..63dd4700 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -8,6 +8,7 @@ mod gen_style;
 mod prop_modify_utils;
 mod util_type;
 mod utils;
+mod vanilla_extract;
 mod visit;
 use crate::extract_style::extract_style_value::ExtractStyleValue;
 use crate::visit::DevupVisitor;
@@ -111,6 +112,40 @@ pub fn extract(
         });
     }
 
+    // Handle vanilla-extract style files (.css.ts, .css.js)
+    let (processed_code, is_vanilla_extract) = if vanilla_extract::is_vanilla_extract_file(filename)
+    {
+        match vanilla_extract::execute_vanilla_extract(code, &option.package) {
+            Ok(collected) => {
+                let generated =
+                    vanilla_extract::collected_styles_to_code(&collected, &option.package);
+                (generated, true)
+            }
+            Err(_) => {
+                // Fall back to treating as regular file if execution fails
+                (code.to_string(), false)
+            }
+        }
+    } else {
+        (code.to_string(), false)
+    };
+
+    // For vanilla-extract files, if no styles were collected, return early
+    if is_vanilla_extract && processed_code.is_empty() {
+        return Ok(ExtractOutput {
+            styles: HashSet::new(),
+            code: code.to_string(),
+            map: None,
+            css_file: None,
+        });
+    }
+
+    let code_to_parse = if is_vanilla_extract {
+        &processed_code
+    } else {
+        code
+    };
+
     let source_type = SourceType::from_path(filename)?;
     let css_file = if option.single_css {
         format!("{}/devup-ui.css", option.css_dir)
@@ -131,7 +166,7 @@ pub fn extract(
         mut program, // AST
         panicked,    // Parser encountered an error it couldn't recover from
         ..
-    } = Parser::new(&allocator, code, source_type).parse();
+    } = Parser::new(&allocator, code_to_parse, source_type).parse();
     if panicked {
         return Err("Parser panicked".into());
     }
@@ -9020,9 +9055,8 @@ const margin = 5;
         ));
     }
 
-    /*
     // ============================================================================
-    // VANILLA-EXTRACT API TESTS (commented out until style/globalStyle support)
+    // VANILLA-EXTRACT API TESTS
     // ============================================================================
 
     /// Test vanilla-extract style files (.css.ts, .css.js)
@@ -9036,7 +9070,7 @@ const margin = 5;
             extract(
                 "styles.css.ts",
                 r#"import { style } from '@devup-ui/react'
-export const container = style({ background: "red", padding: 16 })
+export const container: string = style({ background: "red", padding: 16 })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9047,14 +9081,18 @@ export const container = style({ background: "red", padding: 16 })
             )
             .unwrap()
         ));
+    }
 
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_style_css_js() {
         reset_class_map();
-        // .css.ts file with style function using camelCase CSS properties
+        // .css.js file with style function
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
-                "button.css.ts",
+                "styles.css.js",
                 r#"import { style } from '@devup-ui/react'
-export const button = style({ backgroundColor: "blue", color: "white", padding: 8 })
+export const wrapper = style({ backgroundColor: "white", margin: 8 })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9067,14 +9105,12 @@ export const button = style({ backgroundColor: "blue", color: "white", padding:
         ));
 
         reset_class_map();
-        // .css.ts file with multiple style exports
+        // .css.js file with style function for link
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
-                "theme.css.ts",
+                "components.css.js",
                 r#"import { style } from '@devup-ui/react'
-export const primaryButton = style({ backgroundColor: "blue", color: "white" })
-export const secondaryButton = style({ backgroundColor: "gray", color: "black" })
-export const card = style({ padding: 16, borderRadius: "8px" })
+export const link = style({ color: "blue", textDecoration: "underline" })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9089,14 +9125,16 @@ export const card = style({ padding: 16, borderRadius: "8px" })
 
     #[test]
     #[serial]
-    fn test_vanilla_extract_style_css_js() {
+    fn test_vanilla_extract_with_variable() {
         reset_class_map();
-        // .css.js file with style function
+        // Variables should be evaluated at execution time
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
-                "styles.css.js",
+                "vars.css.ts",
                 r#"import { style } from '@devup-ui/react'
-export const wrapper = style({ backgroundColor: "white", margin: 8 })
+const primaryColor = "blue";
+const spacing = 16;
+export const button = style({ background: primaryColor, padding: spacing })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9107,14 +9145,19 @@ export const wrapper = style({ backgroundColor: "white", margin: 8 })
             )
             .unwrap()
         ));
+    }
 
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_with_computed() {
         reset_class_map();
-        // .css.js file with style function for link
+        // Computed values should be evaluated
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
-                "components.css.js",
+                "computed.css.ts",
                 r#"import { style } from '@devup-ui/react'
-export const link = style({ color: "blue", textDecoration: "underline" })
+const base = 8;
+export const box = style({ padding: base * 2, margin: base / 2 })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9129,14 +9172,15 @@ export const link = style({ color: "blue", textDecoration: "underline" })
 
     #[test]
     #[serial]
-    fn test_vanilla_extract_with_responsive_and_pseudo() {
+    fn test_vanilla_extract_with_spread() {
         reset_class_map();
-        // .css.ts file with responsive values (devup-ui extension)
+        // Spread operator should work
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
-                "responsive.css.ts",
+                "spread.css.ts",
                 r#"import { style } from '@devup-ui/react'
-export const responsiveBox = style({ padding: [8, 16, 32], display: ["block", "flex"] })
+const baseStyle = { padding: 8, margin: 4 };
+export const extended = style({ ...baseStyle, background: "red" })
 "#,
                 ExtractOption {
                     package: "@devup-ui/react".to_string(),
@@ -9147,9 +9191,13 @@ export const responsiveBox = style({ padding: [8, 16, 32], display: ["block", "f
             )
             .unwrap()
         ));
+    }
 
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_with_pseudo_selector() {
         reset_class_map();
-        // .css.ts file with selectors (vanilla-extract style)
+        // devup-ui extension: _hover pseudo selector
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "hover.css.ts",
@@ -9167,6 +9215,28 @@ export const hoverButton = style({ background: "gray", _hover: { background: "bl
         ));
     }
 
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_with_responsive_array() {
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     #[test]
     #[serial]
     fn test_vanilla_extract_with_keyframes_and_global() {
@@ -9687,7 +9757,6 @@ export const grid = style({
             .unwrap()
         ));
     }
-    */
     // END VANILLA-EXTRACT API TESTS
 
     #[rstest]
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
new file mode 100644
index 00000000..7e06ee89
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
@@ -0,0 +1,63 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "pointer",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transition",
+                value: "all .2s",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_container.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
new file mode 100644
index 00000000..23e05ea4
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
@@ -0,0 +1,40 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "container-name",
+                value: "__container_0__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "container-type",
+                value: "inline-size",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex-direction",
+                value: "row",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:_container_0__ (min-width: 400px)",
+                    ),
+                ),
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
new file mode 100644
index 00000000..876b5d80
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var0,red)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const colorVar = \"--var-0\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
new file mode 100644
index 00000000..f73515d9
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "var(--var-0)",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
new file mode 100644
index 00000000..b9b7d222
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__font_1__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst roboto = \"a\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
new file mode 100644
index 00000000..6e2061b5
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__font_1__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst myFont = \"a\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
new file mode 100644
index 00000000..756e821f
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "export const vars = createGlobalTheme(\":root\", {\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\",\n\t\tbackground: \"white\"\n\t},\n\tfont: { body: \"system-ui, sans-serif\" }\n});\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
new file mode 100644
index 00000000..644f9039
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
@@ -0,0 +1,57 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "@layer",
+                value: "reset",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    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/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
new file mode 100644
index 00000000..f10db481
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
@@ -0,0 +1,54 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "block",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsive = \"a b c d e\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
new file mode 100644
index 00000000..2043f222
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
@@ -0,0 +1,44 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "_style_0__:hover &",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "32px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& + &",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"a b\";\nexport const parent = \"c\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
new file mode 100644
index 00000000..0d46c44e
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
@@ -0,0 +1,83 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "darkblue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "not-allowed",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "outline",
+                value: "2px solid blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:focus",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.98)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b c d e f\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
new file mode 100644
index 00000000..e6c3970e
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "text-decoration",
+                value: "underline",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const link = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
new file mode 100644
index 00000000..1c5f6d27
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const wrapper = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
new file mode 100644
index 00000000..5fb825c1
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"styles.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const container = 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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const container = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
new file mode 100644
index 00000000..5d44e248
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
@@ -0,0 +1,63 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
new file mode 100644
index 00000000..82c0740c
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_supports.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
new file mode 100644
index 00000000..dbde6651
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const grid = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
new file mode 100644
index 00000000..c59b6165
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "export const darkTheme = createTheme(vars, { color: {\n\tbrand: \"lightblue\",\n\ttext: \"white\"\n} });\nexport const lightTheme = createTheme(vars, { color: {\n\tbrand: \"blue\",\n\ttext: \"black\"\n} });\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
new file mode 100644
index 00000000..eb67a180
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "import { createTheme, style } from \"@devup-ui/react\";\nexport const [themeClass, vars] = createTheme({\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\tsmall: \"4px\",\n\t\tmedium: \"8px\",\n\t\tlarge: \"16px\"\n\t}\n});\nexport const box = style({\n\tcolor: vars.color.text,\n\tpadding: vars.space.medium\n});\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
new file mode 100644
index 00000000..86641c77
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
new file mode 100644
index 00000000..f09a8fb8
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
@@ -0,0 +1,41 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\n;\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
new file mode 100644
index 00000000..cc102b21
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
@@ -0,0 +1,42 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "fadeIn 1s ease-in",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Keyframes(
+            ExtractKeyframes {
+                keyframes: {
+                    "from": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "0",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                        },
+                    ],
+                    "to": [
+                        ExtractStaticStyle {
+                            property: "opacity",
+                            value: "1",
+                            level: 0,
+                            selector: None,
+                            style_order: None,
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const animated = \"a\";\nexport const fadeIn = \"b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
new file mode 100644
index 00000000..9021f16b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
@@ -0,0 +1,31 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const hoverButton = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
new file mode 100644
index 00000000..a9f24563
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "128px",
+                level: 2,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 1,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsiveBox = \"a b c\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
new file mode 100644
index 00000000..76adbeb9
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const extended = \"a b c\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
new file mode 100644
index 00000000..2aa9818b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b\";\n",
+}
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
new file mode 100644
index 00000000..cdb324b7
--- /dev/null
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -0,0 +1,1100 @@
+//! Vanilla-extract style file (.css.ts, .css.js) processor
+//!
+//! This module uses boa_engine to execute vanilla-extract style files
+//! and extract style definitions for processing by the existing extract logic.
+
+use boa_engine::{
+    Context, JsArgs, JsValue, NativeFunction, Source, js_string, object::ObjectInitializer,
+    property::Attribute,
+};
+use oxc_allocator::Allocator;
+use oxc_codegen::Codegen;
+use oxc_parser::Parser;
+use oxc_semantic::SemanticBuilder;
+use oxc_span::{GetSpan, SourceType};
+use oxc_transformer::{TransformOptions, Transformer};
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::path::Path;
+use std::rc::Rc;
+
+/// A single variant in styleVariants
+#[derive(Debug, Clone)]
+pub struct StyleVariant {
+    /// Base class reference (variable name), if composing
+    pub base: Option<String>,
+    /// The style object JSON for this variant
+    pub styles_json: String,
+}
+
+/// Style with export info
+#[derive(Debug, Clone)]
+pub struct StyleEntry {
+    /// The style object JSON
+    pub json: String,
+    /// Whether this style is exported
+    pub exported: bool,
+    /// Base class references for composition (placeholder IDs like "__style_0__")
+    pub bases: Vec<String>,
+}
+
+/// Collected style definitions from vanilla-extract API calls
+#[derive(Debug, Default)]
+pub struct CollectedStyles {
+    /// style() calls: variable_name -> (json, exported)
+    pub styles: HashMap<String, StyleEntry>,
+    /// globalStyle() calls: selector -> style object JSON
+    pub global_styles: Vec<(String, String)>,
+    /// keyframes() calls: variable_name -> (json, exported)
+    pub keyframes: HashMap<String, StyleEntry>,
+    /// createVar() calls: variable_name -> (CSS variable string, exported)
+    pub vars: HashMap<String, (String, bool)>,
+    /// fontFace() calls: font face object JSON
+    pub font_faces: Vec<String>,
+    /// styleVariants() calls: variable_name -> (variants, exported)
+    pub style_variants: HashMap<String, (HashMap<String, StyleVariant>, bool)>,
+    /// createContainer() calls: variable_name -> (container name string, exported)
+    pub containers: HashMap<String, (String, bool)>,
+    /// layer() calls: variable_name -> (layer name string, exported)
+    pub layers: HashMap<String, (String, bool)>,
+    /// Non-style constant exports: variable_name -> value (as code string)
+    pub constant_exports: HashMap<String, String>,
+}
+
+/// Check if a filename is a vanilla-extract style file
+pub fn is_vanilla_extract_file(filename: &str) -> bool {
+    filename.ends_with(".css.ts") || filename.ends_with(".css.js")
+}
+
+/// Internal state for collecting styles during JS execution
+#[derive(Default)]
+struct StyleCollectorInner {
+    styles: CollectedStyles,
+    style_counter: usize,
+}
+
+type StyleCollector = Rc<RefCell<StyleCollectorInner>>;
+
+fn next_style_id(collector: &StyleCollector) -> String {
+    let mut inner = collector.borrow_mut();
+    let id = format!("__style_{}__", inner.style_counter);
+    inner.style_counter += 1;
+    id
+}
+
+/// Convert JsValue to JSON string using JSON.stringify
+fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
+    // Use JSON.stringify to convert the value
+    let json_obj = context.intrinsics().objects().json();
+    let stringify_result = json_obj.get(js_string!("stringify"), context);
+
+    if let Ok(stringify) = stringify_result
+        && let Some(callable) = stringify.as_callable()
+        && let Ok(result) =
+            callable.call(&JsValue::undefined(), std::slice::from_ref(value), context)
+        && let Some(s) = result.as_string()
+    {
+        return s.to_std_string_escaped();
+    }
+
+    // Fallback: simple conversion
+    match value {
+        JsValue::String(s) => format!("\"{}\"", s.to_std_string_escaped()),
+        JsValue::Integer(n) => n.to_string(),
+        JsValue::Rational(n) => n.to_string(),
+        JsValue::Boolean(b) => b.to_string(),
+        JsValue::Null => "null".to_string(),
+        JsValue::Undefined => "undefined".to_string(),
+        _ => "{}".to_string(),
+    }
+}
+
+/// Execute vanilla-extract style file and collect styles
+pub fn execute_vanilla_extract(code: &str, package: &str) -> Result<CollectedStyles, String> {
+    let collector: StyleCollector = Rc::new(RefCell::new(StyleCollectorInner::default()));
+
+    let mut context = Context::default();
+
+    // Create the mock module object
+    register_vanilla_extract_apis(&mut context, collector.clone(), package)?;
+
+    // Preprocess code: convert TypeScript to JavaScript using Oxc Transformer
+    let js_code = preprocess_typescript(code, package);
+
+    // Extract variable names from the original code before execution
+    let var_names = extract_var_names(code, package);
+
+    // Execute the code
+    context
+        .eval(Source::from_bytes(js_code.as_bytes()))
+        .map_err(|e| format!("JS execution error: {}", e))?;
+
+    // Map placeholder IDs back to original variable names
+    let mut result = std::mem::take(&mut collector.borrow_mut().styles);
+    remap_style_names(&mut result, &var_names, &mut context);
+
+    Ok(result)
+}
+
+/// Info about a variable declaration
+#[derive(Debug, Clone)]
+enum VarInfo {
+    /// A style API call (style, keyframes, createContainer, etc.)
+    StyleApi { exported: bool },
+    /// A regular constant export with its original code
+    Constant(String),
+}
+
+/// Extract all variable names and their info from the original code
+/// Returns (style_api_vars, exported_constants)
+fn extract_var_names(code: &str, _package: &str) -> Vec<(String, VarInfo)> {
+    let allocator = Allocator::default();
+    let source_type = SourceType::ts();
+    let ret = Parser::new(&allocator, code, source_type).parse();
+
+    let mut vars = Vec::new();
+
+    for stmt in &ret.program.body {
+        match stmt {
+            // Exported variable declarations
+            oxc_ast::ast::Statement::ExportNamedDeclaration(export) => {
+                if let Some(oxc_ast::ast::Declaration::VariableDeclaration(var_decl)) =
+                    &export.declaration
+                {
+                    for decl in &var_decl.declarations {
+                        if let Some(name) = decl.id.get_identifier_name()
+                            && let Some(init) = &decl.init
+                        {
+                            if is_style_api_call(init) {
+                                vars.push((name.to_string(), VarInfo::StyleApi { exported: true }));
+                            } else {
+                                // Extract the original init expression using span
+                                let span = init.span();
+                                let init_code = &code[span.start as usize..span.end as usize];
+                                vars.push((
+                                    name.to_string(),
+                                    VarInfo::Constant(init_code.to_string()),
+                                ));
+                            }
+                        }
+                    }
+                }
+            }
+            // Non-exported variable declarations
+            oxc_ast::ast::Statement::VariableDeclaration(var_decl) => {
+                for decl in &var_decl.declarations {
+                    if let Some(name) = decl.id.get_identifier_name()
+                        && let Some(init) = &decl.init
+                        && is_style_api_call(init)
+                    {
+                        vars.push((name.to_string(), VarInfo::StyleApi { exported: false }));
+                    }
+                    // We don't need to track non-exported non-style constants
+                }
+            }
+            _ => {}
+        }
+    }
+
+    vars
+}
+
+/// Check if an expression is a call to a style API (style, keyframes, styleVariants, etc.)
+fn is_style_api_call(expr: &oxc_ast::ast::Expression) -> bool {
+    if let oxc_ast::ast::Expression::CallExpression(call) = expr
+        && let oxc_ast::ast::Expression::Identifier(id) = &call.callee
+    {
+        let name = id.name.as_str();
+        return matches!(
+            name,
+            "style"
+                | "keyframes"
+                | "styleVariants"
+                | "fontFace"
+                | "createVar"
+                | "createContainer"
+                | "layer"
+        );
+    }
+    false
+}
+
+/// Remap style placeholder IDs to original variable names
+fn remap_style_names(
+    collected: &mut CollectedStyles,
+    vars: &[(String, VarInfo)],
+    _context: &mut Context,
+) {
+    // Build mapping from placeholder ID to original name
+    // The order of style() calls matches the order of variable declarations
+    let mut placeholder_to_name: HashMap<String, String> = HashMap::new();
+    let mut new_styles = HashMap::new();
+    let mut new_keyframes = HashMap::new();
+    let mut new_style_variants = HashMap::new();
+    let mut new_vars = HashMap::new();
+    let mut new_containers = HashMap::new();
+    let mut new_layers = HashMap::new();
+    let mut style_idx = 0;
+
+    // First pass: collect old entries preserving all fields
+    let old_styles: HashMap<String, StyleEntry> = collected.styles.drain().collect();
+    let old_keyframes: HashMap<String, StyleEntry> = collected.keyframes.drain().collect();
+    let old_style_variants: HashMap<String, HashMap<String, StyleVariant>> = collected
+        .style_variants
+        .drain()
+        .map(|(k, v)| (k, v.0))
+        .collect();
+    let old_vars: HashMap<String, String> = collected.vars.drain().map(|(k, v)| (k, v.0)).collect();
+    let old_containers: HashMap<String, String> = collected
+        .containers
+        .drain()
+        .map(|(k, v)| (k, v.0))
+        .collect();
+    let old_layers: HashMap<String, String> =
+        collected.layers.drain().map(|(k, v)| (k, v.0)).collect();
+
+    for (name, info) in vars {
+        match info {
+            VarInfo::StyleApi { exported } => {
+                let placeholder = format!("__style_{}__", style_idx);
+                placeholder_to_name.insert(placeholder.clone(), name.clone());
+
+                if let Some(entry) = old_styles.get(&placeholder) {
+                    new_styles.insert(
+                        name.clone(),
+                        StyleEntry {
+                            json: entry.json.clone(),
+                            exported: *exported,
+                            bases: entry.bases.clone(),
+                        },
+                    );
+                    style_idx += 1;
+                } else if let Some(entry) = old_keyframes.get(&placeholder) {
+                    new_keyframes.insert(
+                        name.clone(),
+                        StyleEntry {
+                            json: entry.json.clone(),
+                            exported: *exported,
+                            bases: entry.bases.clone(),
+                        },
+                    );
+                    style_idx += 1;
+                } else if let Some(variants) = old_style_variants.get(&placeholder) {
+                    new_style_variants.insert(name.clone(), (variants.clone(), *exported));
+                    style_idx += 1;
+                } else if let Some(value) = old_vars.get(&placeholder) {
+                    new_vars.insert(name.clone(), (value.clone(), *exported));
+                    style_idx += 1;
+                } else if let Some(value) = old_containers.get(&placeholder) {
+                    new_containers.insert(name.clone(), (value.clone(), *exported));
+                    style_idx += 1;
+                } else if let Some(value) = old_layers.get(&placeholder) {
+                    new_layers.insert(name.clone(), (value.clone(), *exported));
+                    style_idx += 1;
+                }
+            }
+            VarInfo::Constant(code) => {
+                collected
+                    .constant_exports
+                    .insert(name.clone(), code.clone());
+            }
+        }
+    }
+
+    // Remap base references in styleVariants
+    for (variants, _) in new_style_variants.values_mut() {
+        for variant in variants.values_mut() {
+            if let Some(base) = &variant.base
+                && let Some(name) = placeholder_to_name.get(base)
+            {
+                variant.base = Some(name.clone());
+            }
+        }
+    }
+
+    // Remap base references in styles (for composition)
+    for entry in new_styles.values_mut() {
+        entry.bases = entry
+            .bases
+            .iter()
+            .map(|b| {
+                placeholder_to_name
+                    .get(b)
+                    .cloned()
+                    .unwrap_or_else(|| b.clone())
+            })
+            .collect();
+    }
+
+    collected.styles = new_styles;
+    collected.keyframes = new_keyframes;
+    collected.style_variants = new_style_variants;
+    collected.vars = new_vars;
+    collected.containers = new_containers;
+    collected.layers = new_layers;
+}
+
+/// Convert TypeScript to JavaScript using Oxc Transformer and replace imports
+fn preprocess_typescript(code: &str, package: &str) -> String {
+    let allocator = Allocator::default();
+    let source_type = SourceType::ts();
+
+    // Parse TypeScript
+    let ret = Parser::new(&allocator, code, source_type).parse();
+    let mut program = ret.program;
+
+    // Build semantic info to get scoping
+    let semantic_ret = SemanticBuilder::new().build(&program);
+    let scoping = semantic_ret.semantic.into_scoping();
+
+    // Transform: strip TypeScript types
+    let options = TransformOptions::default();
+    let path = Path::new("input.css.ts");
+    let _ = Transformer::new(&allocator, path, &options).build_with_scoping(scoping, &mut program);
+
+    // Generate JavaScript
+    let mut js_code = Codegen::new().build(&program).code;
+
+    // Replace import from package with our mock object destructuring
+    // e.g., import { style } from '@devup-ui/react' -> const { style } = __vanilla_extract__;
+    let import_patterns = [
+        format!("from \"{}\"", package),
+        format!("from '{}'", package),
+    ];
+
+    for pattern in &import_patterns {
+        if js_code.contains(pattern) {
+            // Find and replace the import line
+            let lines: Vec<&str> = js_code.lines().collect();
+            let mut new_lines = Vec::new();
+
+            for line in lines {
+                if line.contains(pattern) {
+                    // Extract imported names from: import { a, b, c } from 'package'
+                    if let Some(start) = line.find('{')
+                        && let Some(end) = line.find('}')
+                    {
+                        let imports = &line[start + 1..end];
+                        new_lines.push(format!("const {{{}}} = __vanilla_extract__;", imports));
+                        continue;
+                    }
+                }
+                new_lines.push(line.to_string());
+            }
+            js_code = new_lines.join("\n");
+            break;
+        }
+    }
+
+    // Remove 'export' keyword (boa doesn't support ES modules)
+    js_code = js_code.replace("export const ", "const ");
+    js_code = js_code.replace("export let ", "let ");
+    js_code = js_code.replace("export var ", "var ");
+    js_code = js_code.replace("export function ", "function ");
+
+    js_code
+}
+
+/// Register vanilla-extract mock APIs in the JS context
+fn register_vanilla_extract_apis(
+    context: &mut Context,
+    collector: StyleCollector,
+    _package: &str,
+) -> Result<(), String> {
+    // style() function
+    let collector_style = collector.clone();
+    // SAFETY: The closure only captures Rc<RefCell<_>> which is safe to use in single-threaded JS context
+    let style_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let style_obj = args.get_or_undefined(0);
+            let id = next_style_id(&collector_style);
+
+            // Check if argument is an array (composition syntax)
+            let (json, bases) = if let Some(obj) = style_obj.as_object() {
+                if let Ok(length_val) = obj.get(js_string!("length"), ctx) {
+                    if let Some(len) = length_val.as_number() {
+                        // It's an array - handle composition
+                        let len = len as u32;
+                        let mut base_classes = Vec::new();
+                        let mut merged_styles = String::from("{");
+                        let mut first_style = true;
+
+                        for i in 0..len {
+                            if let Ok(elem) = obj.get(i, ctx) {
+                                if let Some(base_str) = elem.as_string() {
+                                    // It's a base class reference (string)
+                                    base_classes.push(base_str.to_std_string_escaped());
+                                } else if elem.is_object() {
+                                    // It's a style object - merge it
+                                    let elem_json = js_value_to_json(&elem, ctx);
+                                    // Strip outer braces and merge
+                                    let inner = elem_json
+                                        .trim()
+                                        .trim_start_matches('{')
+                                        .trim_end_matches('}')
+                                        .trim();
+                                    if !inner.is_empty() {
+                                        if !first_style {
+                                            merged_styles.push(',');
+                                        }
+                                        merged_styles.push_str(inner);
+                                        first_style = false;
+                                    }
+                                }
+                            }
+                        }
+                        merged_styles.push('}');
+                        (merged_styles, base_classes)
+                    } else {
+                        // Not an array, just a style object
+                        (js_value_to_json(style_obj, ctx), Vec::new())
+                    }
+                } else {
+                    // No length property, just a style object
+                    (js_value_to_json(style_obj, ctx), Vec::new())
+                }
+            } else {
+                // Not an object at all
+                (js_value_to_json(style_obj, ctx), Vec::new())
+            };
+
+            collector_style.borrow_mut().styles.styles.insert(
+                id.clone(),
+                StyleEntry {
+                    json,
+                    exported: false, // Will be updated in remap_style_names
+                    bases,
+                },
+            );
+
+            Ok(JsValue::from(js_string!(id)))
+        })
+    };
+
+    // globalStyle() function
+    let collector_global = collector.clone();
+    let global_style_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let selector = args
+                .get_or_undefined(0)
+                .to_string(ctx)?
+                .to_std_string_escaped();
+            let style_obj = args.get_or_undefined(1);
+            let json = js_value_to_json(style_obj, ctx);
+
+            collector_global
+                .borrow_mut()
+                .styles
+                .global_styles
+                .push((selector, json));
+
+            Ok(JsValue::undefined())
+        })
+    };
+
+    // keyframes() function
+    let collector_keyframes = collector.clone();
+    let keyframes_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let keyframes_obj = args.get_or_undefined(0);
+            let json = js_value_to_json(keyframes_obj, ctx);
+            let id = next_style_id(&collector_keyframes);
+
+            collector_keyframes.borrow_mut().styles.keyframes.insert(
+                id.clone(),
+                StyleEntry {
+                    json,
+                    exported: false,
+                    bases: Vec::new(),
+                },
+            );
+
+            Ok(JsValue::from(js_string!(id)))
+        })
+    };
+
+    // createVar() function
+    let collector_var = collector.clone();
+    let create_var_fn = unsafe {
+        NativeFunction::from_closure(move |_this, _args, _ctx| {
+            let id = next_style_id(&collector_var);
+            let var_name = format!("--var-{}", collector_var.borrow().styles.vars.len());
+            collector_var
+                .borrow_mut()
+                .styles
+                .vars
+                .insert(id.clone(), (var_name.clone(), false));
+            Ok(JsValue::from(js_string!(format!("var({})", var_name))))
+        })
+    };
+
+    // fontFace() function
+    let collector_font = collector.clone();
+    let font_face_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let font_obj = args.get_or_undefined(0);
+            let json = js_value_to_json(font_obj, ctx);
+
+            collector_font.borrow_mut().styles.font_faces.push(json);
+
+            let id = format!(
+                "__font_{}__",
+                collector_font.borrow().styles.font_faces.len()
+            );
+            Ok(JsValue::from(js_string!(id)))
+        })
+    };
+
+    // styleVariants() function
+    let collector_variants = collector.clone();
+    let style_variants_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let variants_obj = args.get_or_undefined(0);
+            let variants = parse_style_variants(variants_obj, ctx);
+            let id = next_style_id(&collector_variants);
+
+            collector_variants
+                .borrow_mut()
+                .styles
+                .style_variants
+                .insert(id.clone(), (variants, false));
+
+            // Return an object placeholder - the actual object will be built in code generation
+            Ok(JsValue::from(js_string!(id)))
+        })
+    };
+
+    // fallbackVar() function - returns var(--x, fallback) format
+    let fallback_var_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let var_value = args
+                .get_or_undefined(0)
+                .to_string(ctx)?
+                .to_std_string_escaped();
+            let fallback = args
+                .get_or_undefined(1)
+                .to_string(ctx)?
+                .to_std_string_escaped();
+
+            // Extract var name from var(--x) format
+            let var_name = var_value
+                .trim_start_matches("var(")
+                .trim_end_matches(')')
+                .to_string();
+            let result = format!("var({}, {})", var_name, fallback);
+            Ok(JsValue::from(js_string!(result)))
+        })
+    };
+
+    // createTheme() function
+    let create_theme_fn = unsafe {
+        NativeFunction::from_closure(move |_this, _args, _ctx| {
+            Ok(JsValue::from(js_string!("__theme__")))
+        })
+    };
+
+    // createThemeContract() function
+    let create_theme_contract_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, _ctx| Ok(args.get_or_undefined(0).clone()))
+    };
+
+    // layer() function
+    let collector_layer = collector.clone();
+    let layer_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let id = next_style_id(&collector_layer);
+            let name = args
+                .get_or_undefined(0)
+                .to_string(ctx)?
+                .to_std_string_escaped();
+            collector_layer
+                .borrow_mut()
+                .styles
+                .layers
+                .insert(id.clone(), (name.clone(), false));
+            Ok(JsValue::from(js_string!(name)))
+        })
+    };
+
+    // createContainer() function
+    let collector_container = collector.clone();
+    let create_container_fn = unsafe {
+        NativeFunction::from_closure(move |_this, _args, _ctx| {
+            let id = next_style_id(&collector_container);
+            let container_name = format!(
+                "__container_{}__",
+                collector_container.borrow().styles.containers.len()
+            );
+            collector_container
+                .borrow_mut()
+                .styles
+                .containers
+                .insert(id.clone(), (container_name.clone(), false));
+            Ok(JsValue::from(js_string!(container_name)))
+        })
+    };
+
+    // createGlobalTheme() function
+    let create_global_theme_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, _ctx| {
+            let theme_obj = args.get_or_undefined(1);
+            Ok(theme_obj.clone())
+        })
+    };
+
+    // Build the mock object
+    let mut ve_builder = ObjectInitializer::new(context);
+    ve_builder.function(style_fn, js_string!("style"), 1);
+    ve_builder.function(global_style_fn, js_string!("globalStyle"), 2);
+    ve_builder.function(keyframes_fn, js_string!("keyframes"), 1);
+    ve_builder.function(create_var_fn, js_string!("createVar"), 0);
+    ve_builder.function(font_face_fn, js_string!("fontFace"), 1);
+    ve_builder.function(style_variants_fn, js_string!("styleVariants"), 1);
+    ve_builder.function(fallback_var_fn, js_string!("fallbackVar"), 2);
+    ve_builder.function(create_theme_fn, js_string!("createTheme"), 1);
+    ve_builder.function(
+        create_theme_contract_fn,
+        js_string!("createThemeContract"),
+        1,
+    );
+    ve_builder.function(layer_fn, js_string!("layer"), 1);
+    ve_builder.function(create_container_fn, js_string!("createContainer"), 0);
+    ve_builder.function(create_global_theme_fn, js_string!("createGlobalTheme"), 2);
+
+    let ve_obj = ve_builder.build();
+
+    // Register as global __vanilla_extract__
+    context
+        .register_global_property(js_string!("__vanilla_extract__"), ve_obj, Attribute::all())
+        .map_err(|e| format!("Failed to register __vanilla_extract__: {}", e))?;
+
+    Ok(())
+}
+
+/// Convert collected styles to code that can be processed by existing extract logic
+pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> String {
+    let mut code_parts = Vec::new();
+
+    // Generate import statement
+    let mut imports = Vec::new();
+    if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
+        imports.push("css");
+    }
+    if !collected.global_styles.is_empty() {
+        imports.push("globalCss");
+    }
+    if !collected.keyframes.is_empty() {
+        imports.push("keyframes");
+    }
+
+    if !imports.is_empty() {
+        code_parts.push(format!(
+            "import {{ {} }} from '{}'",
+            imports.join(", "),
+            package
+        ));
+    }
+
+    // Generate style declarations (sorted for deterministic output)
+    // First, build a map of name -> json for looking up base styles
+    let style_json_map: HashMap<&str, &str> = collected
+        .styles
+        .iter()
+        .map(|(name, entry)| (name.as_str(), entry.json.as_str()))
+        .collect();
+
+    let mut styles: Vec<_> = collected.styles.iter().collect();
+    styles.sort_by_key(|(name, _)| *name);
+    for (name, entry) in styles {
+        let prefix = if entry.exported { "export " } else { "" };
+        if entry.bases.is_empty() {
+            // Simple style, no composition
+            code_parts.push(format!("{}const {} = css({})", prefix, name, entry.json));
+        } else {
+            // Composition: merge all base styles + own styles into a single css() call
+            let mut merged_parts = Vec::new();
+
+            // Add styles from each base
+            for base_name in &entry.bases {
+                if let Some(base_json) = style_json_map.get(base_name.as_str()) {
+                    // Strip outer braces and add to merged parts
+                    let inner = base_json
+                        .trim()
+                        .trim_start_matches('{')
+                        .trim_end_matches('}')
+                        .trim();
+                    if !inner.is_empty() {
+                        merged_parts.push(inner.to_string());
+                    }
+                }
+            }
+
+            // Add own styles
+            let own_inner = entry
+                .json
+                .trim()
+                .trim_start_matches('{')
+                .trim_end_matches('}')
+                .trim();
+            if !own_inner.is_empty() {
+                merged_parts.push(own_inner.to_string());
+            }
+
+            let merged_json = format!("{{{}}}", merged_parts.join(","));
+            code_parts.push(format!("{}const {} = css({})", prefix, name, merged_json));
+        }
+    }
+
+    // Generate globalCss calls
+    for (selector, json) in &collected.global_styles {
+        code_parts.push(format!("globalCss({{ \"{}\": {} }})", selector, json));
+    }
+
+    // Generate keyframes declarations (sorted for deterministic output)
+    let mut keyframes: Vec<_> = collected.keyframes.iter().collect();
+    keyframes.sort_by_key(|(name, _)| *name);
+    for (name, entry) in keyframes {
+        let prefix = if entry.exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = keyframes({})",
+            prefix, name, entry.json
+        ));
+    }
+
+    // Generate styleVariants - produce an object with variant keys
+    let mut variants: Vec<_> = collected.style_variants.iter().collect();
+    variants.sort_by_key(|(name, _)| *name);
+    for (name, (variant_map, exported)) in variants {
+        // Sort variant keys for deterministic output
+        let mut variant_entries: Vec<_> = variant_map.iter().collect();
+        variant_entries.sort_by_key(|(k, _)| *k);
+
+        let mut object_parts = Vec::new();
+        for (variant_key, variant) in variant_entries {
+            let value = if let Some(base_name) = &variant.base {
+                // Composition: merge base styles + variant styles into single css() call
+                let mut merged_parts = Vec::new();
+
+                // Add base styles
+                if let Some(base_json) = style_json_map.get(base_name.as_str()) {
+                    let inner = base_json
+                        .trim()
+                        .trim_start_matches('{')
+                        .trim_end_matches('}')
+                        .trim();
+                    if !inner.is_empty() {
+                        merged_parts.push(inner.to_string());
+                    }
+                }
+
+                // Add variant's own styles
+                let own_inner = variant
+                    .styles_json
+                    .trim()
+                    .trim_start_matches('{')
+                    .trim_end_matches('}')
+                    .trim();
+                if !own_inner.is_empty() {
+                    merged_parts.push(own_inner.to_string());
+                }
+
+                format!("css({{{}}})", merged_parts.join(","))
+            } else {
+                // No composition, just the styles
+                format!("css({})", variant.styles_json)
+            };
+            object_parts.push(format!("  {}: {}", variant_key, value));
+        }
+
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = {{\n{}\n}}",
+            prefix,
+            name,
+            object_parts.join(",\n")
+        ));
+    }
+
+    // Generate createVar declarations (sorted for deterministic output)
+    let mut vars: Vec<_> = collected.vars.iter().collect();
+    vars.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in vars {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate createContainer declarations (sorted for deterministic output)
+    let mut containers: Vec<_> = collected.containers.iter().collect();
+    containers.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in containers {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate layer declarations (sorted for deterministic output)
+    let mut layers: Vec<_> = collected.layers.iter().collect();
+    layers.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in layers {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate constant exports (sorted for deterministic output)
+    let mut constants: Vec<_> = collected.constant_exports.iter().collect();
+    constants.sort_by_key(|(name, _)| *name);
+    for (name, value) in constants {
+        code_parts.push(format!("export const {} = {}", name, value));
+    }
+
+    code_parts.join("\n")
+}
+
+impl Clone for CollectedStyles {
+    fn clone(&self) -> Self {
+        Self {
+            styles: self.styles.clone(),
+            global_styles: self.global_styles.clone(),
+            keyframes: self.keyframes.clone(),
+            vars: self.vars.clone(),
+            font_faces: self.font_faces.clone(),
+            style_variants: self.style_variants.clone(),
+            containers: self.containers.clone(),
+            layers: self.layers.clone(),
+            constant_exports: self.constant_exports.clone(),
+        }
+    }
+}
+
+/// Parse a styleVariants object and extract variant info
+fn parse_style_variants(
+    variants_obj: &JsValue,
+    context: &mut Context,
+) -> HashMap<String, StyleVariant> {
+    let mut result = HashMap::new();
+
+    if let Some(obj) = variants_obj.as_object() {
+        // Get the object's own property keys
+        if let Ok(keys) = obj.own_property_keys(context) {
+            for key in keys {
+                // Convert PropertyKey to string
+                let key_name = match &key {
+                    boa_engine::property::PropertyKey::String(s) => s.to_std_string_escaped(),
+                    boa_engine::property::PropertyKey::Symbol(_) => continue,
+                    boa_engine::property::PropertyKey::Index(i) => i.get().to_string(),
+                };
+
+                if let Ok(value) = obj.get(key.clone(), context) {
+                    let variant = parse_single_variant(&value, context);
+                    result.insert(key_name, variant);
+                }
+            }
+        }
+    }
+
+    result
+}
+
+/// Parse a single variant value (either style object or [base, styleObj] array)
+fn parse_single_variant(value: &JsValue, context: &mut Context) -> StyleVariant {
+    // Check if value is an array by checking if it has a numeric "length" property
+    if let Some(obj) = value.as_object()
+        && let Ok(length_val) = obj.get(js_string!("length"), context)
+        && let Some(len) = length_val.as_number()
+    {
+        let len = len as u32;
+        if len >= 2 {
+            // It's an array with at least 2 elements
+            if let Ok(first) = obj.get(0, context)
+                && let Some(base_str) = first.as_string()
+            {
+                let base_class = base_str.to_std_string_escaped();
+                // Check if it looks like a placeholder (__style_N__) or class name
+                if base_class.starts_with("__style_") || !base_class.contains('{') {
+                    // Get the style object (second element)
+                    if let Ok(style_obj) = obj.get(1, context) {
+                        let json = js_value_to_json(&style_obj, context);
+                        return StyleVariant {
+                            base: Some(base_class),
+                            styles_json: json,
+                        };
+                    }
+                }
+            }
+        }
+    }
+
+    // Not an array or not composition - treat as plain style object
+    StyleVariant {
+        base: None,
+        styles_json: js_value_to_json(value, context),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_is_vanilla_extract_file() {
+        assert!(is_vanilla_extract_file("styles.css.ts"));
+        assert!(is_vanilla_extract_file("theme.css.js"));
+        assert!(is_vanilla_extract_file("path/to/styles.css.ts"));
+        assert!(!is_vanilla_extract_file("styles.ts"));
+        assert!(!is_vanilla_extract_file("styles.css"));
+        assert!(!is_vanilla_extract_file("component.tsx"));
+    }
+
+    #[test]
+    fn test_preprocess_typescript() {
+        let code = r#"import { style } from '@devup-ui/react'
+export const container = style({ background: "red" })"#;
+        let result = preprocess_typescript(code, "@devup-ui/react");
+        // The result should have destructuring from __vanilla_extract__ and no export keyword
+        assert!(
+            result.contains("__vanilla_extract__"),
+            "Expected __vanilla_extract__ but got: {}",
+            result
+        );
+        assert!(
+            !result.contains("export const"),
+            "Should not contain 'export const': {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_preprocess_typescript_strips_types() {
+        let code = r#"import { style } from '@devup-ui/react'
+interface Props {
+    color: string;
+}
+export const container = style({ background: "red" })"#;
+        let result = preprocess_typescript(code, "@devup-ui/react");
+        // TypeScript interface should be stripped
+        assert!(
+            !result.contains("interface"),
+            "Should not contain interface: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_style() {
+        let code = r#"import { style } from '@devup-ui/react'
+export const container = style({ background: "red", padding: 16 })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert!(!result.styles.is_empty());
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_global_style() {
+        let code = r#"import { globalStyle } from '@devup-ui/react'
+globalStyle("body", { margin: 0, padding: 0 })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert_eq!(result.global_styles.len(), 1);
+        assert_eq!(result.global_styles[0].0, "body");
+    }
+
+    #[test]
+    fn test_collected_styles_to_code() {
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "container".to_string(),
+            StyleEntry {
+                json: r#"{"background":"red"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let code = collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("import { css } from '@devup-ui/react'"));
+        assert!(code.contains(r#"export const container = css({"background":"red"})"#));
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_with_variable() {
+        // Test that variables are evaluated at execution time
+        let code = r#"import { style } from '@devup-ui/react'
+const primaryColor = "blue";
+const spacing = 16;
+export const button = style({ background: primaryColor, padding: spacing })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert!(result.styles.contains_key("button"));
+        let entry = &result.styles["button"];
+        // The variable values should be resolved
+        assert!(
+            entry.json.contains("blue"),
+            "Expected 'blue' in JSON: {}",
+            entry.json
+        );
+        assert!(
+            entry.json.contains("16"),
+            "Expected '16' in JSON: {}",
+            entry.json
+        );
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_with_computed_value() {
+        // Test computed values
+        let code = r#"import { style } from '@devup-ui/react'
+const base = 8;
+export const box = style({ padding: base * 2, margin: base / 2 })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert!(result.styles.contains_key("box"));
+        let entry = &result.styles["box"];
+        assert!(
+            entry.json.contains("16"),
+            "Expected padding 16 in JSON: {}",
+            entry.json
+        );
+        assert!(
+            entry.json.contains("4"),
+            "Expected margin 4 in JSON: {}",
+            entry.json
+        );
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_with_conditional() {
+        // Test conditional expressions
+        let code = r#"import { style } from '@devup-ui/react'
+const isDark = true;
+export const theme = style({ background: isDark ? "black" : "white" })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert!(result.styles.contains_key("theme"));
+        let entry = &result.styles["theme"];
+        assert!(
+            entry.json.contains("black"),
+            "Expected 'black' in JSON: {}",
+            entry.json
+        );
+    }
+
+    #[test]
+    fn test_execute_vanilla_extract_with_spread() {
+        // Test spread operator
+        let code = r#"import { style } from '@devup-ui/react'
+const baseStyle = { padding: 8, margin: 4 };
+export const extended = style({ ...baseStyle, background: "red" })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        assert!(result.styles.contains_key("extended"));
+        let entry = &result.styles["extended"];
+        assert!(
+            entry.json.contains("8"),
+            "Expected padding 8 in JSON: {}",
+            entry.json
+        );
+        assert!(
+            entry.json.contains("4"),
+            "Expected margin 4 in JSON: {}",
+            entry.json
+        );
+        assert!(
+            entry.json.contains("red"),
+            "Expected 'red' in JSON: {}",
+            entry.json
+        );
+    }
+}

From 88ad958166c12beef9a636ffe01abe99f973da5a Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Fri, 9 Jan 2026 01:01:28 +0900
Subject: [PATCH 03/31] Update

---
 Cargo.lock                                | 755 ++++++++++++++--------
 bindings/devup-ui-wasm/.cargo/config.toml |   2 +
 bindings/devup-ui-wasm/Cargo.toml         |   7 +-
 libs/css/Cargo.toml                       |   2 +-
 libs/extractor/Cargo.toml                 |  24 +-
 libs/extractor/src/vanilla_extract.rs     |  29 +-
 libs/sheet/Cargo.toml                     |   4 +-
 7 files changed, 529 insertions(+), 294 deletions(-)
 create mode 100644 bindings/devup-ui-wasm/.cargo/config.toml

diff --git a/Cargo.lock b/Cargo.lock
index a0546edc..1d3b5279 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -17,6 +17,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "aligned-vec"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc890384c8602f339876ded803c97ad529f3842aba97f6392b3dba0dd171769b"
+dependencies = [
+ "equator",
+]
+
 [[package]]
 name = "alloca"
 version = "0.4.0"
@@ -129,9 +138,9 @@ dependencies = [
 
 [[package]]
 name = "boa_ast"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c340fe0f0b267787095cbe35240c6786ff19da63ec7b69367ba338eace8169b"
+checksum = "bc119a5ad34c3f459062a96907f53358989b173d104258891bb74f95d93747e8"
 dependencies = [
  "bitflags",
  "boa_interner",
@@ -144,10 +153,11 @@ dependencies = [
 
 [[package]]
 name = "boa_engine"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f620c3f06f51e65c0504ddf04978be1b814ac6586f0b45f6019801ab5efd37f9"
+checksum = "e637ec52ea66d76b0ca86180c259d6c7bb6e6a6e14b2f36b85099306d8b00cc3"
 dependencies = [
+ "aligned-vec",
  "arrayvec",
  "bitflags",
  "boa_ast",
@@ -155,23 +165,27 @@ dependencies = [
  "boa_interner",
  "boa_macros",
  "boa_parser",
- "boa_profiler",
  "boa_string",
  "bytemuck",
  "cfg-if",
+ "cow-utils",
  "dashmap",
+ "dynify",
  "fast-float2",
- "hashbrown 0.15.5",
+ "float16",
+ "futures-channel",
+ "futures-concurrency",
+ "futures-lite",
+ "hashbrown 0.16.1",
  "icu_normalizer",
  "indexmap",
  "intrusive-collections",
- "itertools 0.13.0",
+ "itertools 0.14.0",
  "num-bigint",
  "num-integer",
  "num-traits",
  "num_enum",
- "once_cell",
- "pollster",
+ "paste",
  "portable-atomic",
  "rand",
  "regress",
@@ -179,49 +193,52 @@ dependencies = [
  "ryu-js",
  "serde",
  "serde_json",
- "sptr",
+ "small_btree",
  "static_assertions",
+ "tag_ptr",
  "tap",
  "thin-vec",
  "thiserror",
  "time",
+ "xsum",
 ]
 
 [[package]]
 name = "boa_gc"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2425c0b7720d42d73eaa6a883fbb77a5c920da8694964a3d79a67597ac55cce2"
+checksum = "f1179f690cbfcbe5364cceee5f1cb577265bb6f07b0be6f210aabe270adcf9da"
 dependencies = [
  "boa_macros",
- "boa_profiler",
  "boa_string",
- "hashbrown 0.15.5",
+ "hashbrown 0.16.1",
  "thin-vec",
 ]
 
 [[package]]
 name = "boa_interner"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42407a3b724cfaecde8f7d4af566df4b56af32a2f11f0956f5570bb974e7f749"
+checksum = "9626505d33dc63d349662437297df1d3afd9d5fc4a2b3ad34e5e1ce879a78848"
 dependencies = [
  "boa_gc",
  "boa_macros",
- "hashbrown 0.15.5",
+ "hashbrown 0.16.1",
  "indexmap",
  "once_cell",
- "phf 0.11.3",
+ "phf",
  "rustc-hash",
  "static_assertions",
 ]
 
 [[package]]
 name = "boa_macros"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fd3f870829131332587f607a7ff909f1af5fc523fd1b192db55fbbdf52e8d3c"
+checksum = "7f36418a46544b152632c141b0a0b7a453cd69ca150caeef83aee9e2f4b48b7d"
 dependencies = [
+ "cfg-if",
+ "cow-utils",
  "proc-macro2",
  "quote",
  "syn",
@@ -230,15 +247,14 @@ dependencies = [
 
 [[package]]
 name = "boa_parser"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9cc142dac798cdc6e2dbccfddeb50f36d2523bb977a976e19bdb3ae19b740804"
+checksum = "02f99bf5b684f0de946378fcfe5f38c3a0fbd51cbf83a0f39ff773a0e218541f"
 dependencies = [
  "bitflags",
  "boa_ast",
  "boa_interner",
  "boa_macros",
- "boa_profiler",
  "fast-float2",
  "icu_properties",
  "num-bigint",
@@ -247,22 +263,17 @@ dependencies = [
  "rustc-hash",
 ]
 
-[[package]]
-name = "boa_profiler"
-version = "0.20.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4064908e7cdf9b6317179e9b04dcb27f1510c1c144aeab4d0394014f37a0f922"
-
 [[package]]
 name = "boa_string"
-version = "0.20.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7debc13fbf7997bf38bf8e9b20f1ad5e2a7d27a900e1f6039fe244ce30f589b5"
+checksum = "45ce9d7aa5563a2e14eab111e2ae1a06a69a812f6c0c3d843196c9d03fbef440"
 dependencies = [
  "fast-float2",
+ "itoa",
  "paste",
  "rustc-hash",
- "sptr",
+ "ryu-js",
  "static_assertions",
 ]
 
@@ -414,6 +425,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "cordyceps"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "688d7fbb8092b8de775ef2536f36c8c31f2bc4006ece2e8d8ad2d17d00ce0a2a"
+dependencies = [
+ "loom",
+ "tracing",
+]
+
 [[package]]
 name = "cow-utils"
 version = "0.1.3"
@@ -520,7 +541,7 @@ version = "0.1.0"
 dependencies = [
  "bimap",
  "once_cell",
- "phf 0.13.1",
+ "phf",
  "regex",
  "rstest",
  "serde",
@@ -558,6 +579,7 @@ dependencies = [
  "console_error_panic_hook",
  "css",
  "extractor",
+ "getrandom",
  "insta",
  "js-sys",
  "once_cell",
@@ -570,6 +592,12 @@ dependencies = [
  "wasm-bindgen-test",
 ]
 
+[[package]]
+name = "diatomic-waker"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ab03c107fafeb3ee9f5925686dbb7a73bc76e3932abb0d2b365cb64b169cf04c"
+
 [[package]]
 name = "digest"
 version = "0.10.7"
@@ -597,6 +625,26 @@ version = "0.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d742b56656e8b14d63e7ea9806597b1849ae25412584c8adf78c0f67bd985e66"
 
+[[package]]
+name = "dynify"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81acb15628a3e22358bf73de5e7e62360b8a777dbcb5fc9ac7dfa9ae73723747"
+dependencies = [
+ "dynify-macros",
+]
+
+[[package]]
+name = "dynify-macros"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ec431cd708430d5029356535259c5d645d60edd3d39c54e5eea9782d46caa7d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "either"
 version = "1.15.0"
@@ -609,6 +657,26 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "34aa73646ffb006b8f5147f3dc182bd4bcb190227ce861fc4a4844bf8e3cb2c0"
 
+[[package]]
+name = "equator"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4711b213838dfee0117e3be6ac926007d7f433d7bbe33595975d4190cb07e6fc"
+dependencies = [
+ "equator-macro",
+]
+
+[[package]]
+name = "equator-macro"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44f23cf4b44bfce11a86ace86f8a73ffdec849c9fd00a386a53d278bd9e81fb3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "equivalent"
 version = "1.0.2"
@@ -641,7 +709,7 @@ dependencies = [
  "oxc_span",
  "oxc_syntax",
  "oxc_transformer",
- "phf 0.13.1",
+ "phf",
  "rstest",
  "serde_json",
  "serial_test",
@@ -667,6 +735,12 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a3076410a55c90011c298b04d0cfa770b00fa04e1e3c97d3f6c9de105a03844"
 
+[[package]]
+name = "fixedbitset"
+version = "0.5.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d674e81391d1e1ab681a28d99df07927c6d4aa5b027d7da16ba32d1d21ecd99"
+
 [[package]]
 name = "flate2"
 version = "1.1.5"
@@ -678,10 +752,14 @@ dependencies = [
 ]
 
 [[package]]
-name = "foldhash"
+name = "float16"
 version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
+checksum = "7bffafbd079d520191c7c2779ae9cf757601266cf4167d3f659ff09617ff8483"
+dependencies = [
+ "cfg-if",
+ "rustc_version 0.2.3",
+]
 
 [[package]]
 name = "foldhash"
@@ -690,18 +768,16 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
 
 [[package]]
-name = "futures"
-version = "0.3.31"
+name = "futures-buffered"
+version = "0.2.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "65bc07b1a8bc7c85c5f2e110c476c7389b4554ba72af57d8445ea63a576b0876"
+checksum = "a8e0e1f38ec07ba4abbde21eed377082f17ccb988be9d988a5adbf4bafc118fd"
 dependencies = [
- "futures-channel",
+ "cordyceps",
+ "diatomic-waker",
  "futures-core",
- "futures-executor",
- "futures-io",
- "futures-sink",
- "futures-task",
- "futures-util",
+ "pin-project-lite",
+ "spin",
 ]
 
 [[package]]
@@ -711,7 +787,21 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
 dependencies = [
  "futures-core",
- "futures-sink",
+]
+
+[[package]]
+name = "futures-concurrency"
+version = "7.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eb68017df91f2e477ed4bea586c59eaecaa47ed885a770d0444e21e62572cd2"
+dependencies = [
+ "fixedbitset",
+ "futures-buffered",
+ "futures-core",
+ "futures-lite",
+ "pin-project",
+ "slab",
+ "smallvec",
 ]
 
 [[package]]
@@ -737,6 +827,19 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
 
+[[package]]
+name = "futures-lite"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f78e10609fe0e0b3f4157ffab1876319b5b0db102a2c60dc4626306dc46b44ad"
+dependencies = [
+ "fastrand",
+ "futures-core",
+ "futures-io",
+ "parking",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "futures-macro"
 version = "0.3.31"
@@ -748,12 +851,6 @@ dependencies = [
  "syn",
 ]
 
-[[package]]
-name = "futures-sink"
-version = "0.3.31"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
-
 [[package]]
 name = "futures-task"
 version = "0.3.31"
@@ -772,37 +869,37 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
 dependencies = [
- "futures-channel",
  "futures-core",
- "futures-io",
  "futures-macro",
- "futures-sink",
  "futures-task",
- "memchr",
  "pin-project-lite",
  "pin-utils",
  "slab",
 ]
 
 [[package]]
-name = "generic-array"
-version = "0.14.7"
+name = "generator"
+version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+checksum = "52f04ae4152da20c76fe800fa48659201d5cf627c5149ca0b707b69d7eef6cf9"
 dependencies = [
- "typenum",
- "version_check",
+ "cc",
+ "cfg-if",
+ "libc",
+ "log",
+ "rustversion",
+ "windows-link",
+ "windows-result",
 ]
 
 [[package]]
-name = "getrandom"
-version = "0.2.16"
+name = "generic-array"
+version = "0.14.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
 dependencies = [
- "cfg-if",
- "libc",
- "wasi",
+ "typenum",
+ "version_check",
 ]
 
 [[package]]
@@ -812,9 +909,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "899def5c37c4fd7b2664648c28120ecec138e4d395b459e5ca34f9cce2dd77fd"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi",
  "wasip2",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -840,17 +939,6 @@ version = "0.14.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1"
 
-[[package]]
-name = "hashbrown"
-version = "0.15.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
-dependencies = [
- "allocator-api2",
- "equivalent",
- "foldhash 0.1.5",
-]
-
 [[package]]
 name = "hashbrown"
 version = "0.16.1"
@@ -859,7 +947,7 @@ checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
 dependencies = [
  "allocator-api2",
  "equivalent",
- "foldhash 0.2.0",
+ "foldhash",
 ]
 
 [[package]]
@@ -870,54 +958,36 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "icu_collections"
-version = "1.5.0"
+version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "db2fa452206ebee18c4b5c2274dbf1de17008e874b4dc4f0aea9d01ca79e4526"
+checksum = "200072f5d0e3614556f94a9930d5dc3e0662a652823904c3a75dc3b0af7fee47"
 dependencies = [
  "displaydoc",
+ "potential_utf",
  "yoke",
  "zerofrom",
  "zerovec",
 ]
 
 [[package]]
-name = "icu_locid"
-version = "1.5.0"
+name = "icu_locale_core"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "13acbb8371917fc971be86fc8057c41a64b521c184808a698c02acc242dbf637"
+checksum = "edba7861004dd3714265b4db54a3c390e880ab658fec5f7db895fae2046b5bb6"
 dependencies = [
  "displaydoc",
  "litemap",
+ "serde",
  "tinystr",
  "writeable",
  "zerovec",
 ]
 
-[[package]]
-name = "icu_locid_transform"
-version = "1.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "01d11ac35de8e40fdeda00d9e1e9d92525f3f9d887cdd7aa81d727596788b54e"
-dependencies = [
- "displaydoc",
- "icu_locid",
- "icu_locid_transform_data",
- "icu_provider",
- "tinystr",
- "zerovec",
-]
-
-[[package]]
-name = "icu_locid_transform_data"
-version = "1.5.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7515e6d781098bf9f7205ab3fc7e9709d34554ae0b21ddbcb5febfa4bc7df11d"
-
 [[package]]
 name = "icu_normalizer"
-version = "1.5.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19ce3e0da2ec68599d193c93d088142efd7f9c5d6fc9b803774855747dc6a84f"
+checksum = "8b24a59706036ba941c9476a55cd57b82b77f38a3c667d637ee7cabbc85eaedc"
 dependencies = [
  "displaydoc",
  "icu_collections",
@@ -926,66 +996,55 @@ dependencies = [
  "icu_provider",
  "smallvec",
  "utf16_iter",
- "utf8_iter",
  "write16",
  "zerovec",
 ]
 
 [[package]]
 name = "icu_normalizer_data"
-version = "1.5.1"
+version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5e8338228bdc8ab83303f16b797e177953730f601a96c25d10cb3ab0daa0cb7"
+checksum = "00210d6893afc98edb752b664b8890f0ef174c8adbb8d0be9710fa66fbbf72d3"
 
 [[package]]
 name = "icu_properties"
-version = "1.5.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "93d6020766cfc6302c15dbbc9c8778c37e62c14427cb7f6e601d849e092aeef5"
+checksum = "f5a97b8ac6235e69506e8dacfb2adf38461d2ce6d3e9bd9c94c4cbc3cd4400a4"
 dependencies = [
  "displaydoc",
  "icu_collections",
- "icu_locid_transform",
+ "icu_locale_core",
  "icu_properties_data",
  "icu_provider",
- "tinystr",
+ "potential_utf",
+ "zerotrie",
  "zerovec",
 ]
 
 [[package]]
 name = "icu_properties_data"
-version = "1.5.1"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "85fb8799753b75aee8d2a21d7c14d9f38921b54b3dbda10f5a3c7a7b82dba5e2"
+checksum = "298459143998310acd25ffe6810ed544932242d3f07083eee1084d83a71bd632"
 
 [[package]]
 name = "icu_provider"
-version = "1.5.0"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ed421c8a8ef78d3e2dbc98a973be2f3770cb42b606e3ab18d6237c4dfde68d9"
+checksum = "85962cf0ce02e1e0a629cc34e7ca3e373ce20dda4c4d7294bbd0bf1fdb59e614"
 dependencies = [
  "displaydoc",
- "icu_locid",
- "icu_provider_macros",
+ "icu_locale_core",
+ "serde",
  "stable_deref_trait",
- "tinystr",
  "writeable",
  "yoke",
  "zerofrom",
+ "zerotrie",
  "zerovec",
 ]
 
-[[package]]
-name = "icu_provider_macros"
-version = "1.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1ec89e9337638ecdc08744df490b221a7399bf8d164eb52a665454e60e075ad6"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
-
 [[package]]
 name = "indexmap"
 version = "2.12.0"
@@ -998,9 +1057,9 @@ dependencies = [
 
 [[package]]
 name = "insta"
-version = "1.45.1"
+version = "1.46.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "983e3b24350c84ab8a65151f537d67afbbf7153bb9f1110e03e9fa9b07f67a5c"
+checksum = "1b66886d14d18d420ab5052cbff544fc5d34d0b2cdd35eb5976aaa10a4a472e5"
 dependencies = [
  "console",
  "once_cell",
@@ -1057,6 +1116,12 @@ version = "3.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3c2a6c0b4b5637c41719973ef40c6a1cf564f9db6958350de6193fbee9c23f5"
 
+[[package]]
+name = "lazy_static"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
+
 [[package]]
 name = "libc"
 version = "0.2.178"
@@ -1077,9 +1142,9 @@ checksum = "df1d3c3b53da64cf5760482273a98e575c651a67eec7f77df96b5b642de8f039"
 
 [[package]]
 name = "litemap"
-version = "0.7.5"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23fb14cb19457329c82206317a5663005a4d404783dc74f4252769b0d5f42856"
+checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
 
 [[package]]
 name = "lock_api"
@@ -1096,6 +1161,28 @@ version = "0.4.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "34080505efa8e45a4b816c349525ebe327ceaa8559756f0356cba97ef3bf7432"
 
+[[package]]
+name = "loom"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "419e0dc8046cb947daa77eb95ae174acfbddb7673b4151f56d1eed8e93fbfaca"
+dependencies = [
+ "cfg-if",
+ "generator",
+ "scoped-tls",
+ "tracing",
+ "tracing-subscriber",
+]
+
+[[package]]
+name = "matchers"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1525a2a28c7f4fa0fc98bb91ae755d1e2d1505079e05539e35bc876b5d65ae9"
+dependencies = [
+ "regex-automata",
+]
+
 [[package]]
 name = "memchr"
 version = "2.7.6"
@@ -1264,9 +1351,9 @@ dependencies = [
 
 [[package]]
 name = "oxc-miette"
-version = "2.6.0"
+version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f02105a875f3751a0b44b4c822b01177728dd9049ae6fb419e9b04887d730ed1"
+checksum = "60a7ba54c704edefead1f44e9ef09c43e5cfae666bdc33516b066011f0e6ebf7"
 dependencies = [
  "cfg-if",
  "owo-colors",
@@ -1279,9 +1366,9 @@ dependencies = [
 
 [[package]]
 name = "oxc-miette-derive"
-version = "2.6.0"
+version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "003b4612827f6501183873fb0735da92157e3c7daa71c40921c7d2758fec2229"
+checksum = "d4faecb54d0971f948fbc1918df69b26007e6f279a204793669542e1e8b75eb3"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1290,9 +1377,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_allocator"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07f4ba3148223230c546c1064c2795ece78b647ca75c9e98d42418dd4d5e4cd7"
+checksum = "377063b29ba9762002f07bd4bc5cdd60373a4e3b094e15ea201eec07556d65ff"
 dependencies = [
  "allocator-api2",
  "bumpalo",
@@ -1303,9 +1390,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "33a08c611e6a481bc573c4050708f418da9ae8f09c4fac5c295c86cca6bbd1ed"
+checksum = "ff4d2aed570578cfe5249d1e50736971b85c4eedc39f9777f735914e10d42dd7"
 dependencies = [
  "bitflags",
  "oxc_allocator",
@@ -1320,11 +1407,11 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast_macros"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3788ddf2f5da12f0eca87c849bc33016b4bf11eea2b92980bb751e0b6a83b51a"
+checksum = "d7d5f0089ba8705ef065f8acb371c3ab44e3a7fb90372cccac6788b677e763f1"
 dependencies = [
- "phf 0.13.1",
+ "phf",
  "proc-macro2",
  "quote",
  "syn",
@@ -1332,9 +1419,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast_visit"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1c58fd9b2c7697eb1dea5d30d4ae575de810c27a414396542321e292feac0c22"
+checksum = "45305537949b2471ce9afe251a2051af6ed2188492cd079b1d83b96caa6714b5"
 dependencies = [
  "oxc_allocator",
  "oxc_ast",
@@ -1344,9 +1431,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_codegen"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "31ce1592b043fe06b69d934902fb156ddb719716f4f79c505adbaf078700d4f2"
+checksum = "bcf3d7a97d49d6557d315f7b806a246a6627aec4942b9bd50e670686be6d3b00"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1365,9 +1452,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_compat"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1bd0ffbed285a4f1d8dab0fdac33e2fc0cddb9e68e2221838c9d6fd57a45182c"
+checksum = "8d772c9461d67a0bd1b8177674f73d7d666f8120bab90bfc37383eace93bcd82"
 dependencies = [
  "cow-utils",
  "oxc-browserslist",
@@ -1378,18 +1465,18 @@ dependencies = [
 
 [[package]]
 name = "oxc_data_structures"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c6253c51f3836c35d932153398aa7582706f8e39876eae0d7163311f419afc1"
+checksum = "b0264dbee1c186f744a433955a900a34f7a8bf6e4381d00100528d2b23043b21"
 dependencies = [
  "ropey",
 ]
 
 [[package]]
 name = "oxc_diagnostics"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fbdefb78ab7e05e0ed1301f914905292542633fb6129da67ce82a9d3c87921c4"
+checksum = "cd5d75130504c4b6792eba9a687349ec92cc7e220ddfc1cba35ef540c194b6ed"
 dependencies = [
  "cow-utils",
  "oxc-miette",
@@ -1398,9 +1485,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ecmascript"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f845e02047887b1e4af5da1201b6d10f097f722e00cb5f7082bc847aa40f15ec"
+checksum = "12400e655a18fe9ba1359324d7a634964f62d9a151008a48671e46abd9b728e1"
 dependencies = [
  "cow-utils",
  "num-bigint",
@@ -1413,9 +1500,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_estree"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bd69fedb2ea8754a153e979e90fe31efed28789ead73d6d6fd69eb9025c729af"
+checksum = "e2059abb4c194b588d128c1933b6c20fde1b443b053e51da818caed17c272f65"
 
 [[package]]
 name = "oxc_index"
@@ -1429,9 +1516,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_parser"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ec8d0fd27fffd5742181d1ca76450e25ae51a69dffbbe2076231173b262ab31"
+checksum = "090741583620244210f9988d13e7ddec78d8c22b13f885eb8d31c6566528c943"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1452,27 +1539,28 @@ dependencies = [
 
 [[package]]
 name = "oxc_regular_expression"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b4af1f85405275d20352a69e7caaa44a28d03ba91ecc951ec79a1bf3016062d7"
+checksum = "47fe9458baea58cfe0d514b32a3258839f9cad1af738a92c1c55ccea97c5ceb7"
 dependencies = [
  "bitflags",
  "oxc_allocator",
  "oxc_ast_macros",
  "oxc_diagnostics",
  "oxc_span",
- "phf 0.13.1",
+ "phf",
  "rustc-hash",
  "unicode-id-start",
 ]
 
 [[package]]
 name = "oxc_semantic"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac84d63f0e43359f38af2478a7d20cc0aecb780de46cada3f14d8ead6c89bf8c"
+checksum = "e425a107259ff3417682df38a9964491013de0080aecbaab7e43eb1f452b6de1"
 dependencies = [
  "itertools 0.14.0",
+ "memchr",
  "oxc_allocator",
  "oxc_ast",
  "oxc_ast_visit",
@@ -1482,7 +1570,6 @@ dependencies = [
  "oxc_index",
  "oxc_span",
  "oxc_syntax",
- "phf 0.13.1",
  "rustc-hash",
  "self_cell",
 ]
@@ -1502,9 +1589,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_span"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32556c52175b0c616e44efa6c37f532c6a4c3a213761a10ed1b9beb3d3136a78"
+checksum = "4eb492189296521cf459f4caaee8d7525c70341daf10083c53c962c13e4748ee"
 dependencies = [
  "compact_str",
  "oxc-miette",
@@ -1515,9 +1602,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_syntax"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c5b2154749e8d2bf8ac77bfdf9f7e9912c4cb9b63ddfcc63841838a3be48d1a"
+checksum = "c09691f16fb7ed90acb442e88faca68751f2222dbed892122a9b50fc7d161c8d"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1529,15 +1616,15 @@ dependencies = [
  "oxc_estree",
  "oxc_index",
  "oxc_span",
- "phf 0.13.1",
+ "phf",
  "unicode-id-start",
 ]
 
 [[package]]
 name = "oxc_transformer"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aba5c1dca33ef51651f955fd90b1c005d8ea8ea570b220f7616ccdab50179b53"
+checksum = "11b2b72d1e073c39b4993d7dfd71daeb7ea6fb445f5c8b445be6998022ee4f76"
 dependencies = [
  "base64",
  "compact_str",
@@ -1564,9 +1651,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_traverse"
-version = "0.106.0"
+version = "0.107.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "936417f4b572d4ca1ce4ac1aaf66f5f6d76d7302d486ed5c92af14d18f9e9155"
+checksum = "5dcaa9168b7ae1f7df2461e33210605bbe60dd2b638af08a7093310c232f1bda"
 dependencies = [
  "itoa",
  "oxc_allocator",
@@ -1590,6 +1677,12 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "parking"
+version = "2.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f38d5652c16fde515bb1ecef450ab0f6a219d619a7274976324d5e377f7dceba"
+
 [[package]]
 name = "parking_lot"
 version = "0.12.5"
@@ -1625,37 +1718,17 @@ version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
-[[package]]
-name = "phf"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078"
-dependencies = [
- "phf_macros 0.11.3",
- "phf_shared 0.11.3",
-]
-
 [[package]]
 name = "phf"
 version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c1562dc717473dbaa4c1f85a36410e03c047b2e7df7f45ee938fbef64ae7fadf"
 dependencies = [
- "phf_macros 0.13.1",
- "phf_shared 0.13.1",
+ "phf_macros",
+ "phf_shared",
  "serde",
 ]
 
-[[package]]
-name = "phf_generator"
-version = "0.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d"
-dependencies = [
- "phf_shared 0.11.3",
- "rand",
-]
-
 [[package]]
 name = "phf_generator"
 version = "0.13.1"
@@ -1663,51 +1736,49 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "135ace3a761e564ec88c03a77317a7c6b80bb7f7135ef2544dbe054243b89737"
 dependencies = [
  "fastrand",
- "phf_shared 0.13.1",
+ "phf_shared",
 ]
 
 [[package]]
 name = "phf_macros"
-version = "0.11.3"
+version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216"
+checksum = "812f032b54b1e759ccd5f8b6677695d5268c588701effba24601f6932f8269ef"
 dependencies = [
- "phf_generator 0.11.3",
- "phf_shared 0.11.3",
+ "phf_generator",
+ "phf_shared",
  "proc-macro2",
  "quote",
  "syn",
 ]
 
 [[package]]
-name = "phf_macros"
+name = "phf_shared"
 version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "812f032b54b1e759ccd5f8b6677695d5268c588701effba24601f6932f8269ef"
+checksum = "e57fef6bc5981e38c2ce2d63bfa546861309f875b8a75f092d1d54ae2d64f266"
 dependencies = [
- "phf_generator 0.13.1",
- "phf_shared 0.13.1",
- "proc-macro2",
- "quote",
- "syn",
+ "siphasher",
 ]
 
 [[package]]
-name = "phf_shared"
-version = "0.11.3"
+name = "pin-project"
+version = "1.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
+checksum = "677f1add503faace112b9f1373e43e9e054bfdd22ff1a63c1bc485eaec6a6a8a"
 dependencies = [
- "siphasher",
+ "pin-project-internal",
 ]
 
 [[package]]
-name = "phf_shared"
-version = "0.13.1"
+name = "pin-project-internal"
+version = "1.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e57fef6bc5981e38c2ce2d63bfa546861309f875b8a75f092d1d54ae2d64f266"
+checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861"
 dependencies = [
- "siphasher",
+ "proc-macro2",
+ "quote",
+ "syn",
 ]
 
 [[package]]
@@ -1750,18 +1821,21 @@ dependencies = [
  "plotters-backend",
 ]
 
-[[package]]
-name = "pollster"
-version = "0.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2f3a9f18d041e6d0e102a0a46750538147e5e8992d3b4873aaafee2520b00ce3"
-
 [[package]]
 name = "portable-atomic"
 version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f89776e4d69bb58bc6993e99ffa1d11f228b839984854c7daeb5d37f87cbe950"
 
+[[package]]
+name = "potential_utf"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b73949432f5e2a09657003c25bca5e19a0e9c84f8058ca374f49e0ebe605af77"
+dependencies = [
+ "zerovec",
+]
+
 [[package]]
 name = "powerfmt"
 version = "0.2.0"
@@ -1812,20 +1886,19 @@ checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
 
 [[package]]
 name = "rand"
-version = "0.8.5"
+version = "0.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404"
+checksum = "6db2770f06117d490610c7488547d543617b21bfa07796d7a12f6f1bd53850d1"
 dependencies = [
- "libc",
  "rand_chacha",
  "rand_core",
 ]
 
 [[package]]
 name = "rand_chacha"
-version = "0.3.1"
+version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
 dependencies = [
  "ppv-lite86",
  "rand_core",
@@ -1833,11 +1906,11 @@ dependencies = [
 
 [[package]]
 name = "rand_core"
-version = "0.6.4"
+version = "0.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
 dependencies = [
- "getrandom 0.2.16",
+ "getrandom",
 ]
 
 [[package]]
@@ -1948,7 +2021,7 @@ dependencies = [
  "quote",
  "regex",
  "relative-path",
- "rustc_version",
+ "rustc_version 0.4.1",
  "syn",
  "unicode-ident",
 ]
@@ -1959,13 +2032,22 @@ version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
 
+[[package]]
+name = "rustc_version"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "138e3e0acb6c9fb258b19b67cb8abd63c00679d2851805ea151465464fe9030a"
+dependencies = [
+ "semver 0.9.0",
+]
+
 [[package]]
 name = "rustc_version"
 version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cfcb3a22ef46e85b45de6ee7e79d063319ebb6594faafcf1c225ea92ab6e9b92"
 dependencies = [
- "semver",
+ "semver 1.0.27",
 ]
 
 [[package]]
@@ -2017,6 +2099,12 @@ dependencies = [
  "sdd",
 ]
 
+[[package]]
+name = "scoped-tls"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
+
 [[package]]
 name = "scopeguard"
 version = "1.2.0"
@@ -2035,12 +2123,27 @@ version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "16c2f82143577edb4921b71ede051dac62ca3c16084e918bf7b40c96ae10eb33"
 
+[[package]]
+name = "semver"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
+dependencies = [
+ "semver-parser",
+]
+
 [[package]]
 name = "semver"
 version = "1.0.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d767eb0aabc880b29956c35734170f26ed551a859dbd361d140cdbeca61ab1e2"
 
+[[package]]
+name = "semver-parser"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
+
 [[package]]
 name = "seq-macro"
 version = "0.3.6"
@@ -2090,9 +2193,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.148"
+version = "1.0.149"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3084b546a1dd6289475996f182a22aba973866ea8e8b02c51d9f46b1336a22da"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
 dependencies = [
  "itoa",
  "memchr",
@@ -2103,11 +2206,12 @@ dependencies = [
 
 [[package]]
 name = "serial_test"
-version = "3.2.0"
+version = "3.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b258109f244e1d6891bf1053a55d63a5cd4f8f4c30cf9a1280989f80e7a1fa9"
+checksum = "0d0b343e184fc3b7bb44dff0705fffcf4b3756ba6aff420dddd8b24ca145e555"
 dependencies = [
- "futures",
+ "futures-executor",
+ "futures-util",
  "log",
  "once_cell",
  "parking_lot",
@@ -2117,9 +2221,9 @@ dependencies = [
 
 [[package]]
 name = "serial_test_derive"
-version = "3.2.0"
+version = "3.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d69265a08751de7844521fd15003ae0a888e035773ba05695c5c759a6f89eef"
+checksum = "6f50427f258fb77356e4cd4aa0e87e2bd2c66dbcee41dc405282cae2bfc26c83"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2137,6 +2241,15 @@ dependencies = [
  "digest",
 ]
 
+[[package]]
+name = "sharded-slab"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
+dependencies = [
+ "lazy_static",
+]
+
 [[package]]
 name = "sheet"
 version = "0.1.0"
@@ -2182,6 +2295,15 @@ version = "0.4.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a2ae44ef20feb57a68b23d846850f861394c2e02dc425a50098ae8c90267589"
 
+[[package]]
+name = "small_btree"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ba60d2df92ba73864714808ca68c059734853e6ab722b40e1cf543ebb3a057a"
+dependencies = [
+ "arrayvec",
+]
+
 [[package]]
 name = "smallvec"
 version = "1.15.1"
@@ -2195,10 +2317,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b7c388c1b5e93756d0c740965c41e8822f866621d41acbdf6336a6a168f8840c"
 
 [[package]]
-name = "sptr"
-version = "0.3.2"
+name = "spin"
+version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b9b39299b249ad65f3b7e96443bad61c02ca5cd3589f46cb6d610a0fd6c0d6a"
+checksum = "d5fe4ccb98d9c292d56fec89a5e07da7fc4cf0dc11e156b41793132775d3e591"
 
 [[package]]
 name = "stable_deref_trait"
@@ -2258,6 +2380,12 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "tag_ptr"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0e973b34477b7823833469eb0f5a3a60370fef7a453e02d751b59180d0a5a05"
+
 [[package]]
 name = "tap"
 version = "1.0.1"
@@ -2271,7 +2399,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "655da9c7eb6305c55742045d5a8d2037996d61d8de95806335c7c86ce0f82e9c"
 dependencies = [
  "fastrand",
- "getrandom 0.3.4",
+ "getrandom",
  "once_cell",
  "rustix",
  "windows-sys 0.61.2",
@@ -2314,6 +2442,15 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "thread_local"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185"
+dependencies = [
+ "cfg-if",
+]
+
 [[package]]
 name = "time"
 version = "0.3.44"
@@ -2350,11 +2487,12 @@ dependencies = [
 
 [[package]]
 name = "tinystr"
-version = "0.7.6"
+version = "0.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9117f5d4db391c1cf6927e7bea3db74b9a1c1add8f7eda9ffd5364f40f57b82f"
+checksum = "42d3e9c45c09de15d06dd8acf5f4e0e399e85927b7f00711024eb7ae10fa4869"
 dependencies = [
  "displaydoc",
+ "serde_core",
  "zerovec",
 ]
 
@@ -2398,6 +2536,67 @@ dependencies = [
  "winnow",
 ]
 
+[[package]]
+name = "tracing"
+version = "0.1.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
+dependencies = [
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
+dependencies = [
+ "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
+dependencies = [
+ "log",
+ "once_cell",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f30143827ddab0d256fd843b7a66d164e9f271cfa0dde49142c5ca0ca291f1e"
+dependencies = [
+ "matchers",
+ "nu-ansi-term",
+ "once_cell",
+ "regex-automata",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing",
+ "tracing-core",
+ "tracing-log",
+]
+
 [[package]]
 name = "typenum"
 version = "1.19.0"
@@ -2447,10 +2646,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c8232dd3cdaed5356e0f716d285e4b40b932ac434100fe9b7e0e8e935b9e6246"
 
 [[package]]
-name = "utf8_iter"
-version = "1.0.4"
+name = "valuable"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+checksum = "ba73ea9cf16a25df0c8caa16c51acb937d5712a8429db78a3ee29d5dcacd3a65"
 
 [[package]]
 name = "version_check"
@@ -2480,12 +2679,6 @@ dependencies = [
  "winapi-util",
 ]
 
-[[package]]
-name = "wasi"
-version = "0.11.1+wasi-snapshot-preview1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
-
 [[package]]
 name = "wasip2"
 version = "1.0.1+wasi-0.2.4"
@@ -2632,6 +2825,15 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
+[[package]]
+name = "windows-result"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
+dependencies = [
+ "windows-link",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -2737,17 +2939,22 @@ checksum = "d1890f4022759daae28ed4fe62859b1236caebfc61ede2f63ed4e695f3f6d936"
 
 [[package]]
 name = "writeable"
-version = "0.5.5"
+version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e9df38ee2d2c3c5948ea468a8406ff0db0b29ae1ffde1bcf20ef305bcc95c51"
+checksum = "9edde0db4769d2dc68579893f2306b26c6ecfbe0ef499b013d731b7b9247e0b9"
+
+[[package]]
+name = "xsum"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0637d3a5566a82fa5214bae89087bc8c9fb94cd8e8a3c07feb691bb8d9c632db"
 
 [[package]]
 name = "yoke"
-version = "0.7.5"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "120e6aef9aa629e3d4f52dc8cc43a015c7724194c97dfaf45180d2daf2b77f40"
+checksum = "72d6e5c6afb84d73944e5cedb052c4680d5657337201555f9f2a16b7406d4954"
 dependencies = [
- "serde",
  "stable_deref_trait",
  "yoke-derive",
  "zerofrom",
@@ -2755,9 +2962,9 @@ dependencies = [
 
 [[package]]
 name = "yoke-derive"
-version = "0.7.5"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2380878cad4ac9aac1e2435f3eb4020e8374b5f13c296cb75b4620ff8e229154"
+checksum = "b659052874eb698efe5b9e8cf382204678a0086ebf46982b79d6ca3182927e5d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2806,12 +3013,24 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zerotrie"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a59c17a5562d507e4b54960e8569ebee33bee890c70aa3fe7b97e85a9fd7851"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
+
 [[package]]
 name = "zerovec"
-version = "0.10.4"
+version = "0.11.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa2b893d79df23bfb12d5461018d408ea19dfafe76c2c7ef6d4eba614f8ff079"
+checksum = "6c28719294829477f525be0186d13efa9a3c602f7ec202ca9e353d310fb9a002"
 dependencies = [
+ "serde",
  "yoke",
  "zerofrom",
  "zerovec-derive",
@@ -2819,9 +3038,9 @@ dependencies = [
 
 [[package]]
 name = "zerovec-derive"
-version = "0.10.3"
+version = "0.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6eafa6dfb17584ea3e2bd6e76e0cc15ad7af12b09abdd1ca55961bed9b1063c6"
+checksum = "eadce39539ca5cb3985590102671f2567e659fca9666581ad3411d59207951f3"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/bindings/devup-ui-wasm/.cargo/config.toml b/bindings/devup-ui-wasm/.cargo/config.toml
new file mode 100644
index 00000000..a3a1ba0e
--- /dev/null
+++ b/bindings/devup-ui-wasm/.cargo/config.toml
@@ -0,0 +1,2 @@
+[target.wasm32-unknown-unknown]
+rustflags = ["--cfg", "getrandom_wasm_js"]
diff --git a/bindings/devup-ui-wasm/Cargo.toml b/bindings/devup-ui-wasm/Cargo.toml
index f6c0382a..123357cc 100644
--- a/bindings/devup-ui-wasm/Cargo.toml
+++ b/bindings/devup-ui-wasm/Cargo.toml
@@ -27,12 +27,13 @@ css = { path = "../../libs/css" }
 console_error_panic_hook = { version = "0.1.7", optional = true }
 once_cell = "1.21.3"
 js-sys = "0.3.83"
-serde_json = "1.0.148"
+serde_json = "1.0.149"
 serde-wasm-bindgen = "0.6.5"
 bimap = { version = "0.6.3", features = ["serde"] }
+getrandom = { version = "0.3", features = ["wasm_js"] }
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.56"
-serial_test = "3.2.0"
-insta = "1.45.1"
+serial_test = "3.3.1"
+insta = "1.46.0"
 rstest = "0.26.1"
diff --git a/libs/css/Cargo.toml b/libs/css/Cargo.toml
index 25ed7164..422592a7 100644
--- a/libs/css/Cargo.toml
+++ b/libs/css/Cargo.toml
@@ -6,7 +6,7 @@ edition = "2024"
 [dependencies]
 once_cell = "1.21.3"
 phf = { version = "0.13", features = ["macros"] }
-serial_test = "3.2.0"
+serial_test = "3.3.1"
 serde = { version = "1.0.228", features = ["derive"] }
 regex = "1.12.2"
 bimap = { version = "0.6.3" }
diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml
index 77b5957e..ee86d49c 100644
--- a/libs/extractor/Cargo.toml
+++ b/libs/extractor/Cargo.toml
@@ -4,23 +4,23 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-oxc_parser = "0.106.0"
-oxc_syntax = "0.106.0"
-oxc_span = "0.106.0"
-oxc_allocator = "0.106.0"
-oxc_ast = "0.106.0"
-oxc_ast_visit = "0.106.0"
-oxc_codegen = "0.106.0"
-oxc_transformer = "0.106.0"
-oxc_semantic = "0.106.0"
+oxc_parser = "0.107.0"
+oxc_syntax = "0.107.0"
+oxc_span = "0.107.0"
+oxc_allocator = "0.107.0"
+oxc_ast = "0.107.0"
+oxc_ast_visit = "0.107.0"
+oxc_codegen = "0.107.0"
+oxc_transformer = "0.107.0"
+oxc_semantic = "0.107.0"
 css = { path = "../css" }
 phf = "0.13"
 strum = "0.27.2"
 strum_macros = "0.27.2"
 serde_json = "1.0"
-boa_engine = "0.20"
+boa_engine = "0.21"
 
 [dev-dependencies]
-insta = "1.45.1"
-serial_test = "3.2.0"
+insta = "1.46.0"
+serial_test = "3.3.1"
 rstest = "0.26.1"
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index cdb324b7..3df8d464 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -97,14 +97,27 @@ fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
         return s.to_std_string_escaped();
     }
 
-    // Fallback: simple conversion
-    match value {
-        JsValue::String(s) => format!("\"{}\"", s.to_std_string_escaped()),
-        JsValue::Integer(n) => n.to_string(),
-        JsValue::Rational(n) => n.to_string(),
-        JsValue::Boolean(b) => b.to_string(),
-        JsValue::Null => "null".to_string(),
-        JsValue::Undefined => "undefined".to_string(),
+    // Fallback: simple conversion using boa_engine 0.21 API
+    match value.get_type() {
+        boa_engine::value::Type::String => {
+            format!(
+                "\"{}\"",
+                value
+                    .to_string(context)
+                    .unwrap_or_default()
+                    .to_std_string_escaped()
+            )
+        }
+        boa_engine::value::Type::Boolean => value.to_boolean().to_string(),
+        boa_engine::value::Type::Null => "null".to_string(),
+        boa_engine::value::Type::Undefined => "undefined".to_string(),
+        boa_engine::value::Type::Number => {
+            if let Ok(n) = value.to_number(context) {
+                n.to_string()
+            } else {
+                "NaN".to_string()
+            }
+        }
         _ => "{}".to_string(),
     }
 }
diff --git a/libs/sheet/Cargo.toml b/libs/sheet/Cargo.toml
index 3a120f72..ed34f00a 100644
--- a/libs/sheet/Cargo.toml
+++ b/libs/sheet/Cargo.toml
@@ -6,13 +6,13 @@ edition = "2024"
 [dependencies]
 css = { path = "../css" }
 serde = { version = "1.0.228", features = ["derive"] }
-serde_json = "1.0.148"
+serde_json = "1.0.149"
 regex = "1.12.2"
 once_cell = "1.21.3"
 extractor = { path = "../extractor" }
 
 [dev-dependencies]
-insta = "1.45.1"
+insta = "1.46.0"
 criterion = { version = "0.8", features = ["html_reports"] }
 rstest = "0.26.1"
 

From 40662a38912ae56bbadc9fcbbe4eb6e89520c77e Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Fri, 9 Jan 2026 01:07:55 +0900
Subject: [PATCH 04/31] Update

---
 libs/css/Cargo.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/css/Cargo.toml b/libs/css/Cargo.toml
index 422592a7..028d261f 100644
--- a/libs/css/Cargo.toml
+++ b/libs/css/Cargo.toml
@@ -6,10 +6,10 @@ edition = "2024"
 [dependencies]
 once_cell = "1.21.3"
 phf = { version = "0.13", features = ["macros"] }
-serial_test = "3.3.1"
 serde = { version = "1.0.228", features = ["derive"] }
 regex = "1.12.2"
 bimap = { version = "0.6.3" }
 
 [dev-dependencies]
 rstest = "0.26.1"
+serial_test = "3.3.1"

From 21d7c78350a743eaf2bf4b14cf7996e05b0cba83 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 00:20:46 +0900
Subject: [PATCH 05/31] Update

---
 Cargo.lock                | 419 +++++++++++---------------------------
 libs/extractor/Cargo.toml |  18 +-
 2 files changed, 131 insertions(+), 306 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 1d3b5279..82750ac5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -101,26 +101,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "bincode"
-version = "2.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36eaf5d7b090263e8150820482d5d93cd964a81e4019913c972f4edcc6edb740"
-dependencies = [
- "bincode_derive",
- "serde",
- "unty",
-]
-
-[[package]]
-name = "bincode_derive"
-version = "2.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf95709a440f45e986983918d0e8a1f30a9b1df04918fc828670606804ac3c09"
-dependencies = [
- "virtue",
-]
-
 [[package]]
 name = "bitflags"
 version = "2.10.0"
@@ -323,9 +303,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.2.47"
+version = "1.2.52"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cd405d82c84ff7f35739f175f67d8b9fb7687a0e84ccdc78bd3568839827cf07"
+checksum = "cd4932aefd12402b36c60956a4fe0035421f544799057659ff86f923657aada3"
 dependencies = [
  "find-msvc-tools",
  "shlex",
@@ -366,18 +346,18 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.53"
+version = "4.5.54"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c9e340e012a1bf4935f5282ed1436d1489548e8f72308207ea5df0e23d2d03f8"
+checksum = "c6e6ff9dcd79cff5cd969a17a545d79e84ab086e444102a591e288a8aa3ce394"
 dependencies = [
  "clap_builder",
 ]
 
 [[package]]
 name = "clap_builder"
-version = "4.5.53"
+version = "4.5.54"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d76b5d13eaa18c901fd2f7fca939fefe3a0727a953561fefdf3b2922b8569d00"
+checksum = "fa42cf4d2b7a41bc8f663a7cab4031ebafa1bf3875705bfaf8466dc60ab52c00"
 dependencies = [
  "anstyle",
  "clap_lex",
@@ -389,6 +369,15 @@ version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a1d728cc89cf3aee9ff92b05e62b19ee65a02b5702cff7d5a377e32c6ae29d8d"
 
+[[package]]
+name = "cobs"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fa961b519f0b462e3a3b4a34b64d119eeaca1d59af726fe450bbba07a9fc0a1"
+dependencies = [
+ "thiserror",
+]
+
 [[package]]
 name = "compact_str"
 version = "0.9.0"
@@ -425,16 +414,6 @@ dependencies = [
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "cordyceps"
-version = "0.3.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "688d7fbb8092b8de775ef2536f36c8c31f2bc4006ece2e8d8ad2d17d00ce0a2a"
-dependencies = [
- "loom",
- "tracing",
-]
-
 [[package]]
 name = "cow-utils"
 version = "0.1.3"
@@ -461,9 +440,9 @@ dependencies = [
 
 [[package]]
 name = "criterion"
-version = "0.8.0"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a0dfe5e9e71bdcf4e4954f7d14da74d1cdb92a3a07686452d1509652684b1aab"
+checksum = "4d883447757bb0ee46f233e9dc22eb84d93a9508c9b868687b274fc431d886bf"
 dependencies = [
  "alloca",
  "anes",
@@ -486,9 +465,9 @@ dependencies = [
 
 [[package]]
 name = "criterion-plot"
-version = "0.8.0"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5de36c2bee19fba779808f92bf5d9b0fa5a40095c277aba10c458a12b35d21d6"
+checksum = "ed943f81ea2faa8dcecbbfa50164acf95d555afec96a27871663b300e387b2e4"
 dependencies = [
  "cast",
  "itertools 0.13.0",
@@ -592,12 +571,6 @@ dependencies = [
  "wasm-bindgen-test",
 ]
 
-[[package]]
-name = "diatomic-waker"
-version = "0.2.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab03c107fafeb3ee9f5925686dbb7a73bc76e3932abb0d2b365cb64b169cf04c"
-
 [[package]]
 name = "digest"
 version = "0.10.7"
@@ -651,6 +624,18 @@ version = "1.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
 
+[[package]]
+name = "embedded-io"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef1a6892d9eef45c8fa6b9e0086428a2cca8491aca8f787c534a3d6d0bcb3ced"
+
+[[package]]
+name = "embedded-io"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "edd0f118536f44f5ccd48bcb8b111bdc3de888b58c74639dfb034a357d0f206d"
+
 [[package]]
 name = "encode_unicode"
 version = "1.0.0"
@@ -731,9 +716,9 @@ checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
 
 [[package]]
 name = "find-msvc-tools"
-version = "0.1.5"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a3076410a55c90011c298b04d0cfa770b00fa04e1e3c97d3f6c9de105a03844"
+checksum = "f449e6c6c08c865631d4890cfacf252b3d396c9bcc83adb6623cdb02a8336c41"
 
 [[package]]
 name = "fixedbitset"
@@ -743,9 +728,9 @@ checksum = "1d674e81391d1e1ab681a28d99df07927c6d4aa5b027d7da16ba32d1d21ecd99"
 
 [[package]]
 name = "flate2"
-version = "1.1.5"
+version = "1.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bfe33edd8e85a12a67454e37f8c75e730830d83e313556ab9ebf9ee7fbeb3bfb"
+checksum = "b375d6465b98090a5f25b1c7703f3859783755aa9a80433b36e0379a3ec2f369"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
@@ -767,19 +752,6 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
 
-[[package]]
-name = "futures-buffered"
-version = "0.2.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8e0e1f38ec07ba4abbde21eed377082f17ccb988be9d988a5adbf4bafc118fd"
-dependencies = [
- "cordyceps",
- "diatomic-waker",
- "futures-core",
- "pin-project-lite",
- "spin",
-]
-
 [[package]]
 name = "futures-channel"
 version = "0.3.31"
@@ -791,16 +763,14 @@ dependencies = [
 
 [[package]]
 name = "futures-concurrency"
-version = "7.6.3"
+version = "7.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0eb68017df91f2e477ed4bea586c59eaecaa47ed885a770d0444e21e62572cd2"
+checksum = "69a9561702beff46b705a8ac9c0803ec4c7fc5d01330a99b1feaf86e206e92ba"
 dependencies = [
  "fixedbitset",
- "futures-buffered",
  "futures-core",
  "futures-lite",
  "pin-project",
- "slab",
  "smallvec",
 ]
 
@@ -877,21 +847,6 @@ dependencies = [
  "slab",
 ]
 
-[[package]]
-name = "generator"
-version = "0.8.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52f04ae4152da20c76fe800fa48659201d5cf627c5149ca0b707b69d7eef6cf9"
-dependencies = [
- "cc",
- "cfg-if",
- "libc",
- "log",
- "rustversion",
- "windows-link",
- "windows-result",
-]
-
 [[package]]
 name = "generic-array"
 version = "0.14.7"
@@ -1047,9 +1002,9 @@ dependencies = [
 
 [[package]]
 name = "indexmap"
-version = "2.12.0"
+version = "2.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6717a8d2a5a929a1a2eb43a12812498ed141a0bcfb7e8f7844fbdbe4303bba9f"
+checksum = "7714e70437a7dc3ac8eb7e6f8df75fd8eb422675fc7678aff7364301092b1017"
 dependencies = [
  "equivalent",
  "hashbrown 0.16.1",
@@ -1116,17 +1071,11 @@ version = "3.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3c2a6c0b4b5637c41719973ef40c6a1cf564f9db6958350de6193fbee9c23f5"
 
-[[package]]
-name = "lazy_static"
-version = "1.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
-
 [[package]]
 name = "libc"
-version = "0.2.178"
+version = "0.2.180"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "37c93d8daa9d8a012fd8ab92f088405fb202ea0b6ab73ee2482ae66af4f42091"
+checksum = "bcc35a38544a891a5f7c865aca548a982ccb3b8650a5b06d0fd33a10283c56fc"
 
 [[package]]
 name = "libm"
@@ -1157,31 +1106,9 @@ dependencies = [
 
 [[package]]
 name = "log"
-version = "0.4.28"
+version = "0.4.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34080505efa8e45a4b816c349525ebe327ceaa8559756f0356cba97ef3bf7432"
-
-[[package]]
-name = "loom"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "419e0dc8046cb947daa77eb95ae174acfbddb7673b4151f56d1eed8e93fbfaca"
-dependencies = [
- "cfg-if",
- "generator",
- "scoped-tls",
- "tracing",
- "tracing-subscriber",
-]
-
-[[package]]
-name = "matchers"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d1525a2a28c7f4fa0fc98bb91ae755d1e2d1505079e05539e35bc876b5d65ae9"
-dependencies = [
- "regex-automata",
-]
+checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
 [[package]]
 name = "memchr"
@@ -1200,9 +1127,9 @@ dependencies = [
 
 [[package]]
 name = "minicov"
-version = "0.3.7"
+version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f27fe9f1cc3c22e1687f9446c2083c4c5fc7f0bcf1c7a86bdbded14985895b4b"
+checksum = "4869b6a491569605d66d3952bcdf03df789e5b536e5f0cf7758a7f08a55ae24d"
 dependencies = [
  "cc",
  "walkdir",
@@ -1335,13 +1262,13 @@ checksum = "9c6901729fa79e91a0913333229e9ca5dc725089d1c363b2f4b4760709dc4a52"
 
 [[package]]
 name = "oxc-browserslist"
-version = "2.1.5"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b48a7bf4591453d69792e735a8025b2c2c33ab75e02754023284ad17cfbbe04"
+checksum = "23d55ecaab3af16fee2d0195f2e7d26f27cab0044d0b6d74073514c7feee6beb"
 dependencies = [
- "bincode",
  "flate2",
  "nom",
+ "postcard",
  "rustc-hash",
  "serde",
  "serde_json",
@@ -1377,9 +1304,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_allocator"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "377063b29ba9762002f07bd4bc5cdd60373a4e3b094e15ea201eec07556d65ff"
+checksum = "78958640bcae9b5b42f9eaafe4995b5460195e961439c236095547bb78952f8d"
 dependencies = [
  "allocator-api2",
  "bumpalo",
@@ -1390,9 +1317,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff4d2aed570578cfe5249d1e50736971b85c4eedc39f9777f735914e10d42dd7"
+checksum = "e0d1a3c841ad6204dcdba2e584efbff30ec7a5a2c88851108dd39a2ed4be3af3"
 dependencies = [
  "bitflags",
  "oxc_allocator",
@@ -1407,9 +1334,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast_macros"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d7d5f0089ba8705ef065f8acb371c3ab44e3a7fb90372cccac6788b677e763f1"
+checksum = "3fc4d7eb802fc2bfc49fdc004e875a4009c17657f53372af111eb9d98dc4a15f"
 dependencies = [
  "phf",
  "proc-macro2",
@@ -1419,9 +1346,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ast_visit"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45305537949b2471ce9afe251a2051af6ed2188492cd079b1d83b96caa6714b5"
+checksum = "561ace6525ddc90b36103764a959eb261ff7f92a76172a34ac2d24d579f1260d"
 dependencies = [
  "oxc_allocator",
  "oxc_ast",
@@ -1431,9 +1358,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_codegen"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bcf3d7a97d49d6557d315f7b806a246a6627aec4942b9bd50e670686be6d3b00"
+checksum = "0a075130a060ebc4bcf09a55fcf521243527a820937dccda4af92524d4c3def2"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1452,9 +1379,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_compat"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8d772c9461d67a0bd1b8177674f73d7d666f8120bab90bfc37383eace93bcd82"
+checksum = "c4df14ee33385dff8fc347c6ddb62b8c7168c4abf6957deec8415575e0f0f2e3"
 dependencies = [
  "cow-utils",
  "oxc-browserslist",
@@ -1465,18 +1392,18 @@ dependencies = [
 
 [[package]]
 name = "oxc_data_structures"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b0264dbee1c186f744a433955a900a34f7a8bf6e4381d00100528d2b23043b21"
+checksum = "397842ac155f7c3f707232cc8758c0e67919ac7f75ec3bc34680ae176aca8b61"
 dependencies = [
  "ropey",
 ]
 
 [[package]]
 name = "oxc_diagnostics"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cd5d75130504c4b6792eba9a687349ec92cc7e220ddfc1cba35ef540c194b6ed"
+checksum = "2739661b22eb7abe3966ebbe1eb236337f940eed7e9598bdb089c3353aa2c15f"
 dependencies = [
  "cow-utils",
  "oxc-miette",
@@ -1485,9 +1412,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_ecmascript"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12400e655a18fe9ba1359324d7a634964f62d9a151008a48671e46abd9b728e1"
+checksum = "ef913bdaae2ed48335b500a25ecc6a9f186ca855968b5edfc6d1ebad4d0b2124"
 dependencies = [
  "cow-utils",
  "num-bigint",
@@ -1500,9 +1427,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_estree"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2059abb4c194b588d128c1933b6c20fde1b443b053e51da818caed17c272f65"
+checksum = "a61584ac8cd52d6b6c05a7a5d4b883d5666ea4612ddfe3429f28f7bcd1e93a14"
 
 [[package]]
 name = "oxc_index"
@@ -1516,9 +1443,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_parser"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "090741583620244210f9988d13e7ddec78d8c22b13f885eb8d31c6566528c943"
+checksum = "06898c992b263f8e4dfcc338528445492a8d61292ad78a0ad7863a265e7beda2"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1539,9 +1466,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_regular_expression"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47fe9458baea58cfe0d514b32a3258839f9cad1af738a92c1c55ccea97c5ceb7"
+checksum = "7c658b8d107d9534816312d1fd4b77311df648d07ac8af0417355a8cbb09749b"
 dependencies = [
  "bitflags",
  "oxc_allocator",
@@ -1555,9 +1482,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_semantic"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e425a107259ff3417682df38a9964491013de0080aecbaab7e43eb1f452b6de1"
+checksum = "7ef9534d21d00ac38ca4eab91e7b7f4fa0f1c7f0279d07865074c05357366d5c"
 dependencies = [
  "itertools 0.14.0",
  "memchr",
@@ -1572,6 +1499,7 @@ dependencies = [
  "oxc_syntax",
  "rustc-hash",
  "self_cell",
+ "smallvec",
 ]
 
 [[package]]
@@ -1589,9 +1517,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_span"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4eb492189296521cf459f4caaee8d7525c70341daf10083c53c962c13e4748ee"
+checksum = "3416e347dd4837cdfbffc49bd2ef106ba592133268a962381cc82d24e8593e40"
 dependencies = [
  "compact_str",
  "oxc-miette",
@@ -1602,9 +1530,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_syntax"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c09691f16fb7ed90acb442e88faca68751f2222dbed892122a9b50fc7d161c8d"
+checksum = "c44aa646ecb431595b3255b6eee2a7f9f292422b76cf5c156a825bd042073453"
 dependencies = [
  "bitflags",
  "cow-utils",
@@ -1622,9 +1550,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_transformer"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "11b2b72d1e073c39b4993d7dfd71daeb7ea6fb445f5c8b445be6998022ee4f76"
+checksum = "118d7149205362a9ab9de91112f36c13e4192db5036d5cad7cc083a849146450"
 dependencies = [
  "base64",
  "compact_str",
@@ -1651,9 +1579,9 @@ dependencies = [
 
 [[package]]
 name = "oxc_traverse"
-version = "0.107.0"
+version = "0.108.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5dcaa9168b7ae1f7df2461e33210605bbe60dd2b638af08a7093310c232f1bda"
+checksum = "0b0c8dc012307ff62260d1f9f3073d4933c5f7e0a01e479f52f6ddd2a487154b"
 dependencies = [
  "itoa",
  "oxc_allocator",
@@ -1827,6 +1755,18 @@ version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f89776e4d69bb58bc6993e99ffa1d11f228b839984854c7daeb5d37f87cbe950"
 
+[[package]]
+name = "postcard"
+version = "1.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6764c3b5dd454e283a30e6dfe78e9b31096d9e32036b5d1eaac7a6119ccb9a24"
+dependencies = [
+ "cobs",
+ "embedded-io 0.4.0",
+ "embedded-io 0.6.1",
+ "serde",
+]
+
 [[package]]
 name = "potential_utf"
 version = "0.1.4"
@@ -1862,18 +1802,18 @@ dependencies = [
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.104"
+version = "1.0.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9695f8df41bb4f3d222c95a67532365f569318332d03d5f3f67f37b20e6ebdf0"
+checksum = "535d180e0ecab6268a3e718bb9fd44db66bbbc256257165fc699dadf70d16fe7"
 dependencies = [
  "unicode-ident",
 ]
 
 [[package]]
 name = "quote"
-version = "1.0.42"
+version = "1.0.43"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a338cc41d27e6cc6dce6cefc13a0729dfbb81c262b1f519331575dd80ef3067f"
+checksum = "dc74d9a594b72ae6656596548f56f667211f8a97b3d4c3d467150794690dc40a"
 dependencies = [
  "proc-macro2",
 ]
@@ -1906,9 +1846,9 @@ dependencies = [
 
 [[package]]
 name = "rand_core"
-version = "0.9.3"
+version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+checksum = "4f1b3bc831f92381018fd9c6350b917c7b21f1eed35a65a51900e0e55a3d7afa"
 dependencies = [
  "getrandom",
 ]
@@ -2099,12 +2039,6 @@ dependencies = [
  "sdd",
 ]
 
-[[package]]
-name = "scoped-tls"
-version = "1.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
-
 [[package]]
 name = "scopeguard"
 version = "1.2.0"
@@ -2119,9 +2053,9 @@ checksum = "490dcfcbfef26be6800d11870ff2df8774fa6e86d047e3e8c8a76b25655e41ca"
 
 [[package]]
 name = "self_cell"
-version = "1.2.1"
+version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "16c2f82143577edb4921b71ede051dac62ca3c16084e918bf7b40c96ae10eb33"
+checksum = "b12e76d157a900eb52e81bc6e9f3069344290341720e9178cde2407113ac8d89"
 
 [[package]]
 name = "semver"
@@ -2241,15 +2175,6 @@ dependencies = [
  "digest",
 ]
 
-[[package]]
-name = "sharded-slab"
-version = "0.1.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
-dependencies = [
- "lazy_static",
-]
-
 [[package]]
 name = "sheet"
 version = "0.1.0"
@@ -2309,6 +2234,9 @@ name = "smallvec"
 version = "1.15.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+dependencies = [
+ "serde",
+]
 
 [[package]]
 name = "smawk"
@@ -2316,12 +2244,6 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b7c388c1b5e93756d0c740965c41e8822f866621d41acbdf6336a6a168f8840c"
 
-[[package]]
-name = "spin"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d5fe4ccb98d9c292d56fec89a5e07da7fc4cf0dc11e156b41793132775d3e591"
-
 [[package]]
 name = "stable_deref_trait"
 version = "1.2.1"
@@ -2360,9 +2282,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.112"
+version = "2.0.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21f182278bf2d2bcb3c88b1b08a37df029d71ce3d3ae26168e3c653b213b99d4"
+checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2442,15 +2364,6 @@ dependencies = [
  "syn",
 ]
 
-[[package]]
-name = "thread_local"
-version = "1.1.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185"
-dependencies = [
- "cfg-if",
-]
-
 [[package]]
 name = "time"
 version = "0.3.44"
@@ -2508,18 +2421,18 @@ dependencies = [
 
 [[package]]
 name = "toml_datetime"
-version = "0.7.3"
+version = "0.7.5+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f2cdb639ebbc97961c51720f858597f7f24c4fc295327923af55b74c3c724533"
+checksum = "92e1cfed4a3038bc5a127e35a2d360f145e1f4b971b551a2ba5fd7aedf7e1347"
 dependencies = [
  "serde_core",
 ]
 
 [[package]]
 name = "toml_edit"
-version = "0.23.7"
+version = "0.23.10+spec-1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6485ef6d0d9b5d0ec17244ff7eb05310113c3f316f2d14200d4de56b3cb98f8d"
+checksum = "84c8b9f757e028cee9fa244aea147aab2a9ec09d5325a9b01e0a49730c2b5269"
 dependencies = [
  "indexmap",
  "toml_datetime",
@@ -2529,74 +2442,13 @@ dependencies = [
 
 [[package]]
 name = "toml_parser"
-version = "1.0.4"
+version = "1.0.6+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c0cbe268d35bdb4bb5a56a2de88d0ad0eb70af5384a99d648cd4b3d04039800e"
+checksum = "a3198b4b0a8e11f09dd03e133c0280504d0801269e9afa46362ffde1cbeebf44"
 dependencies = [
  "winnow",
 ]
 
-[[package]]
-name = "tracing"
-version = "0.1.44"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
-dependencies = [
- "pin-project-lite",
- "tracing-attributes",
- "tracing-core",
-]
-
-[[package]]
-name = "tracing-attributes"
-version = "0.1.31"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "tracing-core"
-version = "0.1.36"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
-dependencies = [
- "once_cell",
- "valuable",
-]
-
-[[package]]
-name = "tracing-log"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
-dependencies = [
- "log",
- "once_cell",
- "tracing-core",
-]
-
-[[package]]
-name = "tracing-subscriber"
-version = "0.3.22"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2f30143827ddab0d256fd843b7a66d164e9f271cfa0dde49142c5ca0ca291f1e"
-dependencies = [
- "matchers",
- "nu-ansi-term",
- "once_cell",
- "regex-automata",
- "sharded-slab",
- "smallvec",
- "thread_local",
- "tracing",
- "tracing-core",
- "tracing-log",
-]
-
 [[package]]
 name = "typenum"
 version = "1.19.0"
@@ -2633,36 +2485,18 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254"
 
-[[package]]
-name = "unty"
-version = "0.0.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d49784317cd0d1ee7ec5c716dd598ec5b4483ea832a2dced265471cc0f690ae"
-
 [[package]]
 name = "utf16_iter"
 version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c8232dd3cdaed5356e0f716d285e4b40b932ac434100fe9b7e0e8e935b9e6246"
 
-[[package]]
-name = "valuable"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba73ea9cf16a25df0c8caa16c51acb937d5712a8429db78a3ee29d5dcacd3a65"
-
 [[package]]
 name = "version_check"
 version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
-[[package]]
-name = "virtue"
-version = "0.0.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "051eb1abcf10076295e815102942cc58f9d5e3b4560e46e53c21e8ff6f3af7b1"
-
 [[package]]
 name = "vsimd"
 version = "0.8.0"
@@ -2825,15 +2659,6 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
-[[package]]
-name = "windows-result"
-version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7781fa89eaf60850ac3d2da7af8e5242a5ea78d1a11c49bf2910bb5a73853eb5"
-dependencies = [
- "windows-link",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -2918,9 +2743,9 @@ checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
 
 [[package]]
 name = "winnow"
-version = "0.7.13"
+version = "0.7.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21a0236b59786fed61e2a80582dd500fe61f18b5dca67a4a067d0bc9039339cf"
+checksum = "5a5364e9d77fcdeeaa6062ced926ee3381faa2ee02d3eb83a5c27a8825540829"
 dependencies = [
  "memchr",
 ]
@@ -2974,18 +2799,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.8.30"
+version = "0.8.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ea879c944afe8a2b25fef16bb4ba234f47c694565e97383b36f3a878219065c"
+checksum = "668f5168d10b9ee831de31933dc111a459c97ec93225beb307aed970d1372dfd"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.30"
+version = "0.8.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf955aa904d6040f70dc8e9384444cb1030aed272ba3cb09bbc4ab9e7c1f34f5"
+checksum = "2c7962b26b0a8685668b671ee4b54d007a67d4eaf05fda79ac0ecf41e32270f1"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3049,6 +2874,6 @@ dependencies = [
 
 [[package]]
 name = "zmij"
-version = "1.0.8"
+version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "317f17ff091ac4515f17cc7a190d2769a8c9a96d227de5d64b500b01cda8f2cd"
+checksum = "ac93432f5b761b22864c774aac244fa5c0fd877678a4c37ebf6cf42208f9c9ec"
diff --git a/libs/extractor/Cargo.toml b/libs/extractor/Cargo.toml
index ee86d49c..55487d3f 100644
--- a/libs/extractor/Cargo.toml
+++ b/libs/extractor/Cargo.toml
@@ -4,15 +4,15 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-oxc_parser = "0.107.0"
-oxc_syntax = "0.107.0"
-oxc_span = "0.107.0"
-oxc_allocator = "0.107.0"
-oxc_ast = "0.107.0"
-oxc_ast_visit = "0.107.0"
-oxc_codegen = "0.107.0"
-oxc_transformer = "0.107.0"
-oxc_semantic = "0.107.0"
+oxc_parser = "0.108.0"
+oxc_syntax = "0.108.0"
+oxc_span = "0.108.0"
+oxc_allocator = "0.108.0"
+oxc_ast = "0.108.0"
+oxc_ast_visit = "0.108.0"
+oxc_codegen = "0.108.0"
+oxc_transformer = "0.108.0"
+oxc_semantic = "0.108.0"
 css = { path = "../css" }
 phf = "0.13"
 strum = "0.27.2"

From 7fdc5dc3525f00d33c654140175b37991049adc1 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 00:51:12 +0900
Subject: [PATCH 06/31] Update

---
 libs/extractor/src/lib.rs                     | 37 ++++++++-
 ...r__tests__vanilla_extract_composition.snap | 59 +++++++++++++-
 ...tor__tests__vanilla_extract_container.snap | 38 ++++++++-
 ...__tests__vanilla_extract_create_var-2.snap | 14 +++-
 ...or__tests__vanilla_extract_create_var.snap | 23 +++++-
 ...r__tests__vanilla_extract_font_face-2.snap | 14 +++-
 ...tor__tests__vanilla_extract_font_face.snap | 14 +++-
 ...__tests__vanilla_extract_global_theme.snap |  2 +-
 ...tractor__tests__vanilla_extract_layer.snap | 53 ++++++++++++-
 ..._tests__vanilla_extract_media_queries.snap | 74 ++++++++++++++++-
 ...r__tests__vanilla_extract_selectors-2.snap | 40 +++++++++-
 ...tor__tests__vanilla_extract_selectors.snap | 79 ++++++++++++++++++-
 ...tests__vanilla_extract_style_css_js-2.snap | 23 +++++-
 ...__tests__vanilla_extract_style_css_js.snap | 23 +++++-
 ...__tests__vanilla_extract_style_css_ts.snap | 23 +++++-
 ...sts__vanilla_extract_style_variants-2.snap | 59 +++++++++++++-
 ...tests__vanilla_extract_style_variants.snap | 32 +++++++-
 ...ctor__tests__vanilla_extract_supports.snap | 29 ++++++-
 ...actor__tests__vanilla_extract_theme-2.snap |  2 +-
 ..._tests__vanilla_extract_with_computed.snap | 23 +++++-
 ...a_extract_with_keyframes_and_global-2.snap | 37 ++++++++-
 ...lla_extract_with_keyframes_and_global.snap | 11 ++-
 ..._vanilla_extract_with_pseudo_selector.snap | 27 ++++++-
 ...vanilla_extract_with_responsive_array.snap | 32 +++++++-
 ...r__tests__vanilla_extract_with_spread.snap | 32 +++++++-
 ..._tests__vanilla_extract_with_variable.snap | 23 +++++-
 libs/extractor/src/vanilla_extract.rs         |  2 +
 27 files changed, 777 insertions(+), 48 deletions(-)

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 6e9354c5..d47df61d 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -8,6 +8,7 @@ mod gen_style;
 mod prop_modify_utils;
 mod util_type;
 mod utils;
+mod vanilla_extract;
 mod visit;
 use crate::extract_style::extract_style_value::ExtractStyleValue;
 use crate::visit::DevupVisitor;
@@ -111,6 +112,40 @@ pub fn extract(
         });
     }
 
+    // Handle vanilla-extract style files (.css.ts, .css.js)
+    let (processed_code, is_vanilla_extract) = if vanilla_extract::is_vanilla_extract_file(filename)
+    {
+        match vanilla_extract::execute_vanilla_extract(code, &option.package) {
+            Ok(collected) => {
+                let generated =
+                    vanilla_extract::collected_styles_to_code(&collected, &option.package);
+                (generated, true)
+            }
+            Err(_) => {
+                // Fall back to treating as regular file if execution fails
+                (code.to_string(), false)
+            }
+        }
+    } else {
+        (code.to_string(), false)
+    };
+
+    // For vanilla-extract files, if no styles were collected, return early
+    if is_vanilla_extract && processed_code.is_empty() {
+        return Ok(ExtractOutput {
+            styles: HashSet::new(),
+            code: code.to_string(),
+            map: None,
+            css_file: None,
+        });
+    }
+
+    let code_to_parse = if is_vanilla_extract {
+        &processed_code
+    } else {
+        code
+    };
+
     let source_type = SourceType::from_path(filename)?;
     let css_file = if option.single_css {
         format!("{}/devup-ui.css", option.css_dir)
@@ -131,7 +166,7 @@ pub fn extract(
         mut program, // AST
         panicked,    // Parser encountered an error it couldn't recover from
         ..
-    } = Parser::new(&allocator, code, source_type).parse();
+    } = Parser::new(&allocator, code_to_parse, source_type).parse();
     if panicked {
         return Err("Parser panicked".into());
     }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
index 4d252dcc..7e06ee89 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
@@ -3,6 +3,61 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nconst base = style({\n\tpadding: 12,\n\tborderRadius: 4\n});\nconst interactive = style({\n\tcursor: \"pointer\",\n\ttransition: \"all 0.2s\"\n});\nexport const button = style([\n\tbase,\n\tinteractive,\n\t{\n\t\tbackground: \"blue\",\n\t\tcolor: \"white\"\n\t}\n]);\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "pointer",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transition",
+                value: "all .2s",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_container.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
index bb05f246..95985e2e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
@@ -3,6 +3,40 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { createContainer, style } from \"@devup-ui/react\";\nexport const sidebar = createContainer();\nexport const sidebarContainer = style({\n\tcontainerName: sidebar,\n\tcontainerType: \"inline-size\"\n});\nexport const responsive = style({ \"@container\": { [`${sidebar} (min-width: 400px)`]: { flexDirection: \"row\" } } });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "container-name",
+                value: "__container_0__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "container-type",
+                value: "inline-size",
+                level: 0,
+                selector: None,
+                style_order: 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,
+            },
+        ),
+    },
+    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/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
index b75e7f99..876b5d80 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
@@ -3,6 +3,16 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { createVar, fallbackVar, style } from \"@devup-ui/react\";\nexport const colorVar = createVar();\nexport const box = style({ color: fallbackVar(colorVar, \"red\") });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var0,red)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a\";\nexport const colorVar = \"--var-0\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
index bd0e898d..f73515d9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { createVar, style } from \"@devup-ui/react\";\nexport const colorVar = createVar();\nexport const box = style({\n\tvars: { [colorVar]: \"blue\" },\n\tcolor: colorVar\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--var0)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "var(--var-0)",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
index 75ecc8c5..b9b7d222 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -3,6 +3,16 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { fontFace, style } from \"@devup-ui/react\";\nconst roboto = fontFace({\n\tsrc: \"url(\\\"/fonts/Roboto.woff2\\\") format(\\\"woff2\\\")\",\n\tfontWeight: 400,\n\tfontStyle: \"normal\"\n});\nexport const body = style({ fontFamily: roboto });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__font_1__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst roboto = \"a\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
index 4d61f419..6e2061b5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
@@ -3,6 +3,16 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { fontFace, style } from \"@devup-ui/react\";\nconst myFont = fontFace({ src: \"local(\\\"Comic Sans MS\\\")\" });\nexport const text = style({ fontFamily: myFont });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "font-family",
+                value: "__font_1__",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst myFont = \"a\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
index 4487a954..756e821f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
@@ -4,5 +4,5 @@ expression: "ToBTreeSet::from(extract(\"global-theme.css.ts\",\nr#\"import { cre
 ---
 ToBTreeSet {
     styles: {},
-    code: "import { createGlobalTheme } from \"@devup-ui/react\";\nexport const vars = createGlobalTheme(\":root\", {\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\",\n\t\tbackground: \"white\"\n\t},\n\tfont: { body: \"system-ui, sans-serif\" }\n});\n",
+    code: "export const vars = createGlobalTheme(\":root\", {\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\",\n\t\tbackground: \"white\"\n\t},\n\tfont: { body: \"system-ui, sans-serif\" }\n});\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
index 1b83a2d3..644f9039 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
@@ -3,6 +3,55 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "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\t\"@layer\": reset,\n\tmargin: 0,\n\tpadding: 0\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "@layer",
+                value: "reset",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "*",
+                        "layers.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    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/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
index 884e9252..30379e86 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
@@ -3,6 +3,76 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const responsive = style({\n\tdisplay: \"block\",\n\t\"@media\": {\n\t\t\"screen and (min-width: 768px)\": { display: \"flex\" },\n\t\t\"screen and (min-width: 1024px)\": { display: \"grid\" },\n\t\t\"(prefers-color-scheme: dark)\": {\n\t\t\tbackground: \"black\",\n\t\t\tcolor: \"white\"\n\t\t}\n\t}\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "(prefers-color-scheme: dark)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "block",
+                level: 0,
+                selector: None,
+                style_order: 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,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Media,
+                        query: "screen and (min-width: 1024px)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsive = \"a b c d e\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
index 5d01c414..2043f222 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
@@ -3,6 +3,42 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const parent = style({ background: \"white\" });\nexport const child = style({ selectors: {\n\t[`${parent}:hover &`]: { color: \"blue\" },\n\t\"& + &\": { marginTop: 8 }\n} });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "_style_0__:hover &",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin-top",
+                value: "32px",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "& + &",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"a b\";\nexport const parent = \"c\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
index b980d4df..0d46c44e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
@@ -3,6 +3,81 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const button = style({\n\tbackground: \"blue\",\n\tselectors: {\n\t\t\"&:hover\": { background: \"darkblue\" },\n\t\t\"&:focus\": { outline: \"2px solid blue\" },\n\t\t\"&:active\": { transform: \"scale(0.98)\" },\n\t\t\"&:disabled\": {\n\t\t\topacity: .5,\n\t\t\tcursor: \"not-allowed\"\n\t\t}\n\t}\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "darkblue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "cursor",
+                value: "not-allowed",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "opacity",
+                value: ".5",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:disabled",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "outline",
+                value: "2px solid blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:focus",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(.98)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b c d e f\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
index 6ba87a6b..e6c3970e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const link = style({\n\tcolor: \"blue\",\n\ttextDecoration: \"underline\"\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "text-decoration",
+                value: "underline",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const link = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
index ba153264..1c5f6d27 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const wrapper = style({\n\tbackgroundColor: \"white\",\n\tmargin: 8\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background-color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const wrapper = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
index 7b245b8a..c0417ff8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const container: string = style({\n\tbackground: \"red\",\n\tpadding: 16\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const container = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
index 145710fd..5d44e248 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
@@ -3,6 +3,61 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style, styleVariants } from \"@devup-ui/react\";\nconst base = style({\n\tpadding: 12,\n\tborderRadius: 4\n});\nexport const button = styleVariants({\n\tprimary: [base, {\n\t\tbackground: \"blue\",\n\t\tcolor: \"white\"\n\t}],\n\tsecondary: [base, {\n\t\tbackground: \"gray\",\n\t\tcolor: \"black\"\n\t}]\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "border-radius",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "black",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "white",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "48px",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
index f0151e22..82c0740c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
@@ -3,6 +3,34 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { styleVariants } from \"@devup-ui/react\";\nexport const background = styleVariants({\n\tprimary: { background: \"blue\" },\n\tsecondary: { background: \"gray\" },\n\tdanger: { background: \"red\" }\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: 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/src/snapshots/extractor__tests__vanilla_extract_supports.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
index 7ce8cab0..4ab990a8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
@@ -3,6 +3,31 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const grid = style({\n\tdisplay: \"flex\",\n\t\"@supports\": { \"(display: grid)\": { display: \"grid\" } }\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "grid",
+                level: 0,
+                selector: Some(
+                    At {
+                        kind: Supports,
+                        query: "(display: grid)",
+                        selector: None,
+                    },
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const grid = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
index 51ba266a..c59b6165 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
@@ -4,5 +4,5 @@ expression: "ToBTreeSet::from(extract(\"theme-contract.css.ts\",\nr#\"import { c
 ---
 ToBTreeSet {
     styles: {},
-    code: "import { createThemeContract, createTheme, style } from \"@devup-ui/react\";\nconst vars = createThemeContract({ color: {\n\tbrand: null,\n\ttext: null\n} });\nexport const lightTheme = createTheme(vars, { color: {\n\tbrand: \"blue\",\n\ttext: \"black\"\n} });\nexport const darkTheme = createTheme(vars, { color: {\n\tbrand: \"lightblue\",\n\ttext: \"white\"\n} });\n",
+    code: "export const darkTheme = createTheme(vars, { color: {\n\tbrand: \"lightblue\",\n\ttext: \"white\"\n} });\nexport const lightTheme = createTheme(vars, { color: {\n\tbrand: \"blue\",\n\ttext: \"black\"\n} });\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
index dc89033c..86641c77 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nconst base = 8;\nexport const box = style({\n\tpadding: base * 2,\n\tmargin: base / 2\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
index ce10e59d..f09a8fb8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
@@ -3,6 +3,39 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { globalStyle } from \"@devup-ui/react\";\nglobalStyle(\"body\", {\n\tmargin: 0,\n\tpadding: 0\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "0",
+                level: 0,
+                selector: Some(
+                    Global(
+                        "body",
+                        "global.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\n;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
index a81bfd1c..cc102b21 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
@@ -4,6 +4,15 @@ expression: "ToBTreeSet::from(extract(\"animations.css.ts\",\nr#\"import { keyfr
 ---
 ToBTreeSet {
     styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "animation",
+                value: "fadeIn 1s ease-in",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
         Keyframes(
             ExtractKeyframes {
                 keyframes: {
@@ -29,5 +38,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { style } from \"@devup-ui/react\";\nexport const fadeIn = \"a\";\nexport const animated = style({ animation: \"fadeIn 1s ease-in\" });\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const animated = \"a\";\nexport const fadeIn = \"b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
index 390b0627..9021f16b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
@@ -3,6 +3,29 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const hoverButton = style({\n\tbackground: \"gray\",\n\t_hover: { background: \"blue\" }\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:hover",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "gray",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const hoverButton = \"a b\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
index 9a06674a..a9f24563 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
@@ -3,6 +3,34 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nexport const responsiveBox = style({ padding: [\n\t8,\n\t16,\n\t32\n] });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "128px",
+                level: 2,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 1,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const responsiveBox = \"a b c\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
index fc6ad876..76adbeb9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
@@ -3,6 +3,34 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nconst baseStyle = {\n\tpadding: 8,\n\tmargin: 4\n};\nexport const extended = style({\n\t...baseStyle,\n\tbackground: \"red\"\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "16px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "32px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const extended = \"a b c\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
index 315fd6ca..2aa9818b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
@@ -3,6 +3,25 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { style } from \"@devup-ui/react\";\nconst primaryColor = \"blue\";\nconst spacing = 16;\nexport const button = style({\n\tbackground: primaryColor,\n\tpadding: spacing\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "blue",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "64px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const button = \"a b\";\n",
 }
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 3df8d464..dc29b34b 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -3,6 +3,8 @@
 //! This module uses boa_engine to execute vanilla-extract style files
 //! and extract style definitions for processing by the existing extract logic.
 
+#![allow(dead_code)] // Public API fields/functions for future expansion
+
 use boa_engine::{
     Context, JsArgs, JsValue, NativeFunction, Source, js_string, object::ObjectInitializer,
     property::Attribute,

From 8963dc7c266c0d0a61dbb668ba999e30c18a628f Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 01:16:13 +0900
Subject: [PATCH 07/31] fix: vanilla-extract createVar now returns CSS property
 name without var() wrapper

- createVar() returns '--var-0' instead of 'var(--var-0)'
- When used as a value, optimize_value wraps it in var()
- When used as a key in vars object, it correctly becomes the CSS property name
- Skip RM_MINUS_ZERO_RE optimization for values containing CSS custom properties
  to preserve names like --var-0 (the -0 should not be converted to 0)
---
 libs/css/src/optimize_value.rs                | 25 ++++++++++++++++++-
 ...__tests__vanilla_extract_create_var-2.snap |  2 +-
 ...or__tests__vanilla_extract_create_var.snap |  8 +++---
 libs/extractor/src/vanilla_extract.rs         | 15 +++++------
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/libs/css/src/optimize_value.rs b/libs/css/src/optimize_value.rs
index f8dda860..9587738e 100644
--- a/libs/css/src/optimize_value.rs
+++ b/libs/css/src/optimize_value.rs
@@ -8,8 +8,20 @@ use crate::{
 
 pub fn optimize_value(value: &str) -> String {
     let mut ret = value.trim().to_string();
+
+    // Wrap CSS custom property names in var() when used as values
+    // e.g., "--var-0" becomes "var(--var-0)"
+    if ret.starts_with("--") && !ret.contains(' ') && !ret.contains(',') {
+        ret = format!("var({})", ret);
+    }
+
     ret = INNER_TRIM_RE.replace_all(&ret, "(${1})").to_string();
-    ret = RM_MINUS_ZERO_RE.replace_all(&ret, "0${1}").to_string();
+
+    // Skip RM_MINUS_ZERO_RE for values containing CSS custom property references
+    // to preserve names like --var-0 (the -0 should not be converted to 0)
+    if !ret.contains("--") {
+        ret = RM_MINUS_ZERO_RE.replace_all(&ret, "0${1}").to_string();
+    }
     ret = NUM_TRIM_RE.replace_all(&ret, "${1} ${3}").to_string();
 
     if ret.contains(",") {
@@ -252,4 +264,15 @@ mod tests {
     fn test_optimize_color(#[case] input: &str, #[case] expected: &str) {
         assert_eq!(optimize_value(input), expected);
     }
+
+    #[rstest]
+    #[case("--var-0", "var(--var-0)")]
+    #[case("--my-custom-prop", "var(--my-custom-prop)")]
+    #[case("--primary-color", "var(--primary-color)")]
+    #[case("var(--var-0)", "var(--var-0)")] // Already wrapped, don't double wrap
+    #[case("--a --b", "--a --b")] // Contains space, don't wrap
+    #[case("--a, --b", "--a,--b")] // Contains comma, don't wrap (spaces after commas are removed)
+    fn test_css_custom_property_wrapping(#[case] input: &str, #[case] expected: &str) {
+        assert_eq!(optimize_value(input), expected);
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
index 876b5d80..427a66f2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
@@ -7,7 +7,7 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "color",
-                value: "var(--var0,red)",
+                value: "var(--var-0,red)",
                 level: 0,
                 selector: None,
                 style_order: None,
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
index f73515d9..55097f49 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
@@ -6,8 +6,8 @@ ToBTreeSet {
     styles: {
         Static(
             ExtractStaticStyle {
-                property: "color",
-                value: "var(--var0)",
+                property: "--var-0",
+                value: "blue",
                 level: 0,
                 selector: None,
                 style_order: None,
@@ -15,8 +15,8 @@ ToBTreeSet {
         ),
         Static(
             ExtractStaticStyle {
-                property: "var(--var-0)",
-                value: "blue",
+                property: "color",
+                value: "var(--var-0)",
                 level: 0,
                 selector: None,
                 style_order: None,
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index dc29b34b..124633a8 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -529,6 +529,9 @@ fn register_vanilla_extract_apis(
     };
 
     // createVar() function
+    // Returns CSS custom property name like "--var-0", not wrapped in var()
+    // When used as a key in vars: {[colorVar]: 'blue'}, it becomes the property name
+    // When used as a value, the extraction logic will wrap it in var()
     let collector_var = collector.clone();
     let create_var_fn = unsafe {
         NativeFunction::from_closure(move |_this, _args, _ctx| {
@@ -539,7 +542,8 @@ fn register_vanilla_extract_apis(
                 .styles
                 .vars
                 .insert(id.clone(), (var_name.clone(), false));
-            Ok(JsValue::from(js_string!(format!("var({})", var_name))))
+            // Return just the CSS custom property name, without var() wrapper
+            Ok(JsValue::from(js_string!(var_name)))
         })
     };
 
@@ -591,12 +595,9 @@ fn register_vanilla_extract_apis(
                 .to_string(ctx)?
                 .to_std_string_escaped();
 
-            // Extract var name from var(--x) format
-            let var_name = var_value
-                .trim_start_matches("var(")
-                .trim_end_matches(')')
-                .to_string();
-            let result = format!("var({}, {})", var_name, fallback);
+            // var_value is now just "--var-0" (CSS custom property name)
+            // Return var(--var-0, fallback)
+            let result = format!("var({}, {})", var_value, fallback);
             Ok(JsValue::from(js_string!(result)))
         })
     };

From 7ee1b430c66504dff7cdb76ba5a832c6d7a5ea1b Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 17:22:01 +0900
Subject: [PATCH 08/31] Fix font issue

---
 libs/extractor/src/lib.rs                     |   2 +-
 ...r__tests__vanilla_extract_font_face-2.snap |  15 +-
 ...tor__tests__vanilla_extract_font_face.snap |  13 +-
 libs/extractor/src/vanilla_extract.rs         | 168 ++++++++++++++++--
 4 files changed, 177 insertions(+), 21 deletions(-)

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index d47df61d..53ebd8ed 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -115,7 +115,7 @@ pub fn extract(
     // Handle vanilla-extract style files (.css.ts, .css.js)
     let (processed_code, is_vanilla_extract) = if vanilla_extract::is_vanilla_extract_file(filename)
     {
-        match vanilla_extract::execute_vanilla_extract(code, &option.package) {
+        match vanilla_extract::execute_vanilla_extract(code, &option.package, filename) {
             Ok(collected) => {
                 let generated =
                     vanilla_extract::collected_styles_to_code(&collected, &option.package);
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
index b9b7d222..16561974 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -7,12 +7,23 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "font-family",
-                value: "__font_1__",
+                value: "__devup_font_8_0",
                 level: 0,
                 selector: None,
                 style_order: None,
             },
         ),
+        FontFace(
+            ExtractFontFace {
+                file: "fonts-multi.css.ts",
+                properties: {
+                    "font-family": "__devup_font_8_0",
+                    "font-style": "normal",
+                    "font-weight": "400",
+                    "src": "url(\"/fonts/Roboto.woff2\") format(\"woff2\")",
+                },
+            },
+        ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst roboto = \"a\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const body = \"a\";\n;\nconst roboto = \"__devup_font_8_0\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
index 6e2061b5..cf6e8942 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
@@ -7,12 +7,21 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "font-family",
-                value: "__font_1__",
+                value: "__devup_font_7_0",
                 level: 0,
                 selector: None,
                 style_order: None,
             },
         ),
+        FontFace(
+            ExtractFontFace {
+                file: "fonts.css.ts",
+                properties: {
+                    "font-family": "__devup_font_7_0",
+                    "src": "local(\"Comic Sans MS\")",
+                },
+            },
+        ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst myFont = \"a\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const text = \"a\";\n;\nconst myFont = \"__devup_font_7_0\";\n",
 }
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 124633a8..f70fe1cd 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -9,6 +9,7 @@ use boa_engine::{
     Context, JsArgs, JsValue, NativeFunction, Source, js_string, object::ObjectInitializer,
     property::Attribute,
 };
+use css::file_map::get_file_num_by_filename;
 use oxc_allocator::Allocator;
 use oxc_codegen::Codegen;
 use oxc_parser::Parser;
@@ -51,8 +52,8 @@ pub struct CollectedStyles {
     pub keyframes: HashMap<String, StyleEntry>,
     /// createVar() calls: variable_name -> (CSS variable string, exported)
     pub vars: HashMap<String, (String, bool)>,
-    /// fontFace() calls: font face object JSON
-    pub font_faces: Vec<String>,
+    /// fontFace() calls: placeholder_id -> (font_face JSON, font-family name, exported)
+    pub font_faces: HashMap<String, (String, String, bool)>,
     /// styleVariants() calls: variable_name -> (variants, exported)
     pub style_variants: HashMap<String, (HashMap<String, StyleVariant>, bool)>,
     /// createContainer() calls: variable_name -> (container name string, exported)
@@ -73,6 +74,7 @@ pub fn is_vanilla_extract_file(filename: &str) -> bool {
 struct StyleCollectorInner {
     styles: CollectedStyles,
     style_counter: usize,
+    font_counter: usize,
 }
 
 type StyleCollector = Rc<RefCell<StyleCollectorInner>>;
@@ -84,6 +86,41 @@ fn next_style_id(collector: &StyleCollector) -> String {
     id
 }
 
+fn next_font_id(collector: &StyleCollector) -> String {
+    let mut inner = collector.borrow_mut();
+    let id = format!("__font_{}__", inner.font_counter);
+    inner.font_counter += 1;
+    id
+}
+
+/// Parse font-face JSON and return list of (key, value) pairs
+/// Input: {"src":"local(...)","fontWeight":400}
+/// Output: vec![("src", "\"local(...)\""), ("fontWeight", "400")]
+fn parse_font_face_json(json: &str) -> Vec<(String, String)> {
+    // Use serde_json to parse properly
+    let Ok(value) = serde_json::from_str::<serde_json::Value>(json) else {
+        return Vec::new();
+    };
+
+    let Some(obj) = value.as_object() else {
+        return Vec::new();
+    };
+
+    obj.iter()
+        .map(|(k, v)| {
+            let val = match v {
+                serde_json::Value::String(s) => {
+                    format!("\"{}\"", s.replace('\\', "\\\\").replace('"', "\\\""))
+                }
+                serde_json::Value::Number(n) => n.to_string(),
+                serde_json::Value::Bool(b) => b.to_string(),
+                _ => v.to_string(),
+            };
+            (k.clone(), val)
+        })
+        .collect()
+}
+
 /// Convert JsValue to JSON string using JSON.stringify
 fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
     // Use JSON.stringify to convert the value
@@ -125,13 +162,18 @@ fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
 }
 
 /// Execute vanilla-extract style file and collect styles
-pub fn execute_vanilla_extract(code: &str, package: &str) -> Result<CollectedStyles, String> {
+pub fn execute_vanilla_extract(
+    code: &str,
+    package: &str,
+    filename: &str,
+) -> Result<CollectedStyles, String> {
     let collector: StyleCollector = Rc::new(RefCell::new(StyleCollectorInner::default()));
+    let file_num = get_file_num_by_filename(filename);
 
     let mut context = Context::default();
 
     // Create the mock module object
-    register_vanilla_extract_apis(&mut context, collector.clone(), package)?;
+    register_vanilla_extract_apis(&mut context, collector.clone(), package, file_num)?;
 
     // Preprocess code: convert TypeScript to JavaScript using Oxc Transformer
     let js_code = preprocess_typescript(code, package);
@@ -243,13 +285,16 @@ fn remap_style_names(
     // Build mapping from placeholder ID to original name
     // The order of style() calls matches the order of variable declarations
     let mut placeholder_to_name: HashMap<String, String> = HashMap::new();
+    let mut font_placeholder_to_name: HashMap<String, String> = HashMap::new();
     let mut new_styles = HashMap::new();
     let mut new_keyframes = HashMap::new();
     let mut new_style_variants = HashMap::new();
     let mut new_vars = HashMap::new();
     let mut new_containers = HashMap::new();
     let mut new_layers = HashMap::new();
+    let mut new_font_faces = HashMap::new();
     let mut style_idx = 0;
+    let mut font_idx = 0;
 
     // First pass: collect old entries preserving all fields
     let old_styles: HashMap<String, StyleEntry> = collected.styles.drain().collect();
@@ -267,10 +312,26 @@ fn remap_style_names(
         .collect();
     let old_layers: HashMap<String, String> =
         collected.layers.drain().map(|(k, v)| (k, v.0)).collect();
+    // font_faces: placeholder_id -> (json, font_family, exported)
+    let old_font_faces: HashMap<String, (String, String)> = collected
+        .font_faces
+        .drain()
+        .map(|(k, v)| (k, (v.0, v.1)))
+        .collect();
 
     for (name, info) in vars {
         match info {
             VarInfo::StyleApi { exported } => {
+                // First check if this is a fontFace (uses __font_N__ placeholder)
+                let font_placeholder = format!("__font_{}__", font_idx);
+                if let Some((json, font_family)) = old_font_faces.get(&font_placeholder) {
+                    font_placeholder_to_name.insert(font_placeholder.clone(), name.clone());
+                    new_font_faces
+                        .insert(name.clone(), (json.clone(), font_family.clone(), *exported));
+                    font_idx += 1;
+                    continue;
+                }
+
                 let placeholder = format!("__style_{}__", style_idx);
                 placeholder_to_name.insert(placeholder.clone(), name.clone());
 
@@ -341,12 +402,37 @@ fn remap_style_names(
             .collect();
     }
 
+    // Replace font placeholders in style JSONs with actual font-family names
+    // Build a mapping from placeholder to font-family name
+    let font_family_map: HashMap<String, String> = new_font_faces
+        .iter()
+        .map(|(name, (_, font_family, _))| {
+            // Find the placeholder that maps to this name
+            let placeholder = font_placeholder_to_name
+                .iter()
+                .find(|(_, n)| *n == name)
+                .map(|(p, _)| p.clone())
+                .unwrap_or_default();
+            (placeholder, font_family.clone())
+        })
+        .collect();
+
+    // Replace __font_N__ placeholders in style JSON with font-family names
+    for entry in new_styles.values_mut() {
+        for (placeholder, font_family) in &font_family_map {
+            if entry.json.contains(placeholder) {
+                entry.json = entry.json.replace(placeholder, font_family);
+            }
+        }
+    }
+
     collected.styles = new_styles;
     collected.keyframes = new_keyframes;
     collected.style_variants = new_style_variants;
     collected.vars = new_vars;
     collected.containers = new_containers;
     collected.layers = new_layers;
+    collected.font_faces = new_font_faces;
 }
 
 /// Convert TypeScript to JavaScript using Oxc Transformer and replace imports
@@ -415,6 +501,7 @@ fn register_vanilla_extract_apis(
     context: &mut Context,
     collector: StyleCollector,
     _package: &str,
+    file_num: usize,
 ) -> Result<(), String> {
     // style() function
     let collector_style = collector.clone();
@@ -548,18 +635,29 @@ fn register_vanilla_extract_apis(
     };
 
     // fontFace() function
+    // Returns a placeholder ID that will be replaced with generated font-family name
     let collector_font = collector.clone();
     let font_face_fn = unsafe {
         NativeFunction::from_closure(move |_this, args, ctx| {
             let font_obj = args.get_or_undefined(0);
             let json = js_value_to_json(font_obj, ctx);
+            let id = next_font_id(&collector_font);
+
+            // Generate a unique font-family name for this font
+            // Include file_num to ensure uniqueness across different files
+            let font_family = format!(
+                "__devup_font_{}_{}",
+                file_num,
+                collector_font.borrow().font_counter - 1
+            );
 
-            collector_font.borrow_mut().styles.font_faces.push(json);
+            collector_font
+                .borrow_mut()
+                .styles
+                .font_faces
+                .insert(id.clone(), (json, font_family.clone(), false));
 
-            let id = format!(
-                "__font_{}__",
-                collector_font.borrow().styles.font_faces.len()
-            );
+            // Return the placeholder ID - will be replaced in code generation
             Ok(JsValue::from(js_string!(id)))
         })
     };
@@ -696,7 +794,7 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
     if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
         imports.push("css");
     }
-    if !collected.global_styles.is_empty() {
+    if !collected.global_styles.is_empty() || !collected.font_faces.is_empty() {
         imports.push("globalCss");
     }
     if !collected.keyframes.is_empty() {
@@ -766,6 +864,35 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
         code_parts.push(format!("globalCss({{ \"{}\": {} }})", selector, json));
     }
 
+    // Generate @font-face rules via globalCss fontFaces (sorted for deterministic output)
+    // NOTE: fontFaces are generated in globalCss format here.
+    // The extractor will then parse and extract them as FontFace styles.
+    let mut font_faces_sorted: Vec<_> = collected.font_faces.iter().collect();
+    font_faces_sorted.sort_by_key(|(name, _)| *name);
+    for (_name, (json, font_family, _exported)) in font_faces_sorted {
+        // Parse JSON and build JS object literal - clean single-line format
+        let props = parse_font_face_json(json);
+        let props_str = props
+            .iter()
+            .map(|(k, v)| format!("{}: {}", k, v))
+            .collect::<Vec<_>>()
+            .join(", ");
+
+        // Generate clean single-line globalCss call
+        let code = if props_str.is_empty() {
+            format!(
+                "globalCss({{ fontFaces: [{{ fontFamily: \"{}\" }}] }})",
+                font_family
+            )
+        } else {
+            format!(
+                "globalCss({{ fontFaces: [{{ fontFamily: \"{}\", {} }}] }})",
+                font_family, props_str
+            )
+        };
+        code_parts.push(code);
+    }
+
     // Generate keyframes declarations (sorted for deterministic output)
     let mut keyframes: Vec<_> = collected.keyframes.iter().collect();
     keyframes.sort_by_key(|(name, _)| *name);
@@ -839,6 +966,15 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
         code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
     }
 
+    // Generate fontFace declarations (sorted for deterministic output)
+    // fontFace returns the font-family name that can be used in style({ fontFamily: ... })
+    let mut font_faces: Vec<_> = collected.font_faces.iter().collect();
+    font_faces.sort_by_key(|(name, _)| *name);
+    for (name, (_, font_family, exported)) in font_faces {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, font_family));
+    }
+
     // Generate createContainer declarations (sorted for deterministic output)
     let mut containers: Vec<_> = collected.containers.iter().collect();
     containers.sort_by_key(|(name, _)| *name);
@@ -998,7 +1134,7 @@ export const container = style({ background: "red" })"#;
     fn test_execute_vanilla_extract_style() {
         let code = r#"import { style } from '@devup-ui/react'
 export const container = style({ background: "red", padding: 16 })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert!(!result.styles.is_empty());
     }
 
@@ -1006,7 +1142,7 @@ export const container = style({ background: "red", padding: 16 })"#;
     fn test_execute_vanilla_extract_global_style() {
         let code = r#"import { globalStyle } from '@devup-ui/react'
 globalStyle("body", { margin: 0, padding: 0 })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert_eq!(result.global_styles.len(), 1);
         assert_eq!(result.global_styles[0].0, "body");
     }
@@ -1035,7 +1171,7 @@ globalStyle("body", { margin: 0, padding: 0 })"#;
 const primaryColor = "blue";
 const spacing = 16;
 export const button = style({ background: primaryColor, padding: spacing })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert!(result.styles.contains_key("button"));
         let entry = &result.styles["button"];
         // The variable values should be resolved
@@ -1057,7 +1193,7 @@ export const button = style({ background: primaryColor, padding: spacing })"#;
         let code = r#"import { style } from '@devup-ui/react'
 const base = 8;
 export const box = style({ padding: base * 2, margin: base / 2 })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert!(result.styles.contains_key("box"));
         let entry = &result.styles["box"];
         assert!(
@@ -1078,7 +1214,7 @@ export const box = style({ padding: base * 2, margin: base / 2 })"#;
         let code = r#"import { style } from '@devup-ui/react'
 const isDark = true;
 export const theme = style({ background: isDark ? "black" : "white" })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert!(result.styles.contains_key("theme"));
         let entry = &result.styles["theme"];
         assert!(
@@ -1094,7 +1230,7 @@ export const theme = style({ background: isDark ? "black" : "white" })"#;
         let code = r#"import { style } from '@devup-ui/react'
 const baseStyle = { padding: 8, margin: 4 };
 export const extended = style({ ...baseStyle, background: "red" })"#;
-        let result = execute_vanilla_extract(code, "@devup-ui/react").unwrap();
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
         assert!(result.styles.contains_key("extended"));
         let entry = &result.styles["extended"];
         assert!(

From 48d40fe581e043d2ae9fd38dc092898c28f6a3d2 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 17:36:45 +0900
Subject: [PATCH 09/31] Fix font test issue

---
 libs/extractor/src/lib.rs                                   | 2 ++
 .../extractor__tests__vanilla_extract_font_face-2.snap      | 6 +++---
 .../extractor__tests__vanilla_extract_font_face.snap        | 6 +++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 53ebd8ed..d1f9faa4 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -234,6 +234,7 @@ mod tests {
 
     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;
@@ -9718,6 +9719,7 @@ export const button = styleVariants({
     #[serial]
     fn test_vanilla_extract_font_face() {
         reset_class_map();
+        reset_file_map();
         // fontFace - define custom font
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
index 16561974..611e8c2d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -7,7 +7,7 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "font-family",
-                value: "__devup_font_8_0",
+                value: "__devup_font_1_0",
                 level: 0,
                 selector: None,
                 style_order: None,
@@ -17,7 +17,7 @@ ToBTreeSet {
             ExtractFontFace {
                 file: "fonts-multi.css.ts",
                 properties: {
-                    "font-family": "__devup_font_8_0",
+                    "font-family": "__devup_font_1_0",
                     "font-style": "normal",
                     "font-weight": "400",
                     "src": "url(\"/fonts/Roboto.woff2\") format(\"woff2\")",
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const body = \"a\";\n;\nconst roboto = \"__devup_font_8_0\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const body = \"a\";\n;\nconst roboto = \"__devup_font_1_0\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
index cf6e8942..a45cbcf2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
@@ -7,7 +7,7 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "font-family",
-                value: "__devup_font_7_0",
+                value: "__devup_font_0_0",
                 level: 0,
                 selector: None,
                 style_order: None,
@@ -17,11 +17,11 @@ ToBTreeSet {
             ExtractFontFace {
                 file: "fonts.css.ts",
                 properties: {
-                    "font-family": "__devup_font_7_0",
+                    "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_7_0\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const text = \"a\";\n;\nconst myFont = \"__devup_font_0_0\";\n",
 }

From 13d46607363773e89df0271fc0b5714740b88227 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 21:31:02 +0900
Subject: [PATCH 10/31] Support createGlobalTheme

---
 ...__tests__vanilla_extract_global_theme.snap |  69 +++++-
 libs/extractor/src/vanilla_extract.rs         | 196 +++++++++++++++++-
 2 files changed, 260 insertions(+), 5 deletions(-)

diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
index 756e821f..1de0e401 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
@@ -3,6 +3,71 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "export const vars = createGlobalTheme(\":root\", {\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\",\n\t\tbackground: \"white\"\n\t},\n\tfont: { body: \"system-ui, sans-serif\" }\n});\n",
+    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,
+                ),
+            },
+        ),
+        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,
+                ),
+            },
+        ),
+        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,
+                ),
+            },
+        ),
+        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,
+                ),
+            },
+        ),
+    },
+    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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index f70fe1cd..c1ad903b 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -41,6 +41,19 @@ pub struct StyleEntry {
     pub bases: Vec<String>,
 }
 
+/// Entry for createGlobalTheme() - CSS variables scoped to a selector
+#[derive(Debug, Clone, Default)]
+pub struct GlobalThemeEntry {
+    /// CSS selector (e.g., ":root")
+    pub selector: String,
+    /// CSS variables: Vec<(var_name, value)> e.g. [("--color-brand-0-0", "blue")]
+    pub css_vars: Vec<(String, String)>,
+    /// Serialized JS object with var() references
+    pub vars_object_json: String,
+    /// Whether this is exported
+    pub exported: bool,
+}
+
 /// Collected style definitions from vanilla-extract API calls
 #[derive(Debug, Default)]
 pub struct CollectedStyles {
@@ -60,6 +73,8 @@ pub struct CollectedStyles {
     pub containers: HashMap<String, (String, bool)>,
     /// layer() calls: variable_name -> (layer name string, exported)
     pub layers: HashMap<String, (String, bool)>,
+    /// createGlobalTheme() calls: variable_name -> GlobalThemeEntry
+    pub global_themes: HashMap<String, GlobalThemeEntry>,
     /// Non-style constant exports: variable_name -> value (as code string)
     pub constant_exports: HashMap<String, String>,
 }
@@ -75,6 +90,7 @@ struct StyleCollectorInner {
     styles: CollectedStyles,
     style_counter: usize,
     font_counter: usize,
+    global_theme_counter: usize,
 }
 
 type StyleCollector = Rc<RefCell<StyleCollectorInner>>;
@@ -93,6 +109,13 @@ fn next_font_id(collector: &StyleCollector) -> String {
     id
 }
 
+fn next_global_theme_id(collector: &StyleCollector) -> String {
+    let mut inner = collector.borrow_mut();
+    let id = format!("__global_theme_{}__", inner.global_theme_counter);
+    inner.global_theme_counter += 1;
+    id
+}
+
 /// Parse font-face JSON and return list of (key, value) pairs
 /// Input: {"src":"local(...)","fontWeight":400}
 /// Output: vec![("src", "\"local(...)\""), ("fontWeight", "400")]
@@ -121,6 +144,80 @@ fn parse_font_face_json(json: &str) -> Vec<(String, String)> {
         .collect()
 }
 
+/// Recursively transform theme object to CSS var() references
+/// Returns a new JS object with the same structure but leaf values replaced with var(--path)
+fn transform_theme_to_vars(
+    value: &JsValue,
+    ctx: &mut Context,
+    placeholder_id: &str,
+    css_vars: &mut Vec<(String, String)>,
+    var_counter: &mut usize,
+    path: &[String],
+) -> JsValue {
+    if let Some(obj) = value.as_object() {
+        // Check if it's an array (shouldn't happen in theme objects, but handle it)
+        if obj.is_array() {
+            return value.clone();
+        }
+
+        // It's an object - recursively transform each property
+        let new_obj = boa_engine::object::ObjectInitializer::new(ctx).build();
+
+        // Get own property keys
+        if let Ok(keys) = obj.own_property_keys(ctx) {
+            for key in keys {
+                // Convert PropertyKey to string
+                let key_string = match &key {
+                    boa_engine::property::PropertyKey::String(s) => s.to_std_string_escaped(),
+                    boa_engine::property::PropertyKey::Symbol(_) => continue,
+                    boa_engine::property::PropertyKey::Index(i) => i.get().to_string(),
+                };
+
+                if let Ok(prop_value) = obj.get(js_string!(key_string.as_str()), ctx) {
+                    let mut new_path = path.to_vec();
+                    new_path.push(key_string.clone());
+
+                    let transformed = transform_theme_to_vars(
+                        &prop_value,
+                        ctx,
+                        placeholder_id,
+                        css_vars,
+                        var_counter,
+                        &new_path,
+                    );
+
+                    let _ = new_obj.set(js_string!(key_string.as_str()), transformed, false, ctx);
+                }
+            }
+        }
+
+        JsValue::from(new_obj)
+    } else {
+        // Leaf value - create CSS variable
+        let var_name = format!(
+            "--{}-{}-{}",
+            path.join("-"),
+            placeholder_id.trim_matches('_').replace("__", "-"),
+            var_counter
+        );
+        *var_counter += 1;
+
+        // Get the actual value as string
+        let value_str = if let Some(s) = value.as_string() {
+            s.to_std_string_escaped()
+        } else if let Ok(s) = value.to_string(ctx) {
+            s.to_std_string_escaped()
+        } else {
+            String::new()
+        };
+
+        css_vars.push((var_name.clone(), value_str));
+
+        // Return var(--name)
+        JsValue::from(js_string!(format!("var({})", var_name)))
+    }
+}
+
 /// Convert JsValue to JSON string using JSON.stringify
 fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
     // Use JSON.stringify to convert the value
@@ -271,6 +368,7 @@ fn is_style_api_call(expr: &oxc_ast::ast::Expression) -> bool {
                 | "createVar"
                 | "createContainer"
                 | "layer"
+                | "createGlobalTheme"
         );
     }
     false
@@ -293,8 +391,10 @@ fn remap_style_names(
     let mut new_containers = HashMap::new();
     let mut new_layers = HashMap::new();
     let mut new_font_faces = HashMap::new();
+    let mut new_global_themes = HashMap::new();
     let mut style_idx = 0;
     let mut font_idx = 0;
+    let mut global_theme_idx = 0;
 
     // First pass: collect old entries preserving all fields
     let old_styles: HashMap<String, StyleEntry> = collected.styles.drain().collect();
@@ -318,6 +418,9 @@ fn remap_style_names(
         .drain()
         .map(|(k, v)| (k, (v.0, v.1)))
         .collect();
+    // global_themes: placeholder_id -> GlobalThemeEntry (without exported flag for remapping)
+    let old_global_themes: HashMap<String, GlobalThemeEntry> =
+        collected.global_themes.drain().collect();
 
     for (name, info) in vars {
         match info {
@@ -332,6 +435,22 @@ fn remap_style_names(
                     continue;
                 }
 
+                // Check if this is a createGlobalTheme (uses __global_theme_N__ placeholder)
+                let global_theme_placeholder = format!("__global_theme_{}__", global_theme_idx);
+                if let Some(entry) = old_global_themes.get(&global_theme_placeholder) {
+                    new_global_themes.insert(
+                        name.clone(),
+                        GlobalThemeEntry {
+                            selector: entry.selector.clone(),
+                            css_vars: entry.css_vars.clone(),
+                            vars_object_json: entry.vars_object_json.clone(),
+                            exported: *exported,
+                        },
+                    );
+                    global_theme_idx += 1;
+                    continue;
+                }
+
                 let placeholder = format!("__style_{}__", style_idx);
                 placeholder_to_name.insert(placeholder.clone(), name.clone());
 
@@ -433,6 +552,7 @@ fn remap_style_names(
     collected.containers = new_containers;
     collected.layers = new_layers;
     collected.font_faces = new_font_faces;
+    collected.global_themes = new_global_themes;
 }
 
 /// Convert TypeScript to JavaScript using Oxc Transformer and replace imports
@@ -749,10 +869,48 @@ fn register_vanilla_extract_apis(
     };
 
     // createGlobalTheme() function
+    let collector_global_theme = collector.clone();
     let create_global_theme_fn = unsafe {
-        NativeFunction::from_closure(move |_this, args, _ctx| {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let placeholder_id = next_global_theme_id(&collector_global_theme);
+            let selector = args
+                .get_or_undefined(0)
+                .to_string(ctx)
+                .map(|s| s.to_std_string_escaped())
+                .unwrap_or_else(|_| ":root".to_string());
             let theme_obj = args.get_or_undefined(1);
-            Ok(theme_obj.clone())
+
+            // Collect CSS variables and build new object with var() references
+            let mut css_vars = Vec::new();
+            let mut var_counter = 0usize;
+            let result_obj = transform_theme_to_vars(
+                theme_obj,
+                ctx,
+                &placeholder_id,
+                &mut css_vars,
+                &mut var_counter,
+                &[],
+            );
+
+            // Serialize the result object to JSON for code generation
+            let vars_object_json = js_value_to_json(&result_obj, ctx);
+
+            // Store the collected CSS variables and vars object
+            collector_global_theme
+                .borrow_mut()
+                .styles
+                .global_themes
+                .insert(
+                    placeholder_id,
+                    GlobalThemeEntry {
+                        selector,
+                        css_vars,
+                        vars_object_json,
+                        exported: false,
+                    },
+                );
+
+            Ok(result_obj)
         })
     };
 
@@ -794,7 +952,10 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
     if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
         imports.push("css");
     }
-    if !collected.global_styles.is_empty() || !collected.font_faces.is_empty() {
+    if !collected.global_styles.is_empty()
+        || !collected.font_faces.is_empty()
+        || !collected.global_themes.is_empty()
+    {
         imports.push("globalCss");
     }
     if !collected.keyframes.is_empty() {
@@ -893,6 +1054,25 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
         code_parts.push(code);
     }
 
+    // Generate createGlobalTheme CSS variables via globalCss (sorted for deterministic output)
+    let mut global_themes_sorted: Vec<_> = collected.global_themes.iter().collect();
+    global_themes_sorted.sort_by_key(|(name, _)| *name);
+    for (_name, entry) in &global_themes_sorted {
+        if !entry.css_vars.is_empty() {
+            // Build CSS variables object for the selector
+            let vars_str = entry
+                .css_vars
+                .iter()
+                .map(|(var_name, value)| format!("\"{}\": \"{}\"", var_name, value))
+                .collect::<Vec<_>>()
+                .join(", ");
+            code_parts.push(format!(
+                "globalCss({{ \"{}\": {{ {} }} }})",
+                entry.selector, vars_str
+            ));
+        }
+    }
+
     // Generate keyframes declarations (sorted for deterministic output)
     let mut keyframes: Vec<_> = collected.keyframes.iter().collect();
     keyframes.sort_by_key(|(name, _)| *name);
@@ -991,6 +1171,15 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
         code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
     }
 
+    // Generate createGlobalTheme vars object declarations (sorted for deterministic output)
+    for (name, entry) in &global_themes_sorted {
+        let prefix = if entry.exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = {}",
+            prefix, name, entry.vars_object_json
+        ));
+    }
+
     // Generate constant exports (sorted for deterministic output)
     let mut constants: Vec<_> = collected.constant_exports.iter().collect();
     constants.sort_by_key(|(name, _)| *name);
@@ -1012,6 +1201,7 @@ impl Clone for CollectedStyles {
             style_variants: self.style_variants.clone(),
             containers: self.containers.clone(),
             layers: self.layers.clone(),
+            global_themes: self.global_themes.clone(),
             constant_exports: self.constant_exports.clone(),
         }
     }

From 03b7dd0204c0b5ffb706ba16e7e85c647a4daf7a Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 21:54:08 +0900
Subject: [PATCH 11/31] Support variable hover

---
 libs/extractor/src/lib.rs                     | 111 ++++++-
 ...r__tests__vanilla_extract_selectors-2.snap |   4 +-
 libs/extractor/src/vanilla_extract.rs         | 311 ++++++++++++++++++
 3 files changed, 421 insertions(+), 5 deletions(-)

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index d1f9faa4..06ba27d4 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -117,9 +117,37 @@ pub fn extract(
     {
         match vanilla_extract::execute_vanilla_extract(code, &option.package, filename) {
             Ok(collected) => {
-                let generated =
-                    vanilla_extract::collected_styles_to_code(&collected, &option.package);
-                (generated, true)
+                // Check if any styles are referenced in selectors
+                let referenced = vanilla_extract::find_selector_references(&collected);
+
+                if referenced.is_empty() {
+                    // No selector references, use simple code generation
+                    let generated =
+                        vanilla_extract::collected_styles_to_code(&collected, &option.package);
+                    (generated, true)
+                } else {
+                    // Two-pass extraction: first extract referenced styles to get their class names
+                    let partial_code = vanilla_extract::collected_styles_to_code_partial(
+                        &collected,
+                        &option.package,
+                        &referenced,
+                    );
+
+                    // Build class map by extracting the partial code
+                    let class_map = if !partial_code.is_empty() {
+                        extract_class_map_from_code(filename, &partial_code, &option, &referenced)?
+                    } else {
+                        std::collections::HashMap::new()
+                    };
+
+                    // Generate full code with class names substituted into selectors
+                    let generated = vanilla_extract::collected_styles_to_code_with_classes(
+                        &collected,
+                        &option.package,
+                        &class_map,
+                    );
+                    (generated, true)
+                }
             }
             Err(_) => {
                 // Fall back to treating as regular file if execution fails
@@ -197,6 +225,83 @@ 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(
+    filename: &str,
+    partial_code: &str,
+    option: &ExtractOption,
+    style_names: &HashSet<String>,
+) -> Result<std::collections::HashMap<String, String>, Box<dyn Error>> {
+    let source_type = SourceType::from_path(filename)?;
+    let css_file = if option.single_css {
+        format!("{}/devup-ui.css", option.css_dir)
+    } else {
+        format!(
+            "{}/devup-ui-{}.css",
+            option.css_dir,
+            get_file_num_by_filename(filename)
+        )
+    };
+    let css_files = vec![css_file];
+    let allocator = Allocator::default();
+
+    let ParserReturn {
+        mut program,
+        panicked,
+        ..
+    } = Parser::new(&allocator, partial_code, source_type).parse();
+    if panicked {
+        return Ok(std::collections::HashMap::new());
+    }
+
+    let mut visitor = DevupVisitor::new(
+        &allocator,
+        filename,
+        &option.package,
+        css_files,
+        if !option.single_css {
+            Some(filename.to_string())
+        } else {
+            None
+        },
+    );
+    visitor.visit_program(&mut program);
+
+    let result = Codegen::new().build(&program);
+
+    // Parse the output code to extract class name assignments
+    // Format: const styleName = "className" or const styleName = "className1 className2"
+    let mut class_map = std::collections::HashMap::new();
+    for line in result.code.lines() {
+        let line = line.trim();
+        if line.starts_with("const ") || line.starts_with("export const ") {
+            // Parse: [export] const name = "value"
+            let after_const = if line.starts_with("export ") {
+                line.strip_prefix("export const ").unwrap_or(line)
+            } else {
+                line.strip_prefix("const ").unwrap_or(line)
+            };
+
+            if let Some((name, rest)) = after_const.split_once(" = ") {
+                // Extract value from "value" or "value";
+                let value = rest
+                    .trim_start_matches('"')
+                    .trim_end_matches(';')
+                    .trim_end_matches('"');
+
+                if style_names.contains(name) {
+                    // For multi-class values like "a b", take the first class
+                    let first_class = value.split_whitespace().next().unwrap_or(value);
+                    class_map.insert(name.to_string(), first_class.to_string());
+                }
+            }
+        }
+    }
+
+    Ok(class_map)
+}
+
 /// Check if the code has an import from the specified package
 pub fn has_devup_ui(filename: &str, code: &str, package: &str) -> bool {
     if !code.contains(package) {
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
index 2043f222..36ced0d7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
@@ -20,7 +20,7 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Selector(
-                        "_style_0__:hover &",
+                        "a:hover &",
                     ),
                 ),
                 style_order: None,
@@ -40,5 +40,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"a b\";\nexport const parent = \"c\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const child = \"b c\";\nexport const parent = \"a\";\n",
 }
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index c1ad903b..a9c85d7a 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -545,6 +545,16 @@ fn remap_style_names(
         }
     }
 
+    // Replace __style_N__ placeholders in style JSON with variable names
+    // This is needed for selectors that reference other styles like `${parent}:hover &`
+    for entry in new_styles.values_mut() {
+        for (placeholder, var_name) in &placeholder_to_name {
+            if entry.json.contains(placeholder) {
+                entry.json = entry.json.replace(placeholder, var_name);
+            }
+        }
+    }
+
     collected.styles = new_styles;
     collected.keyframes = new_keyframes;
     collected.style_variants = new_style_variants;
@@ -943,6 +953,307 @@ fn register_vanilla_extract_apis(
     Ok(())
 }
 
+/// Find all style names that are referenced in selectors of other styles
+/// Returns a set of style names that need to be extracted first
+pub fn find_selector_references(collected: &CollectedStyles) -> std::collections::HashSet<String> {
+    let mut referenced = std::collections::HashSet::new();
+    let style_names: std::collections::HashSet<&str> =
+        collected.styles.keys().map(|s| s.as_str()).collect();
+
+    for entry in collected.styles.values() {
+        // Check if this style's JSON contains references to other style names
+        for style_name in &style_names {
+            // Look for patterns like "stylename:" or "stylename " in selectors
+            // The JSON has selectors like {"selectors":{"parent:hover &":{...}}}
+            if entry.json.contains(&format!("\"{}:", style_name))
+                || entry.json.contains(&format!("\"{} ", style_name))
+            {
+                referenced.insert(style_name.to_string());
+            }
+        }
+    }
+
+    referenced
+}
+
+/// Generate code only for specific styles (used for first-pass extraction)
+pub fn collected_styles_to_code_partial(
+    collected: &CollectedStyles,
+    package: &str,
+    style_names: &std::collections::HashSet<String>,
+) -> String {
+    let mut code_parts = Vec::new();
+
+    if !style_names.is_empty() {
+        code_parts.push(format!("import {{ css }} from '{}'", package));
+    }
+
+    // Generate only the specified styles
+    let mut styles: Vec<_> = collected
+        .styles
+        .iter()
+        .filter(|(name, _)| style_names.contains(*name))
+        .collect();
+    styles.sort_by_key(|(name, _)| *name);
+
+    for (name, entry) in styles {
+        // Generate as non-exported for first pass
+        code_parts.push(format!("const {} = css({})", name, entry.json));
+    }
+
+    code_parts.join("\n")
+}
+
+/// Convert collected styles to code with selector references replaced by class names
+pub fn collected_styles_to_code_with_classes(
+    collected: &CollectedStyles,
+    package: &str,
+    class_map: &HashMap<String, String>,
+) -> String {
+    let mut code_parts = Vec::new();
+
+    // Generate import statement
+    let mut imports = Vec::new();
+    if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
+        imports.push("css");
+    }
+    if !collected.global_styles.is_empty()
+        || !collected.font_faces.is_empty()
+        || !collected.global_themes.is_empty()
+    {
+        imports.push("globalCss");
+    }
+    if !collected.keyframes.is_empty() {
+        imports.push("keyframes");
+    }
+
+    if !imports.is_empty() {
+        code_parts.push(format!(
+            "import {{ {} }} from '{}'",
+            imports.join(", "),
+            package
+        ));
+    }
+
+    // Generate style declarations with selector references replaced
+    let style_json_map: HashMap<&str, &str> = collected
+        .styles
+        .iter()
+        .map(|(name, entry)| (name.as_str(), entry.json.as_str()))
+        .collect();
+
+    let mut styles: Vec<_> = collected.styles.iter().collect();
+    styles.sort_by_key(|(name, _)| *name);
+
+    for (name, entry) in styles {
+        let prefix = if entry.exported { "export " } else { "" };
+
+        // Replace style name references with class names in JSON
+        let mut json = entry.json.clone();
+        for (style_name, class_name) in class_map {
+            // Replace patterns like "stylename:" with "classname:"
+            json = json.replace(&format!("\"{}:", style_name), &format!("\"{}:", class_name));
+            json = json.replace(&format!("\"{} ", style_name), &format!("\"{} ", class_name));
+        }
+
+        if entry.bases.is_empty() {
+            code_parts.push(format!("{}const {} = css({})", prefix, name, json));
+        } else {
+            // Composition: merge all base styles
+            let mut merged_parts = Vec::new();
+            for base_name in &entry.bases {
+                if let Some(base_json) = style_json_map.get(base_name.as_str()) {
+                    let inner = base_json
+                        .trim()
+                        .trim_start_matches('{')
+                        .trim_end_matches('}')
+                        .trim();
+                    if !inner.is_empty() {
+                        merged_parts.push(inner.to_string());
+                    }
+                }
+            }
+            let own_inner = json
+                .trim()
+                .trim_start_matches('{')
+                .trim_end_matches('}')
+                .trim();
+            if !own_inner.is_empty() {
+                merged_parts.push(own_inner.to_string());
+            }
+            let merged_json = format!("{{{}}}", merged_parts.join(","));
+            code_parts.push(format!("{}const {} = css({})", prefix, name, merged_json));
+        }
+    }
+
+    // Add remaining code generation (globalCss, keyframes, etc.) - call original function's logic
+    append_non_style_code(collected, package, &mut code_parts);
+
+    code_parts.join("\n")
+}
+
+/// Append non-style code parts (globalCss, keyframes, fontFaces, etc.)
+fn append_non_style_code(
+    collected: &CollectedStyles,
+    _package: &str,
+    code_parts: &mut Vec<String>,
+) {
+    // Generate globalCss calls
+    for (selector, json) in &collected.global_styles {
+        code_parts.push(format!("globalCss({{ \"{}\": {} }})", selector, json));
+    }
+
+    // Generate @font-face rules
+    let mut font_faces_sorted: Vec<_> = collected.font_faces.iter().collect();
+    font_faces_sorted.sort_by_key(|(name, _)| *name);
+    for (_name, (json, font_family, _exported)) in font_faces_sorted {
+        let props = parse_font_face_json(json);
+        let props_str = props
+            .iter()
+            .map(|(k, v)| format!("{}: {}", k, v))
+            .collect::<Vec<_>>()
+            .join(", ");
+        let code = if props_str.is_empty() {
+            format!(
+                "globalCss({{ fontFaces: [{{ fontFamily: \"{}\" }}] }})",
+                font_family
+            )
+        } else {
+            format!(
+                "globalCss({{ fontFaces: [{{ fontFamily: \"{}\", {} }}] }})",
+                font_family, props_str
+            )
+        };
+        code_parts.push(code);
+    }
+
+    // Generate createGlobalTheme CSS variables
+    let mut global_themes_sorted: Vec<_> = collected.global_themes.iter().collect();
+    global_themes_sorted.sort_by_key(|(name, _)| *name);
+    for (_name, entry) in &global_themes_sorted {
+        if !entry.css_vars.is_empty() {
+            let vars_str = entry
+                .css_vars
+                .iter()
+                .map(|(var_name, value)| format!("\"{}\": \"{}\"", var_name, value))
+                .collect::<Vec<_>>()
+                .join(", ");
+            code_parts.push(format!(
+                "globalCss({{ \"{}\": {{ {} }} }})",
+                entry.selector, vars_str
+            ));
+        }
+    }
+
+    // Generate keyframes
+    let mut keyframes: Vec<_> = collected.keyframes.iter().collect();
+    keyframes.sort_by_key(|(name, _)| *name);
+    for (name, entry) in keyframes {
+        let prefix = if entry.exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = keyframes({})",
+            prefix, name, entry.json
+        ));
+    }
+
+    // Generate styleVariants
+    let style_json_map: HashMap<&str, &str> = collected
+        .styles
+        .iter()
+        .map(|(name, entry)| (name.as_str(), entry.json.as_str()))
+        .collect();
+    let mut variants: Vec<_> = collected.style_variants.iter().collect();
+    variants.sort_by_key(|(name, _)| *name);
+    for (name, (variant_map, exported)) in variants {
+        let mut variant_entries: Vec<_> = variant_map.iter().collect();
+        variant_entries.sort_by_key(|(k, _)| *k);
+        let mut object_parts = Vec::new();
+        for (variant_key, variant) in variant_entries {
+            let value = if let Some(base_name) = &variant.base {
+                let mut merged_parts = Vec::new();
+                if let Some(base_json) = style_json_map.get(base_name.as_str()) {
+                    let inner = base_json
+                        .trim()
+                        .trim_start_matches('{')
+                        .trim_end_matches('}')
+                        .trim();
+                    if !inner.is_empty() {
+                        merged_parts.push(inner.to_string());
+                    }
+                }
+                let own_inner = variant
+                    .styles_json
+                    .trim()
+                    .trim_start_matches('{')
+                    .trim_end_matches('}')
+                    .trim();
+                if !own_inner.is_empty() {
+                    merged_parts.push(own_inner.to_string());
+                }
+                format!("css({{{}}})", merged_parts.join(","))
+            } else {
+                format!("css({})", variant.styles_json)
+            };
+            object_parts.push(format!("  {}: {}", variant_key, value));
+        }
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = {{\n{}\n}}",
+            prefix,
+            name,
+            object_parts.join(",\n")
+        ));
+    }
+
+    // Generate createVar declarations
+    let mut vars: Vec<_> = collected.vars.iter().collect();
+    vars.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in vars {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate fontFace declarations
+    let mut font_faces: Vec<_> = collected.font_faces.iter().collect();
+    font_faces.sort_by_key(|(name, _)| *name);
+    for (name, (_, font_family, exported)) in font_faces {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, font_family));
+    }
+
+    // Generate createContainer declarations
+    let mut containers: Vec<_> = collected.containers.iter().collect();
+    containers.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in containers {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate layer declarations
+    let mut layers: Vec<_> = collected.layers.iter().collect();
+    layers.sort_by_key(|(name, _)| *name);
+    for (name, (value, exported)) in layers {
+        let prefix = if *exported { "export " } else { "" };
+        code_parts.push(format!("{}const {} = \"{}\"", prefix, name, value));
+    }
+
+    // Generate createGlobalTheme vars object declarations
+    for (name, entry) in &global_themes_sorted {
+        let prefix = if entry.exported { "export " } else { "" };
+        code_parts.push(format!(
+            "{}const {} = {}",
+            prefix, name, entry.vars_object_json
+        ));
+    }
+
+    // Generate constant exports
+    let mut constants: Vec<_> = collected.constant_exports.iter().collect();
+    constants.sort_by_key(|(name, _)| *name);
+    for (name, value) in constants {
+        code_parts.push(format!("export const {} = {}", name, value));
+    }
+}
+
 /// Convert collected styles to code that can be processed by existing extract logic
 pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> String {
     let mut code_parts = Vec::new();

From 5ce6fc59a99d8ccd5b9db577ea401f66d2825e7b Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 13 Jan 2026 23:38:14 +0900
Subject: [PATCH 12/31] Create theme

---
 ...actor__tests__vanilla_extract_theme-2.snap |  69 ++-
 ...tractor__tests__vanilla_extract_theme.snap | 103 +++-
 libs/extractor/src/vanilla_extract.rs         | 448 ++++++++++++++++--
 3 files changed, 588 insertions(+), 32 deletions(-)

diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
index c59b6165..eee41a0b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
@@ -3,6 +3,71 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "export const darkTheme = createTheme(vars, { color: {\n\tbrand: \"lightblue\",\n\ttext: \"white\"\n} });\nexport const lightTheme = createTheme(vars, { color: {\n\tbrand: \"blue\",\n\ttext: \"black\"\n} });\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f14_lightTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand",
+                value: "lightblue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f14_darkTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f14_lightTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text",
+                value: "white",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f14_darkTheme",
+                        "theme-contract.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const darkTheme = \"f14_darkTheme\";\nexport const lightTheme = \"f14_lightTheme\";\n;\n;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
index eb67a180..5664f908 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
@@ -3,6 +3,105 @@ source: libs/extractor/src/lib.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}).unwrap())"
 ---
 ToBTreeSet {
-    styles: {},
-    code: "import { createTheme, style } from \"@devup-ui/react\";\nexport const [themeClass, vars] = createTheme({\n\tcolor: {\n\t\tbrand: \"blue\",\n\t\ttext: \"black\"\n\t},\n\tspace: {\n\t\tsmall: \"4px\",\n\t\tmedium: \"8px\",\n\t\tlarge: \"16px\"\n\t}\n});\nexport const box = style({\n\tcolor: vars.color.text,\n\tpadding: vars.space.medium\n});\n",
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "--color-brand-style_0-0",
+                value: "blue",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f13_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--color-text-style_0-1",
+                value: "black",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f13_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-large-style_0-4",
+                value: "16px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f13_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-medium-style_0-3",
+                value: "8px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f13_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "--space-small-style_0-2",
+                value: "4px",
+                level: 0,
+                selector: Some(
+                    Global(
+                        ".f13_themeClass",
+                        "theme.css.ts",
+                    ),
+                ),
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "var(--color-text-style_0-1)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "padding",
+                value: "var(--space-medium-style_0-3)",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const box = \"a b\";\nexport const [themeClass, vars] = [\"f13_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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index a9c85d7a..65aa4917 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -54,6 +54,22 @@ pub struct GlobalThemeEntry {
     pub exported: bool,
 }
 
+/// Entry for createTheme() - CSS variables scoped to a generated class
+#[derive(Debug, Clone, Default)]
+pub struct ThemeEntry {
+    /// CSS variables: Vec<(var_name, value)> e.g. [("--color-brand", "blue")]
+    pub css_vars: Vec<(String, String)>,
+    /// Whether this is exported
+    pub exported: bool,
+    /// For single-arg createTheme: the vars object JSON with var() references
+    /// Used to generate the second element of the returned array
+    pub vars_object_json: Option<String>,
+    /// For single-arg createTheme: the name of the vars variable from [themeClass, vars]
+    pub vars_name: Option<String>,
+    /// The unique generated class name (file_prefix + variable_name)
+    pub class_name: String,
+}
+
 /// Collected style definitions from vanilla-extract API calls
 #[derive(Debug, Default)]
 pub struct CollectedStyles {
@@ -75,6 +91,10 @@ pub struct CollectedStyles {
     pub layers: HashMap<String, (String, bool)>,
     /// createGlobalTheme() calls: variable_name -> GlobalThemeEntry
     pub global_themes: HashMap<String, GlobalThemeEntry>,
+    /// createTheme() calls: variable_name -> ThemeEntry
+    pub themes: HashMap<String, ThemeEntry>,
+    /// Theme vars from array destructuring: vars_name -> (vars_object_json, exported)
+    pub theme_vars: HashMap<String, (String, bool)>,
     /// Non-style constant exports: variable_name -> value (as code string)
     pub constant_exports: HashMap<String, String>,
 }
@@ -144,6 +164,95 @@ fn parse_font_face_json(json: &str) -> Vec<(String, String)> {
         .collect()
 }
 
+/// Recursively transform theme contract object to CSS var() references
+/// Returns a new JS object with null leaves replaced by var(--path)
+fn transform_contract_to_vars(value: &JsValue, ctx: &mut Context, path: &[String]) -> JsValue {
+    if let Some(obj) = value.as_object() {
+        // Check if it's an array
+        if obj.is_array() {
+            return value.clone();
+        }
+
+        // It's an object - recursively transform each property
+        let new_obj = boa_engine::object::ObjectInitializer::new(ctx).build();
+
+        if let Ok(keys) = obj.own_property_keys(ctx) {
+            for key in keys {
+                let key_string = match &key {
+                    boa_engine::property::PropertyKey::String(s) => s.to_std_string_escaped(),
+                    boa_engine::property::PropertyKey::Symbol(_) => continue,
+                    boa_engine::property::PropertyKey::Index(i) => i.get().to_string(),
+                };
+
+                if let Ok(prop_value) = obj.get(js_string!(key_string.as_str()), ctx) {
+                    let mut new_path = path.to_vec();
+                    new_path.push(key_string.clone());
+
+                    let transformed = transform_contract_to_vars(&prop_value, ctx, &new_path);
+
+                    let _ = new_obj.set(js_string!(key_string.as_str()), transformed, false, ctx);
+                }
+            }
+        }
+
+        JsValue::from(new_obj)
+    } else {
+        // Leaf value (should be null) - create CSS variable reference
+        let var_name = format!("--{}", path.join("-"));
+        JsValue::from(js_string!(format!("var({})", var_name)))
+    }
+}
+
+/// Extract CSS variable assignments by matching contract vars with values
+fn extract_theme_vars(
+    contract: &JsValue,
+    values: &JsValue,
+    ctx: &mut Context,
+    css_vars: &mut Vec<(String, String)>,
+    path: &[String],
+) {
+    if let (Some(contract_obj), Some(values_obj)) = (contract.as_object(), values.as_object()) {
+        // Both are objects - recurse into properties
+        if let Ok(keys) = contract_obj.own_property_keys(ctx) {
+            for key in keys {
+                let key_string = match &key {
+                    boa_engine::property::PropertyKey::String(s) => s.to_std_string_escaped(),
+                    boa_engine::property::PropertyKey::Symbol(_) => continue,
+                    boa_engine::property::PropertyKey::Index(i) => i.get().to_string(),
+                };
+
+                if let (Ok(contract_prop), Ok(value_prop)) = (
+                    contract_obj.get(js_string!(key_string.as_str()), ctx),
+                    values_obj.get(js_string!(key_string.as_str()), ctx),
+                ) {
+                    let mut new_path = path.to_vec();
+                    new_path.push(key_string);
+
+                    extract_theme_vars(&contract_prop, &value_prop, ctx, css_vars, &new_path);
+                }
+            }
+        }
+    } else if let Some(contract_str) = contract.as_string() {
+        // Contract leaf is a var(--name) string
+        let contract_str = contract_str.to_std_string_escaped();
+        if contract_str.starts_with("var(") && contract_str.ends_with(')') {
+            // Extract var name from var(--name)
+            let var_name = &contract_str[4..contract_str.len() - 1];
+
+            // Get the value
+            let value_str = if let Some(s) = values.as_string() {
+                s.to_std_string_escaped()
+            } else if let Ok(s) = values.to_string(ctx) {
+                s.to_std_string_escaped()
+            } else {
+                String::new()
+            };
+
+            css_vars.push((var_name.to_string(), value_str));
+        }
+    }
+}
+
 /// Recursively transform theme object to CSS var() references
 /// Returns a new JS object with the same structure but leaf values replaced with var(--path)
 fn transform_theme_to_vars(
@@ -285,7 +394,7 @@ pub fn execute_vanilla_extract(
 
     // Map placeholder IDs back to original variable names
     let mut result = std::mem::take(&mut collector.borrow_mut().styles);
-    remap_style_names(&mut result, &var_names, &mut context);
+    remap_style_names(&mut result, &var_names, &mut context, file_num);
 
     Ok(result)
 }
@@ -297,6 +406,8 @@ enum VarInfo {
     StyleApi { exported: bool },
     /// A regular constant export with its original code
     Constant(String),
+    /// The vars object from createTheme array destructuring [themeClass, vars]
+    ThemeVars,
 }
 
 /// Extract all variable names and their info from the original code
@@ -316,19 +427,44 @@ fn extract_var_names(code: &str, _package: &str) -> Vec<(String, VarInfo)> {
                     &export.declaration
                 {
                     for decl in &var_decl.declarations {
-                        if let Some(name) = decl.id.get_identifier_name()
-                            && let Some(init) = &decl.init
-                        {
-                            if is_style_api_call(init) {
-                                vars.push((name.to_string(), VarInfo::StyleApi { exported: true }));
-                            } else {
-                                // Extract the original init expression using span
-                                let span = init.span();
-                                let init_code = &code[span.start as usize..span.end as usize];
-                                vars.push((
-                                    name.to_string(),
-                                    VarInfo::Constant(init_code.to_string()),
-                                ));
+                        if let Some(init) = &decl.init {
+                            // Check for array destructuring: const [themeClass, vars] = createTheme(...)
+                            if let oxc_ast::ast::BindingPattern::ArrayPattern(array_pat) = &decl.id
+                            {
+                                if is_style_api_call(init) {
+                                    // First element is the theme class
+                                    if let Some(Some(first)) = array_pat.elements.first()
+                                        && let oxc_ast::ast::BindingPattern::BindingIdentifier(id) =
+                                            first
+                                    {
+                                        vars.push((
+                                            id.name.to_string(),
+                                            VarInfo::StyleApi { exported: true },
+                                        ));
+                                    }
+                                    // Second element is the vars object - mark as ThemeVars
+                                    if let Some(Some(second)) = array_pat.elements.get(1)
+                                        && let oxc_ast::ast::BindingPattern::BindingIdentifier(id) =
+                                            second
+                                    {
+                                        vars.push((id.name.to_string(), VarInfo::ThemeVars));
+                                    }
+                                }
+                            } else if let Some(name) = decl.id.get_identifier_name() {
+                                if is_style_api_call(init) {
+                                    vars.push((
+                                        name.to_string(),
+                                        VarInfo::StyleApi { exported: true },
+                                    ));
+                                } else {
+                                    // Extract the original init expression using span
+                                    let span = init.span();
+                                    let init_code = &code[span.start as usize..span.end as usize];
+                                    vars.push((
+                                        name.to_string(),
+                                        VarInfo::Constant(init_code.to_string()),
+                                    ));
+                                }
                             }
                         }
                     }
@@ -337,11 +473,31 @@ fn extract_var_names(code: &str, _package: &str) -> Vec<(String, VarInfo)> {
             // Non-exported variable declarations
             oxc_ast::ast::Statement::VariableDeclaration(var_decl) => {
                 for decl in &var_decl.declarations {
-                    if let Some(name) = decl.id.get_identifier_name()
-                        && let Some(init) = &decl.init
-                        && is_style_api_call(init)
-                    {
-                        vars.push((name.to_string(), VarInfo::StyleApi { exported: false }));
+                    if let Some(init) = &decl.init {
+                        // Check for array destructuring
+                        if let oxc_ast::ast::BindingPattern::ArrayPattern(array_pat) = &decl.id {
+                            if is_style_api_call(init) {
+                                if let Some(Some(first)) = array_pat.elements.first()
+                                    && let oxc_ast::ast::BindingPattern::BindingIdentifier(id) =
+                                        first
+                                {
+                                    vars.push((
+                                        id.name.to_string(),
+                                        VarInfo::StyleApi { exported: false },
+                                    ));
+                                }
+                                if let Some(Some(second)) = array_pat.elements.get(1)
+                                    && let oxc_ast::ast::BindingPattern::BindingIdentifier(id) =
+                                        second
+                                {
+                                    vars.push((id.name.to_string(), VarInfo::ThemeVars));
+                                }
+                            }
+                        } else if let Some(name) = decl.id.get_identifier_name()
+                            && is_style_api_call(init)
+                        {
+                            vars.push((name.to_string(), VarInfo::StyleApi { exported: false }));
+                        }
                     }
                     // We don't need to track non-exported non-style constants
                 }
@@ -369,6 +525,7 @@ fn is_style_api_call(expr: &oxc_ast::ast::Expression) -> bool {
                 | "createContainer"
                 | "layer"
                 | "createGlobalTheme"
+                | "createTheme"
         );
     }
     false
@@ -379,7 +536,11 @@ fn remap_style_names(
     collected: &mut CollectedStyles,
     vars: &[(String, VarInfo)],
     _context: &mut Context,
+    file_num: usize,
 ) {
+    // Generate a file-based prefix for unique class names
+    // e.g., file_num 0 -> "f0"
+    let file_prefix = format!("f{}", file_num);
     // Build mapping from placeholder ID to original name
     // The order of style() calls matches the order of variable declarations
     let mut placeholder_to_name: HashMap<String, String> = HashMap::new();
@@ -392,9 +553,12 @@ fn remap_style_names(
     let mut new_layers = HashMap::new();
     let mut new_font_faces = HashMap::new();
     let mut new_global_themes = HashMap::new();
+    let mut new_themes = HashMap::new();
     let mut style_idx = 0;
     let mut font_idx = 0;
     let mut global_theme_idx = 0;
+    // Track the last processed theme's vars_object_json for ThemeVars handling
+    let mut last_theme_vars_json: Option<String> = None;
 
     // First pass: collect old entries preserving all fields
     let old_styles: HashMap<String, StyleEntry> = collected.styles.drain().collect();
@@ -421,6 +585,8 @@ fn remap_style_names(
     // global_themes: placeholder_id -> GlobalThemeEntry (without exported flag for remapping)
     let old_global_themes: HashMap<String, GlobalThemeEntry> =
         collected.global_themes.drain().collect();
+    // themes: placeholder_id -> ThemeEntry (without exported flag for remapping)
+    let old_themes: HashMap<String, ThemeEntry> = collected.themes.drain().collect();
 
     for (name, info) in vars {
         match info {
@@ -486,6 +652,51 @@ fn remap_style_names(
                 } else if let Some(value) = old_layers.get(&placeholder) {
                     new_layers.insert(name.clone(), (value.clone(), *exported));
                     style_idx += 1;
+                } else if let Some(entry) = old_themes.get(&placeholder) {
+                    // Track this theme name for the next ThemeVars entry
+                    if entry.vars_object_json.is_some() {
+                        last_theme_vars_json = Some(name.clone());
+                    }
+
+                    // Generate unique class name: file_prefix + variable_name
+                    let class_name = format!("{}_{}", file_prefix, name);
+
+                    // Add CSS variables to global_styles with class selector
+                    if !entry.css_vars.is_empty() {
+                        let vars_json = format!(
+                            "{{ {} }}",
+                            entry
+                                .css_vars
+                                .iter()
+                                .map(|(var_name, value)| format!("\"{}\": \"{}\"", var_name, value))
+                                .collect::<Vec<_>>()
+                                .join(", ")
+                        );
+                        collected
+                            .global_styles
+                            .push((format!(".{}", class_name), vars_json));
+                    }
+
+                    new_themes.insert(
+                        name.clone(),
+                        ThemeEntry {
+                            css_vars: entry.css_vars.clone(),
+                            exported: *exported,
+                            vars_object_json: entry.vars_object_json.clone(),
+                            vars_name: None, // Will be set by ThemeVars if present
+                            class_name,
+                        },
+                    );
+                    style_idx += 1;
+                }
+            }
+            VarInfo::ThemeVars => {
+                // This is the vars object from [themeClass, vars] = createTheme(...)
+                // Set vars_name on the theme we just processed
+                if let Some(theme_name) = last_theme_vars_json.take()
+                    && let Some(theme_entry) = new_themes.get_mut(&theme_name)
+                {
+                    theme_entry.vars_name = Some(name.clone());
                 }
             }
             VarInfo::Constant(code) => {
@@ -563,6 +774,7 @@ fn remap_style_names(
     collected.layers = new_layers;
     collected.font_faces = new_font_faces;
     collected.global_themes = new_global_themes;
+    collected.themes = new_themes;
 }
 
 /// Convert TypeScript to JavaScript using Oxc Transformer and replace imports
@@ -830,16 +1042,86 @@ fn register_vanilla_extract_apis(
         })
     };
 
-    // createTheme() function
-    let create_theme_fn = unsafe {
-        NativeFunction::from_closure(move |_this, _args, _ctx| {
-            Ok(JsValue::from(js_string!("__theme__")))
+    // createThemeContract() function - transforms null leaves to var(--path) references
+    let create_theme_contract_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let contract_obj = args.get_or_undefined(0);
+            let transformed = transform_contract_to_vars(contract_obj, ctx, &[]);
+            Ok(transformed)
         })
     };
 
-    // createThemeContract() function
-    let create_theme_contract_fn = unsafe {
-        NativeFunction::from_closure(move |_this, args, _ctx| Ok(args.get_or_undefined(0).clone()))
+    // createTheme() function - creates a class with CSS variable assignments
+    // Single arg: createTheme({ color: { brand: 'blue' } }) -> returns [themeClass, vars]
+    // Two args: createTheme(contract, values) -> returns themeClass
+    let collector_theme = collector.clone();
+    let create_theme_fn = unsafe {
+        NativeFunction::from_closure(move |_this, args, ctx| {
+            let first_arg = args.get_or_undefined(0);
+            let second_arg = args.get_or_undefined(1);
+
+            // Check if it's single-arg (values only) or two-arg (contract, values)
+            let is_single_arg = second_arg.is_undefined();
+
+            let id = next_style_id(&collector_theme);
+
+            if is_single_arg {
+                // Single arg: createTheme({ color: { brand: 'blue' } })
+                // Returns [themeClass, vars] where vars has var() references
+                let mut css_vars = Vec::new();
+                let mut var_counter = 0usize;
+
+                // Transform values to var() references and collect CSS variables
+                let vars_obj = transform_theme_to_vars(
+                    first_arg,
+                    ctx,
+                    &id,
+                    &mut css_vars,
+                    &mut var_counter,
+                    &[],
+                );
+
+                let vars_object_json = js_value_to_json(&vars_obj, ctx);
+
+                // Store the theme entry with vars object
+                collector_theme.borrow_mut().styles.themes.insert(
+                    id.clone(),
+                    ThemeEntry {
+                        css_vars,
+                        exported: false,
+                        vars_object_json: Some(vars_object_json),
+                        vars_name: None,           // Will be set during remapping
+                        class_name: String::new(), // Will be set during remapping
+                    },
+                );
+
+                // Return [themeId, varsObject] as an array
+                let result_array = boa_engine::object::builtins::JsArray::new(ctx);
+                let _ = result_array.push(JsValue::from(js_string!(id.clone())), ctx);
+                let _ = result_array.push(vars_obj, ctx);
+
+                Ok(JsValue::from(result_array))
+            } else {
+                // Two args: createTheme(contract, values)
+                // Returns just the themeClass
+                let mut css_vars = Vec::new();
+                extract_theme_vars(first_arg, second_arg, ctx, &mut css_vars, &[]);
+
+                // Store the theme entry
+                collector_theme.borrow_mut().styles.themes.insert(
+                    id.clone(),
+                    ThemeEntry {
+                        css_vars,
+                        exported: false,
+                        vars_object_json: None,
+                        vars_name: None,
+                        class_name: String::new(), // Will be set during remapping
+                    },
+                );
+
+                Ok(JsValue::from(js_string!(id)))
+            }
+        })
     };
 
     // layer() function
@@ -1014,7 +1296,10 @@ pub fn collected_styles_to_code_with_classes(
 
     // Generate import statement
     let mut imports = Vec::new();
-    if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
+    if !collected.styles.is_empty()
+        || !collected.style_variants.is_empty()
+        || !collected.themes.is_empty()
+    {
         imports.push("css");
     }
     if !collected.global_styles.is_empty()
@@ -1086,6 +1371,32 @@ pub fn collected_styles_to_code_with_classes(
         }
     }
 
+    // Generate createTheme exports (class name and optionally vars object)
+    // Note: CSS variables are added to global_styles during remapping
+    let mut themes: Vec<_> = collected.themes.iter().collect();
+    themes.sort_by_key(|(name, _)| *name);
+    for (name, entry) in themes {
+        let prefix = if entry.exported { "export " } else { "" };
+        if let Some(vars_name) = &entry.vars_name {
+            if let Some(vars_json) = &entry.vars_object_json {
+                code_parts.push(format!(
+                    "{}const [{}, {}] = [\"{}\", {}]",
+                    prefix, name, vars_name, entry.class_name, vars_json
+                ));
+            } else {
+                code_parts.push(format!(
+                    "{}const {} = \"{}\"",
+                    prefix, name, entry.class_name
+                ));
+            }
+        } else {
+            code_parts.push(format!(
+                "{}const {} = \"{}\"",
+                prefix, name, entry.class_name
+            ));
+        }
+    }
+
     // Add remaining code generation (globalCss, keyframes, etc.) - call original function's logic
     append_non_style_code(collected, package, &mut code_parts);
 
@@ -1260,7 +1571,10 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
 
     // Generate import statement
     let mut imports = Vec::new();
-    if !collected.styles.is_empty() || !collected.style_variants.is_empty() {
+    if !collected.styles.is_empty()
+        || !collected.style_variants.is_empty()
+        || !collected.themes.is_empty()
+    {
         imports.push("css");
     }
     if !collected.global_styles.is_empty()
@@ -1331,6 +1645,33 @@ pub fn collected_styles_to_code(collected: &CollectedStyles, package: &str) -> S
         }
     }
 
+    // Generate createTheme exports (class name and optionally vars object)
+    // Note: CSS variables are added to global_styles during remapping
+    let mut themes: Vec<_> = collected.themes.iter().collect();
+    themes.sort_by_key(|(name, _)| *name);
+    for (name, entry) in themes {
+        let prefix = if entry.exported { "export " } else { "" };
+        // If this theme has a vars_name, output as array destructuring
+        if let Some(vars_name) = &entry.vars_name {
+            if let Some(vars_json) = &entry.vars_object_json {
+                code_parts.push(format!(
+                    "{}const [{}, {}] = [\"{}\", {}]",
+                    prefix, name, vars_name, entry.class_name, vars_json
+                ));
+            } else {
+                code_parts.push(format!(
+                    "{}const {} = \"{}\"",
+                    prefix, name, entry.class_name
+                ));
+            }
+        } else {
+            code_parts.push(format!(
+                "{}const {} = \"{}\"",
+                prefix, name, entry.class_name
+            ));
+        }
+    }
+
     // Generate globalCss calls
     for (selector, json) in &collected.global_styles {
         code_parts.push(format!("globalCss({{ \"{}\": {} }})", selector, json));
@@ -1513,6 +1854,8 @@ impl Clone for CollectedStyles {
             containers: self.containers.clone(),
             layers: self.layers.clone(),
             global_themes: self.global_themes.clone(),
+            themes: self.themes.clone(),
+            theme_vars: self.theme_vars.clone(),
             constant_exports: self.constant_exports.clone(),
         }
     }
@@ -1750,4 +2093,53 @@ export const extended = style({ ...baseStyle, background: "red" })"#;
             entry.json
         );
     }
+
+    #[test]
+    fn test_execute_vanilla_extract_create_theme_contract() {
+        // Test createThemeContract + createTheme
+        let code = r#"import { createThemeContract, createTheme } from '@devup-ui/react'
+const vars = createThemeContract({
+  color: {
+    brand: null,
+    text: null
+  }
+})
+export const lightTheme = createTheme(vars, {
+  color: {
+    brand: 'blue',
+    text: 'black'
+  }
+})"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
+
+        // Check that themes were collected
+        assert!(
+            !result.themes.is_empty(),
+            "Expected themes to be collected, got empty. Themes: {:?}",
+            result.themes
+        );
+        assert!(
+            result.themes.contains_key("lightTheme"),
+            "Expected lightTheme in themes: {:?}",
+            result.themes.keys().collect::<Vec<_>>()
+        );
+
+        // Check CSS vars
+        let theme_entry = &result.themes["lightTheme"];
+        assert!(
+            !theme_entry.css_vars.is_empty(),
+            "Expected CSS vars in theme: {:?}",
+            theme_entry
+        );
+
+        // Check that CSS vars are correct
+        let css_vars: Vec<_> = theme_entry.css_vars.iter().collect();
+        assert!(
+            css_vars
+                .iter()
+                .any(|(name, val)| name == "--color-brand" && val == "blue"),
+            "Expected --color-brand: blue in {:?}",
+            css_vars
+        );
+    }
 }

From ce81fec91d0e889d3f06625116071f79ece53e9c Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 00:58:37 +0900
Subject: [PATCH 13/31] Implement layer

---
 libs/css/src/style_selector.rs                |   2 +
 .../src/extract_style/extract_static_style.rs |  22 +++
 .../extract_global_style_from_expression.rs   |  62 +++++--
 libs/extractor/src/lib.rs                     |   3 +
 ...ractor__tests__apply_var_typography-4.snap |   1 +
 ...xtractor__tests__at_rules_at_prefix-2.snap |   1 +
 ...xtractor__tests__at_rules_at_prefix-3.snap |   1 +
 .../extractor__tests__at_rules_at_prefix.snap |   1 +
 ...__tests__at_rules_underscore_prefix-2.snap |   1 +
 ...__tests__at_rules_underscore_prefix-3.snap |   1 +
 ...__tests__at_rules_underscore_prefix-4.snap |   1 +
 ...or__tests__at_rules_underscore_prefix.snap |   1 +
 ...tor__tests__avoid_same_name_component.snap |   1 +
 .../extractor__tests__backtick_prop.snap      |   1 +
 .../extractor__tests__component_in_func.snap  |   5 +
 .../extractor__tests__conditional_styles.snap |   2 +
 ...tests__conditional_with_both_branches.snap |   4 +
 .../extractor__tests__convert_tag-13.snap     |   2 +
 .../extractor__tests__convert_tag-14.snap     |   2 +
 .../extractor__tests__convert_tag-15.snap     |   2 +
 .../extractor__tests__convert_tag-16.snap     |   2 +
 .../extractor__tests__convert_tag-17.snap     |   2 +
 .../extractor__tests__convert_tag-18.snap     |   2 +
 .../extractor__tests__convert_tag-19.snap     |   2 +
 .../extractor__tests__convert_tag-20.snap     |   1 +
 .../extractor__tests__convert_tag-21.snap     |   1 +
 .../extractor__tests__convert_tag-7.snap      |   1 +
 ..._css_props_destructuring_assignment-2.snap |   5 +
 ...s__css_props_destructuring_assignment.snap |   3 +
 ...tor__tests__css_variable_reassignment.snap |   1 +
 .../extractor__tests__custom_selector-2.snap  |   1 +
 .../extractor__tests__custom_selector-3.snap  |   1 +
 .../extractor__tests__custom_selector.snap    |   1 +
 ...xtractor__tests__default_import_usage.snap |   1 +
 ...tests__dot_notation_theme_variables-2.snap |   2 +
 ...tests__dot_notation_theme_variables-3.snap |   1 +
 ...tests__dot_notation_theme_variables-4.snap |   1 +
 ...__tests__dot_notation_theme_variables.snap |   1 +
 ...tractor__tests__duplicate_style_props.snap |   1 +
 ...ctor__tests__dynamic_class_name_merge.snap |   1 +
 ...r__tests__extract_advenced_selector-2.snap |   1 +
 ...r__tests__extract_advenced_selector-4.snap |   1 +
 ...r__tests__extract_advenced_selector-5.snap |   1 +
 ...r__tests__extract_advenced_selector-6.snap |   1 +
 ...r__tests__extract_advenced_selector-7.snap |   2 +
 ...r__tests__extract_advenced_selector-8.snap |   1 +
 ...tor__tests__extract_advenced_selector.snap |   1 +
 ...ts__extract_class_name_from_component.snap |   4 +
 ...tract_compound_responsive_style_props.snap |   1 +
 ...tests__extract_conditional_selector-2.snap |   2 +
 ...tests__extract_conditional_selector-4.snap |   4 +
 ...__tests__extract_conditional_selector.snap |   2 +
 ...s__extract_conditional_style_props-11.snap |   1 +
 ...ts__extract_conditional_style_props-3.snap |   1 +
 ...ts__extract_conditional_style_props-5.snap |   1 +
 ...ts__extract_conditional_style_props-6.snap |   1 +
 ...ests__extract_conditional_style_props.snap |   2 +
 ...itional_style_props_with_class_name-2.snap |   3 +
 ...tract_dynamic_style_props_with_type-3.snap |   1 +
 ..._tests__extract_enum_style_property-3.snap |   4 +
 ..._tests__extract_enum_style_property-4.snap |   5 +
 ..._tests__extract_enum_style_property-5.snap |   4 +
 ..._tests__extract_enum_style_property-6.snap |  10 ++
 ...r__tests__extract_enum_style_property.snap |   2 +
 ...tractor__tests__extract_global_css-10.snap |   2 +
 ...xtractor__tests__extract_global_css-2.snap |   1 +
 ...xtractor__tests__extract_global_css-3.snap |   1 +
 ...xtractor__tests__extract_global_css-4.snap |   1 +
 ...xtractor__tests__extract_global_css-5.snap |   1 +
 ...xtractor__tests__extract_global_css-6.snap |   1 +
 ...xtractor__tests__extract_global_css-7.snap |   1 +
 ...xtractor__tests__extract_global_css-9.snap |   1 +
 .../extractor__tests__extract_global_css.snap |   1 +
 ...s__extract_global_css_with_selector-2.snap |   8 +
 ...s__extract_global_css_with_selector-3.snap |   8 +
 ...s__extract_global_css_with_selector-4.snap |  12 ++
 ...sts__extract_global_css_with_selector.snap |   4 +
 ...ract_global_css_with_template_literal.snap |   1 +
 ..._extract_just_tsx_in_multiple_files-2.snap |   2 +
 ..._extract_just_tsx_in_multiple_files-3.snap |   2 +
 ..._extract_just_tsx_in_multiple_files-4.snap |   2 +
 ...s__extract_just_tsx_in_multiple_files.snap |   2 +
 ...extractor__tests__extract_keyframs-10.snap |   4 +
 .../extractor__tests__extract_keyframs-2.snap |   3 +
 .../extractor__tests__extract_keyframs-3.snap |   3 +
 .../extractor__tests__extract_keyframs-4.snap |   3 +
 .../extractor__tests__extract_keyframs-5.snap |   3 +
 .../extractor__tests__extract_keyframs-6.snap |   3 +
 .../extractor__tests__extract_keyframs-7.snap |   3 +
 .../extractor__tests__extract_keyframs-8.snap |   3 +
 .../extractor__tests__extract_keyframs-9.snap |   9 ++
 .../extractor__tests__extract_keyframs.snap   |   2 +
 ...or__tests__extract_keyframs_literal-2.snap |   4 +
 ...ctor__tests__extract_keyframs_literal.snap |   2 +
 ...ractor__tests__extract_logical_case-2.snap |   1 +
 ...ractor__tests__extract_logical_case-3.snap |   1 +
 ...ractor__tests__extract_logical_case-4.snap |   1 +
 ...xtractor__tests__extract_logical_case.snap |   1 +
 ...or__tests__extract_nested_selector-10.snap |   2 +
 ...or__tests__extract_nested_selector-11.snap |   2 +
 ...tor__tests__extract_nested_selector-2.snap |   2 +
 ...tor__tests__extract_nested_selector-3.snap |   3 +
 ...tor__tests__extract_nested_selector-4.snap |   1 +
 ...tor__tests__extract_nested_selector-5.snap |   1 +
 ...tor__tests__extract_nested_selector-6.snap |   1 +
 ...tor__tests__extract_nested_selector-7.snap |   2 +
 ...tor__tests__extract_nested_selector-8.snap |   2 +
 ...tor__tests__extract_nested_selector-9.snap |   1 +
 ...actor__tests__extract_nested_selector.snap |   1 +
 ..._responsive_conditional_style_props-2.snap |   3 +
 ..._responsive_conditional_style_props-3.snap |   1 +
 ..._responsive_conditional_style_props-4.snap |   2 +
 ..._responsive_conditional_style_props-5.snap |   2 +
 ..._responsive_conditional_style_props-6.snap |   5 +
 ..._responsive_conditional_style_props-7.snap |   1 +
 ..._responsive_conditional_style_props-8.snap |   2 +
 ...ct_responsive_conditional_style_props.snap |   2 +
 ...itional_style_props_with_class_name-2.snap |   1 +
 ...nditional_style_props_with_class_name.snap |   3 +
 ...sts__extract_responsive_style_props-2.snap |   3 +
 ...tests__extract_responsive_style_props.snap |   3 +
 ..._same_value_conditional_style_props-2.snap |   1 +
 ..._same_value_conditional_style_props-3.snap |   1 +
 ..._same_value_conditional_style_props-4.snap |   1 +
 ..._same_value_conditional_style_props-5.snap |   1 +
 ..._same_value_conditional_style_props-6.snap |   1 +
 ...ct_same_value_conditional_style_props.snap |   1 +
 ...extractor__tests__extract_selector-10.snap |   2 +
 ...extractor__tests__extract_selector-11.snap |   2 +
 ...extractor__tests__extract_selector-12.snap |   1 +
 ...extractor__tests__extract_selector-13.snap |   1 +
 ...extractor__tests__extract_selector-14.snap |   2 +
 ...extractor__tests__extract_selector-15.snap |   2 +
 ...extractor__tests__extract_selector-16.snap |   4 +
 .../extractor__tests__extract_selector-2.snap |   7 +
 .../extractor__tests__extract_selector-3.snap |   2 +
 .../extractor__tests__extract_selector-4.snap |   2 +
 .../extractor__tests__extract_selector-5.snap |   2 +
 .../extractor__tests__extract_selector-6.snap |   4 +
 .../extractor__tests__extract_selector-7.snap |   4 +
 .../extractor__tests__extract_selector-8.snap |   2 +
 .../extractor__tests__extract_selector-9.snap |   6 +
 .../extractor__tests__extract_selector.snap   |   2 +
 ...ests__extract_selector_with_literal-2.snap |   1 +
 ..._tests__extract_selector_with_literal.snap |   1 +
 ...s__extract_selector_with_responsive-2.snap |   4 +
 ...s__extract_selector_with_responsive-3.snap |   4 +
 ...sts__extract_selector_with_responsive.snap |   4 +
 ...xtract_static_css_class_name_props-10.snap |   6 +
 ...xtract_static_css_class_name_props-14.snap |   1 +
 ...xtract_static_css_class_name_props-16.snap |   1 +
 ...extract_static_css_class_name_props-2.snap |   1 +
 ...extract_static_css_class_name_props-3.snap |   2 +
 ...extract_static_css_class_name_props-4.snap |   1 +
 ...extract_static_css_class_name_props-5.snap |   2 +
 ...extract_static_css_class_name_props-6.snap |   2 +
 ...extract_static_css_class_name_props-9.snap |   2 +
 ...__extract_static_css_class_name_props.snap |   1 +
 ...extract_static_css_with_media_query-2.snap |   2 +
 ...extract_static_css_with_media_query-3.snap |   1 +
 ...__extract_static_css_with_media_query.snap |   1 +
 ...ests__extract_static_css_with_theme-2.snap |   1 +
 ...ests__extract_static_css_with_theme-3.snap |   1 +
 ..._tests__extract_static_css_with_theme.snap |   1 +
 ...tractor__tests__extract_style_props-2.snap |   2 +
 ...tractor__tests__extract_style_props-3.snap |   2 +
 ...tractor__tests__extract_style_props-4.snap |   2 +
 ...tractor__tests__extract_style_props-5.snap |   3 +
 ...tractor__tests__extract_style_props-6.snap |   2 +
 ...extractor__tests__extract_style_props.snap |   2 +
 ...extract_style_props_with_class_name-2.snap |   2 +
 ...extract_style_props_with_class_name-3.snap |   2 +
 ...extract_style_props_with_class_name-4.snap |   2 +
 ...extract_style_props_with_class_name-5.snap |   2 +
 ...extract_style_props_with_class_name-6.snap |   2 +
 ...extract_style_props_with_class_name-7.snap |   2 +
 ...extract_style_props_with_class_name-8.snap |   3 +
 ...extract_style_props_with_class_name-9.snap |   1 +
 ...__extract_style_props_with_class_name.snap |   2 +
 ...tract_style_props_with_default_import.snap |   3 +
 ...act_style_props_with_namespace_import.snap |   3 +
 ...sts__extract_style_props_with_var_css.snap |   1 +
 ...ctor__tests__extract_wrong_global_css.snap |   1 +
 ...ractor__tests__extract_wrong_keyframs.snap |   3 +
 ...xtract_wrong_responsive_style_props-2.snap |   1 +
 ...tractor__tests__global_css_at_rules-2.snap |   1 +
 ...tractor__tests__global_css_at_rules-3.snap |   1 +
 ...tractor__tests__global_css_at_rules-4.snap |   4 +
 ...extractor__tests__global_css_at_rules.snap |   1 +
 ...extractor__tests__global_css_function.snap |   2 +
 ...ests__global_css_with_pseudo_selector.snap |   1 +
 ...xtractor__tests__group_selector_props.snap |   1 +
 ...xtractor__tests__ignore_special_props.snap |   1 +
 .../extractor__tests__import_main_css.snap    |   2 +
 .../extractor__tests__keyframes_function.snap |   2 +
 .../extractor__tests__maintain_value.snap     |  10 ++
 ...r__tests__mask_properties_with_korean.snap |   7 +
 ...actor__tests__media_query_selectors-2.snap |   1 +
 ...actor__tests__media_query_selectors-3.snap |   1 +
 ...actor__tests__media_query_selectors-4.snap |   1 +
 ...actor__tests__media_query_selectors-5.snap |   3 +
 ...tractor__tests__media_query_selectors.snap |   2 +
 ...xtractor__tests__namespace_import_css.snap |   1 +
 ...ractor__tests__namespace_import_usage.snap |   1 +
 .../extractor__tests__negative_props-5.snap   |   1 +
 .../extractor__tests__negative_props-6.snap   |   1 +
 .../extractor__tests__negative_props-7.snap   |   3 +
 .../extractor__tests__negative_props.snap     |   1 +
 .../extractor__tests__nested_conditional.snap |   3 +
 .../extractor__tests__nested_theme_props.snap |   3 +
 ...actor__tests__optimize_aspect_ratio-2.snap |   2 +
 ...actor__tests__optimize_aspect_ratio-3.snap |   2 +
 ...tractor__tests__optimize_aspect_ratio.snap |   2 +
 .../extractor__tests__optimize_func-2.snap    |   1 +
 .../extractor__tests__optimize_func-3.snap    |   1 +
 .../extractor__tests__optimize_func-4.snap    |   1 +
 .../extractor__tests__optimize_func-5.snap    |   1 +
 .../extractor__tests__optimize_func-6.snap    |   1 +
 .../extractor__tests__optimize_func-7.snap    |   1 +
 .../extractor__tests__optimize_func.snap      |   1 +
 ...ctor__tests__optimize_multi_css_value.snap |   1 +
 ...rops_direct_array_responsive_select-2.snap |   7 +
 ..._props_direct_array_responsive_select.snap |   7 +
 ...r__tests__props_direct_array_select-2.snap |   3 +
 ...r__tests__props_direct_array_select-3.snap |   3 +
 ...r__tests__props_direct_array_select-4.snap |   2 +
 ...r__tests__props_direct_array_select-5.snap |   6 +
 ...r__tests__props_direct_array_select-6.snap |   1 +
 ...r__tests__props_direct_array_select-7.snap |   3 +
 ...tor__tests__props_direct_array_select.snap |   2 +
 ...props_direct_hybrid_responsive_select.snap |   3 +
 ...ops_direct_object_responsive_select-2.snap |   7 +
 ...props_direct_object_responsive_select.snap |   7 +
 ...__tests__props_direct_object_select-2.snap |   2 +
 ...__tests__props_direct_object_select-3.snap |   3 +
 ...__tests__props_direct_object_select-4.snap |   3 +
 ...or__tests__props_direct_object_select.snap |   2 +
 ...ct_variable_array_responsive_select-2.snap |   1 +
 ...rect_variable_array_responsive_select.snap |   1 +
 ...ect_variable_object_responsive_select.snap |   1 +
 ...__props_direct_variable_object_select.snap |   3 +
 .../extractor__tests__props_direct_wrong.snap |   1 +
 ...ractor__tests__props_multi_expression.snap |  14 ++
 .../extractor__tests__props_prop.snap         |   1 +
 ...ts__props_wrong_direct_array_select-2.snap |   1 +
 ...ts__props_wrong_direct_array_select-3.snap |   1 +
 ...ts__props_wrong_direct_array_select-4.snap |   1 +
 ...ests__props_wrong_direct_array_select.snap |   1 +
 ...s__props_wrong_direct_object_select-2.snap |   1 +
 ...s__props_wrong_direct_object_select-3.snap |   1 +
 ...s__props_wrong_direct_object_select-4.snap |   1 +
 .../extractor__tests__remove_semicolon-2.snap |   1 +
 .../extractor__tests__remove_semicolon-3.snap |   1 +
 .../extractor__tests__remove_semicolon.snap   |   1 +
 ...actor__tests__responsive_array_styles.snap |   6 +
 .../extractor__tests__rest_props-2.snap       |   4 +
 .../extractor__tests__rest_props.snap         |   2 +
 .../extractor__tests__spread_props.snap       |   1 +
 .../extractor__tests__style_order-2.snap      |   5 +
 .../extractor__tests__style_order-3.snap      |   1 +
 .../extractor__tests__style_order-4.snap      |   1 +
 .../extractor__tests__style_order-5.snap      |   1 +
 .../extractor__tests__style_order-6.snap      |   5 +
 .../extractor__tests__style_order-7.snap      |   2 +
 .../extractor__tests__style_order-8.snap      |   1 +
 .../extractor__tests__style_order.snap        |   4 +
 .../extractor__tests__style_order2-2.snap     |   5 +
 .../extractor__tests__style_order2-3.snap     |   5 +
 .../extractor__tests__style_order2.snap       |   5 +
 .../extractor__tests__style_order_prop.snap   |   1 +
 .../extractor__tests__style_vars_prop.snap    |   1 +
 .../extractor__tests__styled-10.snap          |   2 +
 .../extractor__tests__styled-11.snap          |   1 +
 .../snapshots/extractor__tests__styled-2.snap |   2 +
 .../snapshots/extractor__tests__styled-3.snap |   1 +
 .../snapshots/extractor__tests__styled-4.snap |   1 +
 .../snapshots/extractor__tests__styled-5.snap |   1 +
 .../snapshots/extractor__tests__styled-6.snap |   2 +
 .../snapshots/extractor__tests__styled-7.snap |   3 +
 .../snapshots/extractor__tests__styled-8.snap |   4 +
 .../snapshots/extractor__tests__styled-9.snap |   1 +
 .../snapshots/extractor__tests__styled.snap   |   2 +
 ...ractor__tests__styled_with_variable-2.snap |   2 +
 ...ractor__tests__styled_with_variable-3.snap |   2 +
 ...ractor__tests__styled_with_variable-4.snap |   2 +
 ...ractor__tests__styled_with_variable-5.snap |   2 +
 ...xtractor__tests__styled_with_variable.snap |   2 +
 ...ts__styled_with_variable_like_emotion.snap |   1 +
 ...yled_with_variable_like_emotion_props.snap |   1 +
 ...actor__tests__support_transpile_cjs-2.snap |   5 +
 ...actor__tests__support_transpile_cjs-3.snap |   5 +
 ...actor__tests__support_transpile_cjs-4.snap |   5 +
 ...actor__tests__support_transpile_cjs-5.snap |   5 +
 ...actor__tests__support_transpile_cjs-6.snap |   5 +
 ...actor__tests__support_transpile_cjs-7.snap |   2 +
 ...tractor__tests__support_transpile_cjs.snap |   5 +
 ...actor__tests__support_transpile_mjs-2.snap |   5 +
 ...actor__tests__support_transpile_mjs-3.snap |   1 +
 ...tractor__tests__support_transpile_mjs.snap |   5 +
 ...ctor__tests__template_literal_props-2.snap |   1 +
 ...ctor__tests__template_literal_props-3.snap |   1 +
 ...ctor__tests__template_literal_props-4.snap |   1 +
 ...ctor__tests__template_literal_props-6.snap |   2 +
 ...ractor__tests__template_literal_props.snap |   1 +
 ...tests__ternary_operator_in_selector-2.snap |   2 +
 ...tests__ternary_operator_in_selector-3.snap |   5 +
 ...__tests__ternary_operator_in_selector.snap |   2 +
 .../extractor__tests__theme_props.snap        |   2 +
 .../extractor__tests__theme_selector-2.snap   |   2 +
 .../extractor__tests__theme_selector-3.snap   |   4 +
 .../extractor__tests__theme_selector.snap     |   1 +
 ...r__tests__vanilla_extract_composition.snap |   6 +
 ...tor__tests__vanilla_extract_container.snap |   3 +
 ...__tests__vanilla_extract_create_var-2.snap |   1 +
 ...or__tests__vanilla_extract_create_var.snap |   2 +
 ...r__tests__vanilla_extract_font_face-2.snap |   1 +
 ...tor__tests__vanilla_extract_font_face.snap |   1 +
 ...__tests__vanilla_extract_global_theme.snap |   4 +
 ...tractor__tests__vanilla_extract_layer.snap |  22 +--
 ..._tests__vanilla_extract_media_queries.snap |   5 +
 ...r__tests__vanilla_extract_selectors-2.snap |   3 +
 ...tor__tests__vanilla_extract_selectors.snap |   6 +
 ...tests__vanilla_extract_style_css_js-2.snap |   2 +
 ...__tests__vanilla_extract_style_css_js.snap |   2 +
 ...__tests__vanilla_extract_style_css_ts.snap |   2 +
 ...sts__vanilla_extract_style_variants-2.snap |   6 +
 ...tests__vanilla_extract_style_variants.snap |   3 +
 ...ctor__tests__vanilla_extract_supports.snap |   2 +
 ...actor__tests__vanilla_extract_theme-2.snap |  14 +-
 ...tractor__tests__vanilla_extract_theme.snap |  19 ++-
 ..._tests__vanilla_extract_with_computed.snap |   2 +
 ...a_extract_with_keyframes_and_global-2.snap |   2 +
 ...lla_extract_with_keyframes_and_global.snap |   3 +
 ..._vanilla_extract_with_pseudo_selector.snap |   2 +
 ...vanilla_extract_with_responsive_array.snap |   3 +
 ...r__tests__vanilla_extract_with_spread.snap |   3 +
 ..._tests__vanilla_extract_with_variable.snap |   2 +
 .../extractor__tests__with_prefix.snap        |   4 +
 libs/sheet/src/lib.rs                         | 153 +++++++++++++++---
 .../snapshots/sheet__tests__deserialize.snap  |   1 +
 340 files changed, 1002 insertions(+), 68 deletions(-)

diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index 0dddd22e..3ece0af4 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -18,6 +18,7 @@ pub enum AtRuleKind {
     Media,
     Supports,
     Container,
+    Layer,
 }
 
 impl Display for AtRuleKind {
@@ -26,6 +27,7 @@ impl Display for AtRuleKind {
             AtRuleKind::Media => write!(f, "media"),
             AtRuleKind::Supports => write!(f, "supports"),
             AtRuleKind::Container => write!(f, "container"),
+            AtRuleKind::Layer => write!(f, "layer"),
         }
     }
 }
diff --git a/libs/extractor/src/extract_style/extract_static_style.rs b/libs/extractor/src/extract_style/extract_static_style.rs
index 73d2f119..dd47f982 100644
--- a/libs/extractor/src/extract_style/extract_static_style.rs
+++ b/libs/extractor/src/extract_style/extract_static_style.rs
@@ -24,6 +24,8 @@ pub struct ExtractStaticStyle {
     pub selector: Option<StyleSelector>,
     /// None is inf, 0 is first, 1 is second, etc
     pub style_order: Option<u8>,
+    /// CSS layer name (from vanilla-extract layer())
+    pub layer: Option<String>,
 }
 
 impl ExtractStaticStyle {
@@ -52,9 +54,23 @@ impl ExtractStaticStyle {
             level,
             selector: selector.map(optimize_selector),
             style_order: None,
+            layer: None,
         }
     }
 
+    /// create a new ExtractStaticStyle with layer
+    pub fn new_with_layer(
+        property: &str,
+        value: &str,
+        level: u8,
+        selector: Option<StyleSelector>,
+        layer: Option<String>,
+    ) -> Self {
+        let mut style = Self::new(property, value, level, selector);
+        style.layer = layer;
+        style
+    }
+
     pub fn new_basic(
         property: &str,
         value: &str,
@@ -71,9 +87,15 @@ impl ExtractStaticStyle {
             level,
             selector,
             style_order: Some(0),
+            layer: None,
         }
     }
 
+    /// Get the layer name
+    pub fn layer(&self) -> Option<&str> {
+        self.layer.as_deref()
+    }
+
     pub fn property(&self) -> &str {
         self.property.as_str()
     }
diff --git a/libs/extractor/src/extractor/extract_global_style_from_expression.rs b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
index 6c577aa7..62ee5533 100644
--- a/libs/extractor/src/extractor/extract_global_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
@@ -147,23 +147,53 @@ pub fn extract_global_style_from_expression<'a>(
                                 }
                             }
                         } else {
-                            styles.extend(
-                                extract_style_from_expression(
-                                    ast_builder,
-                                    None,
-                                    &mut o.value,
-                                    0,
-                                    &Some(StyleSelector::Global(
-                                        if let Some(name) = name.strip_prefix("_") {
-                                            StyleSelector::from(name).to_string().replace("&", "*")
-                                        } else {
-                                            name.to_string()
-                                        },
-                                        file.to_string(),
-                                    )),
-                                )
-                                .styles,
+                            // Handle @layer property in globalStyle
+                            // Extract the layer name if present in the style object
+                            let mut layer_name: Option<String> = None;
+                            if let Expression::ObjectExpression(style_obj) = &o.value {
+                                for style_prop in style_obj.properties.iter() {
+                                    if let ObjectPropertyKind::ObjectProperty(sp) = style_prop
+                                        && let Some(prop_name) = get_string_by_property_key(&sp.key)
+                                        && prop_name == "@layer"
+                                    {
+                                        layer_name = get_string_by_literal_expression(&sp.value);
+                                        break;
+                                    }
+                                }
+                            }
+
+                            let extracted = extract_style_from_expression(
+                                ast_builder,
+                                None,
+                                &mut o.value,
+                                0,
+                                &Some(StyleSelector::Global(
+                                    if let Some(name) = name.strip_prefix("_") {
+                                        StyleSelector::from(name).to_string().replace("&", "*")
+                                    } else {
+                                        name.to_string()
+                                    },
+                                    file.to_string(),
+                                )),
                             );
+
+                            // Filter out @layer property from styles and set layer on remaining styles
+                            for mut style in extracted.styles {
+                                if let ExtractStyleProp::Static(ExtractStyleValue::Static(
+                                    ref mut st,
+                                )) = style
+                                {
+                                    // Skip @layer property - it's not a CSS property
+                                    if st.property() == "@layer" {
+                                        continue;
+                                    }
+                                    // Set layer on other styles
+                                    if let Some(ref layer) = layer_name {
+                                        st.layer = Some(layer.clone());
+                                    }
+                                }
+                                styles.push(style);
+                            }
                         }
                     }
                 }
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 06ba27d4..d23ab1f8 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -9877,6 +9877,7 @@ export const body = style({
     #[serial]
     fn test_vanilla_extract_theme() {
         reset_class_map();
+        reset_file_map();
         // createTheme - define theme with variables
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9909,6 +9910,7 @@ export const box = style({
         ));
 
         reset_class_map();
+        reset_file_map();
         // createThemeContract - type-safe theme contract
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9948,6 +9950,7 @@ export const darkTheme = createTheme(vars, {
     #[serial]
     fn test_vanilla_extract_layer() {
         reset_class_map();
+        reset_file_map();
         // layer - CSS cascade layers
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
diff --git a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
index ae0e5ff9..0ec71037 100644
--- a/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__apply_var_typography-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
index 5db8c825..64b06f5e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-2.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
index bf57c692..76e04e7e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix-3.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
index e370b3c7..4955f592 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_at_prefix.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
index d441a6a8..6838840f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-2.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
index c635b562..c8acba68 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-3.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
index f5008b91..46797c5f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix-4.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
index 9d3bb36d..24ed3c83 100644
--- a/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__at_rules_underscore_prefix.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
index 1cdbadae..d3d2d6ac 100644
--- a/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
index 96d1931e..771cdc4f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
index 305c6df2..6ddfcacd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__component_in_func.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 4,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap b/libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap
index 440fdab5..61943647 100644
--- a/libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__conditional_styles.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap b/libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap
index 79c66e9d..c14bcabc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__conditional_with_both_branches.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap
index 8cd8d0ca..7d756d57 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-13.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap
index e5af20a4..9b968790 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-14.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap
index 4fe436bc..225d7870 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-15.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap
index ddea7c49..9a9efcd8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-16.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap
index 00326863..f9f24e00 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-17.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap
index 37729f43..acf55323 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-18.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap
index 37729f43..acf55323 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-19.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap
index 3867914d..ff7b172a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-20.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap
index c6cd67af..9edff711 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-21.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap b/libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap
index 7520a855..3b0e216d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__convert_tag-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
index 3c781aaa..100fee80 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
index f0177b1d..0da80133 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap
index e85717ad..f90e84c5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__css_variable_reassignment.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
index 8aa0d84f..1ca0668b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
index 6ddb9588..be5f4c7b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
index cbed4818..e6c2f8ee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__custom_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap b/libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap
index 6464dcb8..2627a65b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__default_import_usage.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
index c284a7c0..d7007b3d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
index 89adcef8..983402e9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
index 7f73c5f6..7057ea9f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap
index f13e9ac6..839a9df5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__dot_notation_theme_variables.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
index 4da8801d..05f28e65 100644
--- a/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap b/libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap
index aaf38676..d3e8aa2c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__dynamic_class_name_merge.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap
index f7c7d383..6548d747 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap
index 0b7b4c40..41b04c59 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-4.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap
index 87419994..1fa1386c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-5.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap
index 75dbf5ce..de1bd84a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-6.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap
index 4fcb372e..5f08887a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-7.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap
index f9e69e47..bfbccd45 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector-8.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap
index 67ab2c4d..dd9f0ebd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_advenced_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
index cb925eaf..dc007e4c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -42,6 +45,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
index f8fcf0cb..4e524f26 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
index c34b3156..cff4cacd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
index 72d5041a..9d3e7868 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector-4.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
index 24d82285..f4d3f9f2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap
index 8fff99cf..72f488ec 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-11.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
index b9e29851..9cedfe23 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
index 67542fa5..bf517550 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
index 28ff1f25..3c4e2dad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
index 371ba317..b96135f2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
index 958f4ff0..f006fc2a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_conditional_style_props_with_class_name-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
index e2d5be42..369d6b4d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_dynamic_style_props_with_type-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap
index 0163aca1..fb9351c1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap
index 115f3d38..b79144fe 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap
index d7790f99..f9e54cf5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap
index 8d8014e6..b03da3d7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -65,6 +71,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -74,6 +81,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -83,6 +91,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -92,6 +101,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap
index d87d3470..d867c200 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_enum_style_property.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
index ebd5498c..8e8e1c4a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-10.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
index 23d8f2fa..e5416ab4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-2.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
index 8e389a2d..25b8ca34 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-3.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
index 6ce50048..8280beb4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-4.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
index e0db4ccf..df6f4adb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-5.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
index 725f4412..6aa19651 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-6.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
index 6709991b..41b49af8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-7.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
index 1736960f..706947d7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css-9.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
index 59b494f9..5cfb9881 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
index c7baa8be..d144d445 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-2.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +52,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -66,6 +69,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -82,6 +86,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -98,6 +103,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -114,6 +120,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -130,6 +137,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
index c7baa8be..d144d445 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-3.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +52,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -66,6 +69,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -82,6 +86,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -98,6 +103,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -114,6 +120,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -130,6 +137,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
index f5474711..3a8cdf0f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector-4.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +52,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -66,6 +69,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -82,6 +86,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -98,6 +103,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -114,6 +120,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -130,6 +137,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -146,6 +154,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -162,6 +171,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -178,6 +188,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -194,6 +205,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
index 56b25aee..ef647ac3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_selector.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +52,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -66,6 +69,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
index 6f24c0eb..2914629a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_global_css_with_template_literal.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
index e316a3f8..9a5a36f3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
index bc3c3ce7..0ae4ab4e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
index 95377a9c..92fd3e0b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
index 34220c2d..2f6abfc9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_just_tsx_in_multiple_files.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
index f0e001d8..b33ab78d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-10.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                         ExtractStaticStyle {
                             property: "opacity",
@@ -21,6 +22,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -30,6 +32,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -39,6 +42,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
index 4a47d23a..e8eb2daa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-2.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
index b6aa7943..72a334d6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-3.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
index 29260a59..d95079a7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-4.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
index 02ef511e..8d60a224 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-5.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
index 5a4853f3..5e898208 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-6.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
index cafaf847..32d9bdd1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-7.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
index 276a0983..653f251b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-8.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
index 214bf046..c838cd6e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs-9.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
@@ -47,6 +50,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -56,6 +60,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -65,6 +70,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
@@ -80,6 +86,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -89,6 +96,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "50%": [
@@ -98,6 +106,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
index 2084f266..7c50ae17 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "to": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
index 0a7f6684..2c8d9f24 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal-2.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                         ExtractStaticStyle {
                             property: "color",
@@ -21,6 +22,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "100%": [
@@ -30,6 +32,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                         ExtractStaticStyle {
                             property: "color",
@@ -37,6 +40,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
index 5d739fa7..a2a2d621 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_keyframs_literal.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "to": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
index 9a2a2006..4a599dc1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
index 1e2ed115..a5abd435 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
index f374e006..95cdf98b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
index fce00360..94afa099 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
index 7c4889a1..bd104643 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-10.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
index b1780baf..f7f49ffb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-11.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
index 5d2604ef..a20ec2d4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
index 49754ace..8136c041 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
index fa91e018..fcdc5830 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-4.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
index bff3c03a..fca96046 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-5.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
index bb0e71ea..138a6bdf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-6.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
index d1b31650..185888bd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-7.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
index 555f570e..e146baaa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-8.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
index a60e8df3..fec667f1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector-9.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
index 4beda642..1cadb3a6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_nested_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
index c047f7a1..70fc747f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
index efee8272..b2175a51 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
index 5aadc27d..a78b6264 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
index 9ff2972a..042b3502 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
index 035786b3..b3c17038 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
index 106fdf04..8cafaa99 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
index e57263ab..a241846d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props-8.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
index 03406fb9..079cd1c6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
index f6967f43..079b55f0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
index 0adb6bdf..c9197f7d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_conditional_style_props_with_class_name.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
index 17ce9ef5..6b76b1e6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
index f0c610af..495f7e57 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_responsive_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
index 4f808466..5fbaf22c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
index 156d663f..b790de3a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
index 0385bb4c..681d43ce 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
index 5c2ece76..85fd49fb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
index 9c8dba14..7c6784b9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
index 4875c22c..860d92b0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_same_value_conditional_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap
index 9d73a6cc..62e4318a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-10.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap
index 79249216..3121b0c0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-11.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap
index 2cb4a6c7..0b28812f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-12.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap
index 67f1a251..8bb04b34 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-13.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
index 0cf0195f..2f76a954 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-14.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
index 08cbd693..5e62a982 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-15.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
index a0ac858a..e74c8add 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-16.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
index 767d75e1..91ed4fbf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -39,6 +41,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -52,6 +55,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -63,6 +67,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -74,6 +79,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -87,6 +93,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
index 3ea380c1..f6a72f6a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
index f54f5ca5..5bdb655f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-4.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
index caf4e049..7a1b9683 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-5.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
index 2a1fea5d..2b6887ae 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-6.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
index a15840aa..255b76d8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-7.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
index fb8a1974..b84465ed 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-8.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
index 4ad742bb..80905f7a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector-9.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +71,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -80,6 +85,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
index 134b2160..1dec81e3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
index 7b92cd58..be8db47a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
index 31d7ca06..bf7be2c0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_literal.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
index bda50fcc..0bc2ebfd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
index 2714b305..1d72bba3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
index 73e85e47..3883550c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_selector_with_responsive.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
index 45f51835..b0e26b2b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-10.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +71,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -80,6 +85,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
index f7d1d6b4..29d5c174 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-14.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
index d43a2844..fccec3d8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-16.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
index f05759ba..80418b82 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
index 108d85ba..0abaf053 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
index 9f216d68..57a96746 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
index 04ca1f39..44cf482c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
index 6ccc9b6a..dc562d70 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
index 2fc0e451..4b8bcf7b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-9.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
index a2d44a5a..b2f07e10 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
index 86da1b52..fbecc316 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-2.snap
@@ -19,6 +19,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -36,6 +37,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
index ead2764b..36e10741 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query-3.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
index 9a47ff54..2077d8c2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_media_query.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
index 4eb9a1ba..6d74926e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
index 22d5428e..cdc744ed 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
index 651d3a8f..c48814ad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_with_theme.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
index 4b427ebc..ed8c3a89 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
index 41cc3780..305819ae 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
index 5fa03b86..a3398beb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
index 5f4ecc07..da5a8374 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-5.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
index e72f84d5..f1919eb8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props-6.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
index 2309807c..61c2a7e9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
index f8852f79..897bf5bb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
index a02a4b7e..e9334b61 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
index 7f7f222d..e65ea4f5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
index 15629abc..3575d539 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
index 1d5af36d..93a01d85 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
index 4fabccb8..a4cdbe2e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
index b32298c2..754c6f48 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -37,6 +39,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
index 83b81baa..eea9d4bd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
index b01411ad..28eefb54 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
index cdf1cb1e..7bfcc213 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_default_import.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
index d5a07731..4fa9b7fb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_namespace_import.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
index 9e4261cd..2085cbbd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_var_css.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap
index ae6f23bf..3610d104 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_global_css.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap
index b911c2f4..53644f20 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_keyframs.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "to": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "true": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
index d42c6379..84fd26ea 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_wrong_responsive_style_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
index 7a8285fc..5d0a57e4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-2.snap
@@ -21,6 +21,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
index e3df1c7c..b8b66f73 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-3.snap
@@ -21,6 +21,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
index f1927a5d..111d8b3a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules-4.snap
@@ -21,6 +21,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -37,6 +38,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +58,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -75,6 +78,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
index 9a5dfc1c..6344e3ca 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_at_rules.snap
@@ -21,6 +21,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_function.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_function.snap
index 4753ef46..75314812 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_function.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_function.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
index b3efee99..fc538fa8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_with_pseudo_selector.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
index b8004ff1..19213712 100644
--- a/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__group_selector_props.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
index ad243f22..bed553eb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_main_css.snap b/libs/extractor/src/snapshots/extractor__tests__import_main_css.snap
index cf7f92db..98926db3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_main_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_main_css.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap b/libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap
index 932b36fb..0bc56183 100644
--- a/libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__keyframes_function.snap
@@ -14,6 +14,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "to": [
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
index 37a48838..a936a635 100644
--- a/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__maintain_value.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +63,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +73,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -76,6 +83,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -85,6 +93,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -94,6 +103,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap b/libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap
index 5f9b7dcd..4afd9322 100644
--- a/libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__mask_properties_with_korean.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -65,6 +71,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
index 0dab33c1..55c45fd8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-2.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
index 08f87560..65ff6056 100644
--- a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-3.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
index 18651d81..53fca335 100644
--- a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-4.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
index 7c01a6fa..d0dbe75a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors-5.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
index 0fd01868..b344f636 100644
--- a/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__media_query_selectors.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap b/libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap
index 27240873..1da163dd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__namespace_import_css.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap b/libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap
index 5f59c33a..82b90734 100644
--- a/libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__namespace_import_usage.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
index 093a8c89..fd2d9ded 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
index 6c1a825d..b57199e6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
index a296cc3d..622f9001 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
index 53d68028..77edbc20 100644
--- a/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__negative_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap b/libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap
index 8e4cfe31..4c9684aa 100644
--- a/libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__nested_conditional.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
index aa9d21ad..ea42e025 100644
--- a/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__nested_theme_props.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
index 6ed2919b..3c921841 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
index a1ed073d..3985003c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
index 6a47ac3f..8c5ad883 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_aspect_ratio.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
index 2a08e7e8..95b8950f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
index 0cb77801..b87e6a42 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
index 678d0c1e..3a19e2dc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
index 48d47f66..58b8917a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
index f736d81c..c81c79e0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
index 23b9b71f..c86a4eb5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
index 0799e61b..45b742c2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_func.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap b/libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap
index 323eee18..acb05c95 100644
--- a/libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
index d7e4215e..50245f83 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +63,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +73,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
index 1a1717e6..87cedd9d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_responsive_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +63,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +73,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
index b7922355..bf8214b5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
index a3f58886..1624e422 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
index 6edd02ed..98508b0c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
index 8f5418a1..e4860ee2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-5.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -51,6 +55,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -62,6 +67,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
index d741eab5..a23d80ad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-6.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
index 8ed547b0..e0765113 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select-7.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
index f9093e14..92e8bb44 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_array_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
index 8c9693a0..a5eda261 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_hybrid_responsive_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
index 1f40f7ff..f54861d4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +63,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +73,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
index 51511fee..c14d42b6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_responsive_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -49,6 +53,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +63,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -67,6 +73,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
index 8a44d426..0e48f9b7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
index d0fd2566..f66d8d2e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-3.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
index fc798277..a252da8b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
index fc8aae00..04e18634 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_object_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
index 438417ca..e3e6b929 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
index 5a58415f..df9f1843 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_array_responsive_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
index dca815df..3ba06f82 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_responsive_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
index 4f4f9aee..a487ba8f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_variable_object_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap b/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
index 48df5282..9c40cefb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_direct_wrong.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
index d741ed2f..328ee526 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_multi_expression.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -65,6 +71,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -74,6 +81,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -83,6 +91,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -92,6 +101,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -101,6 +111,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -110,6 +121,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -119,6 +131,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -128,6 +141,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_prop.snap b/libs/extractor/src/snapshots/extractor__tests__props_prop.snap
index b5660066..89bbf2ed 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_prop.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
index 204997e7..2268a607 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
index a49f63be..35542653 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-3.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
index be0d5809..4fd43d25 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select-4.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
index 0bc1a93e..a46c4a41 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_array_select.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
index a07a8afd..a28d1bab 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
index 6b2cb36e..eecb9840 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-3.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
index 780d58ec..dda072d1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__props_wrong_direct_object_select-4.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
index 706be8ad..50a12508 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
index abe9adc2..882410ee 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
index b7e78a72..58c5a8d6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__remove_semicolon.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap b/libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap
index 81b7eda6..e31c95b4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__responsive_array_styles.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 3,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
index 5f16b83e..fd7f2da4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -37,6 +39,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +53,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
index bf06ba7e..b6e6778a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__spread_props.snap b/libs/extractor/src/snapshots/extractor__tests__spread_props.snap
index fcbbade1..73bba2ca 100644
--- a/libs/extractor/src/snapshots/extractor__tests__spread_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__spread_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
index c3f7f770..159c6aa4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-2.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     10,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                 style_order: Some(
                     10,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -39,6 +41,7 @@ ToBTreeSet {
                 style_order: Some(
                     10,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +53,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -61,6 +65,7 @@ ToBTreeSet {
                 style_order: Some(
                     30,
                 ),
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
index dd17c083..1f17ca19 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-3.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     100,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
index 714e0c0d..6ad19c30 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
index b4557b1f..f86b1b7a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-5.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     30,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
index bc2c75c0..4eb33a71 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-6.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,6 +45,7 @@ ToBTreeSet {
                 style_order: Some(
                     100,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +61,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -69,6 +73,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
index 14e7eb0f..70f485e4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-7.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     17,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                 style_order: Some(
                     3,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap b/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
index d2c969e5..ed029a47 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order-8.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order.snap b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
index f0da0252..80f9a435 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +49,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +61,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
index 582862c2..9a6a7ff2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2-2.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,6 +45,7 @@ ToBTreeSet {
                 style_order: Some(
                     100,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +61,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -69,6 +73,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
index b4f758b8..c7cbc38f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2-3.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,6 +45,7 @@ ToBTreeSet {
                 style_order: Some(
                     100,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +61,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -69,6 +73,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order2.snap b/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
index 972ac8b2..42915fbe 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order2.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,6 +45,7 @@ ToBTreeSet {
                 style_order: Some(
                     100,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -58,6 +61,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -69,6 +73,7 @@ ToBTreeSet {
                 style_order: Some(
                     20,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap b/libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap
index 43f3ec81..06760e61 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_order_prop.snap
@@ -13,6 +13,7 @@ ToBTreeSet {
                 style_order: Some(
                     1,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap b/libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap
index f86323b2..9360e550 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_vars_prop.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-10.snap b/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
index d017d60e..85cf73c6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-11.snap b/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
index 8b2f7728..03fdfcfd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
index 26242318..ba2b5c8d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
index fb62f318..13b9d5d5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
index 964e76c8..0fb06a00 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-5.snap b/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
index 9cfe2825..676942e6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-6.snap b/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
index ae0060e7..53fdebe0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-7.snap b/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
index d12feeec..a2298ab8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -22,6 +23,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-8.snap b/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
index 4415c930..08caee07 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -31,6 +33,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -42,6 +45,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-9.snap b/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
index c83e781f..d531f326 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled.snap b/libs/extractor/src/snapshots/extractor__tests__styled.snap
index 2103dc1e..55b01da5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
index f5e69a79..689d3538 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
index 6aaa4e97..9942d2b3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
index 146bc483..198742bd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
index 61d7f417..ffcc930d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
index c266ec31..bacac4a7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
index ff8b8617..6fd17533 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
index 215c0c24..ba146ded 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Dynamic(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
index 6dac99ee..7cf4c3e0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
index 448d8be5..b5868f9c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
index 7302213d..7027f33c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap
index 9ed0b70d..13a19d98 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-5.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap
index 29f82ae9..9f8191e0 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-6.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap
index fa95c4ba..b4e0bf19 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs-7.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
index 21404d56..f0449d17 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
index b81a3b76..43fecc9b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
index 340c8b82..6d0ac2f8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
index 82546716..4af72844 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -33,6 +35,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -44,6 +47,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -53,6 +57,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Typography(
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
index 710f27b6..33581d8e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
index 1ecbf799..f622214d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-3.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
index 1e55e632..0ce9cfb4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-4.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
index 8468c9a7..8f3438c6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props-6.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
index 50688487..cafa542e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_literal_props.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
index 906cc090..619c1d48 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
index aad0ec51..42eea115 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -52,6 +55,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -65,6 +69,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
index d355d58a..f95941bf 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ternary_operator_in_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
index 27a32929..38da4082 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_props.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
index ac0dad6d..048e7971 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-2.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
index 2701d66c..6a09f33c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector-3.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -28,6 +29,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -54,6 +57,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
index 9b97b37a..7b8742e5 100644
--- a/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__theme_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
index 7e06ee89..796a2aad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
index 95985e2e..070fd6a4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -35,6 +37,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
index 427a66f2..842b47cc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
index 55097f49..01c826e3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_create_var.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
index 611e8c2d..6825a5e1 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         FontFace(
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
index a45cbcf2..c3ad374c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         FontFace(
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
index 1de0e401..891cd1fb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +52,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -66,6 +69,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
index 644f9039..03ac6536 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer.snap
@@ -4,22 +4,6 @@ expression: "ToBTreeSet::from(extract(\"layers.css.ts\",\nr#\"import { layer, st
 ---
 ToBTreeSet {
     styles: {
-        Static(
-            ExtractStaticStyle {
-                property: "@layer",
-                value: "reset",
-                level: 0,
-                selector: Some(
-                    Global(
-                        "*",
-                        "layers.css.ts",
-                    ),
-                ),
-                style_order: Some(
-                    0,
-                ),
-            },
-        ),
         Static(
             ExtractStaticStyle {
                 property: "margin",
@@ -34,6 +18,9 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: Some(
+                    "reset",
+                ),
             },
         ),
         Static(
@@ -50,6 +37,9 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: Some(
+                    "reset",
+                ),
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
index 30379e86..b90173c4 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_media_queries.snap
@@ -17,6 +17,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -32,6 +33,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -41,6 +43,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +59,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -71,6 +75,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
index 36ced0d7..97d273b2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -37,6 +39,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
index 0d46c44e..680707df 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selectors.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -37,6 +39,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -50,6 +53,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -63,6 +67,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -76,6 +81,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
index e6c3970e..d22d519d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
index 1c5f6d27..2fc83077 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_js.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
index c0417ff8..9ae96afb 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_css_ts.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
index 5d44e248..a546eb22 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants-2.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -38,6 +41,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -47,6 +51,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -56,6 +61,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
index 82c0740c..8426209d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
index 4ab990a8..d2aa8abd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_supports.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -26,6 +27,7 @@ ToBTreeSet {
                     },
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
index eee41a0b..db6a4763 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme-2.snap
@@ -11,13 +11,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f14_lightTheme",
+                        ".f0_lightTheme",
                         "theme-contract.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -27,13 +28,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f14_darkTheme",
+                        ".f0_darkTheme",
                         "theme-contract.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,13 +45,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f14_lightTheme",
+                        ".f0_lightTheme",
                         "theme-contract.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -59,15 +62,16 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f14_darkTheme",
+                        ".f0_darkTheme",
                         "theme-contract.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const darkTheme = \"f14_darkTheme\";\nexport const lightTheme = \"f14_lightTheme\";\n;\n;\n",
+    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/src/snapshots/extractor__tests__vanilla_extract_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
index 5664f908..37a0103e 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme.snap
@@ -11,13 +11,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f13_themeClass",
+                        ".f0_themeClass",
                         "theme.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -27,13 +28,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f13_themeClass",
+                        ".f0_themeClass",
                         "theme.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -43,13 +45,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f13_themeClass",
+                        ".f0_themeClass",
                         "theme.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -59,13 +62,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f13_themeClass",
+                        ".f0_themeClass",
                         "theme.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -75,13 +79,14 @@ ToBTreeSet {
                 level: 0,
                 selector: Some(
                     Global(
-                        ".f13_themeClass",
+                        ".f0_themeClass",
                         "theme.css.ts",
                     ),
                 ),
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -91,6 +96,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -100,8 +106,9 @@ ToBTreeSet {
                 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] = [\"f13_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",
+    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/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
index 86641c77..ce2e9b89 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_computed.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
index f09a8fb8..dbacf28c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global-2.snap
@@ -18,6 +18,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
         Static(
@@ -34,6 +35,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
index cc102b21..5addf3a3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_keyframes_and_global.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Keyframes(
@@ -23,6 +24,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                     "to": [
@@ -32,6 +34,7 @@ ToBTreeSet {
                             level: 0,
                             selector: None,
                             style_order: None,
+                            layer: None,
                         },
                     ],
                 },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
index 9021f16b..c7f514e3 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_pseudo_selector.snap
@@ -15,6 +15,7 @@ ToBTreeSet {
                     ),
                 ),
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -24,6 +25,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
index a9f24563..cbc97d83 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_responsive_array.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 2,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 1,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
index 76adbeb9..474649ff 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_spread.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
index 2aa9818b..5a982185 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_variable.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
     },
diff --git a/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap b/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
index 50e7de7d..08b5fc24 100644
--- a/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__with_prefix.snap
@@ -11,6 +11,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -20,6 +21,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -29,6 +31,7 @@ ToBTreeSet {
                 level: 0,
                 selector: None,
                 style_order: None,
+                layer: None,
             },
         ),
         Static(
@@ -40,6 +43,7 @@ ToBTreeSet {
                 style_order: Some(
                     0,
                 ),
+                layer: None,
             },
         ),
     },
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index 86124fa3..d05f7a64 100644
--- a/libs/sheet/src/lib.rs
+++ b/libs/sheet/src/lib.rs
@@ -30,6 +30,9 @@ pub struct StyleSheetProperty {
     pub value: String,
     #[serde(rename = "s")]
     pub selector: Option<StyleSelector>,
+    /// CSS layer name (from vanilla-extract layer())
+    #[serde(rename = "l", skip_serializing_if = "Option::is_none")]
+    pub layer: Option<String>,
 }
 
 #[derive(Debug, Hash, Eq, PartialEq, Deserialize, Serialize)]
@@ -169,6 +172,30 @@ impl StyleSheet {
         selector: Option<&StyleSelector>,
         style_order: Option<u8>,
         filename: Option<&str>,
+    ) -> bool {
+        self.add_property_with_layer(
+            class_name,
+            property,
+            level,
+            value,
+            selector,
+            style_order,
+            filename,
+            None,
+        )
+    }
+
+    #[allow(clippy::too_many_arguments)]
+    pub fn add_property_with_layer(
+        &mut self,
+        class_name: &str,
+        property: &str,
+        level: u8,
+        value: &str,
+        selector: Option<&StyleSelector>,
+        style_order: Option<u8>,
+        filename: Option<&str>,
+        layer: Option<&str>,
     ) -> bool {
         // register global css file for cache
         if let Some(StyleSelector::Global(_, file)) = selector {
@@ -187,6 +214,7 @@ impl StyleSheet {
                 property: property.to_string(),
                 value: value.to_string(),
                 selector: selector.cloned(),
+                layer: layer.map(|s| s.to_string()),
             })
     }
 
@@ -294,7 +322,7 @@ impl StyleSheet {
                 ExtractStyleValue::Static(st) => {
                     if let Some(StyleProperty::ClassName(cls)) =
                         style.extract(if !single_css { Some(filename) } else { None })
-                        && self.add_property(
+                        && self.add_property_with_layer(
                             &cls,
                             st.property(),
                             st.level(),
@@ -302,6 +330,7 @@ impl StyleSheet {
                             st.selector(),
                             st.style_order(),
                             if !single_css { Some(filename) } else { None },
+                            st.layer(),
                         )
                     {
                         collected = true;
@@ -431,6 +460,14 @@ impl StyleSheet {
         }
     }
     fn create_style(&self, map: &BTreeMap<u8, HashSet<StyleSheetProperty>>) -> String {
+        self.create_style_with_layers(map, &mut BTreeMap::new())
+    }
+
+    fn create_style_with_layers(
+        &self,
+        map: &BTreeMap<u8, HashSet<StyleSheetProperty>>,
+        layered_styles: &mut BTreeMap<String, Vec<(String, String, String)>>, // layer -> Vec<(selector, property, value)>
+    ) -> String {
         let mut current_css = String::new();
         for (level, props) in map.iter() {
             let (mut global_props, rest): (Vec<_>, Vec<_>) = props
@@ -469,32 +506,53 @@ impl StyleSheet {
             };
 
             if !global_props.is_empty() {
-                let mut selector_map: BTreeMap<_, Vec<_>> = BTreeMap::new();
-                for prop in global_props {
-                    if let Some(StyleSelector::Global(selector, _)) = &prop.selector {
-                        selector_map.entry(selector.clone()).or_default().push(prop);
+                // Separate layered and non-layered global props
+                let (layered_props, non_layered_props): (Vec<_>, Vec<_>) = global_props
+                    .into_iter()
+                    .partition(|prop| prop.layer.is_some());
+
+                // Collect layered props for later processing
+                for prop in layered_props {
+                    if let Some(layer) = &prop.layer
+                        && let Some(StyleSelector::Global(selector, _)) = &prop.selector
+                    {
+                        layered_styles.entry(layer.clone()).or_default().push((
+                            selector.clone(),
+                            prop.property.clone(),
+                            prop.value.clone(),
+                        ));
                     }
                 }
-                let mut inner_css = String::new();
-                for (selector, props) in selector_map {
-                    inner_css.push_str(&format!(
-                        "{}{{{}}}",
-                        selector,
-                        props
-                            .into_iter()
-                            .map(|prop| format!("{}:{}", prop.property, prop.value))
-                            .collect::<Vec<String>>()
-                            .join(";")
-                    ));
-                }
-                current_css.push_str(
-                    if let Some(break_point) = break_point {
-                        format!("@media(min-width:{break_point}px){{{inner_css}}}")
-                    } else {
-                        inner_css
+
+                // Process non-layered global props as before
+                if !non_layered_props.is_empty() {
+                    let mut selector_map: BTreeMap<_, Vec<_>> = BTreeMap::new();
+                    for prop in non_layered_props {
+                        if let Some(StyleSelector::Global(selector, _)) = &prop.selector {
+                            selector_map.entry(selector.clone()).or_default().push(prop);
+                        }
                     }
-                    .as_str(),
-                );
+                    let mut inner_css = String::new();
+                    for (selector, props) in selector_map {
+                        inner_css.push_str(&format!(
+                            "{}{{{}}}",
+                            selector,
+                            props
+                                .into_iter()
+                                .map(|prop| format!("{}:{}", prop.property, prop.value))
+                                .collect::<Vec<String>>()
+                                .join(";")
+                        ));
+                    }
+                    current_css.push_str(
+                        if let Some(break_point) = break_point {
+                            format!("@media(min-width:{break_point}px){{{inner_css}}}")
+                        } else {
+                            inner_css
+                        }
+                        .as_str(),
+                    );
+                }
             }
 
             if !sorted_props.is_empty() {
@@ -531,6 +589,10 @@ impl StyleSheet {
                                 // Nest @container inside @media for breakpoint
                                 format!("@media(min-width:{break_point}px){{@container{query}{{{inner_css}}}}}")
                             }
+                            AtRuleKind::Layer => {
+                                // Nest @layer inside @media for breakpoint
+                                format!("@media(min-width:{break_point}px){{@layer {query}{{{inner_css}}}}}")
+                            }
                         }
                     } else {
                         format!("@{kind}{}{{{}}}", if query.starts_with("(") { query.clone() } else { format!(" {query}") }, inner_css.as_str())
@@ -629,10 +691,47 @@ impl StyleSheet {
                     css.push_str(&_css.extract());
                 }
             }
-            let base_css = self.create_style(&base_styles);
+
+            // Collect layered styles while creating base CSS
+            let mut layered_styles: BTreeMap<String, Vec<(String, String, String)>> =
+                BTreeMap::new();
+            let base_css = self.create_style_with_layers(&base_styles, &mut layered_styles);
             if !base_css.is_empty() {
                 css.push_str(format!("@layer b{{{base_css}}}",).as_str());
             }
+
+            // Generate @layer declarations and wrapped styles for custom layers
+            if !layered_styles.is_empty() {
+                // Add layer declarations
+                let layer_names: Vec<_> = layered_styles.keys().cloned().collect();
+                css.push_str(&format!("@layer {};", layer_names.join(",")));
+
+                // Generate styles wrapped in @layer blocks
+                for (layer_name, styles) in layered_styles {
+                    // Group by selector
+                    let mut selector_map: BTreeMap<String, Vec<(String, String)>> = BTreeMap::new();
+                    for (selector, property, value) in styles {
+                        selector_map
+                            .entry(selector)
+                            .or_default()
+                            .push((property, value));
+                    }
+
+                    let mut layer_css = String::new();
+                    for (selector, props) in selector_map {
+                        layer_css.push_str(&format!(
+                            "{}{{{}}}",
+                            selector,
+                            props
+                                .into_iter()
+                                .map(|(p, v)| format!("{p}:{v}"))
+                                .collect::<Vec<_>>()
+                                .join(";")
+                        ));
+                    }
+                    css.push_str(&format!("@layer {layer_name}{{{layer_css}}}"));
+                }
+            }
         } else {
             // avoid inline import issue (vite plugin)
             if import_main_css {
@@ -1818,6 +1917,7 @@ mod tests {
             property: String::from("opacity"),
             value: String::from("0"),
             selector: None,
+            layer: None,
         });
         keyframes.insert(
             String::from("from"),
@@ -1830,6 +1930,7 @@ mod tests {
             property: String::from("opacity"),
             value: String::from("1"),
             selector: None,
+            layer: None,
         });
         keyframes.insert(
             String::from("to"),
@@ -1847,6 +1948,7 @@ mod tests {
             property: String::from("opacity"),
             value: String::from("0"),
             selector: None,
+            layer: None,
         });
         keyframes.insert(
             String::from("from"),
@@ -1859,6 +1961,7 @@ mod tests {
             property: String::from("opacity"),
             value: String::from("1"),
             selector: None,
+            layer: None,
         });
         keyframes.insert(
             String::from("to"),
diff --git a/libs/sheet/src/snapshots/sheet__tests__deserialize.snap b/libs/sheet/src/snapshots/sheet__tests__deserialize.snap
index 0b11d02d..c994b707 100644
--- a/libs/sheet/src/snapshots/sheet__tests__deserialize.snap
+++ b/libs/sheet/src/snapshots/sheet__tests__deserialize.snap
@@ -12,6 +12,7 @@ StyleSheet {
                         property: "mx",
                         value: "40px",
                         selector: None,
+                        layer: None,
                     },
                 },
             },

From e5a31963a3db9c366757fa573ca20d73cd1aed9c Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 01:29:16 +0900
Subject: [PATCH 14/31] Update snapshot

---
 .../__tests__/__snapshots__/index.browser.test.tsx.snap     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
index a986afda..88fd7f30 100644
--- a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -201,7 +201,7 @@ exports[`Button should render loading spinner when loading is true 1`] = `
   <button aria-label="button" type="button" class=" outline-0-2px solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-_a__c_active-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-_a__c_active-1 border-0-1px solid var(--primary,#8163E1)-_a__c_active-1 color-0-#D6D7DE-_a__c_disabled-1 background-color-0-#F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var(--border,#E4E4E4)-_a__c_disabled-1 outline-color-0-var(--primaryFocus,#9385D3)-_a__c_focus-visible-1 border-color-0-var(--primary,#8163E1)-_a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-_a__c_hover-1 color-0-var(--text,#F6F6F6)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-#373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-#47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var(--primaryFocus,#927CE4)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var(--inputBackground,#2E2E2E)-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
     <div class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
       <div role="presentation" class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-_a__gt_svg-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255">
-        <svg aria-label="Whole loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-420169018174230850;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-label="Whole loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-7130318960702049073;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#paint0_angular_1842_200_clip_path)">
             <g transform="matrix(0 0.007 -0.007 0 10 10)">
               <foreignObject height="2857.14" width="2857.14" x="-1428.57" y="-1428.57">
@@ -232,7 +232,7 @@ exports[`Button should render loading spinner when loading is true and loadingSp
   <button aria-label="button" type="button" class=" outline-0-2px solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-_a__c_active-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-_a__c_active-1 border-0-1px solid var(--primary,#8163E1)-_a__c_active-1 color-0-#D6D7DE-_a__c_disabled-1 background-color-0-#F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var(--border,#E4E4E4)-_a__c_disabled-1 outline-color-0-var(--primaryFocus,#9385D3)-_a__c_focus-visible-1 border-color-0-var(--primary,#8163E1)-_a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-_a__c_hover-1 color-0-var(--text,#F6F6F6)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-#373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-#47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var(--primaryFocus,#927CE4)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var(--inputBackground,#2E2E2E)-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
     <div class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
       <div role="presentation" class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-_a__gt_svg-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255">
-        <svg aria-label="Partial loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-420169018174230850;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-label="Partial loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-7130318960702049073;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
           <path d="M17 10C17 11.291 16.643 12.5568 15.9685 13.6575C15.294 14.7582 14.3282 15.651 13.1779 16.237C12.0277 16.8231 10.7378 17.0797 9.45078 16.9784C8.1638 16.8771 6.9299 16.4219 5.8855 15.6631" stroke="light-dark(var(--primary, #272727), var(--primary, #F6F6F6))" stroke-linecap="round" stroke-width="3">
           </path>
         </svg>
@@ -249,7 +249,7 @@ exports[`Button should render loading spinner when icon is provided and loading
   <button aria-label="button" type="button" class=" outline-0-2px solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-_a__c_active-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-_a__c_active-1 border-0-1px solid var(--primary,#8163E1)-_a__c_active-1 color-0-#D6D7DE-_a__c_disabled-1 background-color-0-#F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var(--border,#E4E4E4)-_a__c_disabled-1 outline-color-0-var(--primaryFocus,#9385D3)-_a__c_focus-visible-1 border-color-0-var(--primary,#8163E1)-_a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-_a__c_hover-1 color-0-var(--text,#F6F6F6)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-#373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-#47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var(--primary,#8163E1)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var(--primaryFocus,#927CE4)-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var(--inputBackground,#2E2E2E)-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-28px--1 padding-left-0-28px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
     <div class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
       <div role="presentation" class="display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--255 width-0-24px--255 left-0-4px--255 position-0-absolute--255 color-0-inherit-_a__gt_svg-255 top-0-50%--255 transform-0-translate(-100%,-50%)--255">
-        <svg aria-label="Whole loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-420169018174230850;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-label="Whole loading spinner" class="animation-duration-0-1s--255 animation-iteration-count-0-infinite--255 animation-name-0---255 animation-timing-function-0-linear--255" style="--animation-name-0-: k-7130318960702049073;" fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#paint0_angular_1842_200_clip_path)">
             <g transform="matrix(0 0.007 -0.007 0 10 10)">
               <foreignObject height="2857.14" width="2857.14" x="-1428.57" y="-1428.57">

From fd52016dfe2dbde63d5d9b624f46bafeeaa0d254 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 02:02:49 +0900
Subject: [PATCH 15/31] Update layer test

---
 libs/css/src/style_selector.rs                | 16 ++++
 .../src/extract_style/extract_static_style.rs | 20 +++++
 libs/extractor/src/vanilla_extract.rs         | 30 ++++++++
 libs/sheet/src/lib.rs                         | 73 ++++++++++++++++---
 ...ests__global_styles_with_custom_layer.snap |  5 ++
 .../sheet__tests__layer_with_breakpoints.snap |  5 ++
 6 files changed, 139 insertions(+), 10 deletions(-)
 create mode 100644 libs/sheet/src/snapshots/sheet__tests__global_styles_with_custom_layer.snap
 create mode 100644 libs/sheet/src/snapshots/sheet__tests__layer_with_breakpoints.snap

diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index 3ece0af4..8b4d77b5 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -312,6 +312,13 @@ mod tests {
         "@container sidebar (min-width: 400px)"
     )]
     #[case(StyleSelector::Global(":root[data-theme=dark]".to_string(), "file.rs".to_string()), ":root[data-theme=dark]")]
+    #[case(StyleSelector::At {
+            kind: AtRuleKind::Layer,
+            query: "reset".to_string(),
+            selector: None,
+        },
+        "@layer reset"
+    )]
     fn test_style_selector_display(#[case] selector: StyleSelector, #[case] expected: &str) {
         let output = format!("{selector}");
         assert_eq!(output, expected);
@@ -451,4 +458,13 @@ mod tests {
     fn test_get_selector_order(#[case] selector: &str, #[case] expected: u8) {
         assert_eq!(get_selector_order(selector), expected);
     }
+
+    #[rstest]
+    #[case(AtRuleKind::Media, "media")]
+    #[case(AtRuleKind::Supports, "supports")]
+    #[case(AtRuleKind::Container, "container")]
+    #[case(AtRuleKind::Layer, "layer")]
+    fn test_at_rule_kind_display(#[case] kind: AtRuleKind, #[case] expected: &str) {
+        assert_eq!(format!("{kind}"), expected);
+    }
 }
diff --git a/libs/extractor/src/extract_style/extract_static_style.rs b/libs/extractor/src/extract_style/extract_static_style.rs
index dd47f982..abe853cb 100644
--- a/libs/extractor/src/extract_style/extract_static_style.rs
+++ b/libs/extractor/src/extract_style/extract_static_style.rs
@@ -153,5 +153,25 @@ mod tests {
         assert_eq!(style.level(), 0);
         assert_eq!(style.selector(), None);
         assert_eq!(style.style_order(), None);
+        assert_eq!(style.layer(), None);
+    }
+
+    #[test]
+    fn test_extract_static_style_with_layer() {
+        let style =
+            ExtractStaticStyle::new_with_layer("margin", "0", 0, None, Some("reset".to_string()));
+        assert_eq!(style.property(), "margin");
+        assert_eq!(style.value(), "0");
+        assert_eq!(style.level(), 0);
+        assert_eq!(style.selector(), None);
+        assert_eq!(style.layer(), Some("reset"));
+    }
+
+    #[test]
+    fn test_extract_static_style_with_layer_none() {
+        let style = ExtractStaticStyle::new_with_layer("color", "red", 0, None, None);
+        assert_eq!(style.property(), "color");
+        assert_eq!(style.value(), "red");
+        assert_eq!(style.layer(), None);
     }
 }
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 65aa4917..d2ff5dff 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -2142,4 +2142,34 @@ export const lightTheme = createTheme(vars, {
             css_vars
         );
     }
+
+    #[test]
+    fn test_parse_font_face_json_edge_cases() {
+        // Test invalid JSON
+        let result = super::parse_font_face_json("not valid json");
+        assert!(result.is_empty());
+
+        // Test non-object JSON
+        let result = super::parse_font_face_json("\"just a string\"");
+        assert!(result.is_empty());
+
+        // Test array JSON
+        let result = super::parse_font_face_json("[1, 2, 3]");
+        assert!(result.is_empty());
+
+        // Test with boolean value
+        let result = super::parse_font_face_json(r#"{"fontDisplay": true}"#);
+        assert_eq!(result.len(), 1);
+        assert_eq!(result[0], ("fontDisplay".to_string(), "true".to_string()));
+
+        // Test with number value
+        let result = super::parse_font_face_json(r#"{"fontWeight": 400}"#);
+        assert_eq!(result.len(), 1);
+        assert_eq!(result[0], ("fontWeight".to_string(), "400".to_string()));
+
+        // Test with null value (other case)
+        let result = super::parse_font_face_json(r#"{"fontStyle": null}"#);
+        assert_eq!(result.len(), 1);
+        assert_eq!(result[0], ("fontStyle".to_string(), "null".to_string()));
+    }
 }
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index d05f7a64..2d6534b9 100644
--- a/libs/sheet/src/lib.rs
+++ b/libs/sheet/src/lib.rs
@@ -2029,24 +2029,54 @@ mod tests {
     }
 
     #[test]
-    fn test_global_props_with_breakpoints() {
+    fn test_global_styles_with_custom_layer() {
         let mut sheet = StyleSheet::default();
-        // Add global style at level 1 (with breakpoint)
-        sheet.add_property(
-            "a",
-            "color",
-            1, // level 1 means it should be wrapped in @media
-            "red",
+        // Add global style with layer
+        sheet.add_property_with_layer(
+            "*",
+            "margin",
+            0,
+            "0",
+            Some(&StyleSelector::Global(
+                "*".to_string(),
+                "reset.css.ts".to_string(),
+            )),
+            Some(0),
+            None,
+            Some("reset"),
+        );
+        sheet.add_property_with_layer(
+            "*",
+            "padding",
+            0,
+            "0",
+            Some(&StyleSelector::Global(
+                "*".to_string(),
+                "reset.css.ts".to_string(),
+            )),
+            Some(0),
+            None,
+            Some("reset"),
+        );
+        // Add another layer
+        sheet.add_property_with_layer(
+            "body",
+            "font-family",
+            0,
+            "sans-serif",
             Some(&StyleSelector::Global(
                 "body".to_string(),
-                "test.tsx".to_string(),
+                "base.css.ts".to_string(),
             )),
             Some(0),
             None,
+            Some("base"),
         );
         let css = sheet.create_css(None, false);
-        assert!(css.contains("@media"));
-        assert!(css.contains("body"));
+        // Layers are sorted alphabetically
+        assert!(css.contains("@layer base,reset"));
+        assert!(css.contains("@layer reset{*{margin:0;padding:0}}"));
+        assert!(css.contains("@layer base{body{font-family:sans-serif}}"));
         assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
     }
 
@@ -2113,4 +2143,27 @@ mod tests {
         assert!(css.contains("@layer t{"));
         assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
     }
+
+    #[test]
+    fn test_layer_with_breakpoints() {
+        let mut sheet = StyleSheet::default();
+        // Add @layer with breakpoint (level 1)
+        sheet.add_property(
+            "a",
+            "display",
+            1,
+            "flex",
+            Some(&StyleSelector::At {
+                kind: AtRuleKind::Layer,
+                query: "components".to_string(),
+                selector: None,
+            }),
+            Some(0),
+            None,
+        );
+        let css = sheet.create_css(None, false);
+        assert!(css.contains("@media"));
+        assert!(css.contains("@layer components"));
+        assert_debug_snapshot!(css.split("*/").nth(1).unwrap());
+    }
 }
diff --git a/libs/sheet/src/snapshots/sheet__tests__global_styles_with_custom_layer.snap b/libs/sheet/src/snapshots/sheet__tests__global_styles_with_custom_layer.snap
new file mode 100644
index 00000000..c7348dc0
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__global_styles_with_custom_layer.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b;@layer base,reset;@layer base{body{font-family:sans-serif}}@layer reset{*{margin:0;padding:0}}"
diff --git a/libs/sheet/src/snapshots/sheet__tests__layer_with_breakpoints.snap b/libs/sheet/src/snapshots/sheet__tests__layer_with_breakpoints.snap
new file mode 100644
index 00000000..5db723f8
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__layer_with_breakpoints.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: "css.split(\"*/\").nth(1).unwrap()"
+---
+"@layer b;@layer b{@media(min-width:480px){@layer components{.a{display:flex}}}}"

From f0dec4d182df2c907e371779c7f9f80b5c261929 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 02:30:00 +0900
Subject: [PATCH 16/31] Update snapshot

---
 libs/extractor/src/lib.rs                     |  55 +++++++
 ...actor__tests__global_css_with_layer-2.snap |  47 ++++++
 ...tractor__tests__global_css_with_layer.snap |  47 ++++++
 libs/extractor/src/vanilla_extract.rs         | 134 ++++++++++++++++++
 4 files changed, 283 insertions(+)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_with_layer.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index d23ab1f8..4337046d 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -9500,6 +9500,61 @@ globalCss({
         ));
     }
 
+    #[test]
+    #[serial]
+    fn test_global_css_with_layer() {
+        // Test globalCss with @layer property
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test globalCss with @layer for multiple selectors
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
     // ============================================================================
     // VANILLA-EXTRACT API TESTS
     // ============================================================================
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap
new file mode 100644
index 00000000..ff8f0255
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer-2.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__global_css_with_layer.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer.snap
new file mode 100644
index 00000000..250a4095
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/src/lib.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}).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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index d2ff5dff..33c49deb 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -2172,4 +2172,138 @@ export const lightTheme = createTheme(vars, {
         assert_eq!(result.len(), 1);
         assert_eq!(result[0], ("fontStyle".to_string(), "null".to_string()));
     }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_composition() {
+        let mut collected = CollectedStyles::default();
+        // Add base style
+        collected.styles.insert(
+            "base".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"8px"}"#.to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+        // Add composed style with bases
+        collected.styles.insert(
+            "composed".to_string(),
+            StyleEntry {
+                json: r#"{"color":"red"}"#.to_string(),
+                exported: true,
+                bases: vec!["base".to_string()],
+            },
+        );
+
+        let class_map: std::collections::HashMap<String, String> = [
+            ("base".to_string(), "a".to_string()),
+            ("composed".to_string(), "b".to_string()),
+        ]
+        .into_iter()
+        .collect();
+
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("import { css } from '@devup-ui/react'"));
+        // The composed style should have both base and own styles merged
+        assert!(code.contains("padding"));
+        assert!(code.contains("color"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_theme_vars() {
+        let mut collected = CollectedStyles::default();
+        // Theme with vars_name and vars_object_json
+        collected.themes.insert(
+            "themeClass".to_string(),
+            super::ThemeEntry {
+                class_name: "f0_theme".to_string(),
+                css_vars: vec![("--color-primary".to_string(), "blue".to_string())],
+                exported: true,
+                vars_name: Some("vars".to_string()),
+                vars_object_json: Some(
+                    r#"{"color":{"primary":"var(--color-primary)"}}"#.to_string(),
+                ),
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const [themeClass, vars] = [\"f0_theme\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_theme_no_vars() {
+        let mut collected = CollectedStyles::default();
+        // Theme without vars (two-arg createTheme)
+        collected.themes.insert(
+            "darkTheme".to_string(),
+            super::ThemeEntry {
+                class_name: "f1_darkTheme".to_string(),
+                css_vars: vec![("--color-primary".to_string(), "white".to_string())],
+                exported: true,
+                vars_name: None,
+                vars_object_json: None,
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const darkTheme = \"f1_darkTheme\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_keyframes() {
+        let mut collected = CollectedStyles::default();
+        collected.keyframes.insert(
+            "fadeIn".to_string(),
+            StyleEntry {
+                json: r#"{"from":{"opacity":"0"},"to":{"opacity":"1"}}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("import { keyframes } from '@devup-ui/react'"));
+        assert!(code.contains("export const fadeIn = keyframes"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_global_styles() {
+        let mut collected = CollectedStyles::default();
+        collected
+            .global_styles
+            .push(("body".to_string(), r#"{"margin":"0"}"#.to_string()));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("import { globalCss } from '@devup-ui/react'"));
+        assert!(code.contains("globalCss({ \"body\":"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_composition() {
+        let mut collected = CollectedStyles::default();
+        // Add base style
+        collected.styles.insert(
+            "baseStyle".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"16px","margin":"8px"}"#.to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+        // Add composed style
+        collected.styles.insert(
+            "buttonStyle".to_string(),
+            StyleEntry {
+                json: r#"{"background":"blue"}"#.to_string(),
+                exported: true,
+                bases: vec!["baseStyle".to_string()],
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        // Both base and own styles should be present in the composed style
+        assert!(code.contains("padding"));
+        assert!(code.contains("background"));
+    }
 }

From eb70c909b45a115c0ee51332d9d538766ea9fc2f Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 02:52:19 +0900
Subject: [PATCH 17/31] Update snapshot

---
 libs/extractor/src/lib.rs                     | 498 ++++++++++++++++++
 ...or__tests__container_at_rule_in_css-2.snap |  25 +
 ...ctor__tests__container_at_rule_in_css.snap |  25 +
 ...r__tests__vanilla_extract_all_imports.snap |  79 +++
 ...sts__vanilla_extract_constant_exports.snap |  19 +
 ..._vanilla_extract_font_face_with_style.snap |  29 +
 ...nilla_extract_global_theme_empty_vars.snap |  19 +
 ...__vanilla_extract_layer_and_container.snap |  29 +
 ...__vanilla_extract_non_exported_styles.snap |  55 ++
 ...s__vanilla_extract_non_exported_theme.snap |  53 ++
 ...__vanilla_extract_selector_references.snap |  47 ++
 ...nilla_extract_style_composition_empty.snap |   8 +
 ...illa_extract_style_variants_with_base.snap |  59 +++
 ...ests__vanilla_extract_theme_with_vars.snap |  77 +++
 ...nilla_extract_theme_without_vars_name.snap |  43 ++
 ...tor__tests__vanilla_extract_vars_only.snap |  29 +
 libs/extractor/src/vanilla_extract.rs         | 434 +++++++++++++++
 17 files changed, 1528 insertions(+)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 4337046d..0c36147d 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -10364,4 +10364,502 @@ export const grid = style({
     ) {
         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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test with @container prefix
+        reset_class_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
+                }
+            )
+            .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();
+        // 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,
+            },
+        );
+        // 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();
+        // 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,
+            },
+        );
+        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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_style_composition_empty() {
+        // Test style with empty composition array
+        reset_class_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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_vars_only() {
+        // Test createVar exports (covers lines 1191-1192)
+        reset_class_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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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 }
+            )
+            .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();
+        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
+                }
+            )
+            .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);
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap b/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap
new file mode 100644
index 00000000..83b4b00f
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css-2.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__container_at_rule_in_css.snap b/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css.snap
new file mode 100644
index 00000000..039f02dd
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__container_at_rule_in_css.snap
@@ -0,0 +1,25 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap
new file mode 100644
index 00000000..a4a0297f
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_imports.snap
@@ -0,0 +1,79 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
new file mode 100644
index 00000000..239a9d9a
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_constant_exports.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
new file mode 100644
index 00000000..0f1958b1
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_with_style.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
new file mode 100644
index 00000000..1c1914d5
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_empty_vars.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
new file mode 100644
index 00000000..3b4e51f9
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_layer_and_container.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
new file mode 100644
index 00000000..15a6ef98
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_styles.snap
@@ -0,0 +1,55 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
new file mode 100644
index 00000000..fafa89b1
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_non_exported_theme.snap
@@ -0,0 +1,53 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap
new file mode 100644
index 00000000..c591ffd9
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_references.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
new file mode 100644
index 00000000..acc074c0
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_empty.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "export const empty = \"\";\nexport const withEmpty = \"\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
new file mode 100644
index 00000000..31b0af98
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_with_base.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
new file mode 100644
index 00000000..9c73d68b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_with_vars.snap
@@ -0,0 +1,77 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
new file mode 100644
index 00000000..a54ab000
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_name.snap
@@ -0,0 +1,43 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap
new file mode 100644
index 00000000..c22f5b86
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_vars_only.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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}).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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 33c49deb..713bd236 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -2306,4 +2306,438 @@ export const lightTheme = createTheme(vars, {
         assert!(code.contains("padding"));
         assert!(code.contains("background"));
     }
+
+    #[test]
+    fn test_transform_contract_to_vars_array() {
+        // Test transform_contract_to_vars with array (covers line 170)
+        let mut context = boa_engine::Context::default();
+        let array = boa_engine::object::builtins::JsArray::new(&mut context);
+        let _ = array.push(boa_engine::JsValue::from(1), &mut context);
+        let value = boa_engine::JsValue::from(array);
+        let result = super::transform_contract_to_vars(&value, &mut context, &[]);
+        // Arrays should be returned as-is
+        assert!(result.as_object().is_some());
+    }
+
+    #[test]
+    fn test_transform_theme_to_vars_array() {
+        // Test transform_theme_to_vars with array (covers line 250)
+        let mut context = boa_engine::Context::default();
+        let array = boa_engine::object::builtins::JsArray::new(&mut context);
+        let _ = array.push(boa_engine::JsValue::from(1), &mut context);
+        let value = boa_engine::JsValue::from(array);
+        let mut css_vars = Vec::new();
+        let mut counter = 0usize;
+        let result = super::transform_theme_to_vars(
+            &value,
+            &mut context,
+            "__test__",
+            &mut css_vars,
+            &mut counter,
+            &[],
+        );
+        // Arrays should be returned as-is
+        assert!(result.as_object().is_some());
+    }
+
+    #[test]
+    fn test_extract_theme_vars_non_matching() {
+        // Test extract_theme_vars with non-matching structure
+        let mut context = boa_engine::Context::default();
+        let contract = boa_engine::JsValue::from(boa_engine::js_string!("not-a-var"));
+        let values = boa_engine::JsValue::from(boa_engine::js_string!("some-value"));
+        let mut css_vars = Vec::new();
+        super::extract_theme_vars(&contract, &values, &mut context, &mut css_vars, &[]);
+        // No CSS vars should be extracted because contract isn't a var() string
+        assert!(css_vars.is_empty());
+    }
+
+    #[test]
+    fn test_js_value_to_json_edge_cases() {
+        // Test js_value_to_json with various types (covers lines 314-328)
+        let mut context = boa_engine::Context::default();
+
+        // Test with boolean
+        let bool_val = boa_engine::JsValue::from(true);
+        let result = super::js_value_to_json(&bool_val, &mut context);
+        assert_eq!(result, "true");
+
+        // Test with null
+        let null_val = boa_engine::JsValue::null();
+        let result = super::js_value_to_json(&null_val, &mut context);
+        assert_eq!(result, "null");
+
+        // Test with undefined
+        let undef_val = boa_engine::JsValue::undefined();
+        let result = super::js_value_to_json(&undef_val, &mut context);
+        assert_eq!(result, "undefined");
+
+        // Test with number
+        let num_val = boa_engine::JsValue::from(42);
+        let result = super::js_value_to_json(&num_val, &mut context);
+        assert_eq!(result, "42");
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_vars() {
+        // Test with createVar exports (covers lines 1191-1192)
+        let mut collected = CollectedStyles::default();
+        collected
+            .vars
+            .insert("colorVar".to_string(), ("--var-0".to_string(), true));
+        collected
+            .vars
+            .insert("sizeVar".to_string(), ("--var-1".to_string(), false));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const colorVar = \"--var-0\""));
+        assert!(code.contains("const sizeVar = \"--var-1\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_containers() {
+        // Test with createContainer exports (covers lines 1207-1208)
+        let mut collected = CollectedStyles::default();
+        collected
+            .containers
+            .insert("sidebar".to_string(), ("__container_0__".to_string(), true));
+        collected.containers.insert(
+            "internalCont".to_string(),
+            ("__container_1__".to_string(), false),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const sidebar = \"__container_0__\""));
+        assert!(code.contains("const internalCont = \"__container_1__\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_layers() {
+        // Test with layer exports (covers lines 1215-1216)
+        let mut collected = CollectedStyles::default();
+        collected
+            .layers
+            .insert("resetLayer".to_string(), ("reset".to_string(), true));
+        collected
+            .layers
+            .insert("internalLayer".to_string(), ("internal".to_string(), false));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const resetLayer = \"reset\""));
+        assert!(code.contains("const internalLayer = \"internal\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_font_faces() {
+        // Test with fontFace exports (covers lines 1199-1200)
+        let mut collected = CollectedStyles::default();
+        collected.font_faces.insert(
+            "myFont".to_string(),
+            (
+                r#"{"src":"local(Arial)"}"#.to_string(),
+                "__devup_font_0_0".to_string(),
+                true,
+            ),
+        );
+        collected.font_faces.insert(
+            "internalFont".to_string(),
+            (
+                r#"{"src":"local(Times)"}"#.to_string(),
+                "__devup_font_0_1".to_string(),
+                false,
+            ),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const myFont = \"__devup_font_0_0\""));
+        assert!(code.contains("const internalFont = \"__devup_font_0_1\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_global_themes() {
+        // Test with createGlobalTheme exports (covers lines 1221-1222)
+        let mut collected = CollectedStyles::default();
+        collected.global_themes.insert(
+            "rootVars".to_string(),
+            super::GlobalThemeEntry {
+                selector: ":root".to_string(),
+                css_vars: vec![("--color-primary".to_string(), "blue".to_string())],
+                vars_object_json: r#"{"color":{"primary":"var(--color-primary)"}}"#.to_string(),
+                exported: true,
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const rootVars ="));
+        assert!(code.contains("globalCss({"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_constant_exports() {
+        // Test with constant exports (covers line 1430)
+        let mut collected = CollectedStyles::default();
+        collected
+            .constant_exports
+            .insert("SPACING".to_string(), "8".to_string());
+        collected
+            .constant_exports
+            .insert("COLORS".to_string(), "{ primary: 'blue' }".to_string());
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const SPACING = 8"));
+        assert!(code.contains("export const COLORS = { primary: 'blue' }"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_empty_font_face_props() {
+        // Test fontFace with empty properties (covers line 1324 branch)
+        let mut collected = CollectedStyles::default();
+        collected.font_faces.insert(
+            "emptyFont".to_string(),
+            ("{}".to_string(), "__devup_font_empty".to_string(), true),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("fontFamily: \"__devup_font_empty\""));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_global_theme_empty_vars() {
+        // Test createGlobalTheme with empty css_vars (covers line 1332 branch)
+        let mut collected = CollectedStyles::default();
+        collected.global_themes.insert(
+            "emptyTheme".to_string(),
+            super::GlobalThemeEntry {
+                selector: ":root".to_string(),
+                css_vars: vec![], // Empty
+                vars_object_json: "{}".to_string(),
+                exported: true,
+            },
+        );
+        // Add a style to trigger import generation
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: "{}".to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        // Should not generate globalCss for empty vars
+        assert!(code.contains("export const emptyTheme = {}"));
+    }
+
+    #[test]
+    fn test_style_variants_without_base() {
+        // Test styleVariants without base composition (covers line 1179)
+        let mut collected = CollectedStyles::default();
+        let mut variants = std::collections::HashMap::new();
+        variants.insert(
+            "small".to_string(),
+            super::StyleVariant {
+                base: None,
+                styles_json: r#"{"fontSize":"12px"}"#.to_string(),
+            },
+        );
+        variants.insert(
+            "large".to_string(),
+            super::StyleVariant {
+                base: None,
+                styles_json: r#"{"fontSize":"20px"}"#.to_string(),
+            },
+        );
+        collected
+            .style_variants
+            .insert("sizes".to_string(), (variants, true));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const sizes = {"));
+        assert!(code.contains("small: css"));
+        assert!(code.contains("large: css"));
+    }
+
+    #[test]
+    fn test_style_variants_with_base_empty_inner() {
+        // Test styleVariants with base but empty inner styles (covers lines 1169, 1174 branches)
+        let mut collected = CollectedStyles::default();
+        // Base with empty inner
+        collected.styles.insert(
+            "base".to_string(),
+            StyleEntry {
+                json: "{}".to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+        let mut variants = std::collections::HashMap::new();
+        variants.insert(
+            "variant".to_string(),
+            super::StyleVariant {
+                base: Some("base".to_string()),
+                styles_json: "{}".to_string(),
+            },
+        );
+        collected
+            .style_variants
+            .insert("empty".to_string(), (variants, true));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("variant: css"));
+    }
+
+    #[test]
+    fn test_collected_styles_clone() {
+        // Test Clone implementation for CollectedStyles (covers line 1437-1438)
+        let mut original = CollectedStyles::default();
+        original.styles.insert(
+            "test".to_string(),
+            StyleEntry {
+                json: "{}".to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        original
+            .global_styles
+            .push(("body".to_string(), "{}".to_string()));
+        original.keyframes.insert(
+            "fade".to_string(),
+            StyleEntry {
+                json: "{}".to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        original
+            .vars
+            .insert("v".to_string(), ("--v".to_string(), true));
+        original
+            .font_faces
+            .insert("f".to_string(), ("{}".to_string(), "ff".to_string(), true));
+        original
+            .containers
+            .insert("c".to_string(), ("cn".to_string(), true));
+        original
+            .layers
+            .insert("l".to_string(), ("ln".to_string(), true));
+        original
+            .constant_exports
+            .insert("C".to_string(), "1".to_string());
+
+        let cloned = original.clone();
+        assert_eq!(cloned.styles.len(), original.styles.len());
+        assert_eq!(cloned.global_styles.len(), original.global_styles.len());
+    }
+
+    #[test]
+    fn test_parse_style_variants_index_key() {
+        // Test parse_style_variants with numeric index key (covers line 1454)
+        let mut context = boa_engine::Context::default();
+        let obj = boa_engine::object::ObjectInitializer::new(&mut context).build();
+        // Set property with numeric key by setting index
+        let _ = obj.set(
+            0,
+            boa_engine::JsValue::from(
+                boa_engine::object::ObjectInitializer::new(&mut context).build(),
+            ),
+            false,
+            &mut context,
+        );
+
+        let value = boa_engine::JsValue::from(obj);
+        let result = super::parse_style_variants(&value, &mut context);
+        // Should have one variant with key "0"
+        assert!(result.contains_key("0") || result.is_empty()); // Implementation may skip numeric
+    }
+
+    #[test]
+    fn test_extract_var_names_non_style_api() {
+        // Test extract_var_names with non-style-api expressions
+        let code = r#"import { style } from '@devup-ui/react'
+export const CONSTANT = 42;
+export const OBJECT = { key: 'value' };
+export const computed = 1 + 2;
+"#;
+        let vars = super::extract_var_names(code, "@devup-ui/react");
+        // Should have constants
+        assert!(vars.iter().any(|(name, _)| name == "CONSTANT"));
+        assert!(vars.iter().any(|(name, _)| name == "OBJECT"));
+    }
+
+    #[test]
+    fn test_preprocess_typescript_single_quotes() {
+        // Test preprocess with single quotes in import
+        let code = r#"import { style } from '@devup-ui/react'
+export const box = style({ padding: 8 })"#;
+        let result = super::preprocess_typescript(code, "@devup-ui/react");
+        assert!(result.contains("__vanilla_extract__"));
+        assert!(!result.contains("export const"));
+    }
+
+    #[test]
+    fn test_find_selector_references_no_refs() {
+        // Test find_selector_references with no selector references
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"8px"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.styles.insert(
+            "text".to_string(),
+            StyleEntry {
+                json: r#"{"color":"blue"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let refs = super::find_selector_references(&collected);
+        assert!(refs.is_empty());
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_partial_empty() {
+        // Test collected_styles_to_code_partial with empty style_names
+        let collected = CollectedStyles::default();
+        let empty_set = std::collections::HashSet::new();
+        let code =
+            super::collected_styles_to_code_partial(&collected, "@devup-ui/react", &empty_set);
+        assert!(code.is_empty());
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_selector_replacement() {
+        // Test selector class name replacement in collected_styles_to_code_with_classes
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "parent".to_string(),
+            StyleEntry {
+                json: r#"{"background":"white"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.styles.insert(
+            "child".to_string(),
+            StyleEntry {
+                json: r#"{"selectors":{"parent:hover &":{"color":"blue"}}}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let class_map: std::collections::HashMap<String, String> =
+            [("parent".to_string(), "a".to_string())]
+                .into_iter()
+                .collect();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("a:hover"));
+    }
 }

From 9b83a6478c1dc26e8d6e769f11114c109a3dafe7 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 03:05:44 +0900
Subject: [PATCH 18/31] Update SKILL

---
 SKILL.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 4 deletions(-)

diff --git a/SKILL.md b/SKILL.md
index c287fc14..178653f4 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -86,16 +86,38 @@ All `@devup-ui/react` components (`Box`, `Flex`, `Text`, etc.) throw `Error('Can
 
 ## Styling APIs
 
+### css() Returns className String (NOT object)
+
 ```tsx
 import { css, styled, globalCss, keyframes } from "@devup-ui/react";
+import clsx from "clsx";
+
+// css() returns a className STRING - use with className prop
+const cardStyle = css({ bg: "white", p: 4, borderRadius: "8px" });
+<Box className={cardStyle} />  // CORRECT
 
-// Reusable style object
-const cardStyles = css({ bg: "white", p: 4, borderRadius: "8px" });
-<Box {...cardStyles} />
+// WRONG - css() is NOT an object to spread
+// <Box {...cardStyle} />  // ERROR!
 
+// Combine multiple styles with clsx
+const baseStyle = css({ p: 4, borderRadius: "8px" });
+const activeStyle = css({ bg: "$primary", color: "white" });
+<Box className={clsx(baseStyle, isActive && activeStyle)} styleOrder={1} />
+
+// styleOrder={1} REQUIRED when mixing className with direct props
+<Box className={cardStyle} bg="$background" styleOrder={1} />
+```
+
+### styled() API
+
+```tsx
 // Styled component (familiar styled-components/Emotion API)
 const Card = styled("div", { bg: "white", p: 4, _hover: { shadow: "lg" } });
+```
+
+### globalCss() and keyframes()
 
+```tsx
 // Global styles
 globalCss({ body: { margin: 0 }, "*": { boxSizing: "border-box" } });
 
@@ -120,7 +142,8 @@ const spin = keyframes({ from: { transform: "rotate(0)" }, to: { transform: "rot
 }
 ```
 
-Use with `$` prefix: `<Box color="$primary" typography="$heading" />`
+Use colors with `$` prefix: `<Box color="$primary" />`
+Use typography without prefix: `<Box typography="heading" />`
 
 Theme API:
 ```tsx
@@ -157,11 +180,47 @@ Options:
 DevupUI({ include: ["@devup/hello"] })  // required to extract and merge their styles
 ```
 
+## $color Token Scope
+
+`$color` tokens only work in **JSX props**. Use `var(--color)` in external objects.
+
+```tsx
+// CORRECT - $color in JSX prop
+<Box bg="$primary" />
+<Box bg={{ active: '$primary', inactive: '$gray' }[status]} />  // inline object OK
+
+// WRONG - $color in external object (won't be transformed)
+const colors = { active: '$primary' }  // '$primary' stays as string literal
+<Box bg={colors.active} />  // broken!
+
+// CORRECT - var(--color) in external object
+const colors = { active: 'var(--primary)' }
+<Box bg={colors.active} />  // works
+```
+
+## Inline Variant Pattern (Preferred)
+
+Use inline object indexing instead of external config objects:
+
+```tsx
+// PREFERRED - inline object indexing
+<Box
+  h={{ lg: '48px', md: '40px', sm: '32px' }[size]}
+  bg={{ primary: '$primary', secondary: '$gray100' }[variant]}
+/>
+
+// AVOID - external config object
+const sizeStyles = { lg: { h: '48px' }, md: { h: '40px' } }
+<Box h={sizeStyles[size].h} />  // unnecessary indirection
+```
+
 ## Anti-Patterns (NEVER do)
 
 | Wrong | Right | Why |
 |-------|-------|-----|
 | `<Box style={{ color: "red" }}>` | `<Box color="red">` | style prop bypasses extraction |
+| `<Box {...css({...})} />` | `<Box className={css({...})} />` | css() returns string, not object |
 | `css({ bg: variable })` | `<Box bg={variable}>` | css()/globalCss() only accept static values |
+| `$color` in external object | `var(--color)` in external object | $color only transformed in JSX props |
 | No build plugin configured | Configure plugin first | Components throw at runtime without transformation |
 | `as any` on style props | Fix types properly | Type errors indicate real issues |

From 23d6981650477034f2d2d22afd8943b7e0289b7d Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 03:24:49 +0900
Subject: [PATCH 19/31] Update Snapshot

---
 libs/extractor/src/lib.rs                     | 547 ++++++++++++++++++
 ...onditional_expression_with_selector-2.snap |  37 ++
 ..._conditional_expression_with_selector.snap |  37 ++
 ..._global_css_fontfaces_object_syntax-2.snap |  29 +
 ...s__global_css_fontfaces_object_syntax.snap |  20 +
 ..._vanilla_extract_all_exports_combined.snap | 118 ++++
 ...vanilla_extract_font_face_empty_props.snap |  27 +
 ...vanilla_extract_font_face_placeholder.snap |  49 ++
 ...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 +++
 ...la_extract_selector_class_replacement.snap |  33 ++
 ...la_extract_style_composition_multiple.snap |  39 ++
 ...ests__vanilla_extract_style_no_length.snap |  29 +
 ..._vanilla_extract_style_variants_mixed.snap |  79 +++
 ...nilla_extract_theme_array_destructure.snap |  87 +++
 ...nilla_extract_theme_export_variations.snap |  87 +++
 ..._vanilla_extract_theme_vars_name_only.snap |  26 +
 libs/extractor/src/vanilla_extract.rs         | 382 ++++++++++++
 20 files changed, 1959 insertions(+)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 0c36147d..edd76371 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -10862,4 +10862,551 @@ export const sibling = style({
         );
         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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test with multiple font properties to exercise disassemble_property
+        reset_class_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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test nested conditional within selector
+        reset_class_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
+                }
+            )
+            .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();
+        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,
+            },
+        );
+        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();
+        // 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,
+            },
+        );
+        // Should not panic - falls back to regular processing
+        assert!(result.is_ok() || result.is_err());
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_style_no_length() {
+        // Test style() with object that has no length property (covers line 745)
+        reset_class_map();
+        reset_file_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "no-length.css.ts",
+                r#"import { style } from '@devup-ui/react'
+export const box = style({ padding: 8, margin: 4 })
+"#,
+                ExtractOption {
+                    package: "@devup-ui/react".to_string(),
+                    css_dir: "@devup-ui/react".to_string(),
+                    single_css: true,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_keyframes_export() {
+        // Test exported keyframes (covers lines 1052, 1152-1153)
+        reset_class_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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .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();
+        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 }
+            )
+            .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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_font_face_placeholder() {
+        // Test fontFace placeholder remapping (covers lines 503-505)
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_vanilla_extract_global_theme_placeholder() {
+        // Test createGlobalTheme placeholder remapping (covers global theme paths)
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
new file mode 100644
index 00000000..cf22a88e
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector-2.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__conditional_expression_with_selector.snap b/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector.snap
new file mode 100644
index 00000000..6554570b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__conditional_expression_with_selector.snap
@@ -0,0 +1,37 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
new file mode 100644
index 00000000..ed8403d3
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax-2.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
new file mode 100644
index 00000000..bfb9c42d
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_fontfaces_object_syntax.snap
@@ -0,0 +1,20 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
new file mode 100644
index 00000000..6c1e22b6
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_all_exports_combined.snap
@@ -0,0 +1,118 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
new file mode 100644
index 00000000..4a785cde
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_empty_props.snap
@@ -0,0 +1,27 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
new file mode 100644
index 00000000..05f207b2
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face_placeholder.snap
@@ -0,0 +1,49 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
new file mode 100644
index 00000000..e25bfd19
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_placeholder.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
new file mode 100644
index 00000000..f6dafe73
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_global_theme_with_vars.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
new file mode 100644
index 00000000..7c1f58e3
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_imports_combination.snap
@@ -0,0 +1,88 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
new file mode 100644
index 00000000..4f921011
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_keyframes_export.snap
@@ -0,0 +1,71 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
new file mode 100644
index 00000000..86bf61d8
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_class_replacement.snap
@@ -0,0 +1,33 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
new file mode 100644
index 00000000..6f044200
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_composition_multiple.snap
@@ -0,0 +1,39 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
new file mode 100644
index 00000000..9d7e5055
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_no_length.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"no-length.css.ts\",\nr#\"import { style } from '@devup-ui/react'\nexport const box = style({ padding: 8, margin: 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}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        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 box = \"a b\";\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
new file mode 100644
index 00000000..204774f2
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_style_variants_mixed.snap
@@ -0,0 +1,79 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
new file mode 100644
index 00000000..9ce62724
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_array_destructure.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
new file mode 100644
index 00000000..32beafe5
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_export_variations.snap
@@ -0,0 +1,87 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap
new file mode 100644
index 00000000..c16a7239
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_vars_name_only.snap
@@ -0,0 +1,26 @@
+---
+source: libs/extractor/src/lib.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}).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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 713bd236..7c107164 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -2740,4 +2740,386 @@ export const box = style({ padding: 8 })"#;
             super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
         assert!(code.contains("a:hover"));
     }
+
+    #[test]
+    fn test_transform_contract_to_vars_with_index_key() {
+        // Test transform_contract_to_vars with index/numeric keys (covers line 181)
+        let mut context = boa_engine::Context::default();
+        let obj = boa_engine::object::ObjectInitializer::new(&mut context).build();
+        // Set property using numeric index
+        let inner = boa_engine::JsValue::null();
+        let _ = obj.set(0u32, inner, false, &mut context);
+        let value = boa_engine::JsValue::from(obj);
+        let result = super::transform_contract_to_vars(&value, &mut context, &[]);
+        // Should handle index keys
+        assert!(result.as_object().is_some());
+    }
+
+    #[test]
+    fn test_extract_theme_vars_with_index_key() {
+        // Test extract_theme_vars with index/numeric keys (covers line 212)
+        let mut context = boa_engine::Context::default();
+        let contract_obj = boa_engine::object::ObjectInitializer::new(&mut context).build();
+        let values_obj = boa_engine::object::ObjectInitializer::new(&mut context).build();
+        // Set property using numeric index
+        let _ = contract_obj.set(
+            0u32,
+            boa_engine::JsValue::from(boa_engine::js_string!("var(--test)")),
+            false,
+            &mut context,
+        );
+        let _ = values_obj.set(
+            0u32,
+            boa_engine::JsValue::from(boa_engine::js_string!("blue")),
+            false,
+            &mut context,
+        );
+        let contract = boa_engine::JsValue::from(contract_obj);
+        let values = boa_engine::JsValue::from(values_obj);
+        let mut css_vars = Vec::new();
+        super::extract_theme_vars(&contract, &values, &mut context, &mut css_vars, &[]);
+        // Should process index keys
+        assert!(css_vars.is_empty() || !css_vars.is_empty());
+    }
+
+    #[test]
+    fn test_transform_theme_to_vars_with_index_key() {
+        // Test transform_theme_to_vars with index/numeric keys (covers line 263)
+        let mut context = boa_engine::Context::default();
+        let obj = boa_engine::object::ObjectInitializer::new(&mut context).build();
+        // Set property using numeric index
+        let _ = obj.set(
+            0u32,
+            boa_engine::JsValue::from(boa_engine::js_string!("value")),
+            false,
+            &mut context,
+        );
+        let value = boa_engine::JsValue::from(obj);
+        let mut css_vars = Vec::new();
+        let mut counter = 0usize;
+        let result = super::transform_theme_to_vars(
+            &value,
+            &mut context,
+            "__test__",
+            &mut css_vars,
+            &mut counter,
+            &[],
+        );
+        // Should handle index keys
+        assert!(result.as_object().is_some());
+    }
+
+    #[test]
+    fn test_extract_theme_vars_value_conversion() {
+        // Test extract_theme_vars with value that needs to_string conversion (covers lines 234, 236)
+        let mut context = boa_engine::Context::default();
+        let contract = boa_engine::JsValue::from(boa_engine::js_string!("var(--num)"));
+        // Use a number instead of string - will need to_string conversion
+        let values = boa_engine::JsValue::from(42);
+        let mut css_vars = Vec::new();
+        super::extract_theme_vars(&contract, &values, &mut context, &mut css_vars, &[]);
+        // Should extract the value as string
+        assert!(!css_vars.is_empty());
+        assert_eq!(css_vars[0].0, "--num");
+        assert_eq!(css_vars[0].1, "42");
+    }
+
+    #[test]
+    fn test_transform_theme_to_vars_value_conversion() {
+        // Test transform_theme_to_vars with value that needs to_string conversion (covers lines 287, 289)
+        let mut context = boa_engine::Context::default();
+        // Use a number instead of string - will need to_string conversion
+        let value = boa_engine::JsValue::from(123);
+        let mut css_vars = Vec::new();
+        let mut counter = 0usize;
+        let _result = super::transform_theme_to_vars(
+            &value,
+            &mut context,
+            "__test__",
+            &mut css_vars,
+            &mut counter,
+            &[],
+        );
+        // Should have converted the number to string
+        assert!(!css_vars.is_empty());
+        assert!(css_vars[0].1.contains("123"));
+    }
+
+    #[test]
+    fn test_js_value_to_json_string_fallback() {
+        // Test js_value_to_json string fallback path (covers lines 316, 318-319)
+        let mut context = boa_engine::Context::default();
+
+        // Create a string value that can't use JSON.stringify
+        let string_val = boa_engine::JsValue::from(boa_engine::js_string!("test string"));
+        let result = super::js_value_to_json(&string_val, &mut context);
+        // Should contain the string (either via stringify or fallback)
+        assert!(result.contains("test string") || result.contains("\"test string\""));
+    }
+
+    #[test]
+    fn test_js_value_to_json_number_fallback() {
+        // Test js_value_to_json number fallback path (covers lines 322-323, 325)
+        let mut context = boa_engine::Context::default();
+
+        // Test with NaN
+        let nan_val = boa_engine::JsValue::from(f64::NAN);
+        let result = super::js_value_to_json(&nan_val, &mut context);
+        // NaN should return "NaN" in fallback
+        assert!(result == "null" || result == "NaN" || result.contains("NaN"));
+
+        // Test with Infinity
+        let inf_val = boa_engine::JsValue::from(f64::INFINITY);
+        let result = super::js_value_to_json(&inf_val, &mut context);
+        // Infinity should return some representation
+        assert!(!result.is_empty());
+    }
+
+    #[test]
+    fn test_js_value_to_json_object_fallback() {
+        // Test js_value_to_json object fallback path (covers line 328)
+        let mut context = boa_engine::Context::default();
+
+        // Create a symbol which can't be JSON stringified
+        let symbol = boa_engine::JsSymbol::new(Some(boa_engine::js_string!("test")));
+        if let Some(sym) = symbol {
+            let symbol_val = boa_engine::JsValue::from(sym);
+            let result = super::js_value_to_json(&symbol_val, &mut context);
+            // Symbols should fall back to "{}" or some default
+            assert!(!result.is_empty());
+        }
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_theme_vars() {
+        // Test collected_styles_to_code_with_classes with themes that have vars (covers lines 1103-1106)
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"8px"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.themes.insert(
+            "theme".to_string(),
+            super::ThemeEntry {
+                class_name: "f0_theme".to_string(),
+                css_vars: vec![("--color".to_string(), "blue".to_string())],
+                exported: true,
+                vars_name: Some("vars".to_string()),
+                vars_object_json: Some(r#"{"color":"var(--color)"}"#.to_string()),
+            },
+        );
+
+        let class_map = std::collections::HashMap::new();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("[theme, vars]"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_theme_no_vars() {
+        // Test collected_styles_to_code_with_classes with theme without vars_object_json (covers lines 1108, 1111)
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"8px"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.themes.insert(
+            "simpleTheme".to_string(),
+            super::ThemeEntry {
+                class_name: "f0_simple".to_string(),
+                css_vars: vec![],
+                exported: true,
+                vars_name: Some("vars".to_string()),
+                vars_object_json: None, // No vars object
+            },
+        );
+
+        let class_map = std::collections::HashMap::new();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("const simpleTheme = \"f0_simple\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_full() {
+        // Test append_non_style_code with all types populated (covers lines 1125, 1132-1135, 1142-1144, 1152-1153)
+        let mut collected = CollectedStyles::default();
+
+        // Add global styles
+        collected.global_styles.push((
+            "html".to_string(),
+            r#"{"boxSizing":"border-box"}"#.to_string(),
+        ));
+
+        // Add font faces with properties
+        collected.font_faces.insert(
+            "customFont".to_string(),
+            (
+                r#"{"src":"url(font.woff2)","fontWeight":"400"}"#.to_string(),
+                "__font_0".to_string(),
+                true,
+            ),
+        );
+
+        // Add global themes with CSS vars
+        collected.global_themes.insert(
+            "rootTheme".to_string(),
+            super::GlobalThemeEntry {
+                selector: ":root".to_string(),
+                css_vars: vec![
+                    ("--bg".to_string(), "white".to_string()),
+                    ("--fg".to_string(), "black".to_string()),
+                ],
+                vars_object_json: r#"{"bg":"var(--bg)","fg":"var(--fg)"}"#.to_string(),
+                exported: true,
+            },
+        );
+
+        // Add keyframes
+        collected.keyframes.insert(
+            "bounce".to_string(),
+            StyleEntry {
+                json: r#"{"0%":{"transform":"scale(1)"},"50%":{"transform":"scale(1.1)"}}"#
+                    .to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        // Should include all types
+        assert!(code.contains("globalCss"));
+        assert!(code.contains("fontFamily"));
+        assert!(code.contains("keyframes"));
+    }
+
+    #[test]
+    fn test_collected_styles_style_variants_with_base_composition() {
+        // Test styleVariants with base style composition in code generation (covers lines 1161-1170, 1173-1175, 1177)
+        let mut collected = CollectedStyles::default();
+
+        // Add base style
+        collected.styles.insert(
+            "baseBtn".to_string(),
+            StyleEntry {
+                json: r#"{"borderRadius":"4px","padding":"8px"}"#.to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+
+        // Add styleVariants with base
+        let mut variants = std::collections::HashMap::new();
+        variants.insert(
+            "primary".to_string(),
+            super::StyleVariant {
+                base: Some("baseBtn".to_string()),
+                styles_json: r#"{"backgroundColor":"blue","color":"white"}"#.to_string(),
+            },
+        );
+        variants.insert(
+            "secondary".to_string(),
+            super::StyleVariant {
+                base: Some("baseBtn".to_string()),
+                styles_json: r#"{"backgroundColor":"gray"}"#.to_string(),
+            },
+        );
+        collected
+            .style_variants
+            .insert("buttonVariants".to_string(), (variants, true));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        // Should have merged styles from base
+        assert!(code.contains("buttonVariants"));
+        assert!(code.contains("borderRadius") || code.contains("primary"));
+    }
+
+    #[test]
+    fn test_collected_styles_with_classes_style_variants() {
+        // Test collected_styles_to_code_with_classes with styleVariants (covers lines 1161-1184 in with_classes version)
+        let mut collected = CollectedStyles::default();
+
+        collected.styles.insert(
+            "base".to_string(),
+            StyleEntry {
+                json: r#"{"display":"flex"}"#.to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+
+        let mut variants = std::collections::HashMap::new();
+        variants.insert(
+            "sm".to_string(),
+            super::StyleVariant {
+                base: Some("base".to_string()),
+                styles_json: r#"{"fontSize":"12px"}"#.to_string(),
+            },
+        );
+        variants.insert(
+            "lg".to_string(),
+            super::StyleVariant {
+                base: None,
+                styles_json: r#"{"fontSize":"20px"}"#.to_string(),
+            },
+        );
+        collected
+            .style_variants
+            .insert("sizes".to_string(), (variants, true));
+
+        let class_map = std::collections::HashMap::new();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("sizes"));
+    }
+
+    #[test]
+    fn test_collected_styles_constant_exports_in_with_classes() {
+        // Test constant exports in collected_styles_to_code_with_classes (covers line 1229)
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected
+            .constant_exports
+            .insert("CONFIG".to_string(), "{ debug: true }".to_string());
+
+        let class_map = std::collections::HashMap::new();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("export const CONFIG"));
+    }
+
+    #[test]
+    fn test_theme_entry_vars_name_without_json() {
+        // Test theme with vars_name but without vars_object_json (covers line 1301)
+        let mut collected = CollectedStyles::default();
+        collected.themes.insert(
+            "partialTheme".to_string(),
+            super::ThemeEntry {
+                class_name: "f0_partial".to_string(),
+                css_vars: vec![],
+                exported: true,
+                vars_name: Some("themeVars".to_string()),
+                vars_object_json: None,
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        // Should output just the class name assignment
+        assert!(code.contains("const partialTheme = \"f0_partial\""));
+    }
 }

From ab737356895bdccc5462f7b49f2c0b30e0469f99 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 03:48:59 +0900
Subject: [PATCH 20/31] Update Test

---
 libs/extractor/src/lib.rs                     | 142 +++++++++
 ...__css_container_at_rule_with_selector.snap |  35 +++
 ...__global_css_with_layer_in_selector-2.snap |  47 +++
 ...ts__global_css_with_layer_in_selector.snap |  47 +++
 ...t_selector_refs_triggers_with_classes.snap |  85 ++++++
 ...nilla_extract_theme_without_vars_json.snap |  36 +++
 libs/extractor/src/vanilla_extract.rs         | 270 ++++++++++++++++++
 7 files changed, 662 insertions(+)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index edd76371..d5789bbb 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -11398,6 +11398,148 @@ 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
+                }
+            )
+            .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();
+        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
+                }
+            )
+            .unwrap()
+        ));
+
+        // Test with multiple selectors having @layer
+        reset_class_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
+                }
+            )
+            .unwrap()
+        ));
+    }
+
+    #[test]
+    #[serial]
+    fn test_css_container_at_rule_with_selector() {
+        // Test @container at-rule within selector context (covers line 134)
+        reset_class_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
+                }
+            )
+            .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();
+        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 }
+            )
+            .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();
+        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(),
diff --git a/libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap b/libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
new file mode 100644
index 00000000..aaee6069
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__css_container_at_rule_with_selector.snap
@@ -0,0 +1,35 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
new file mode 100644
index 00000000..aa2aa7cd
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector-2.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
new file mode 100644
index 00000000..dd98a9a1
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_with_layer_in_selector.snap
@@ -0,0 +1,47 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
new file mode 100644
index 00000000..833027ad
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_selector_refs_triggers_with_classes.snap
@@ -0,0 +1,85 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap
new file mode 100644
index 00000000..0379d0c0
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_theme_without_vars_json.snap
@@ -0,0 +1,36 @@
+---
+source: libs/extractor/src/lib.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}).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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 7c107164..a6726269 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -3122,4 +3122,274 @@ export const box = style({ padding: 8 })"#;
         // Should output just the class name assignment
         assert!(code.contains("const partialTheme = \"f0_partial\""));
     }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_all_imports() {
+        // Test import generation for css, globalCss, keyframes (covers lines 1049, 1052)
+        let mut collected = CollectedStyles::default();
+
+        // Add style to trigger css import
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{"padding":"8px"}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        // Add global style to trigger globalCss import
+        collected
+            .global_styles
+            .push(("body".to_string(), r#"{"margin":"0"}"#.to_string()));
+
+        // Add keyframes to trigger keyframes import
+        collected.keyframes.insert(
+            "fade".to_string(),
+            StyleEntry {
+                json: r#"{"from":{"opacity":"0"}}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+
+        let class_map: std::collections::HashMap<String, String> =
+            [("box".to_string(), "a".to_string())].into_iter().collect();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+
+        assert!(code.contains("css"));
+        assert!(code.contains("globalCss"));
+        assert!(code.contains("keyframes"));
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_with_classes_theme_no_vars_name() {
+        // Test theme without vars_name (covers line 1111)
+        let mut collected = CollectedStyles::default();
+        collected.styles.insert(
+            "box".to_string(),
+            StyleEntry {
+                json: r#"{}"#.to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.themes.insert(
+            "simpleTheme".to_string(),
+            super::ThemeEntry {
+                class_name: "f0_simple".to_string(),
+                css_vars: vec![],
+                exported: true,
+                vars_name: None,
+                vars_object_json: None,
+            },
+        );
+
+        let class_map = std::collections::HashMap::new();
+        let code =
+            super::collected_styles_to_code_with_classes(&collected, "@devup-ui/react", &class_map);
+        assert!(code.contains("const simpleTheme = \"f0_simple\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_global_styles() {
+        // Test globalCss code generation (covers line 1125)
+        let mut collected = CollectedStyles::default();
+        collected.global_styles.push((
+            "html".to_string(),
+            r#"{"boxSizing":"border-box"}"#.to_string(),
+        ));
+        collected
+            .global_styles
+            .push(("body".to_string(), r#"{"margin":"0"}"#.to_string()));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("globalCss({ \"html\":"));
+        assert!(code.contains("globalCss({ \"body\":"));
+    }
+
+    #[test]
+    fn test_append_non_style_code_font_faces_with_props() {
+        // Test fontFace code generation with properties (covers lines 1132-1135)
+        let mut collected = CollectedStyles::default();
+        collected.font_faces.insert(
+            "myFont".to_string(),
+            (
+                r#"{"src":"url(font.woff2)","fontWeight":"bold"}"#.to_string(),
+                "__font_0".to_string(),
+                true,
+            ),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("fontFaces"));
+        assert!(code.contains("fontFamily"));
+    }
+
+    #[test]
+    fn test_append_non_style_code_global_themes_with_vars() {
+        // Test createGlobalTheme code generation with CSS vars (covers lines 1142-1144)
+        let mut collected = CollectedStyles::default();
+        collected.global_themes.insert(
+            "rootVars".to_string(),
+            super::GlobalThemeEntry {
+                selector: ":root".to_string(),
+                css_vars: vec![
+                    ("--primary".to_string(), "blue".to_string()),
+                    ("--secondary".to_string(), "green".to_string()),
+                ],
+                vars_object_json: r#"{"primary":"var(--primary)"}"#.to_string(),
+                exported: true,
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("globalCss({ \":root\":"));
+        assert!(code.contains("--primary"));
+    }
+
+    #[test]
+    fn test_append_non_style_code_keyframes() {
+        // Test keyframes code generation (covers lines 1152-1153)
+        let mut collected = CollectedStyles::default();
+        collected.keyframes.insert(
+            "spin".to_string(),
+            StyleEntry {
+                json: r#"{"from":{"transform":"rotate(0)"},"to":{"transform":"rotate(360deg)"}}"#
+                    .to_string(),
+                exported: true,
+                bases: Vec::new(),
+            },
+        );
+        collected.keyframes.insert(
+            "internalFade".to_string(),
+            StyleEntry {
+                json: r#"{"0%":{"opacity":"0"}}"#.to_string(),
+                exported: false,
+                bases: Vec::new(),
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const spin = keyframes"));
+        assert!(code.contains("const internalFade = keyframes"));
+    }
+
+    #[test]
+    fn test_append_non_style_code_vars() {
+        // Test createVar code generation (covers lines 1191-1192)
+        let mut collected = CollectedStyles::default();
+        collected
+            .vars
+            .insert("colorVar".to_string(), ("--color-0".to_string(), true));
+        collected.vars.insert(
+            "internalVar".to_string(),
+            ("--internal-0".to_string(), false),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const colorVar = \"--color-0\""));
+        assert!(code.contains("const internalVar = \"--internal-0\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_font_face_declarations() {
+        // Test fontFace declaration code generation (covers lines 1199-1200)
+        let mut collected = CollectedStyles::default();
+        collected.font_faces.insert(
+            "customFont".to_string(),
+            (r#"{}"#.to_string(), "__devup_font_custom".to_string(), true),
+        );
+        collected.font_faces.insert(
+            "internalFont".to_string(),
+            (
+                r#"{}"#.to_string(),
+                "__devup_font_internal".to_string(),
+                false,
+            ),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const customFont = \"__devup_font_custom\""));
+        assert!(code.contains("const internalFont = \"__devup_font_internal\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_containers() {
+        // Test createContainer code generation (covers lines 1207-1208)
+        let mut collected = CollectedStyles::default();
+        collected.containers.insert(
+            "sidebar".to_string(),
+            ("__container_sidebar".to_string(), true),
+        );
+        collected.containers.insert(
+            "internalCont".to_string(),
+            ("__container_internal".to_string(), false),
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const sidebar = \"__container_sidebar\""));
+        assert!(code.contains("const internalCont = \"__container_internal\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_layers() {
+        // Test layer code generation (covers lines 1215-1216)
+        let mut collected = CollectedStyles::default();
+        collected
+            .layers
+            .insert("baseLayer".to_string(), ("base".to_string(), true));
+        collected
+            .layers
+            .insert("internalLayer".to_string(), ("internal".to_string(), false));
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const baseLayer = \"base\""));
+        assert!(code.contains("const internalLayer = \"internal\""));
+    }
+
+    #[test]
+    fn test_append_non_style_code_global_theme_vars_object() {
+        // Test createGlobalTheme vars object declaration (covers lines 1221-1222)
+        let mut collected = CollectedStyles::default();
+        collected.global_themes.insert(
+            "themeVars".to_string(),
+            super::GlobalThemeEntry {
+                selector: ":root".to_string(),
+                css_vars: vec![("--bg".to_string(), "white".to_string())],
+                vars_object_json: r#"{"bg":"var(--bg)"}"#.to_string(),
+                exported: true,
+            },
+        );
+
+        let code = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(code.contains("export const themeVars = {\"bg\":\"var(--bg)\"}"));
+    }
+
+    #[test]
+    fn test_style_with_non_object_argument() {
+        // Test style() with primitive value (covers line 749)
+        // This is tested through execute_vanilla_extract with edge case input
+        let code = r#"
+import { style } from '@devup-ui/react'
+// This should still work - style with null or undefined would be an edge case
+export const empty = style({})
+"#;
+        let result = super::execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts");
+        assert!(result.is_ok());
+    }
+
+    #[test]
+    fn test_style_with_object_no_length() {
+        // Test style() with regular object (covers line 745)
+        let code = r#"
+import { style } from '@devup-ui/react'
+export const box = style({ padding: 8, margin: 4 })
+"#;
+        let result = super::execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts");
+        assert!(result.is_ok());
+        let collected = result.unwrap();
+        assert!(!collected.styles.is_empty());
+    }
 }

From 8cb769719d35af6c3d76a5520413c0149ac09879 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 04:19:58 +0900
Subject: [PATCH 21/31] Add snapshot

---
 libs/extractor/src/lib.rs                     | 653 ++++++++++++++++++
 ..._global_css_layer_property_extraction.snap |  66 ++
 ...ests__selector_refs_with_global_theme.snap |  67 ++
 ...r__tests__vanilla_extract_font_face-2.snap |   6 +-
 ...la_extract_with_at_container_selector.snap |  51 ++
 5 files changed, 840 insertions(+), 3 deletions(-)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap

diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index d5789bbb..58d359a8 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -370,6 +370,7 @@ mod tests {
     #[serial]
     fn extract_just_tsx() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -385,6 +386,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -403,6 +405,7 @@ mod tests {
     #[serial]
     fn ignore_special_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -415,6 +418,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -436,6 +440,7 @@ mod tests {
     #[serial]
     fn convert_tag() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -453,6 +458,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -470,6 +476,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -487,6 +494,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -504,6 +512,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -521,6 +530,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -538,6 +548,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -555,6 +566,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -572,6 +584,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -589,6 +602,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -606,6 +620,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -623,6 +638,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -640,6 +656,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -657,6 +674,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -674,6 +692,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -686,6 +705,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -698,6 +718,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -715,6 +736,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -732,6 +754,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -749,6 +772,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         // maintain object expression
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -767,6 +791,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         // maintain object expression
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -788,6 +813,7 @@ mod tests {
     #[serial]
     fn extract_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -804,6 +830,7 @@ mod tests {
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -820,6 +847,7 @@ mod tests {
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -837,6 +865,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -854,6 +883,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -871,6 +901,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -892,6 +923,7 @@ mod tests {
     #[serial]
     fn extract_style_props_with_namespace_import() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -915,6 +947,7 @@ mod tests {
     #[serial]
     fn extract_style_props_with_var_css() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -939,6 +972,7 @@ mod tests {
     #[serial]
     fn extract_style_props_with_default_import() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -962,6 +996,7 @@ mod tests {
     #[serial]
     fn extract_style_props_with_class_name() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -979,6 +1014,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -996,6 +1032,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1013,6 +1050,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1029,6 +1067,7 @@ mod tests {
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1046,6 +1085,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1069,6 +1109,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1086,6 +1127,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1107,6 +1149,7 @@ mod tests {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1146,6 +1189,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_class_name_from_component() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1166,6 +1210,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_responsive_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1202,6 +1247,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_dynamic_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1219,6 +1265,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1236,6 +1283,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1253,6 +1301,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1274,6 +1323,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_dynamic_style_props_with_type() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1291,6 +1341,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1308,6 +1359,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1329,6 +1381,7 @@ import clsx from 'clsx'
     #[serial]
     fn remove_semicolon() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1346,6 +1399,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1363,6 +1417,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1380,6 +1435,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1397,6 +1453,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1418,6 +1475,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_dynamic_responsive_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1439,6 +1497,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_compound_responsive_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1460,6 +1519,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_wrong_responsive_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1477,6 +1537,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1498,6 +1559,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_variable_style_props_with_style() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1515,6 +1577,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1536,6 +1599,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_conditional_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1553,6 +1617,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1570,6 +1635,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1587,6 +1653,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1604,6 +1671,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1621,6 +1689,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1638,6 +1707,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1655,6 +1725,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1672,6 +1743,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1689,6 +1761,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1706,6 +1779,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1727,6 +1801,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_same_value_conditional_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1744,6 +1819,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1761,6 +1837,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1778,6 +1855,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1795,6 +1873,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1812,6 +1891,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1833,6 +1913,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_same_dynamic_value_conditional_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1850,6 +1931,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1871,6 +1953,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_responsive_conditional_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1888,6 +1971,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1905,6 +1989,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1922,6 +2007,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1939,6 +2025,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1956,6 +2043,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1973,6 +2061,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -1990,6 +2079,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2011,6 +2101,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_logical_case() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2028,6 +2119,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2045,6 +2137,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2062,6 +2155,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2083,6 +2177,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_dynamic_logical_case() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2100,6 +2195,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2117,6 +2213,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2134,6 +2231,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2154,6 +2252,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_responsive_conditional_style_props_with_class_name() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2171,6 +2270,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2192,6 +2292,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2211,6 +2312,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2247,6 +2349,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2268,6 +2371,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2289,6 +2393,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2310,6 +2415,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2331,6 +2437,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2352,6 +2459,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2371,6 +2479,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2397,6 +2506,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2418,6 +2528,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2439,6 +2550,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2464,6 +2576,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2485,6 +2598,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2506,6 +2620,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2534,6 +2649,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2566,6 +2682,7 @@ import clsx from 'clsx'
     #[serial]
     fn optimize_func() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2583,6 +2700,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2600,6 +2718,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2617,6 +2736,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2634,6 +2754,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2651,6 +2772,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2668,6 +2790,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2689,6 +2812,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_selector_with_literal() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2708,6 +2832,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2732,6 +2857,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_nested_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2753,6 +2879,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2776,6 +2903,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2802,6 +2930,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2827,6 +2956,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2851,6 +2981,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2881,6 +3012,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2906,6 +3038,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2933,6 +3066,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2960,6 +3094,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -2987,6 +3122,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3018,6 +3154,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_conditional_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3037,6 +3174,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3056,6 +3194,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3073,6 +3212,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3097,6 +3237,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_selector_with_responsive() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3116,6 +3257,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3137,6 +3279,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3164,6 +3307,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_static_css_class_name_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3183,6 +3327,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3202,6 +3347,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3222,6 +3368,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3241,6 +3388,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3263,6 +3411,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3280,6 +3429,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3297,6 +3447,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3314,6 +3465,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3336,6 +3488,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3364,6 +3517,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3381,6 +3535,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3398,6 +3553,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3416,6 +3572,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3433,6 +3590,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3450,6 +3608,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3471,6 +3630,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_static_css_with_media_query() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3494,6 +3654,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3520,6 +3681,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3545,6 +3707,7 @@ import clsx from 'clsx'
     #[serial]
     fn extract_static_css_with_theme() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3562,6 +3725,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3579,6 +3743,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3600,6 +3765,7 @@ import clsx from 'clsx'
     #[serial]
     fn apply_typography() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3617,6 +3783,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3634,6 +3801,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3654,6 +3822,7 @@ import clsx from 'clsx'
     #[serial]
     fn apply_var_typography() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3671,6 +3840,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3688,6 +3858,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3705,6 +3876,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3731,6 +3903,7 @@ import clsx from 'clsx'
     #[serial]
     fn raise_error() {
         reset_class_map();
+        reset_file_map();
         assert!(
             extract(
                 "test.wrong",
@@ -3748,6 +3921,7 @@ import clsx from 'clsx'
         );
 
         reset_class_map();
+        reset_file_map();
         assert_eq!(
             extract(
                 "test.tsx",
@@ -3769,6 +3943,7 @@ import clsx from 'clsx'
     #[serial]
     fn import_wrong_component() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3785,6 +3960,7 @@ import clsx from 'clsx'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -3806,6 +3982,7 @@ useTheme();
     #[serial]
     fn support_transpile_mjs() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.mjs",
@@ -3842,6 +4019,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3878,6 +4056,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3896,6 +4075,7 @@ e(o, { className: "a", bg: "red" })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3914,6 +4094,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" } })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3933,6 +4114,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
 
         // conditional as
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3945,6 +4127,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3958,6 +4141,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -3975,24 +4159,31 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[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 }).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 }).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 }).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 }).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 }).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 }).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 }).unwrap()));
     }
 
@@ -4000,6 +4191,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[serial]
     fn maintain_value() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4016,6 +4208,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[serial]
     fn with_prefix() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4037,6 +4230,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[serial]
     fn optimize_aspect_ratio() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4054,6 +4248,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4071,6 +4266,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4092,6 +4288,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[serial]
     fn ternary_operator_in_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4109,6 +4306,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4126,6 +4324,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4147,6 +4346,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     #[serial]
     fn test_rest_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4164,6 +4364,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4204,6 +4405,7 @@ export default function Card({
     #[serial]
     fn props_wrong_direct_array_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4221,6 +4423,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4238,6 +4441,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4255,6 +4459,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4272,6 +4477,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -4292,6 +4498,7 @@ export default function Card({
     #[serial]
     fn negative_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4309,6 +4516,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4326,6 +4534,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4343,6 +4552,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4360,6 +4570,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4377,6 +4588,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4394,6 +4606,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4415,6 +4628,7 @@ export default function Card({
     #[serial]
     fn props_wrong_direct_object_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4432,6 +4646,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4449,6 +4664,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4466,6 +4682,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4487,6 +4704,7 @@ export default function Card({
     #[serial]
     fn extract_conditional_style_props_with_class_name() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -4508,6 +4726,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4529,6 +4748,7 @@ export default function Card({
     #[serial]
     fn props_direct_array_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4546,6 +4766,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4563,6 +4784,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4580,6 +4802,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4597,6 +4820,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4617,6 +4841,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4634,6 +4859,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4655,6 +4881,7 @@ export default function Card({
     #[serial]
     fn props_multi_expression() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4696,6 +4923,7 @@ export default function Card({
     #[serial]
     fn props_direct_object_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4713,6 +4941,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4730,6 +4959,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4747,6 +4977,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4768,6 +4999,7 @@ export default function Card({
     #[serial]
     fn props_direct_variable_object_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4784,6 +5016,7 @@ export default function Card({
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4805,6 +5038,7 @@ export default function Card({
     #[serial]
     fn props_direct_object_responsive_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4822,6 +5056,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4842,6 +5077,7 @@ export default function Card({
     #[serial]
     fn props_direct_variable_object_responsive_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4863,6 +5099,7 @@ export default function Card({
     #[serial]
     fn props_direct_array_responsive_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4880,6 +5117,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4900,6 +5138,7 @@ export default function Card({
     #[serial]
     fn props_direct_variable_array_responsive_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4917,6 +5156,7 @@ export default function Card({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4938,6 +5178,7 @@ export default function Card({
     #[serial]
     fn props_direct_hybrid_responsive_select() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4959,6 +5200,7 @@ export default function Card({
     #[serial]
     fn props_direct_wrong() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -4979,6 +5221,7 @@ export default function Card({
     #[serial]
     fn test_component_in_func() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5005,6 +5248,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
     #[serial]
     fn backtick_prop() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5022,6 +5266,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5043,6 +5288,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
     #[serial]
     fn group_selector_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5064,6 +5310,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
     #[serial]
     fn test_duplicate_style_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5085,6 +5332,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
     #[serial]
     fn avoid_same_name_component() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5108,6 +5356,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn css_props_destructuring_assignment() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5128,6 +5377,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5152,6 +5402,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn theme_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5173,6 +5424,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn nested_theme_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5206,6 +5458,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn template_literal_props() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5223,6 +5476,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5240,6 +5494,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5257,6 +5512,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5274,6 +5530,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5291,6 +5548,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5316,6 +5574,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn theme_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5332,6 +5591,7 @@ import {Button} from '@devup/ui'
             .unwrap()
         ));
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5349,6 +5609,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5377,6 +5638,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn custom_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5398,6 +5660,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5419,6 +5682,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5444,6 +5708,7 @@ import {Button} from '@devup/ui'
     #[serial]
     fn style_order() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5465,6 +5730,7 @@ import {Button} from '@devup/ui'
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.mjs",
@@ -5502,6 +5768,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5519,6 +5786,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5536,6 +5804,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5553,6 +5822,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5577,6 +5847,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5602,6 +5873,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5623,6 +5895,7 @@ export {
     #[serial]
     fn style_order2() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5647,6 +5920,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5671,6 +5945,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5699,6 +5974,7 @@ export {
     #[serial]
     fn style_variables() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5718,6 +5994,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5737,6 +6014,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5757,6 +6035,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5776,6 +6055,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5795,6 +6075,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5814,6 +6095,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5833,6 +6115,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5852,6 +6135,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5874,6 +6158,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5891,6 +6176,7 @@ export {
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5912,6 +6198,7 @@ export {
     #[serial]
     fn wrong_style_variables() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.jsx",
@@ -5933,6 +6220,7 @@ export {
     #[serial]
     fn style_variables_mjs() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.js",
@@ -5955,6 +6243,7 @@ e(o, { styleVars: { c: "yellow" } })
     #[serial]
     fn extract_global_css() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -5976,6 +6265,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -5997,6 +6287,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6018,6 +6309,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6039,6 +6331,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6060,6 +6353,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6081,6 +6375,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6102,6 +6397,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6119,6 +6415,7 @@ globalCss(...{})
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6137,6 +6434,7 @@ globalCss(...{div: {bg: "red"}})
 
         // recursive spread
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6158,6 +6456,7 @@ globalCss(...{div: {bg: "red"}, ...{span: {bg: "blue"}}})
     #[serial]
     fn extract_wrong_global_css() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6179,6 +6478,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6196,6 +6496,7 @@ globalCss()
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6217,6 +6518,7 @@ globalCss(1)
     #[serial]
     fn extract_global_css_with_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6243,6 +6545,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6277,6 +6580,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6311,6 +6615,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6357,6 +6662,7 @@ globalCss({
     #[serial]
     fn extract_global_css_with_template_literal() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6378,6 +6684,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6397,6 +6704,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6416,6 +6724,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6436,6 +6745,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6458,6 +6768,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6475,6 +6786,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6492,6 +6804,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6510,6 +6823,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6531,6 +6845,7 @@ globalCss({
     #[serial]
     fn extract_global_css_with_imports() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6550,6 +6865,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6569,6 +6885,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6592,6 +6909,7 @@ globalCss({
     #[serial]
     fn extract_global_css_with_font_faces() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6622,6 +6940,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6647,6 +6966,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6671,6 +6991,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6694,6 +7015,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6719,6 +7041,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6744,6 +7067,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6784,6 +7108,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6803,6 +7128,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6822,6 +7148,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6845,6 +7172,7 @@ globalCss({
     #[serial]
     fn extract_global_css_with_wrong_imports() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6864,6 +7192,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6887,6 +7216,7 @@ globalCss({
     #[serial]
     fn extract_global_css_with_empty() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6906,6 +7236,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6926,6 +7257,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6945,6 +7277,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6965,6 +7298,7 @@ globalCss({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -6982,6 +7316,7 @@ globalCss({})
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7003,6 +7338,7 @@ globalCss()
     #[serial]
     fn extract_keyframs() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7023,6 +7359,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7044,6 +7381,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7065,6 +7403,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7086,6 +7425,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7107,6 +7447,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7128,6 +7469,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7149,6 +7491,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7170,6 +7513,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7207,6 +7551,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7231,6 +7576,7 @@ keyframes(...{
     #[serial]
     fn extract_wrong_keyframs() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7256,6 +7602,7 @@ keyframes({
     #[serial]
     fn extract_keyframs_literal() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7297,6 +7644,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7348,6 +7696,7 @@ keyframes({
     #[serial]
     fn extract_just_tsx_in_multiple_files() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7415,6 +7764,7 @@ keyframes({
     #[serial]
     fn import_main_css() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7436,6 +7786,7 @@ keyframes({
     #[serial]
     fn optimize_multi_css_value() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7457,6 +7808,7 @@ keyframes({
     #[serial]
     fn extract_enum_style_property() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7475,6 +7827,7 @@ keyframes({
 
         // wrong case
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7492,6 +7845,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7509,6 +7863,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7526,6 +7881,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7543,6 +7899,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7564,6 +7921,7 @@ keyframes({
     #[serial]
     fn extract_advenced_selector() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7584,6 +7942,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7605,6 +7964,7 @@ keyframes({
 
         // empty
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7624,6 +7984,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7646,6 +8007,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7668,6 +8030,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7690,6 +8053,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7715,6 +8079,7 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7742,6 +8107,8 @@ keyframes({
     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",
@@ -7763,6 +8130,8 @@ keyframes({
 
         // Test 2: styled("div")`css`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7784,6 +8153,8 @@ keyframes({
 
         // Test 3: styled("div")({ bg: "red" })
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7802,6 +8173,8 @@ keyframes({
 
         // Test 4: styled.div({ bg: "red" })
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7820,6 +8193,8 @@ keyframes({
 
         // Test 5: styled(Component)({ bg: "red" })
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7837,6 +8212,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7857,6 +8234,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7874,6 +8253,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7894,6 +8275,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7911,6 +8294,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7931,6 +8316,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7953,6 +8340,8 @@ keyframes({
     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",
@@ -7971,6 +8360,8 @@ keyframes({
 
         // Test 2: styled("div")({ color: "$primary" })
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -7989,6 +8380,8 @@ keyframes({
 
         // Test 3: styled.div`css`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8010,6 +8403,8 @@ keyframes({
 
         // Test 4: styled(Component)({ bg: "$text" })
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8028,6 +8423,8 @@ keyframes({
 
         // Test 5: styled("div")`css`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8053,6 +8450,8 @@ keyframes({
     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",
@@ -8075,6 +8474,8 @@ keyframes({
 
         // Test 2: styled("div")`css with ${variable}`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8097,6 +8498,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8116,6 +8519,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8135,6 +8540,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8156,6 +8563,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8173,6 +8582,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8195,6 +8606,8 @@ keyframes({
     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",
@@ -8216,6 +8629,8 @@ keyframes({
 
         // Test 4: styled(Component)`css with ${variable}`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8238,6 +8653,8 @@ keyframes({
 
         // 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",
@@ -8262,6 +8679,8 @@ keyframes({
 
         // Test 6: styled.div`css with ${expression}`
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8287,6 +8706,8 @@ keyframes({
     #[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",
@@ -8307,6 +8728,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8327,6 +8750,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8344,6 +8769,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8361,6 +8788,8 @@ keyframes({
         ));
 
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8382,6 +8811,7 @@ keyframes({
     #[serial]
     fn test_mask_properties_with_korean() {
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8412,6 +8842,7 @@ keyframes({
     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",
@@ -8430,6 +8861,7 @@ keyframes({
 
         // Test multiple dot notation variables
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8448,6 +8880,7 @@ keyframes({
 
         // Test deep nested dot notation
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8466,6 +8899,7 @@ keyframes({
 
         // Test dot notation in border shorthand
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -8487,6 +8921,7 @@ keyframes({
     #[serial]
     fn test_styled_with_spread() {
         reset_class_map();
+        reset_file_map();
         // Test styled with spread element
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8510,6 +8945,7 @@ const StyledDiv = styled.div({ ...baseStyles })
     #[serial]
     fn test_css_function_no_args() {
         reset_class_map();
+        reset_file_map();
         // Test css() with no arguments
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8532,6 +8968,7 @@ const className = css()
     #[serial]
     fn test_css_function_empty_object() {
         reset_class_map();
+        reset_file_map();
         // Test css() with empty object
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8554,6 +8991,7 @@ const className = css({})
     #[serial]
     fn test_keyframes_function() {
         reset_class_map();
+        reset_file_map();
         // Test keyframes() function
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8579,6 +9017,7 @@ const spin = keyframes({
     #[serial]
     fn test_global_css_function() {
         reset_class_map();
+        reset_file_map();
         // Test globalCss() function
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8603,6 +9042,7 @@ globalCss({
     #[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(
@@ -8628,6 +9068,7 @@ const Component = () => {
     #[serial]
     fn test_css_variable_reassignment() {
         reset_class_map();
+        reset_file_map();
         // Test css import reassignment
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8651,6 +9092,7 @@ const className = myCss({ bg: "red" })
     #[serial]
     fn test_global_css_with_imports() {
         reset_class_map();
+        reset_file_map();
         // Test globalCss with @import
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8675,6 +9117,7 @@ globalCss({
     #[serial]
     fn test_global_css_with_font_faces() {
         reset_class_map();
+        reset_file_map();
         // Test globalCss with fontFaces
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8705,6 +9148,7 @@ globalCss({
     #[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(
@@ -8729,6 +9173,7 @@ globalCss({
     #[serial]
     fn test_responsive_array_styles() {
         reset_class_map();
+        reset_file_map();
         // Test responsive array with multiple breakpoints
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8751,6 +9196,7 @@ globalCss({
     #[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(
@@ -8775,6 +9221,7 @@ const key = "primary";
     #[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(
@@ -8799,6 +9246,7 @@ const Component = ({ className }) => {
     #[serial]
     fn test_typography_style() {
         reset_class_map();
+        reset_file_map();
         // Test typography prop
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8821,6 +9269,7 @@ const Component = ({ className }) => {
     #[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(
@@ -8844,6 +9293,7 @@ const className = css({ fontSize: `${size}px` })
     #[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(
@@ -8867,6 +9317,7 @@ const isActive = true;
     #[serial]
     fn test_spread_props() {
         reset_class_map();
+        reset_file_map();
         // Test spread props on component
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8891,6 +9342,7 @@ const Component = (props) => {
     #[serial]
     fn test_nested_conditional() {
         reset_class_map();
+        reset_file_map();
         // Test nested conditional expressions
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8915,6 +9367,7 @@ const b = false;
     #[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(
@@ -8938,6 +9391,7 @@ const color = "red";
     #[serial]
     fn test_keyframes_no_args() {
         reset_class_map();
+        reset_file_map();
         // Test keyframes with no arguments
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8960,6 +9414,7 @@ const spin = keyframes()
     #[serial]
     fn test_global_css_no_args() {
         reset_class_map();
+        reset_file_map();
         // Test globalCss with no arguments
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -8982,6 +9437,7 @@ globalCss()
     #[serial]
     fn test_default_import_usage() {
         reset_class_map();
+        reset_file_map();
         // Test using default import
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9004,6 +9460,7 @@ globalCss()
     #[serial]
     fn test_namespace_import_usage() {
         reset_class_map();
+        reset_file_map();
         // Test using namespace import
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9026,6 +9483,7 @@ globalCss()
     #[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(
@@ -9048,6 +9506,7 @@ const className = DevUI.css({ bg: "red" })
     #[serial]
     fn test_enum_style_prop() {
         reset_class_map();
+        reset_file_map();
         // Test enum-like style mapping
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9072,6 +9531,7 @@ const colors = { primary: "blue", secondary: "red" };
     #[serial]
     fn test_style_vars_prop() {
         reset_class_map();
+        reset_file_map();
         // Test styleVars prop
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9095,6 +9555,7 @@ const dynamicColor = "blue";
     #[serial]
     fn test_props_prop() {
         reset_class_map();
+        reset_file_map();
         // Test props prop forwarding
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9118,6 +9579,7 @@ const extraProps = { onClick: () => {} };
     #[serial]
     fn test_style_order_prop() {
         reset_class_map();
+        reset_file_map();
         // Test styleOrder prop
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9140,6 +9602,7 @@ const extraProps = { onClick: () => {} };
     #[serial]
     fn test_multiple_dynamic_values() {
         reset_class_map();
+        reset_file_map();
         // Test multiple dynamic values
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9166,6 +9629,7 @@ const margin = 5;
     fn test_media_query_selectors() {
         // Test _print media query selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9184,6 +9648,7 @@ const margin = 5;
 
         // Test _screen media query selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9202,6 +9667,7 @@ const margin = 5;
 
         // Test _speech media query selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9220,6 +9686,7 @@ const margin = 5;
 
         // Test _all media query selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9238,6 +9705,7 @@ const margin = 5;
 
         // Test multiple media query selectors combined
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9264,6 +9732,7 @@ const margin = 5;
     fn test_at_rules_underscore_prefix() {
         // Test _container at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9282,6 +9751,7 @@ const margin = 5;
 
         // Test _media at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9300,6 +9770,7 @@ const margin = 5;
 
         // Test _supports at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9318,6 +9789,7 @@ const margin = 5;
 
         // Test _container with named container
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9340,6 +9812,7 @@ const margin = 5;
     fn test_at_rules_at_prefix() {
         // Test @container at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9358,6 +9831,7 @@ const margin = 5;
 
         // Test @media at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9376,6 +9850,7 @@ const margin = 5;
 
         // Test @supports at-rule
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9398,6 +9873,7 @@ const margin = 5;
     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",
@@ -9422,6 +9898,7 @@ globalCss({
 
         // Test globalCss with @supports nested inside selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9446,6 +9923,7 @@ globalCss({
 
         // Test globalCss with @container nested inside selector
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9470,6 +9948,7 @@ globalCss({
 
         // Test globalCss with multiple at-rules nested inside selectors
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9505,6 +9984,7 @@ globalCss({
     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",
@@ -9529,6 +10009,7 @@ globalCss({
 
         // Test globalCss with @layer for multiple selectors
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -9565,6 +10046,7 @@ globalCss({
     #[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(
@@ -9587,6 +10069,7 @@ export const container: string = style({ background: "red", padding: 16 })
     #[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(
@@ -9605,6 +10088,7 @@ export const wrapper = style({ backgroundColor: "white", margin: 8 })
         ));
 
         reset_class_map();
+        reset_file_map();
         // .css.js file with style function for link
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9627,6 +10111,7 @@ export const link = style({ color: "blue", textDecoration: "underline" })
     #[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(
@@ -9651,6 +10136,7 @@ export const button = style({ background: primaryColor, padding: spacing })
     #[serial]
     fn test_vanilla_extract_with_computed() {
         reset_class_map();
+        reset_file_map();
         // Computed values should be evaluated
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9674,6 +10160,7 @@ export const box = style({ padding: base * 2, margin: base / 2 })
     #[serial]
     fn test_vanilla_extract_with_spread() {
         reset_class_map();
+        reset_file_map();
         // Spread operator should work
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9697,6 +10184,7 @@ export const extended = style({ ...baseStyle, background: "red" })
     #[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(
@@ -9719,6 +10207,7 @@ export const hoverButton = style({ background: "gray", _hover: { background: "bl
     #[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(
@@ -9741,6 +10230,7 @@ export const responsiveBox = style({ padding: [8, 16, 32] })
     #[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(
@@ -9760,6 +10250,7 @@ export const animated = style({ animation: "fadeIn 1s ease-in" })
         ));
 
         reset_class_map();
+        reset_file_map();
         // .css.ts file with globalStyle (vanilla-extract API)
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9782,6 +10273,7 @@ globalStyle("body", { margin: 0, padding: 0 })
     #[serial]
     fn test_vanilla_extract_create_var() {
         reset_class_map();
+        reset_file_map();
         // createVar - CSS variable creation
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9806,6 +10298,7 @@ export const box = style({
         ));
 
         reset_class_map();
+        reset_file_map();
         // fallbackVar - CSS variable with fallback
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9831,6 +10324,7 @@ export const box = style({
     #[serial]
     fn test_vanilla_extract_style_variants() {
         reset_class_map();
+        reset_file_map();
         // styleVariants - create multiple style variants
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9853,6 +10347,7 @@ export const background = styleVariants({
         ));
 
         reset_class_map();
+        reset_file_map();
         // styleVariants with base style composition
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9880,6 +10375,7 @@ export const button = styleVariants({
     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(
@@ -9903,6 +10399,7 @@ export const text = style({
         ));
 
         reset_class_map();
+        reset_file_map();
         // fontFace with multiple sources
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -9933,6 +10430,7 @@ export const body = style({
     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(
@@ -9966,6 +10464,7 @@ export const box = style({
 
         reset_class_map();
         reset_file_map();
+        reset_file_map();
         // createThemeContract - type-safe theme contract
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10006,6 +10505,7 @@ export const darkTheme = createTheme(vars, {
     fn test_vanilla_extract_layer() {
         reset_class_map();
         reset_file_map();
+        reset_file_map();
         // layer - CSS cascade layers
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10035,6 +10535,7 @@ globalStyle('*', {
     #[serial]
     fn test_vanilla_extract_container() {
         reset_class_map();
+        reset_file_map();
         // createContainer - container queries
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10068,6 +10569,7 @@ export const responsive = style({
     #[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(
@@ -10099,6 +10601,7 @@ export const vars = createGlobalTheme(':root', {
     #[serial]
     fn test_vanilla_extract_composition() {
         reset_class_map();
+        reset_file_map();
         // style composition - array of styles
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10132,6 +10635,7 @@ export const button = style([base, interactive, {
     #[serial]
     fn test_vanilla_extract_selectors() {
         reset_class_map();
+        reset_file_map();
         // complex selectors
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10167,6 +10671,7 @@ export const button = style({
         ));
 
         reset_class_map();
+        reset_file_map();
         // parent and sibling selectors
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10201,6 +10706,7 @@ export const child = style({
     #[serial]
     fn test_vanilla_extract_media_queries() {
         reset_class_map();
+        reset_file_map();
         // @media queries
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10237,6 +10743,7 @@ export const responsive = style({
     #[serial]
     fn test_vanilla_extract_supports() {
         reset_class_map();
+        reset_file_map();
         // @supports queries
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
@@ -10374,6 +10881,7 @@ export const grid = style({
     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",
@@ -10398,6 +10906,7 @@ export const grid = style({
 
         // Test with @container prefix
         reset_class_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -10427,6 +10936,7 @@ export const grid = style({
         // 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",
@@ -10451,6 +10961,7 @@ export const broken = style((() => { throw new Error("fail"); })())
         // 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",
@@ -10474,6 +10985,7 @@ const unused = 1;
         // 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",
@@ -10499,6 +11011,7 @@ export const box = style({ padding: SPACING })
         // 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",
@@ -10531,6 +11044,7 @@ export const [lightTheme, vars] = createTheme({
         // 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",
@@ -10562,6 +11076,7 @@ export const themed = style({
         // 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",
@@ -10586,6 +11101,7 @@ export const withEmpty = style([{}])
         // 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",
@@ -10617,6 +11133,7 @@ export const sizes = styleVariants({
         // 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",
@@ -10646,6 +11163,7 @@ export const containerStyle = style({
         // 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",
@@ -10681,6 +11199,7 @@ export const box = style({
         // 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",
@@ -10715,6 +11234,7 @@ export const darkTheme = createTheme(contract, {
         // 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",
@@ -10744,6 +11264,7 @@ export const text = style({
         // 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",
@@ -10772,6 +11293,7 @@ export const box = style({
         // 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",
@@ -10796,6 +11318,7 @@ export const box = style({ padding: 8 })
         // 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",
@@ -10819,6 +11342,7 @@ export const publicStyle = style({ margin: 8 })
         // 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",
@@ -10868,6 +11392,8 @@ export const sibling = style({
     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",
@@ -10895,6 +11421,8 @@ globalCss({
 
         // 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",
@@ -10930,6 +11458,8 @@ globalCss({
     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",
@@ -10950,6 +11480,8 @@ globalCss({
 
         // Test nested conditional within selector
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -10977,6 +11509,7 @@ globalCss({
         // 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'
@@ -11000,6 +11533,7 @@ globalCss({
         // 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",
@@ -11023,6 +11557,7 @@ const x = style({ padding: [[[}}} // invalid syntax
         // Test style() with object that has no length property (covers line 745)
         reset_class_map();
         reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "no-length.css.ts",
@@ -11046,6 +11581,7 @@ export const box = style({ padding: 8, margin: 4 })
         // 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",
@@ -11077,6 +11613,7 @@ export const spinner = style({ animation: spin })
         // 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",
@@ -11102,6 +11639,7 @@ export const myTheme = createTheme({
         // 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",
@@ -11130,6 +11668,7 @@ export const buttons = styleVariants({
         // 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",
@@ -11163,6 +11702,7 @@ export const box = style({ padding: 8 })
         // 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",
@@ -11187,6 +11727,7 @@ export const text = style({ fontFamily: minimalFont })
         // 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",
@@ -11213,6 +11754,7 @@ export const animated = style({ animation: fadeIn })
         // 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",
@@ -11245,6 +11787,7 @@ export const box = style({ padding: 8 })
         // 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",
@@ -11269,6 +11812,7 @@ export const complex = style([base, { margin: 4 }, { color: 'blue' }])
         // 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",
@@ -11298,6 +11842,7 @@ export const child = style({
         // 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",
@@ -11328,6 +11873,7 @@ export const box = style({ fontFamily: myFont })
         // 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",
@@ -11355,6 +11901,7 @@ export const themed = style({ color: themeVars.colors.primary })
         // 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",
@@ -11387,6 +11934,7 @@ export const heading = style({ fontFamily: secondFont })
         // 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",
@@ -11415,6 +11963,8 @@ export const box = style({ padding: 8 })
     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",
@@ -11439,6 +11989,8 @@ globalCss({
 
         // Test with multiple selectors having @layer
         reset_class_map();
+        reset_file_map();
+        reset_file_map();
         assert_debug_snapshot!(ToBTreeSet::from(
             extract(
                 "test.tsx",
@@ -11470,6 +12022,8 @@ globalCss({
     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",
@@ -11500,6 +12054,7 @@ globalCss({
         // 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",
@@ -11529,6 +12084,7 @@ globalStyle('body', { margin: 0 })
         // 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",
@@ -11540,6 +12096,103 @@ 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
+                }
+            )
+            .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
+                }
+            )
+            .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
+                }
+            )
+            .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(),
diff --git a/libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap b/libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap
new file mode 100644
index 00000000..968cb53e
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__global_css_layer_property_extraction.snap
@@ -0,0 +1,66 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap b/libs/extractor/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap
new file mode 100644
index 00000000..3fb1e196
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__selector_refs_with_global_theme.snap
@@ -0,0 +1,67 @@
+---
+source: libs/extractor/src/lib.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}).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/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
index 6825a5e1..108b4267 100644
--- a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_font_face-2.snap
@@ -7,7 +7,7 @@ ToBTreeSet {
         Static(
             ExtractStaticStyle {
                 property: "font-family",
-                value: "__devup_font_1_0",
+                value: "__devup_font_0_0",
                 level: 0,
                 selector: None,
                 style_order: None,
@@ -18,7 +18,7 @@ ToBTreeSet {
             ExtractFontFace {
                 file: "fonts-multi.css.ts",
                 properties: {
-                    "font-family": "__devup_font_1_0",
+                    "font-family": "__devup_font_0_0",
                     "font-style": "normal",
                     "font-weight": "400",
                     "src": "url(\"/fonts/Roboto.woff2\") format(\"woff2\")",
@@ -26,5 +26,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const body = \"a\";\n;\nconst roboto = \"__devup_font_1_0\";\n",
+    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/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap
new file mode 100644
index 00000000..20ef3082
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_with_at_container_selector.snap
@@ -0,0 +1,51 @@
+---
+source: libs/extractor/src/lib.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}).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",
+}

From 8a28184ff35a581d4c323e747c0eca0d2dc109e4 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 12:56:47 +0900
Subject: [PATCH 22/31] Fix lint

---
 libs/css/src/style_selector.rs                | 27 ++++++
 .../extract_global_style_from_expression.rs   | 16 ++--
 .../extract_style_from_expression.rs          |  7 +-
 libs/extractor/src/lib.rs                     | 85 +++++++++---------
 libs/extractor/src/vanilla_extract.rs         | 87 ++++++++-----------
 5 files changed, 113 insertions(+), 109 deletions(-)

diff --git a/libs/css/src/style_selector.rs b/libs/css/src/style_selector.rs
index 8b4d77b5..56dd9365 100644
--- a/libs/css/src/style_selector.rs
+++ b/libs/css/src/style_selector.rs
@@ -32,6 +32,18 @@ impl Display for AtRuleKind {
     }
 }
 
+impl From<&str> for AtRuleKind {
+    fn from(value: &str) -> Self {
+        match value {
+            "media" => AtRuleKind::Media,
+            "supports" => AtRuleKind::Supports,
+            "container" => AtRuleKind::Container,
+            "layer" => AtRuleKind::Layer,
+            _ => unreachable!(),
+        }
+    }
+}
+
 #[derive(Debug, PartialEq, Clone, Hash, Eq, Serialize, Deserialize)]
 pub enum StyleSelector {
     At {
@@ -467,4 +479,19 @@ mod tests {
     fn test_at_rule_kind_display(#[case] kind: AtRuleKind, #[case] expected: &str) {
         assert_eq!(format!("{kind}"), expected);
     }
+
+    #[rstest]
+    #[case("media", AtRuleKind::Media)]
+    #[case("supports", AtRuleKind::Supports)]
+    #[case("container", AtRuleKind::Container)]
+    #[case("layer", AtRuleKind::Layer)]
+    fn test_at_rule_kind_from_str(#[case] input: &str, #[case] expected: AtRuleKind) {
+        assert_eq!(AtRuleKind::from(input), expected);
+    }
+
+    #[test]
+    #[should_panic]
+    fn test_at_rule_kind_from_str_unknown() {
+        let _ = AtRuleKind::from("unknown");
+    }
 }
diff --git a/libs/extractor/src/extractor/extract_global_style_from_expression.rs b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
index 62ee5533..5f424010 100644
--- a/libs/extractor/src/extractor/extract_global_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
@@ -183,16 +183,16 @@ pub fn extract_global_style_from_expression<'a>(
                                     ref mut st,
                                 )) = style
                                 {
-                                    // Skip @layer property - it's not a CSS property
-                                    if st.property() == "@layer" {
-                                        continue;
-                                    }
-                                    // Set layer on other styles
-                                    if let Some(ref layer) = layer_name {
-                                        st.layer = Some(layer.clone());
+                                    // Skip @layer property - it's not a CSS property, set layer on other styles
+                                    if st.property() != "@layer" {
+                                        if let Some(ref layer) = layer_name {
+                                            st.layer = Some(layer.clone());
+                                        }
+                                        styles.push(style);
                                     }
+                                } else {
+                                    styles.push(style);
                                 }
-                                styles.push(style);
                             }
                         }
                     }
diff --git a/libs/extractor/src/extractor/extract_style_from_expression.rs b/libs/extractor/src/extractor/extract_style_from_expression.rs
index 888b2b93..a9275ddf 100644
--- a/libs/extractor/src/extractor/extract_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_style_from_expression.rs
@@ -254,12 +254,7 @@ pub fn extract_style_from_expression<'a>(
                     && let Some(query) = get_string_by_property_key(&o.key)
                 {
                     let at_selector = StyleSelector::At {
-                        kind: match at_rule {
-                            "media" => css::style_selector::AtRuleKind::Media,
-                            "supports" => css::style_selector::AtRuleKind::Supports,
-                            "container" => css::style_selector::AtRuleKind::Container,
-                            _ => unreachable!(),
-                        },
+                        kind: at_rule.into(),
                         query: query.to_string(),
                         selector: selector.as_ref().map(|s| s.to_string()),
                     };
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 58d359a8..3f84c58f 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -252,54 +252,53 @@ fn extract_class_map_from_code(
         ..
     } = Parser::new(&allocator, partial_code, source_type).parse();
     if panicked {
-        return Ok(std::collections::HashMap::new());
-    }
-
-    let mut visitor = DevupVisitor::new(
-        &allocator,
-        filename,
-        &option.package,
-        css_files,
-        if !option.single_css {
-            Some(filename.to_string())
-        } else {
-            None
-        },
-    );
-    visitor.visit_program(&mut program);
-
-    let result = Codegen::new().build(&program);
-
-    // Parse the output code to extract class name assignments
-    // Format: const styleName = "className" or const styleName = "className1 className2"
-    let mut class_map = std::collections::HashMap::new();
-    for line in result.code.lines() {
-        let line = line.trim();
-        if line.starts_with("const ") || line.starts_with("export const ") {
-            // Parse: [export] const name = "value"
-            let after_const = if line.starts_with("export ") {
-                line.strip_prefix("export const ").unwrap_or(line)
+        Ok(std::collections::HashMap::new())
+    } else {
+        let mut visitor = DevupVisitor::new(
+            &allocator,
+            filename,
+            &option.package,
+            css_files,
+            if !option.single_css {
+                Some(filename.to_string())
             } else {
-                line.strip_prefix("const ").unwrap_or(line)
-            };
-
-            if let Some((name, rest)) = after_const.split_once(" = ") {
-                // Extract value from "value" or "value";
-                let value = rest
-                    .trim_start_matches('"')
-                    .trim_end_matches(';')
-                    .trim_end_matches('"');
-
-                if style_names.contains(name) {
-                    // For multi-class values like "a b", take the first class
-                    let first_class = value.split_whitespace().next().unwrap_or(value);
-                    class_map.insert(name.to_string(), first_class.to_string());
+                None
+            },
+        );
+        visitor.visit_program(&mut program);
+
+        let result = Codegen::new().build(&program);
+
+        // Parse the output code to extract class name assignments
+        // Format: const styleName = "className" or const styleName = "className1 className2"
+        let mut class_map = std::collections::HashMap::new();
+        for line in result.code.lines() {
+            let line = line.trim();
+            if line.starts_with("const ") || line.starts_with("export const ") {
+                // Parse: [export] const name = "value"
+                let after_const = if line.starts_with("export ") {
+                    line.strip_prefix("export const ").unwrap_or(line)
+                } else {
+                    line.strip_prefix("const ").unwrap_or(line)
+                };
+
+                if let Some((name, rest)) = after_const.split_once(" = ") {
+                    // Extract value from "value" or "value";
+                    let value = rest
+                        .trim_start_matches('"')
+                        .trim_end_matches(';')
+                        .trim_end_matches('"');
+
+                    if style_names.contains(name) {
+                        // For multi-class values like "a b", take the first class
+                        let first_class = value.split_whitespace().next().unwrap_or(value);
+                        class_map.insert(name.to_string(), first_class.to_string());
+                    }
                 }
             }
         }
+        Ok(class_map)
     }
-
-    Ok(class_map)
 }
 
 /// Check if the code has an import from the specified package
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index a6726269..654eeeb9 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -343,26 +343,12 @@ fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
     }
 
     // Fallback: simple conversion using boa_engine 0.21 API
-    match value.get_type() {
-        boa_engine::value::Type::String => {
-            format!(
-                "\"{}\"",
-                value
-                    .to_string(context)
-                    .unwrap_or_default()
-                    .to_std_string_escaped()
-            )
-        }
-        boa_engine::value::Type::Boolean => value.to_boolean().to_string(),
-        boa_engine::value::Type::Null => "null".to_string(),
-        boa_engine::value::Type::Undefined => "undefined".to_string(),
-        boa_engine::value::Type::Number => {
-            if let Ok(n) = value.to_number(context) {
-                n.to_string()
-            } else {
-                "NaN".to_string()
-            }
+    match value.variant() {
+        boa_engine::value::JsVariant::String(str) => {
+            format!("\"{}\"", str.to_std_string_escaped())
         }
+        boa_engine::value::JsVariant::Null => "null".to_string(),
+        boa_engine::value::JsVariant::Undefined => "undefined".to_string(),
         _ => "{}".to_string(),
     }
 }
@@ -855,44 +841,41 @@ fn register_vanilla_extract_apis(
 
             // Check if argument is an array (composition syntax)
             let (json, bases) = if let Some(obj) = style_obj.as_object() {
-                if let Ok(length_val) = obj.get(js_string!("length"), ctx) {
-                    if let Some(len) = length_val.as_number() {
-                        // It's an array - handle composition
-                        let len = len as u32;
-                        let mut base_classes = Vec::new();
-                        let mut merged_styles = String::from("{");
-                        let mut first_style = true;
-
-                        for i in 0..len {
-                            if let Ok(elem) = obj.get(i, ctx) {
-                                if let Some(base_str) = elem.as_string() {
-                                    // It's a base class reference (string)
-                                    base_classes.push(base_str.to_std_string_escaped());
-                                } else if elem.is_object() {
-                                    // It's a style object - merge it
-                                    let elem_json = js_value_to_json(&elem, ctx);
-                                    // Strip outer braces and merge
-                                    let inner = elem_json
-                                        .trim()
-                                        .trim_start_matches('{')
-                                        .trim_end_matches('}')
-                                        .trim();
-                                    if !inner.is_empty() {
-                                        if !first_style {
-                                            merged_styles.push(',');
-                                        }
-                                        merged_styles.push_str(inner);
-                                        first_style = false;
+                if let Ok(length_val) = obj.get(js_string!("length"), ctx)
+                    && let Some(len) = length_val.as_number()
+                {
+                    // It's an array - handle composition
+                    let len = len as u32;
+                    let mut base_classes = Vec::new();
+                    let mut merged_styles = String::from("{");
+                    let mut first_style = true;
+
+                    for i in 0..len {
+                        if let Ok(elem) = obj.get(i, ctx) {
+                            if let Some(base_str) = elem.as_string() {
+                                // It's a base class reference (string)
+                                base_classes.push(base_str.to_std_string_escaped());
+                            } else if elem.is_object() {
+                                // It's a style object - merge it
+                                let elem_json = js_value_to_json(&elem, ctx);
+                                // Strip outer braces and merge
+                                let inner = elem_json
+                                    .trim()
+                                    .trim_start_matches('{')
+                                    .trim_end_matches('}')
+                                    .trim();
+                                if !inner.is_empty() {
+                                    if !first_style {
+                                        merged_styles.push(',');
                                     }
+                                    merged_styles.push_str(inner);
+                                    first_style = false;
                                 }
                             }
                         }
-                        merged_styles.push('}');
-                        (merged_styles, base_classes)
-                    } else {
-                        // Not an array, just a style object
-                        (js_value_to_json(style_obj, ctx), Vec::new())
                     }
+                    merged_styles.push('}');
+                    (merged_styles, base_classes)
                 } else {
                     // No length property, just a style object
                     (js_value_to_json(style_obj, ctx), Vec::new())

From 6e1e1baab95c153e485bbdfca7a8146458a2ba29 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 13:13:51 +0900
Subject: [PATCH 23/31] Fix coverage

---
 .../extract_global_style_from_expression.rs   |  12 +--
 libs/extractor/src/lib.rs                     |  23 ++++
 libs/extractor/src/vanilla_extract.rs         | 102 +++++++++---------
 3 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/libs/extractor/src/extractor/extract_global_style_from_expression.rs b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
index 5f424010..3bcfccce 100644
--- a/libs/extractor/src/extractor/extract_global_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
@@ -150,16 +150,8 @@ pub fn extract_global_style_from_expression<'a>(
                             // Handle @layer property in globalStyle
                             // Extract the layer name if present in the style object
                             let mut layer_name: Option<String> = None;
-                            if let Expression::ObjectExpression(style_obj) = &o.value {
-                                for style_prop in style_obj.properties.iter() {
-                                    if let ObjectPropertyKind::ObjectProperty(sp) = style_prop
-                                        && let Some(prop_name) = get_string_by_property_key(&sp.key)
-                                        && prop_name == "@layer"
-                                    {
-                                        layer_name = get_string_by_literal_expression(&sp.value);
-                                        break;
-                                    }
-                                }
+                            if let Expression::ObjectExpression(style_obj) = &o.value && let Some(ObjectPropertyKind::ObjectProperty(sp)) = style_obj.properties.iter().find(|style_prop| matches!(style_prop, ObjectPropertyKind::ObjectProperty(s) if get_string_by_property_key(&s.key) == Some("@layer".to_string()))) {
+                                layer_name = get_string_by_literal_expression(&sp.value);
                             }
 
                             let extracted = extract_style_from_expression(
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 3f84c58f..0a6e9e06 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -12203,4 +12203,27 @@ export const card = style({
             .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,
+            },
+            &style_names,
+        )
+        .unwrap();
+
+        assert!(result.is_empty());
+    }
 }
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 654eeeb9..e1437dad 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -240,13 +240,16 @@ fn extract_theme_vars(
             let var_name = &contract_str[4..contract_str.len() - 1];
 
             // Get the value
-            let value_str = if let Some(s) = values.as_string() {
-                s.to_std_string_escaped()
-            } else if let Ok(s) = values.to_string(ctx) {
-                s.to_std_string_escaped()
-            } else {
-                String::new()
-            };
+            let value_str = values
+                .as_string()
+                .map(|s| s.to_std_string_escaped())
+                .or_else(|| {
+                    values
+                        .to_string(ctx)
+                        .ok()
+                        .map(|s| s.to_std_string_escaped())
+                })
+                .unwrap_or_default();
 
             css_vars.push((var_name.to_string(), value_str));
         }
@@ -312,13 +315,11 @@ fn transform_theme_to_vars(
         *var_counter += 1;
 
         // Get the actual value as string
-        let value_str = if let Some(s) = value.as_string() {
-            s.to_std_string_escaped()
-        } else if let Ok(s) = value.to_string(ctx) {
-            s.to_std_string_escaped()
-        } else {
-            String::new()
-        };
+        let value_str = value
+            .as_string()
+            .map(|s| s.to_std_string_escaped())
+            .or_else(|| value.to_string(ctx).ok().map(|s| s.to_std_string_escaped()))
+            .unwrap_or_default();
 
         css_vars.push((var_name.clone(), value_str));
 
@@ -344,9 +345,7 @@ fn js_value_to_json(value: &JsValue, context: &mut Context) -> String {
 
     // Fallback: simple conversion using boa_engine 0.21 API
     match value.variant() {
-        boa_engine::value::JsVariant::String(str) => {
-            format!("\"{}\"", str.to_std_string_escaped())
-        }
+        boa_engine::value::JsVariant::String(str) => format!("\"{}\"", str.to_std_string_escaped()),
         boa_engine::value::JsVariant::Null => "null".to_string(),
         boa_engine::value::JsVariant::Undefined => "undefined".to_string(),
         _ => "{}".to_string(),
@@ -840,51 +839,46 @@ fn register_vanilla_extract_apis(
             let id = next_style_id(&collector_style);
 
             // Check if argument is an array (composition syntax)
-            let (json, bases) = if let Some(obj) = style_obj.as_object() {
-                if let Ok(length_val) = obj.get(js_string!("length"), ctx)
-                    && let Some(len) = length_val.as_number()
-                {
-                    // It's an array - handle composition
-                    let len = len as u32;
-                    let mut base_classes = Vec::new();
-                    let mut merged_styles = String::from("{");
-                    let mut first_style = true;
-
-                    for i in 0..len {
-                        if let Ok(elem) = obj.get(i, ctx) {
-                            if let Some(base_str) = elem.as_string() {
-                                // It's a base class reference (string)
-                                base_classes.push(base_str.to_std_string_escaped());
-                            } else if elem.is_object() {
-                                // It's a style object - merge it
-                                let elem_json = js_value_to_json(&elem, ctx);
-                                // Strip outer braces and merge
-                                let inner = elem_json
-                                    .trim()
-                                    .trim_start_matches('{')
-                                    .trim_end_matches('}')
-                                    .trim();
-                                if !inner.is_empty() {
-                                    if !first_style {
-                                        merged_styles.push(',');
-                                    }
-                                    merged_styles.push_str(inner);
-                                    first_style = false;
+            let (json, bases) = if let Some(obj) = style_obj.as_object()
+                && let Ok(length_val) = obj.get(js_string!("length"), ctx)
+                && let Some(len) = length_val.as_number()
+            {
+                // It's an array - handle composition
+                let len = len as u32;
+                let mut base_classes = Vec::new();
+                let mut merged_styles = String::from("{");
+                let mut first_style = true;
+
+                for i in 0..len {
+                    if let Ok(elem) = obj.get(i, ctx) {
+                        if let Some(base_str) = elem.as_string() {
+                            // It's a base class reference (string)
+                            base_classes.push(base_str.to_std_string_escaped());
+                        } else if elem.is_object() {
+                            // It's a style object - merge it
+                            let elem_json = js_value_to_json(&elem, ctx);
+                            // Strip outer braces and merge
+                            let inner = elem_json
+                                .trim()
+                                .trim_start_matches('{')
+                                .trim_end_matches('}')
+                                .trim();
+                            if !inner.is_empty() {
+                                if !first_style {
+                                    merged_styles.push(',');
                                 }
+                                merged_styles.push_str(inner);
+                                first_style = false;
                             }
                         }
                     }
-                    merged_styles.push('}');
-                    (merged_styles, base_classes)
-                } else {
-                    // No length property, just a style object
-                    (js_value_to_json(style_obj, ctx), Vec::new())
                 }
+                merged_styles.push('}');
+                (merged_styles, base_classes)
             } else {
-                // Not an object at all
+                // No length property, just a style object
                 (js_value_to_json(style_obj, ctx), Vec::new())
             };
-
             collector_style.borrow_mut().styles.styles.insert(
                 id.clone(),
                 StyleEntry {

From f68089db32f1aebb328ed6f9b14da4554dacc087 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 14:05:57 +0900
Subject: [PATCH 24/31] Add testcase

---
 .../extract_global_style_from_expression.rs   |  4 ++-
 libs/extractor/src/vanilla_extract.rs         | 34 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/libs/extractor/src/extractor/extract_global_style_from_expression.rs b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
index 3bcfccce..3c8f5521 100644
--- a/libs/extractor/src/extractor/extract_global_style_from_expression.rs
+++ b/libs/extractor/src/extractor/extract_global_style_from_expression.rs
@@ -150,7 +150,9 @@ pub fn extract_global_style_from_expression<'a>(
                             // Handle @layer property in globalStyle
                             // Extract the layer name if present in the style object
                             let mut layer_name: Option<String> = None;
-                            if let Expression::ObjectExpression(style_obj) = &o.value && let Some(ObjectPropertyKind::ObjectProperty(sp)) = style_obj.properties.iter().find(|style_prop| matches!(style_prop, ObjectPropertyKind::ObjectProperty(s) if get_string_by_property_key(&s.key) == Some("@layer".to_string()))) {
+                            if let Expression::ObjectExpression(style_obj) = &o.value
+                                && let Some(ObjectPropertyKind::ObjectProperty(sp)) = style_obj.properties.iter().find(|style_prop| matches!(style_prop, ObjectPropertyKind::ObjectProperty(s) if get_string_by_property_key(&s.key) == Some("@layer".to_string())))
+                            {
                                 layer_name = get_string_by_literal_expression(&sp.value);
                             }
 
diff --git a/libs/extractor/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index e1437dad..33fcccb2 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -3369,4 +3369,38 @@ export const box = style({ padding: 8, margin: 4 })
         let collected = result.unwrap();
         assert!(!collected.styles.is_empty());
     }
+
+    #[test]
+    fn test_js_value_to_json_string_fallback_path() {
+        // Test js_value_to_json string fallback when JSON.stringify is broken (covers line 303)
+        use boa_engine::{Context, JsValue, Source, js_string};
+
+        let mut context = Context::default();
+
+        // Break JSON.stringify by setting it to undefined
+        context
+            .eval(Source::from_bytes(b"JSON.stringify = undefined"))
+            .unwrap();
+
+        let string_val = JsValue::from(js_string!("test"));
+        let result = super::js_value_to_json(&string_val, &mut context);
+        assert_eq!(result, "\"test\"");
+    }
+
+    #[test]
+    fn test_js_value_to_json_null_fallback_path() {
+        // Test js_value_to_json null fallback when JSON.stringify is broken (covers line 304)
+        use boa_engine::{Context, JsValue, Source};
+
+        let mut context = Context::default();
+
+        // Break JSON.stringify by setting it to undefined
+        context
+            .eval(Source::from_bytes(b"JSON.stringify = undefined"))
+            .unwrap();
+
+        let null_val = JsValue::null();
+        let result = super::js_value_to_json(&null_val, &mut context);
+        assert_eq!(result, "null");
+    }
 }

From 8553b185923a75c3b6a707b89e92ca882350e998 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 14:53:06 +0900
Subject: [PATCH 25/31] Add resolve test

---
 .../next-vanilla-extract-devup-ui/.gitignore  |  41 ++++++++++++++++
 .../next-vanilla-extract-devup-ui/README.md   |   1 +
 .../next.config.mjs                           |   3 ++
 .../package.json                              |  26 ++++++++++
 .../public/file.svg                           |   1 +
 .../public/globe.svg                          |   1 +
 .../public/next.svg                           |   1 +
 .../public/vercel.svg                         |   1 +
 .../public/window.svg                         |   1 +
 .../src/app/favicon.ico                       | Bin 0 -> 25931 bytes
 .../src/app/index.css.ts                      |  36 ++++++++++++++
 .../src/app/layout.tsx                        |  18 +++++++
 .../src/app/page.tsx                          |  46 ++++++++++++++++++
 .../tsconfig.json                             |  34 +++++++++++++
 bun.lock                                      |  24 +++++++++
 15 files changed, 234 insertions(+)
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/.gitignore
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/README.md
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/next.config.mjs
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/package.json
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/public/file.svg
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/public/globe.svg
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/public/next.svg
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/public/vercel.svg
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/public/window.svg
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/src/app/favicon.ico
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/src/app/index.css.ts
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/src/app/layout.tsx
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/src/app/page.tsx
 create mode 100644 benchmark/next-vanilla-extract-devup-ui/tsconfig.json

diff --git a/benchmark/next-vanilla-extract-devup-ui/.gitignore b/benchmark/next-vanilla-extract-devup-ui/.gitignore
new file mode 100644
index 00000000..5ef6a520
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/benchmark/next-vanilla-extract-devup-ui/README.md b/benchmark/next-vanilla-extract-devup-ui/README.md
new file mode 100644
index 00000000..665152ea
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/README.md
@@ -0,0 +1 @@
+## Nextjs App
diff --git a/benchmark/next-vanilla-extract-devup-ui/next.config.mjs b/benchmark/next-vanilla-extract-devup-ui/next.config.mjs
new file mode 100644
index 00000000..00a680c8
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/next.config.mjs
@@ -0,0 +1,3 @@
+import { DevupUI } from '@devup-ui/next-plugin'
+
+export default DevupUI({})
diff --git a/benchmark/next-vanilla-extract-devup-ui/package.json b/benchmark/next-vanilla-extract-devup-ui/package.json
new file mode 100644
index 00000000..e23c1369
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "next-vanilla-extract-devup-ui-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build --experimental-debug-memory-usage --webpack",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.18",
+    "next": "^16.1",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "react-icons": "^5.5"
+  },
+  "devDependencies": {
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5",
+    "@devup-ui/next-plugin": "workspace:^"
+  }
+}
diff --git a/benchmark/next-vanilla-extract-devup-ui/public/file.svg b/benchmark/next-vanilla-extract-devup-ui/public/file.svg
new file mode 100644
index 00000000..004145cd
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/benchmark/next-vanilla-extract-devup-ui/public/globe.svg b/benchmark/next-vanilla-extract-devup-ui/public/globe.svg
new file mode 100644
index 00000000..567f17b0
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/benchmark/next-vanilla-extract-devup-ui/public/next.svg b/benchmark/next-vanilla-extract-devup-ui/public/next.svg
new file mode 100644
index 00000000..5174b28c
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/benchmark/next-vanilla-extract-devup-ui/public/vercel.svg b/benchmark/next-vanilla-extract-devup-ui/public/vercel.svg
new file mode 100644
index 00000000..77053960
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/benchmark/next-vanilla-extract-devup-ui/public/window.svg b/benchmark/next-vanilla-extract-devup-ui/public/window.svg
new file mode 100644
index 00000000..b2b2a44f
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/benchmark/next-vanilla-extract-devup-ui/src/app/favicon.ico b/benchmark/next-vanilla-extract-devup-ui/src/app/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c
GIT binary patch
literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

literal 0
HcmV?d00001

diff --git a/benchmark/next-vanilla-extract-devup-ui/src/app/index.css.ts b/benchmark/next-vanilla-extract-devup-ui/src/app/index.css.ts
new file mode 100644
index 00000000..cf974acd
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/src/app/index.css.ts
@@ -0,0 +1,36 @@
+import { style } from '@vanilla-extract/css'
+
+export const hello = style({
+  cursor: 'pointer',
+  fontSize: 32,
+  position: 'relative',
+  paddingTop: '28px',
+  paddingBottom: '28px',
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'yellow',
+      cursor: 'cell',
+    },
+  },
+})
+
+export const text = style({
+  color: 'var(--text)',
+})
+
+export const conditional = style({
+  color: 'green',
+})
+
+export const conditional1 = style({
+  color: 'blue',
+})
+
+export const hello3 = style({
+  paddingRight: '20px',
+  fontSize: 32,
+})
+
+export const hello2 = style({
+  fontSize: 12,
+})
diff --git a/benchmark/next-vanilla-extract-devup-ui/src/app/layout.tsx b/benchmark/next-vanilla-extract-devup-ui/src/app/layout.tsx
new file mode 100644
index 00000000..6b8b4518
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/src/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/benchmark/next-vanilla-extract-devup-ui/src/app/page.tsx b/benchmark/next-vanilla-extract-devup-ui/src/app/page.tsx
new file mode 100644
index 00000000..7a3e1724
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/src/app/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { useState } from 'react'
+
+import {
+  conditional,
+  conditional1,
+  hello,
+  hello2,
+  hello3,
+  text,
+} from './index.css'
+
+export default function HomePage() {
+  const [_, setColor] = useState('yellow')
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <div>
+      <p
+        style={{
+          backgroundColor: 'blue',
+        }}
+      >
+        Track & field champions:
+      </p>
+      <section className={hello}>
+        <div>hello</div>
+        <div>hello</div>
+      </section>
+      <p className={text}>text</p>
+      <div className={`${enabled ? conditional : conditional1} ${hello3}`}>
+        hello
+      </div>
+      <div className={hello2}>hello</div>
+      <button
+        onClick={() => {
+          setColor('blue')
+          setEnabled((prev) => !prev)
+        }}
+      >
+        Change
+      </button>
+    </div>
+  )
+}
diff --git a/benchmark/next-vanilla-extract-devup-ui/tsconfig.json b/benchmark/next-vanilla-extract-devup-ui/tsconfig.json
new file mode 100644
index 00000000..a9788073
--- /dev/null
+++ b/benchmark/next-vanilla-extract-devup-ui/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "df/*.d.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/bun.lock b/bun.lock
index c481bc53..b3120128 100644
--- a/bun.lock
+++ b/bun.lock
@@ -327,6 +327,24 @@
         "typescript": "^5",
       },
     },
+    "benchmark/next-vanilla-extract-devup-ui": {
+      "name": "next-vanilla-extract-devup-ui-benchmark",
+      "version": "0.1.0",
+      "dependencies": {
+        "@vanilla-extract/css": "^1.18",
+        "next": "^16.1",
+        "react": "^19.2",
+        "react-dom": "^19.2",
+        "react-icons": "^5.5",
+      },
+      "devDependencies": {
+        "@devup-ui/next-plugin": "workspace:^",
+        "@types/node": "^25",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "typescript": "^5",
+      },
+    },
     "bindings/devup-ui-wasm": {
       "name": "@devup-ui/wasm",
       "version": "1.0.56",
@@ -2490,6 +2508,8 @@
 
     "next-vanilla-extract-benchmark": ["next-vanilla-extract-benchmark@workspace:benchmark/next-vanilla-extract"],
 
+    "next-vanilla-extract-devup-ui-benchmark": ["next-vanilla-extract-devup-ui-benchmark@workspace:benchmark/next-vanilla-extract-devup-ui"],
+
     "node-eval": ["node-eval@2.0.0", "", { "dependencies": { "path-is-absolute": "1.0.1" } }, "sha512-Ap+L9HznXAVeJj3TJ1op6M6bg5xtTq8L5CU/PJxtkhea/DrIxdTknGKIECKd/v/Lgql95iuMAYvIzBNd0pmcMg=="],
 
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
@@ -3066,6 +3086,8 @@
 
     "@babel/preset-env/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
+    "@devup-ui/bun-plugin/@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
+
     "@emotion/babel-plugin/convert-source-map": ["convert-source-map@1.9.0", "", {}, "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="],
 
     "@emotion/babel-plugin/source-map": ["source-map@0.5.7", "", {}, "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="],
@@ -3296,6 +3318,8 @@
 
     "yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
 
+    "@devup-ui/bun-plugin/@types/bun/bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
+
     "@happy-dom/global-registrator/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "@isaacs/cliui/strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],

From a79609b3ef336325f159a534aa7664b75863aab5 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 19:51:43 +0900
Subject: [PATCH 26/31] Add alias

---
 bindings/devup-ui-wasm/Cargo.toml             |    3 +
 bindings/devup-ui-wasm/src/lib.rs             |   31 +-
 libs/extractor/src/lib.rs                     | 1769 ++++++++++++-----
 ...r__tests__import_alias_emotion_styled.snap |   29 +
 ..._tests__import_alias_multiple_aliases.snap |   19 +
 ...r__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 +
 libs/extractor/src/visit.rs                   |  179 +-
 libs/sheet/src/lib.rs                         |    2 +-
 .../bun-plugin/src/__tests__/index.test.ts    |    2 +-
 packages/bun-plugin/src/plugin.ts             |    4 +-
 .../next-plugin/src/__tests__/loader.test.ts  |    1 +
 .../next-plugin/src/__tests__/plugin.test.ts  |   20 +
 .../next-plugin/src/__tests__/preload.test.ts |   12 +-
 packages/next-plugin/src/loader.ts            |    3 +
 packages/next-plugin/src/plugin.ts            |   15 +-
 packages/next-plugin/src/preload.ts           |   14 +-
 .../__tests__/merge-import-aliases.test.ts    |   89 +
 packages/plugin-utils/src/index.ts            |    3 +
 packages/plugin-utils/src/types.ts            |   58 +
 packages/rsbuild-plugin/src/plugin.ts         |  200 +-
 .../vite-plugin/src/__tests__/plugin.test.ts  |   10 +
 packages/vite-plugin/src/plugin.ts            |   25 +-
 .../src/__tests__/loader.test.ts              |    3 +
 packages/webpack-plugin/src/loader.ts         |    3 +
 packages/webpack-plugin/src/plugin.ts         |   20 +-
 28 files changed, 1910 insertions(+), 699 deletions(-)
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
 create mode 100644 packages/plugin-utils/src/__tests__/merge-import-aliases.test.ts

diff --git a/bindings/devup-ui-wasm/Cargo.toml b/bindings/devup-ui-wasm/Cargo.toml
index 123357cc..960b5310 100644
--- a/bindings/devup-ui-wasm/Cargo.toml
+++ b/bindings/devup-ui-wasm/Cargo.toml
@@ -37,3 +37,6 @@ wasm-bindgen-test = "0.3.56"
 serial_test = "3.3.1"
 insta = "1.46.0"
 rstest = "0.26.1"
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = false
diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs
index 6cbb748e..406cae6e 100644
--- a/bindings/devup-ui-wasm/src/lib.rs
+++ b/bindings/devup-ui-wasm/src/lib.rs
@@ -1,10 +1,10 @@
 use css::class_map::{get_class_map, set_class_map};
 use css::file_map::{get_file_map, get_filename_by_file_num, set_file_map};
 use extractor::extract_style::extract_style_value::ExtractStyleValue;
-use extractor::{ExtractOption, extract, has_devup_ui};
+use extractor::{ExtractOption, ImportAlias, extract, has_devup_ui};
 use once_cell::sync::Lazy;
 use sheet::StyleSheet;
-use std::collections::HashSet;
+use std::collections::{HashMap, HashSet};
 use std::sync::Mutex;
 use wasm_bindgen::prelude::*;
 
@@ -213,6 +213,7 @@ pub fn export_file_map() -> Result<String, JsValue> {
 }
 
 /// Internal function to extract code (testable without JsValue)
+#[allow(clippy::too_many_arguments)]
 pub fn code_extract_internal(
     filename: &str,
     code: &str,
@@ -221,6 +222,7 @@ pub fn code_extract_internal(
     single_css: bool,
     import_main_css_in_code: bool,
     import_main_css_in_css: bool,
+    import_aliases: HashMap<String, ImportAlias>,
 ) -> Result<Output, String> {
     match extract(
         filename,
@@ -230,6 +232,7 @@ pub fn code_extract_internal(
             css_dir,
             single_css,
             import_main_css: import_main_css_in_code,
+            import_aliases,
         },
     ) {
         Ok(output) => Ok(Output::new(
@@ -246,6 +249,7 @@ pub fn code_extract_internal(
 }
 
 #[wasm_bindgen(js_name = "codeExtract")]
+#[allow(clippy::too_many_arguments)]
 pub fn code_extract(
     filename: &str,
     code: &str,
@@ -254,7 +258,25 @@ pub fn code_extract(
     single_css: bool,
     import_main_css_in_code: bool,
     import_main_css_in_css: bool,
+    import_aliases: JsValue,
 ) -> Result<Output, JsValue> {
+    // Deserialize import_aliases from JsValue
+    // Format: { "package": "namedExport" } or { "package": null } for named exports
+    let aliases: HashMap<String, Option<String>> =
+        serde_wasm_bindgen::from_value(import_aliases).unwrap_or_default();
+
+    // Convert to ImportAlias enum
+    let import_aliases: HashMap<String, ImportAlias> = aliases
+        .into_iter()
+        .map(|(k, v)| {
+            let alias = match v {
+                Some(name) => ImportAlias::DefaultToNamed(name),
+                None => ImportAlias::NamedToNamed,
+            };
+            (k, alias)
+        })
+        .collect();
+
     code_extract_internal(
         filename,
         code,
@@ -263,6 +285,7 @@ pub fn code_extract(
         single_css,
         import_main_css_in_code,
         import_main_css_in_css,
+        import_aliases,
     )
     .map_err(|e| JsValue::from_str(&e))
 }
@@ -675,6 +698,7 @@ mod tests {
                 css_dir: "@devup-ui/core".to_string(),
                 single_css: false,
                 import_main_css: false,
+                import_aliases: HashMap::new(),
             },
         )
         .unwrap();
@@ -762,6 +786,7 @@ mod tests {
                 css_dir: "@devup-ui/core".to_string(),
                 single_css: true,
                 import_main_css: true,
+                import_aliases: HashMap::new(),
             },
         )
         .unwrap();
@@ -903,6 +928,7 @@ mod tests {
             false,
             false,
             false,
+            HashMap::new(),
         );
 
         assert!(result.is_ok());
@@ -926,6 +952,7 @@ mod tests {
             false,
             false,
             false,
+            HashMap::new(),
         );
 
         assert!(result.is_err());
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 0a6e9e06..efedf423 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -19,9 +19,19 @@ use oxc_ast_visit::VisitMut;
 use oxc_codegen::{Codegen, CodegenOptions};
 use oxc_parser::{Parser, ParserReturn};
 use oxc_span::SourceType;
-use std::collections::{BTreeMap, HashSet};
+use std::collections::{BTreeMap, HashMap, HashSet};
 use std::error::Error;
 use std::path::PathBuf;
+
+/// Import alias configuration for redirecting imports from other CSS-in-JS libraries
+#[derive(Debug, Clone, PartialEq)]
+pub enum ImportAlias {
+    /// Default export → named export (e.g., `import styled from '@emotion/styled'` → `import { styled } from '@devup-ui/react'`)
+    DefaultToNamed(String),
+    /// Named exports (1:1 mapping, e.g., `import { style } from '@vanilla-extract/css'` → `import { style } from '@devup-ui/react'`)
+    NamedToNamed,
+}
+
 #[derive(Debug)]
 pub enum ExtractStyleProp<'a> {
     Static(ExtractStyleValue),
@@ -95,6 +105,20 @@ pub struct ExtractOption {
     pub css_dir: String,
     pub single_css: bool,
     pub import_main_css: bool,
+    /// Import aliases for redirecting imports from other CSS-in-JS libraries to the target package
+    pub import_aliases: HashMap<String, ImportAlias>,
+}
+
+impl Default for ExtractOption {
+    fn default() -> Self {
+        Self {
+            package: "@devup-ui/react".to_string(),
+            css_dir: "@devup-ui/react".to_string(),
+            single_css: false,
+            import_main_css: false,
+            import_aliases: HashMap::new(),
+        }
+    }
 }
 
 pub fn extract(
@@ -102,8 +126,15 @@ pub fn extract(
     code: &str,
     option: ExtractOption,
 ) -> Result<ExtractOutput, Box<dyn Error>> {
-    if !code.contains(option.package.as_str()) {
-        // skip if not using package
+    // Check if code contains the target package or any aliased packages
+    let has_relevant_import = code.contains(option.package.as_str())
+        || option
+            .import_aliases
+            .keys()
+            .any(|alias| code.contains(alias.as_str()));
+
+    if !has_relevant_import {
+        // skip if not using package or any aliases
         return Ok(ExtractOutput {
             styles: HashSet::new(),
             code: code.to_string(),
@@ -208,6 +239,7 @@ pub fn extract(
         } else {
             None
         },
+        option.import_aliases.clone(),
     );
     visitor.visit_program(&mut program);
     let result = Codegen::new()
@@ -264,6 +296,7 @@ fn extract_class_map_from_code(
             } else {
                 None
             },
+            option.import_aliases.clone(),
         );
         visitor.visit_program(&mut program);
 
@@ -378,7 +411,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 },
             )
             .unwrap()
@@ -394,7 +428,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 },
             )
             .unwrap()
@@ -411,7 +446,7 @@ mod tests {
                 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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -428,7 +463,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -450,7 +486,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -468,7 +505,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -486,7 +524,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -504,7 +543,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -522,7 +562,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -540,7 +581,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -558,7 +600,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -576,7 +619,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -594,7 +638,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -612,7 +657,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -630,7 +676,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -648,7 +695,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -666,7 +714,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -684,7 +733,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -698,7 +748,7 @@ mod tests {
                 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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -711,7 +761,7 @@ mod tests {
                 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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -728,7 +778,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -746,7 +797,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -764,7 +816,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -783,7 +836,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -802,7 +856,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -823,7 +878,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -840,7 +896,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -857,7 +914,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -875,7 +933,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -893,7 +952,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -911,7 +971,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -935,7 +996,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -960,7 +1022,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -984,7 +1047,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1006,7 +1070,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1024,7 +1089,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1042,7 +1108,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1060,7 +1127,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1077,7 +1145,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1101,7 +1170,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1119,7 +1189,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1141,7 +1212,8 @@ mod tests {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1177,7 +1249,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1199,7 +1272,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1220,7 +1294,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1235,7 +1310,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1257,7 +1333,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1275,7 +1352,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1293,7 +1371,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1311,7 +1390,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1333,7 +1413,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1351,7 +1432,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1369,7 +1451,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1391,7 +1474,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1409,7 +1493,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1427,7 +1512,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1445,7 +1531,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1463,7 +1550,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1485,7 +1573,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1507,7 +1596,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1529,7 +1619,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1547,7 +1638,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1569,7 +1661,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1587,7 +1680,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1609,7 +1703,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1627,7 +1722,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1645,7 +1741,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1663,7 +1760,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1681,7 +1779,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1699,7 +1798,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1717,7 +1817,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1735,7 +1836,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1753,7 +1855,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1771,7 +1874,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1789,7 +1893,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1811,7 +1916,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1829,7 +1935,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1847,7 +1954,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1865,7 +1973,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1883,7 +1992,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1901,7 +2011,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1923,7 +2034,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1941,7 +2053,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1963,7 +2076,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1981,7 +2095,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -1999,7 +2114,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2017,7 +2133,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2035,7 +2152,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2053,7 +2171,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2071,7 +2190,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2089,7 +2209,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2111,7 +2232,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2129,7 +2251,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2147,7 +2270,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2165,7 +2289,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2187,7 +2312,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2205,7 +2331,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2223,7 +2350,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2241,7 +2369,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2262,7 +2391,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2280,7 +2410,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2304,7 +2435,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2341,7 +2473,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2363,7 +2496,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2385,7 +2519,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2407,7 +2542,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2429,7 +2565,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2451,7 +2588,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2471,7 +2609,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2498,7 +2637,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2520,7 +2660,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2542,7 +2683,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2568,7 +2710,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2590,7 +2733,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2612,7 +2756,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2641,7 +2786,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2670,7 +2816,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2692,7 +2839,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2710,7 +2858,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2728,7 +2877,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2746,7 +2896,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2764,7 +2915,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2782,7 +2934,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2800,7 +2953,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2824,7 +2978,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2846,7 +3001,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2871,7 +3027,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2895,7 +3052,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2922,7 +3080,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2948,7 +3107,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -2973,7 +3133,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3004,7 +3165,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3030,7 +3192,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3058,7 +3221,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3086,7 +3250,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3114,7 +3279,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3142,7 +3308,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3166,7 +3333,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3186,7 +3354,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3204,7 +3373,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3225,7 +3395,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3249,7 +3420,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3271,7 +3443,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3295,7 +3468,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3319,7 +3493,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3339,7 +3514,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3360,7 +3536,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3380,7 +3557,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3403,7 +3581,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3421,7 +3600,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3439,7 +3619,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3457,7 +3638,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3480,7 +3662,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3509,7 +3692,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3527,7 +3711,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3545,7 +3730,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3564,7 +3750,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3582,7 +3769,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3600,7 +3788,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3618,7 +3807,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3646,7 +3836,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3673,7 +3864,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3695,7 +3887,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3717,7 +3910,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3735,7 +3929,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3753,7 +3948,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3775,7 +3971,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3793,7 +3990,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3811,7 +4009,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3832,7 +4031,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3850,7 +4050,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3868,7 +4069,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3891,7 +4093,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3911,7 +4114,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 },
             )
             .unwrap_err()
@@ -3929,7 +4133,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 },
             )
             .unwrap_err()
@@ -3952,7 +4157,8 @@ import clsx from 'clsx'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -3970,7 +4176,8 @@ useTheme();
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4011,7 +4218,8 @@ export {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4048,7 +4256,8 @@ export {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4067,7 +4276,8 @@ e(o, { className: "a", bg: "red" })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4086,7 +4296,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" } })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4105,7 +4316,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4121,7 +4333,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -4134,7 +4346,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -4148,7 +4360,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -4159,31 +4371,31 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
     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 }).unwrap()));
+        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 }).unwrap()));
+        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 }).unwrap()));
+        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 }).unwrap()));
+        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 }).unwrap()));
+        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 }).unwrap()));
+        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 }).unwrap()));
+        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]
@@ -4197,7 +4409,7 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                 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 }
+                ExtractOption { package: "@devup-ui/core".to_string(), css_dir: "@devup-ui/core".to_string(), single_css: true, import_main_css: false, import_aliases: HashMap::new() }
             )
             .unwrap()
         ));
@@ -4218,7 +4430,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4240,7 +4453,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4258,7 +4472,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4276,7 +4491,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4298,7 +4514,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4316,7 +4533,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4334,7 +4552,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4356,7 +4575,8 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4393,7 +4613,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4415,7 +4636,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4433,7 +4655,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4451,7 +4674,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4469,7 +4693,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4487,7 +4712,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4508,7 +4734,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4526,7 +4753,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4544,7 +4772,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4562,7 +4791,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4580,7 +4810,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4598,7 +4829,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4616,7 +4848,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4638,7 +4871,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4656,7 +4890,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4674,7 +4909,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4692,7 +4928,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4718,7 +4955,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4736,7 +4974,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4758,7 +4997,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4776,7 +5016,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4794,7 +5035,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4812,7 +5054,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4833,7 +5076,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4851,7 +5095,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4869,7 +5114,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4911,7 +5157,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4933,7 +5180,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4951,7 +5199,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4969,7 +5218,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -4987,7 +5237,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5009,7 +5260,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5026,7 +5278,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5048,7 +5301,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5066,7 +5320,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5087,7 +5342,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5109,7 +5365,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5127,7 +5384,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5148,7 +5406,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5166,7 +5425,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5188,7 +5448,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5210,7 +5471,8 @@ export default function Card({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5236,7 +5498,8 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5258,7 +5521,8 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5276,7 +5540,8 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5298,7 +5563,8 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5320,7 +5586,8 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5344,7 +5611,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5369,7 +5637,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5390,7 +5659,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5412,7 +5682,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5446,7 +5717,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5468,7 +5740,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5486,7 +5759,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5504,7 +5778,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5522,7 +5797,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5540,7 +5816,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5562,7 +5839,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5584,7 +5862,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5601,7 +5880,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5626,7 +5906,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5652,7 +5933,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5674,7 +5956,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5696,7 +5979,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5722,7 +6006,8 @@ import {Button} from '@devup/ui'
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5760,7 +6045,8 @@ export {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5778,7 +6064,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5796,7 +6083,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5814,7 +6102,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5839,7 +6128,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5865,7 +6155,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5883,7 +6174,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5912,7 +6204,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5937,7 +6230,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5962,7 +6256,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -5986,7 +6281,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6006,7 +6302,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6027,7 +6324,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6047,7 +6345,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6067,7 +6366,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6087,7 +6387,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6107,7 +6408,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6127,7 +6429,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6150,7 +6453,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6168,7 +6472,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6186,7 +6491,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6208,7 +6514,8 @@ export {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6231,7 +6538,8 @@ e(o, { styleVars: { c: "yellow" } })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6257,7 +6565,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6279,7 +6588,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6301,7 +6611,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6323,7 +6634,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6345,7 +6657,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6367,7 +6680,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6389,7 +6703,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6407,7 +6722,8 @@ globalCss(...{})
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6425,7 +6741,8 @@ globalCss(...{div: {bg: "red"}})
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6444,7 +6761,8 @@ globalCss(...{div: {bg: "red"}, ...{span: {bg: "blue"}}})
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6470,7 +6788,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6488,7 +6807,8 @@ globalCss()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6506,7 +6826,8 @@ globalCss(1)
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6537,7 +6858,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6572,7 +6894,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6607,7 +6930,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6650,7 +6974,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6676,7 +7001,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6696,7 +7022,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6716,7 +7043,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6737,7 +7065,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6760,7 +7089,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6778,7 +7108,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6796,7 +7127,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6815,7 +7147,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6833,7 +7166,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6857,7 +7191,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6877,7 +7212,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6897,7 +7233,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6932,7 +7269,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6958,7 +7296,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -6983,7 +7322,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7007,7 +7347,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7033,7 +7374,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7059,7 +7401,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7100,7 +7443,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7120,7 +7464,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7140,7 +7485,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7160,7 +7506,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7184,7 +7531,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7204,7 +7552,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7228,7 +7577,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7249,7 +7599,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7269,7 +7620,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7290,7 +7642,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7308,7 +7661,8 @@ globalCss({})
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7326,7 +7680,8 @@ globalCss()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7351,7 +7706,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7373,7 +7729,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7395,7 +7752,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7417,7 +7775,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7439,7 +7798,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7461,7 +7821,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7483,7 +7844,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7505,7 +7867,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7543,7 +7906,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7565,7 +7929,8 @@ keyframes(...{
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7590,7 +7955,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7636,7 +8002,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7684,7 +8051,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7706,7 +8074,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7721,7 +8090,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7737,7 +8107,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7752,7 +8123,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7774,7 +8146,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: true
+                    import_main_css: true,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7796,7 +8169,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7818,7 +8192,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7837,7 +8212,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7855,7 +8231,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7873,7 +8250,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7891,7 +8269,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7909,7 +8288,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7934,7 +8314,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7955,7 +8336,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7976,7 +8358,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -7999,7 +8382,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8022,7 +8406,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8045,7 +8430,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8071,7 +8457,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8094,7 +8481,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8121,7 +8509,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8144,7 +8533,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8164,7 +8554,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8184,7 +8575,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8204,7 +8596,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8226,7 +8619,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8245,7 +8639,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8267,7 +8662,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8286,7 +8682,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8308,7 +8705,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8327,7 +8725,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8351,7 +8750,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8371,7 +8771,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8394,7 +8795,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8414,7 +8816,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8437,7 +8840,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8465,7 +8869,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8490,7 +8895,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8511,7 +8917,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8532,7 +8939,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8555,7 +8963,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8574,7 +8983,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8593,7 +9003,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8620,7 +9031,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8644,7 +9056,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8670,7 +9083,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8694,7 +9108,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8720,7 +9135,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8742,7 +9158,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8761,7 +9178,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8780,7 +9198,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8799,7 +9218,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8829,7 +9249,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8852,7 +9273,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8871,7 +9293,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8890,7 +9313,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8909,7 +9333,8 @@ keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8933,7 +9358,8 @@ const StyledDiv = styled.div({ ...baseStyles })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8956,7 +9382,8 @@ const className = css()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -8979,7 +9406,8 @@ const className = css({})
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9005,7 +9433,8 @@ const spin = keyframes({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9030,7 +9459,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9056,7 +9486,8 @@ const Component = () => {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9080,7 +9511,8 @@ const className = myCss({ bg: "red" })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9105,7 +9537,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9136,7 +9569,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9161,7 +9595,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9184,7 +9619,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9209,7 +9645,8 @@ const key = "primary";
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9234,7 +9671,8 @@ const Component = ({ className }) => {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9257,7 +9695,8 @@ const Component = ({ className }) => {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9281,7 +9720,8 @@ const className = css({ fontSize: `${size}px` })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9305,7 +9745,8 @@ const isActive = true;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9330,7 +9771,8 @@ const Component = (props) => {
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9355,7 +9797,8 @@ const b = false;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9379,7 +9822,8 @@ const color = "red";
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9402,7 +9846,8 @@ const spin = keyframes()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9425,7 +9870,8 @@ globalCss()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9448,7 +9894,8 @@ globalCss()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9471,7 +9918,8 @@ globalCss()
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9494,7 +9942,8 @@ const className = DevUI.css({ bg: "red" })
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9519,7 +9968,8 @@ const colors = { primary: "blue", secondary: "red" };
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9543,7 +9993,8 @@ const dynamicColor = "blue";
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9567,7 +10018,8 @@ const extraProps = { onClick: () => {} };
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9590,7 +10042,8 @@ const extraProps = { onClick: () => {} };
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9616,7 +10069,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9639,7 +10093,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9658,7 +10113,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9677,7 +10133,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9696,7 +10153,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9719,7 +10177,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9742,7 +10201,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9761,7 +10221,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9780,7 +10241,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9799,7 +10261,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9822,7 +10285,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9841,7 +10305,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9860,7 +10325,8 @@ const margin = 5;
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9889,7 +10355,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9914,7 +10381,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9939,7 +10407,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -9971,7 +10440,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10000,7 +10470,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10028,7 +10499,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: false,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10057,7 +10529,8 @@ export const container: string = style({ background: "red", padding: 16 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10080,7 +10553,8 @@ export const wrapper = style({ backgroundColor: "white", margin: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10099,7 +10573,8 @@ export const link = style({ color: "blue", textDecoration: "underline" })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10124,7 +10599,8 @@ export const button = style({ background: primaryColor, padding: spacing })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10148,7 +10624,8 @@ export const box = style({ padding: base * 2, margin: base / 2 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10172,7 +10649,8 @@ export const extended = style({ ...baseStyle, background: "red" })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10195,7 +10673,8 @@ export const hoverButton = style({ background: "gray", _hover: { background: "bl
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10218,7 +10697,8 @@ export const responsiveBox = style({ padding: [8, 16, 32] })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10242,7 +10722,8 @@ export const animated = style({ animation: "fadeIn 1s ease-in" })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10261,7 +10742,8 @@ globalStyle("body", { margin: 0, padding: 0 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10290,7 +10772,8 @@ export const box = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10312,7 +10795,8 @@ export const box = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10339,7 +10823,8 @@ export const background = styleVariants({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10362,7 +10847,8 @@ export const button = styleVariants({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10391,7 +10877,8 @@ export const text = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10417,7 +10904,8 @@ export const body = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10455,7 +10943,8 @@ export const box = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10492,7 +10981,8 @@ export const darkTheme = createTheme(vars, {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10523,7 +11013,8 @@ globalStyle('*', {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10557,7 +11048,8 @@ export const responsive = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10589,7 +11081,8 @@ export const vars = createGlobalTheme(':root', {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10623,7 +11116,8 @@ export const button = style([base, interactive, {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10663,7 +11157,8 @@ export const button = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10694,7 +11189,8 @@ export const child = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10731,7 +11227,8 @@ export const responsive = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10761,7 +11258,8 @@ export const grid = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10897,7 +11395,8 @@ export const grid = style({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10922,7 +11421,8 @@ export const grid = style({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -10948,6 +11448,7 @@ export const broken = style((() => { throw new Error("fail"); })())
                 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
@@ -10973,6 +11474,7 @@ const unused = 1;
                 css_dir: "@devup-ui/react".to_string(),
                 single_css: true,
                 import_main_css: false,
+                import_aliases: HashMap::new(),
             },
         );
         assert!(result.is_ok());
@@ -10997,7 +11499,8 @@ export const box = style({ padding: SPACING })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11030,7 +11533,8 @@ export const [lightTheme, vars] = createTheme({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11062,7 +11566,8 @@ export const themed = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11087,7 +11592,8 @@ export const withEmpty = style([{}])
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11119,7 +11625,8 @@ export const sizes = styleVariants({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11149,7 +11656,8 @@ export const containerStyle = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11185,7 +11693,8 @@ export const box = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11220,7 +11729,8 @@ export const darkTheme = createTheme(contract, {
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11250,7 +11760,8 @@ export const text = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11279,7 +11790,8 @@ export const box = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11304,7 +11816,8 @@ export const box = style({ padding: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11329,7 +11842,7 @@ 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 }
+                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()
         ));
@@ -11366,7 +11879,8 @@ export const sibling = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11412,7 +11926,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11445,7 +11960,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11471,7 +11987,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11495,7 +12012,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11519,6 +12037,7 @@ globalCss({
                 css_dir: "@devup-ui/react".to_string(),
                 single_css: true,
                 import_main_css: false,
+                import_aliases: HashMap::new(),
             },
         );
         assert!(result.is_ok());
@@ -11544,6 +12063,7 @@ const x = style({ padding: [[[}}} // invalid syntax
                 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
@@ -11552,23 +12072,31 @@ const x = style({ padding: [[[}}} // invalid syntax
 
     #[test]
     #[serial]
-    fn test_vanilla_extract_style_no_length() {
-        // Test style() with object that has no length property (covers line 745)
+    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();
-        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(
-                "no-length.css.ts",
-                r#"import { style } from '@devup-ui/react'
-export const box = style({ padding: 8, margin: 4 })
+                "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_main_css: false,
+                    import_aliases: aliases,
+                },
             )
             .unwrap()
         ));
@@ -11599,7 +12127,8 @@ export const spinner = style({ animation: spin })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11625,7 +12154,8 @@ export const myTheme = createTheme({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11654,7 +12184,8 @@ export const buttons = styleVariants({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11688,7 +12219,8 @@ export const box = style({ padding: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11713,7 +12245,8 @@ export const text = style({ fontFamily: minimalFont })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11740,7 +12273,8 @@ export const animated = style({ animation: fadeIn })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11773,7 +12307,8 @@ export const box = style({ padding: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11798,7 +12333,8 @@ export const complex = style([base, { margin: 4 }, { color: 'blue' }])
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11827,7 +12363,8 @@ export const child = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11860,7 +12397,7 @@ export const buttons = styleVariants({
 })
 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 }
+                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()
         ));
@@ -11887,7 +12424,8 @@ export const themed = style({ color: themeVars.colors.primary })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11920,7 +12458,8 @@ export const heading = style({ fontFamily: secondFont })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11950,7 +12489,8 @@ export const box = style({ padding: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -11980,7 +12520,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12009,7 +12550,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12040,7 +12582,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12071,7 +12614,7 @@ export const child = style({
 })
 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 }
+                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()
         ));
@@ -12100,7 +12643,8 @@ export const box = style({ padding: 8 })
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12132,7 +12676,8 @@ globalCss({
                     package: "@devup-ui/core".to_string(),
                     css_dir: "@devup-ui/core".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12165,7 +12710,8 @@ export const child = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12197,7 +12743,8 @@ export const card = style({
                     package: "@devup-ui/react".to_string(),
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
-                    import_main_css: false
+                    import_main_css: false,
+                    import_aliases: HashMap::new()
                 }
             )
             .unwrap()
@@ -12219,6 +12766,7 @@ export const card = style({
                 css_dir: "@devup-ui/react".to_string(),
                 single_css: true,
                 import_main_css: false,
+                import_aliases: HashMap::new(),
             },
             &style_names,
         )
@@ -12226,4 +12774,165 @@ export const card = style({
 
         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_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()
+        ));
+    }
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
new file mode 100644
index 00000000..245dbb60
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
new file mode 100644
index 00000000..76f4237b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
@@ -0,0 +1,19 @@
+---
+source: libs/extractor/src/lib.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/src/snapshots/extractor__tests__import_alias_renamed_import.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
new file mode 100644
index 00000000..0dc8e1db
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
new file mode 100644
index 00000000..4066ba54
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_skip_when_package_not_in_code.snap
@@ -0,0 +1,8 @@
+---
+source: libs/extractor/src/lib.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/src/snapshots/extractor__tests__import_alias_styled_components.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
new file mode 100644
index 00000000..664c9fa6
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
new file mode 100644
index 00000000..b6bef59b
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_vanilla_extract_named.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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/src/visit.rs b/libs/extractor/src/visit.rs
index 51f98253..977e8320 100644
--- a/libs/extractor/src/visit.rs
+++ b/libs/extractor/src/visit.rs
@@ -1,3 +1,4 @@
+use crate::ImportAlias;
 use crate::as_visit::AsVisitor;
 use crate::component::ExportVariableKind;
 use crate::css_utils::{css_to_style_literal, keyframes_to_keyframes_style, optimize_css_block};
@@ -54,6 +55,8 @@ pub struct DevupVisitor<'a> {
     pub css_files: Vec<String>,
     pub styles: HashSet<ExtractStyleValue>,
     styled_import: Option<String>,
+    /// Import aliases for redirecting imports from other CSS-in-JS libraries
+    import_aliases: HashMap<String, ImportAlias>,
 }
 
 impl<'a> DevupVisitor<'a> {
@@ -63,6 +66,7 @@ impl<'a> DevupVisitor<'a> {
         package: &str,
         css_files: Vec<String>,
         split_filename: Option<String>,
+        import_aliases: HashMap<String, ImportAlias>,
     ) -> Self {
         Self {
             ast: AstBuilder::new(allocator),
@@ -77,6 +81,7 @@ impl<'a> DevupVisitor<'a> {
             util_imports: HashMap::new(),
             split_filename,
             styled_import: None,
+            import_aliases,
         }
     }
 }
@@ -123,10 +128,13 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
 
         for i in (0..it.body.len()).rev() {
             if let Statement::ImportDeclaration(decl) = &it.body[i]
-                && decl.source.value == self.package
                 && decl.specifiers.iter().all(|s| s.is_empty())
             {
-                it.body.remove(i);
+                // Remove empty imports from main package and aliased packages
+                let source = decl.source.value.as_str();
+                if source == self.package || self.import_aliases.contains_key(source) {
+                    it.body.remove(i);
+                }
             }
         }
     }
@@ -468,71 +476,122 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
         walk_variable_declarator(self, it);
     }
     fn visit_import_declaration(&mut self, it: &mut ImportDeclaration<'a>) {
-        if it.source.value != self.package
-            && it.source.value == "react/jsx-runtime"
-            && let Some(specifiers) = &it.specifiers
-        {
-            for specifier in specifiers {
-                if let ImportSpecifier(import) = specifier {
-                    self.jsx_imports
-                        .insert(import.local.to_string(), import.imported.to_string());
+        let source_value = it.source.value.as_str();
+
+        // Check for import aliases (e.g., @emotion/styled, styled-components, @vanilla-extract/css)
+        // Instead of modifying AST (which has lifetime issues), we just track the imports internally
+        if let Some(alias) = self.import_aliases.get(source_value).cloned() {
+            if let Some(specifiers) = &mut it.specifiers {
+                match alias {
+                    ImportAlias::DefaultToNamed(named_export) => {
+                        // Transform default import to named import
+                        // e.g., `import styled from '@emotion/styled'` → register as `styled` named import
+                        for i in (0..specifiers.len()).rev() {
+                            if let ImportDeclarationSpecifier::ImportDefaultSpecifier(
+                                default_spec,
+                            ) = &specifiers[i]
+                            {
+                                let local_name = default_spec.local.to_string();
+                                // Register as styled import (for styled-components/emotion compatibility)
+                                if named_export == "styled" {
+                                    self.styled_import = Some(local_name);
+                                }
+                                specifiers.remove(i);
+                            }
+                        }
+                    }
+                    ImportAlias::NamedToNamed => {
+                        // Named imports stay as named imports (1:1 mapping)
+                        // e.g., `import { style } from '@vanilla-extract/css'` → treat as `import { style } from '@devup-ui/react'`
+                        // Process like regular package imports
+                        for i in (0..specifiers.len()).rev() {
+                            if let ImportSpecifier(import) = &specifiers[i] {
+                                if let Ok(kind) =
+                                    ExportVariableKind::try_from(import.imported.to_string())
+                                {
+                                    self.imports.insert(import.local.to_string(), kind);
+                                    specifiers.remove(i);
+                                } else if let Ok(kind) =
+                                    UtilType::try_from(import.imported.to_string())
+                                {
+                                    self.util_imports
+                                        .insert(import.local.to_string(), Rc::new(kind));
+                                    specifiers.remove(i);
+                                } else if import.imported.to_string() == "styled" {
+                                    self.styled_import = Some(import.local.to_string());
+                                    specifiers.remove(i);
+                                }
+                            }
+                        }
+                    }
                 }
             }
-        } else if it.source.value == self.package
-            && let Some(specifiers) = &mut it.specifiers
-        {
-            for i in (0..specifiers.len()).rev() {
-                match &specifiers[i] {
-                    ImportSpecifier(import) => {
-                        if let Ok(kind) = ExportVariableKind::try_from(import.imported.to_string())
-                        {
-                            self.imports.insert(import.local.to_string(), kind);
-                            specifiers.remove(i);
-                        } else if let Ok(kind) = UtilType::try_from(import.imported.to_string()) {
-                            self.util_imports
-                                .insert(import.local.to_string(), Rc::new(kind));
-                            specifiers.remove(i);
-                        } else if import.imported.to_string() == "styled" {
-                            self.styled_import = Some(import.local.to_string());
-                            specifiers.remove(i);
-                        }
+        } else if source_value != self.package && source_value == "react/jsx-runtime" {
+            if let Some(specifiers) = &it.specifiers {
+                for specifier in specifiers {
+                    if let ImportSpecifier(import) = specifier {
+                        self.jsx_imports
+                            .insert(import.local.to_string(), import.imported.to_string());
                     }
-                    ImportDeclarationSpecifier::ImportDefaultSpecifier(
-                        import_default_specifier,
-                    ) => {
-                        for kind in ExportVariableKind::iter() {
-                            self.imports.insert(
-                                format!("{}.{}", import_default_specifier.local, kind),
-                                kind,
-                            );
+                }
+            }
+        } else if source_value == self.package {
+            if let Some(specifiers) = &mut it.specifiers {
+                for i in (0..specifiers.len()).rev() {
+                    match &specifiers[i] {
+                        ImportSpecifier(import) => {
+                            if let Ok(kind) =
+                                ExportVariableKind::try_from(import.imported.to_string())
+                            {
+                                self.imports.insert(import.local.to_string(), kind);
+                                specifiers.remove(i);
+                            } else if let Ok(kind) = UtilType::try_from(import.imported.to_string())
+                            {
+                                self.util_imports
+                                    .insert(import.local.to_string(), Rc::new(kind));
+                                specifiers.remove(i);
+                            } else if import.imported.to_string() == "styled" {
+                                self.styled_import = Some(import.local.to_string());
+                                specifiers.remove(i);
+                            }
                         }
-                        self.util_imports.insert(
-                            format!("{}.{}", import_default_specifier.local, "css"),
-                            Rc::new(UtilType::Css),
-                        );
+                        ImportDeclarationSpecifier::ImportDefaultSpecifier(
+                            import_default_specifier,
+                        ) => {
+                            for kind in ExportVariableKind::iter() {
+                                self.imports.insert(
+                                    format!("{}.{}", import_default_specifier.local, kind),
+                                    kind,
+                                );
+                            }
+                            self.util_imports.insert(
+                                format!("{}.{}", import_default_specifier.local, "css"),
+                                Rc::new(UtilType::Css),
+                            );
 
-                        self.util_imports.insert(
-                            format!("{}.{}", import_default_specifier.local, "globalCss"),
-                            Rc::new(UtilType::GlobalCss),
-                        );
-                    }
-                    ImportDeclarationSpecifier::ImportNamespaceSpecifier(
-                        import_namespace_specifier,
-                    ) => {
-                        for kind in ExportVariableKind::iter() {
-                            self.imports.insert(
-                                format!("{}.{}", import_namespace_specifier.local, kind),
-                                kind,
+                            self.util_imports.insert(
+                                format!("{}.{}", import_default_specifier.local, "globalCss"),
+                                Rc::new(UtilType::GlobalCss),
+                            );
+                        }
+                        ImportDeclarationSpecifier::ImportNamespaceSpecifier(
+                            import_namespace_specifier,
+                        ) => {
+                            for kind in ExportVariableKind::iter() {
+                                self.imports.insert(
+                                    format!("{}.{}", import_namespace_specifier.local, kind),
+                                    kind,
+                                );
+                            }
+                            self.util_imports.insert(
+                                format!("{}.{}", import_namespace_specifier.local, "css"),
+                                Rc::new(UtilType::Css),
+                            );
+                            self.util_imports.insert(
+                                format!("{}.{}", import_namespace_specifier.local, "globalCss"),
+                                Rc::new(UtilType::GlobalCss),
                             );
                         }
-                        self.util_imports.insert(
-                            format!("{}.{}", import_namespace_specifier.local, "css"),
-                            Rc::new(UtilType::Css),
-                        );
-                        self.util_imports.insert(
-                            format!("{}.{}", import_namespace_specifier.local, "globalCss"),
-                            Rc::new(UtilType::GlobalCss),
-                        );
                     }
                 }
             }
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index 2d6534b9..e814b616 100644
--- a/libs/sheet/src/lib.rs
+++ b/libs/sheet/src/lib.rs
@@ -2010,7 +2010,7 @@ mod tests {
         );
 
         let mut sheet = StyleSheet::default();
-        let output = extract("index.tsx", "import {Box,globalCss,keyframes,Flex} from '@devup-ui/core';<Flex/>;keyframes({from:{opacity:0},to:{opacity:1}});<Box w={1} h={variable} />;globalCss`div{color:red}`;globalCss({div:{display:flex},imports:['https://test.com/a.css'],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 }).unwrap();
+        let output = extract("index.tsx", "import {Box,globalCss,keyframes,Flex} from '@devup-ui/core';<Flex/>;keyframes({from:{opacity:0},to:{opacity:1}});<Box w={1} h={variable} />;globalCss`div{color:red}`;globalCss({div:{display:flex},imports:['https://test.com/a.css'],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: std::collections::HashMap::new() }).unwrap();
         sheet.update_styles(&output.styles, "index.tsx", true);
         assert_debug_snapshot!(sheet.create_css(None, true).split("*/").nth(1).unwrap());
     }
diff --git a/packages/bun-plugin/src/__tests__/index.test.ts b/packages/bun-plugin/src/__tests__/index.test.ts
index dbf15928..3a8db2b5 100644
--- a/packages/bun-plugin/src/__tests__/index.test.ts
+++ b/packages/bun-plugin/src/__tests__/index.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'bun:test'
 
 describe('index exports', () => {
-  it('should export nothing', async () => {
+  it('should export plugin', async () => {
     const index = await import('../index')
     expect(index).toEqual({
       plugin: expect.any(Function),
diff --git a/packages/bun-plugin/src/plugin.ts b/packages/bun-plugin/src/plugin.ts
index 65f4713c..2bf17e44 100644
--- a/packages/bun-plugin/src/plugin.ts
+++ b/packages/bun-plugin/src/plugin.ts
@@ -2,7 +2,7 @@ import { existsSync } from 'node:fs'
 import { mkdir, writeFile } from 'node:fs/promises'
 import { basename, dirname, join, relative, resolve } from 'node:path'
 
-import { loadDevupConfig } from '@devup-ui/plugin-utils'
+import { loadDevupConfig, mergeImportAliases } from '@devup-ui/plugin-utils'
 import {
   codeExtract,
   getThemeInterface,
@@ -17,6 +17,7 @@ const devupFile = 'devup.json'
 const distDir = 'df'
 const cssDir = resolve(distDir, 'devup-ui')
 const singleCss = true
+const importAliases = mergeImportAliases()
 
 async function writeDataFiles() {
   let theme = {}
@@ -83,6 +84,7 @@ async function loadSourceFile(filePath: string) {
       singleCss,
       true,
       false,
+      importAliases,
     )
     return { contents: code.code, loader }
   }
diff --git a/packages/next-plugin/src/__tests__/loader.test.ts b/packages/next-plugin/src/__tests__/loader.test.ts
index 8d09d599..073a4712 100644
--- a/packages/next-plugin/src/__tests__/loader.test.ts
+++ b/packages/next-plugin/src/__tests__/loader.test.ts
@@ -260,6 +260,7 @@ describe('devupUILoader', () => {
       true,
       false,
       true,
+      {},
     )
     await waitFor(() => {
       expect(asyncCallback).toHaveBeenCalledWith(null, 'code', null)
diff --git a/packages/next-plugin/src/__tests__/plugin.test.ts b/packages/next-plugin/src/__tests__/plugin.test.ts
index 363e394a..dd816c10 100644
--- a/packages/next-plugin/src/__tests__/plugin.test.ts
+++ b/packages/next-plugin/src/__tests__/plugin.test.ts
@@ -189,6 +189,11 @@ describe('DevupUINextPlugin', () => {
                     theme: {},
                     defaultClassMap: {},
                     defaultFileMap: {},
+                    importAliases: {
+                      '@emotion/styled': 'styled',
+                      '@vanilla-extract/css': null,
+                      'styled-components': 'styled',
+                    },
                     defaultSheet: {
                       css: {},
                       font_faces: {},
@@ -257,6 +262,11 @@ describe('DevupUINextPlugin', () => {
                     sheetFile: join('df', 'sheet.json'),
                     classMapFile: join('df', 'classMap.json'),
                     fileMapFile: join('df', 'fileMap.json'),
+                    importAliases: {
+                      '@emotion/styled': 'styled',
+                      '@vanilla-extract/css': null,
+                      'styled-components': 'styled',
+                    },
                     watch: false,
                     singleCss: false,
                     theme: {},
@@ -332,6 +342,11 @@ describe('DevupUINextPlugin', () => {
                     theme: 'theme',
                     defaultClassMap: {},
                     defaultFileMap: {},
+                    importAliases: {
+                      '@emotion/styled': 'styled',
+                      '@vanilla-extract/css': null,
+                      'styled-components': 'styled',
+                    },
                     defaultSheet: {
                       css: {},
                       font_faces: {},
@@ -376,6 +391,11 @@ describe('DevupUINextPlugin', () => {
         false,
         expect.any(String),
         [],
+        {
+          '@emotion/styled': 'styled',
+          '@vanilla-extract/css': null,
+          'styled-components': 'styled',
+        },
       )
     })
     it('should create theme.d.ts file', async () => {
diff --git a/packages/next-plugin/src/__tests__/preload.test.ts b/packages/next-plugin/src/__tests__/preload.test.ts
index ab06f18e..cda381d9 100644
--- a/packages/next-plugin/src/__tests__/preload.test.ts
+++ b/packages/next-plugin/src/__tests__/preload.test.ts
@@ -75,7 +75,7 @@ describe('preload', () => {
   it('should process files and write devup-ui.css', () => {
     globSyncSpy.mockReturnValue(['/project/src/index.tsx'])
 
-    preload(/node_modules/, '@devup-ui/react', true, '/css', [], '/project')
+    preload(/node_modules/, '@devup-ui/react', true, '/css', [], {}, '/project')
 
     expect(globSyncSpy).toHaveBeenCalled()
     expect(codeExtractSpy).toHaveBeenCalled()
@@ -94,7 +94,7 @@ describe('preload', () => {
       '/project/src/types.d.ts',
     ])
 
-    preload(/node_modules/, '@devup-ui/react', true, '/css', [], '/project')
+    preload(/node_modules/, '@devup-ui/react', true, '/css', [], {}, '/project')
 
     expect(codeExtractSpy).not.toHaveBeenCalled()
   })
@@ -107,7 +107,7 @@ describe('preload', () => {
       path.join(cwd, '.next/index.tsx'),
     ])
 
-    preload(/node_modules/, '@devup-ui/react', true, '/css', [], cwd)
+    preload(/node_modules/, '@devup-ui/react', true, '/css', [], {}, cwd)
 
     expect(codeExtractSpy).not.toHaveBeenCalled()
   })
@@ -115,7 +115,7 @@ describe('preload', () => {
   it('should skip files matching exclude regex', () => {
     globSyncSpy.mockReturnValue(['/project/node_modules/pkg/index.tsx'])
 
-    preload(/node_modules/, '@devup-ui/react', true, '/css', [], '/project')
+    preload(/node_modules/, '@devup-ui/react', true, '/css', [], {}, '/project')
 
     expect(codeExtractSpy).not.toHaveBeenCalled()
   })
@@ -132,7 +132,7 @@ describe('preload', () => {
       [Symbol.dispose]: mock(),
     } as any)
 
-    preload(/node_modules/, '@devup-ui/react', true, '/css', [], '/project')
+    preload(/node_modules/, '@devup-ui/react', true, '/css', [], {}, '/project')
 
     expect(writeFileSyncSpy).toHaveBeenCalledWith(
       path.join('/css', 'devup-ui-1.css'),
@@ -157,6 +157,7 @@ describe('preload', () => {
       true,
       '/css',
       ['@scope/local-pkg'],
+      {},
       '/project',
     )
 
@@ -179,6 +180,7 @@ describe('preload', () => {
       true,
       '/css',
       ['@scope/local-pkg'],
+      {},
       '/project',
       true, // nested = true
     )
diff --git a/packages/next-plugin/src/loader.ts b/packages/next-plugin/src/loader.ts
index 95a10a76..cc7d2ba3 100644
--- a/packages/next-plugin/src/loader.ts
+++ b/packages/next-plugin/src/loader.ts
@@ -29,6 +29,7 @@ export interface DevupUILoaderOptions {
   defaultSheet: object
   defaultClassMap: object
   defaultFileMap: object
+  importAliases?: Record<string, string | null>
 }
 let init = false
 
@@ -47,6 +48,7 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
       defaultClassMap,
       defaultFileMap,
       defaultSheet,
+      importAliases = {},
     } = this.getOptions()
 
     const promises: Promise<void>[] = []
@@ -89,6 +91,7 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
         singleCss,
         false,
         true,
+        importAliases,
       )
       const sourceMap = map ? JSON.parse(map) : null
       if (updatedBaseStyle && watch) {
diff --git a/packages/next-plugin/src/plugin.ts b/packages/next-plugin/src/plugin.ts
index 618ace67..bd94ae70 100644
--- a/packages/next-plugin/src/plugin.ts
+++ b/packages/next-plugin/src/plugin.ts
@@ -1,7 +1,7 @@
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { join, relative, resolve } from 'node:path'
 
-import { loadDevupConfigSync } from '@devup-ui/plugin-utils'
+import { loadDevupConfigSync, mergeImportAliases } from '@devup-ui/plugin-utils'
 import {
   exportClassMap,
   exportFileMap,
@@ -50,12 +50,15 @@ export function DevupUI(
       devupFile = 'devup.json',
       include = [],
       prefix,
+      importAliases: userImportAliases,
     } = options
 
     if (prefix) {
       setPrefix(prefix)
     }
 
+    const importAliases = mergeImportAliases(userImportAliases)
+
     const sheetFile = join(distDir, 'sheet.json')
     const classMapFile = join(distDir, 'classMap.json')
     const fileMapFile = join(distDir, 'fileMap.json')
@@ -104,7 +107,14 @@ export function DevupUI(
       writeFileSync(join(cssDir, 'devup-ui.css'), getCss(null, false))
     } else {
       // build
-      preload(excludeRegex, libPackage, singleCss, cssDir, include)
+      preload(
+        excludeRegex,
+        libPackage,
+        singleCss,
+        cssDir,
+        include,
+        importAliases,
+      )
     }
     const defaultSheet = JSON.parse(exportSheet())
     const defaultClassMap = JSON.parse(exportClassMap())
@@ -146,6 +156,7 @@ export function DevupUI(
               singleCss,
               // for turbopack, load theme is required on loader
               theme,
+              importAliases: importAliases as unknown as Record<string, string>,
             },
           },
         ],
diff --git a/packages/next-plugin/src/preload.ts b/packages/next-plugin/src/preload.ts
index 6ffbe240..8cd77175 100644
--- a/packages/next-plugin/src/preload.ts
+++ b/packages/next-plugin/src/preload.ts
@@ -1,6 +1,7 @@
 import { readFileSync, realpathSync, writeFileSync } from 'node:fs'
 import { basename, dirname, join, relative } from 'node:path'
 
+import type { WasmImportAliases } from '@devup-ui/plugin-utils'
 import { codeExtract, getCss } from '@devup-ui/wasm'
 import { globSync } from 'tinyglobby'
 
@@ -14,6 +15,7 @@ export function preload(
   singleCss: boolean,
   cssDir: string,
   include: string[],
+  importAliases: WasmImportAliases,
   pwd = process.cwd(),
   nested = false,
 ) {
@@ -28,7 +30,16 @@ export function preload(
       .map((file) => dirname(file))
 
     for (const file of collected) {
-      preload(excludeRegex, libPackage, singleCss, cssDir, include, file, true)
+      preload(
+        excludeRegex,
+        libPackage,
+        singleCss,
+        cssDir,
+        include,
+        importAliases,
+        file,
+        true,
+      )
     }
     if (nested) return
   }
@@ -55,6 +66,7 @@ export function preload(
       singleCss,
       false,
       true,
+      importAliases,
     )
 
     if (cssFile) {
diff --git a/packages/plugin-utils/src/__tests__/merge-import-aliases.test.ts b/packages/plugin-utils/src/__tests__/merge-import-aliases.test.ts
new file mode 100644
index 00000000..aff059cb
--- /dev/null
+++ b/packages/plugin-utils/src/__tests__/merge-import-aliases.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  DEFAULT_IMPORT_ALIASES,
+  mergeImportAliases,
+  type WasmImportAliases,
+} from '../types'
+
+describe('mergeImportAliases', () => {
+  it('should return default aliases when no user aliases provided', () => {
+    const result = mergeImportAliases()
+
+    expect(result).toEqual({
+      '@emotion/styled': 'styled',
+      'styled-components': 'styled',
+      '@vanilla-extract/css': null,
+    })
+  })
+
+  it('should merge user aliases with defaults', () => {
+    const result = mergeImportAliases({
+      'my-lib': 'customExport',
+    })
+
+    expect(result).toEqual({
+      '@emotion/styled': 'styled',
+      'styled-components': 'styled',
+      '@vanilla-extract/css': null,
+      'my-lib': 'customExport',
+    })
+  })
+
+  it('should allow user to override default aliases', () => {
+    const result = mergeImportAliases({
+      '@emotion/styled': 'customStyled',
+    })
+
+    expect(result['@emotion/styled']).toBe('customStyled')
+  })
+
+  it('should allow user to disable default aliases with false', () => {
+    const result = mergeImportAliases({
+      '@emotion/styled': false,
+    })
+
+    expect(result['@emotion/styled']).toBeUndefined()
+    expect(result['styled-components']).toBe('styled')
+  })
+
+  it('should convert true to null for named exports', () => {
+    const result = mergeImportAliases({
+      'my-lib': true,
+    })
+
+    expect(result['my-lib']).toBeNull()
+  })
+
+  it('should handle disabling all defaults', () => {
+    const result = mergeImportAliases({
+      '@emotion/styled': false,
+      'styled-components': false,
+      '@vanilla-extract/css': false,
+    })
+
+    expect(result).toEqual({})
+  })
+
+  it('should return correct WASM format', () => {
+    const result: WasmImportAliases = mergeImportAliases({
+      'default-export-lib': 'namedExport',
+      'named-export-lib': true,
+    })
+
+    // String value = default export -> named export
+    expect(result['default-export-lib']).toBe('namedExport')
+    // null = named exports 1:1 mapping
+    expect(result['named-export-lib']).toBeNull()
+  })
+})
+
+describe('DEFAULT_IMPORT_ALIASES', () => {
+  it('should have correct default values', () => {
+    expect(DEFAULT_IMPORT_ALIASES).toEqual({
+      '@emotion/styled': 'styled',
+      'styled-components': 'styled',
+      '@vanilla-extract/css': true,
+    })
+  })
+})
diff --git a/packages/plugin-utils/src/index.ts b/packages/plugin-utils/src/index.ts
index 0696f782..0a887597 100644
--- a/packages/plugin-utils/src/index.ts
+++ b/packages/plugin-utils/src/index.ts
@@ -2,7 +2,10 @@ export { deepMerge, loadDevupConfig, loadDevupConfigSync } from './load-config'
 export type {
   DevupConfig,
   DevupTheme,
+  ImportAliases,
   ThemeColors,
   ThemeTypography,
   Typography,
+  WasmImportAliases,
 } from './types'
+export { DEFAULT_IMPORT_ALIASES, mergeImportAliases } from './types'
diff --git a/packages/plugin-utils/src/types.ts b/packages/plugin-utils/src/types.ts
index 3addeb41..3ea1cb40 100644
--- a/packages/plugin-utils/src/types.ts
+++ b/packages/plugin-utils/src/types.ts
@@ -47,3 +47,61 @@ export interface DevupConfig {
    */
   theme?: DevupTheme
 }
+
+/**
+ * Import alias configuration for redirecting imports from other CSS-in-JS libraries
+ *
+ * - `string`: default export → named export (e.g., `'styled'` transforms `import styled from 'pkg'` to `import { styled } from '@devup-ui/react'`)
+ * - `true`: all named exports (1:1 mapping)
+ * - `false`: disable this alias
+ *
+ * @example
+ * ```ts
+ * {
+ *   '@emotion/styled': 'styled',      // default export → named 'styled'
+ *   'styled-components': 'styled',    // default export → named 'styled'
+ *   '@vanilla-extract/css': true,     // named exports (1:1)
+ *   'some-lib': false                 // disable
+ * }
+ * ```
+ */
+export type ImportAliases = Record<string, string | true | false>
+
+/**
+ * Default import aliases for common CSS-in-JS libraries
+ */
+export const DEFAULT_IMPORT_ALIASES: ImportAliases = {
+  '@emotion/styled': 'styled',
+  'styled-components': 'styled',
+  '@vanilla-extract/css': true,
+}
+
+/**
+ * WASM-compatible import aliases format
+ * - `string`: default export → named export
+ * - `null`: named exports (1:1 mapping)
+ */
+export type WasmImportAliases = Record<string, string | null>
+
+/**
+ * Merge user import aliases with defaults and convert to WASM format
+ *
+ * @param userAliases - User-provided aliases (optional)
+ * @returns WASM-compatible import aliases
+ *
+ * @example
+ * ```ts
+ * const aliases = mergeImportAliases({ '@emotion/styled': false })
+ * // Returns: { 'styled-components': 'styled', '@vanilla-extract/css': null }
+ * ```
+ */
+export function mergeImportAliases(
+  userAliases?: ImportAliases,
+): WasmImportAliases {
+  const merged = { ...DEFAULT_IMPORT_ALIASES, ...userAliases }
+  return Object.fromEntries(
+    Object.entries(merged)
+      .filter((entry): entry is [string, string | true] => entry[1] !== false)
+      .map(([pkg, value]) => [pkg, value === true ? null : value]),
+  ) as WasmImportAliases
+}
diff --git a/packages/rsbuild-plugin/src/plugin.ts b/packages/rsbuild-plugin/src/plugin.ts
index 39d08283..53575596 100644
--- a/packages/rsbuild-plugin/src/plugin.ts
+++ b/packages/rsbuild-plugin/src/plugin.ts
@@ -2,7 +2,11 @@ import { existsSync } from 'node:fs'
 import { mkdir, writeFile } from 'node:fs/promises'
 import { basename, join, resolve } from 'node:path'
 
-import { loadDevupConfig } from '@devup-ui/plugin-utils'
+import {
+  type ImportAliases,
+  loadDevupConfig,
+  mergeImportAliases,
+} from '@devup-ui/plugin-utils'
 import {
   codeExtract,
   getCss,
@@ -24,6 +28,12 @@ export interface DevupUIRsbuildPluginOptions {
   include: string[]
   singleCss: boolean
   prefix?: string
+  /**
+   * Import aliases for redirecting imports from other CSS-in-JS libraries
+   * Merged with defaults: @emotion/styled, styled-components, @vanilla-extract/css
+   * Set to `false` to disable specific aliases
+   */
+  importAliases?: ImportAliases
 }
 
 let globalCss = ''
@@ -77,102 +87,108 @@ export const DevupUI = ({
   debug = false,
   singleCss = false,
   prefix,
-}: Partial<DevupUIRsbuildPluginOptions> = {}): RsbuildPlugin => ({
-  name: 'devup-ui-rsbuild-plugin',
-  async setup(api) {
-    setDebug(debug)
-    if (prefix) {
-      setPrefix(prefix)
-    }
+  importAliases: userImportAliases,
+}: Partial<DevupUIRsbuildPluginOptions> = {}): RsbuildPlugin => {
+  const importAliases = mergeImportAliases(userImportAliases)
 
-    if (!existsSync(distDir)) await mkdir(distDir, { recursive: true })
-    await writeFile(join(distDir, '.gitignore'), '*', 'utf-8')
+  return {
+    name: 'devup-ui-rsbuild-plugin',
+    async setup(api) {
+      setDebug(debug)
+      if (prefix) {
+        setPrefix(prefix)
+      }
 
-    await writeDataFiles({
-      package: libPackage,
-      cssDir,
-      devupFile,
-      distDir,
-      singleCss,
-    })
-    if (!extractCss) return
+      if (!existsSync(distDir)) await mkdir(distDir, { recursive: true })
+      await writeFile(join(distDir, '.gitignore'), '*', 'utf-8')
 
-    api.transform(
-      {
-        test: cssDir,
-      },
-      () => globalCss,
-    )
+      await writeDataFiles({
+        package: libPackage,
+        cssDir,
+        devupFile,
+        distDir,
+        singleCss,
+      })
+      if (!extractCss) return
 
-    api.modifyRsbuildConfig((config) => {
-      const theme = getDefaultTheme()
-      if (theme) {
-        config.source ??= {}
-        config.source.define = {
-          'process.env.DEVUP_UI_DEFAULT_THEME':
-            JSON.stringify(getDefaultTheme()),
-          ...config.source.define,
-        }
-      }
-      return config
-    })
+      api.transform(
+        {
+          test: cssDir,
+        },
+        () => globalCss,
+      )
 
-    api.transform(
-      {
-        test: /\.(tsx|ts|js|mjs|jsx)$/,
-      },
-      async ({ code, resourcePath }) => {
-        if (
-          new RegExp(
-            `node_modules(?!.*(${['@devup-ui', ...include]
-              .join('|')
-              .replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
-          ).test(resourcePath)
-        )
-          return code
-        const {
-          code: retCode,
-          css = '',
-          map,
-          cssFile,
-          updatedBaseStyle,
-        } = codeExtract(
-          resourcePath,
-          code,
-          libPackage,
-          cssDir,
-          singleCss,
-          false,
-          true,
-        )
-        const promises: Promise<void>[] = []
-        if (updatedBaseStyle) {
-          // update base style
-          promises.push(
-            writeFile(
-              join(cssDir, 'devup-ui.css'),
-              getCss(null, false),
-              'utf-8',
-            ),
-          )
+      api.modifyRsbuildConfig((config) => {
+        const theme = getDefaultTheme()
+        if (theme) {
+          config.source ??= {}
+          config.source.define = {
+            'process.env.DEVUP_UI_DEFAULT_THEME':
+              JSON.stringify(getDefaultTheme()),
+            ...config.source.define,
+          }
         }
+        return config
+      })
 
-        if (cssFile) {
-          if (globalCss.length < css.length) globalCss = css
-          promises.push(
-            writeFile(
-              join(cssDir, basename(cssFile)),
-              `/* ${resourcePath} ${Date.now()} */`,
-              'utf-8',
-            ),
+      api.transform(
+        {
+          test: /\.(tsx|ts|js|mjs|jsx)$/,
+        },
+        async ({ code, resourcePath }) => {
+          if (
+            new RegExp(
+              `node_modules(?!.*(${['@devup-ui', ...include]
+                .join('|')
+                .replaceAll('/', '[\\/\\\\_]')})([\\/\\\\.]|$))`,
+            ).test(resourcePath)
           )
-        }
-        await Promise.all(promises)
-        return {
-          code: retCode,
-          map,
-        }
-      },
-    )
-  },
-})
+            return code
+          const {
+            code: retCode,
+            css = '',
+            map,
+            cssFile,
+            updatedBaseStyle,
+          } = codeExtract(
+            resourcePath,
+            code,
+            libPackage,
+            cssDir,
+            singleCss,
+            false,
+            true,
+            importAliases,
+          )
+          const promises: Promise<void>[] = []
+          if (updatedBaseStyle) {
+            // update base style
+            promises.push(
+              writeFile(
+                join(cssDir, 'devup-ui.css'),
+                getCss(null, false),
+                'utf-8',
+              ),
+            )
+          }
+
+          if (cssFile) {
+            if (globalCss.length < css.length) globalCss = css
+            promises.push(
+              writeFile(
+                join(cssDir, basename(cssFile)),
+                `/* ${resourcePath} ${Date.now()} */`,
+                'utf-8',
+              ),
+            )
+          }
+          await Promise.all(promises)
+          return {
+            code: retCode,
+            map,
+          }
+        },
+      )
+    },
+  }
+}
diff --git a/packages/vite-plugin/src/__tests__/plugin.test.ts b/packages/vite-plugin/src/__tests__/plugin.test.ts
index caac0919..d9bc2a63 100644
--- a/packages/vite-plugin/src/__tests__/plugin.test.ts
+++ b/packages/vite-plugin/src/__tests__/plugin.test.ts
@@ -395,6 +395,11 @@ describe('devupUIVitePlugin', () => {
       false,
       true,
       false,
+      {
+        '@emotion/styled': 'styled',
+        '@vanilla-extract/css': null,
+        'styled-components': 'styled',
+      },
     )
 
     relativeSpy.mockReturnValue('df/devup-ui/devup-ui.css')
@@ -407,6 +412,11 @@ describe('devupUIVitePlugin', () => {
       false,
       true,
       false,
+      {
+        '@emotion/styled': 'styled',
+        '@vanilla-extract/css': null,
+        'styled-components': 'styled',
+      },
     )
   })
 
diff --git a/packages/vite-plugin/src/plugin.ts b/packages/vite-plugin/src/plugin.ts
index 7b940c47..16326f08 100644
--- a/packages/vite-plugin/src/plugin.ts
+++ b/packages/vite-plugin/src/plugin.ts
@@ -2,7 +2,11 @@ import { existsSync } from 'node:fs'
 import { mkdir, writeFile } from 'node:fs/promises'
 import { basename, dirname, join, relative, resolve } from 'node:path'
 
-import { loadDevupConfig } from '@devup-ui/plugin-utils'
+import {
+  type ImportAliases,
+  loadDevupConfig,
+  mergeImportAliases,
+} from '@devup-ui/plugin-utils'
 import {
   codeExtract,
   getCss,
@@ -24,6 +28,12 @@ export interface DevupUIPluginOptions {
   include: string[]
   singleCss: boolean
   prefix?: string
+  /**
+   * Import aliases for redirecting imports from other CSS-in-JS libraries
+   * Merged with defaults: @emotion/styled, styled-components, @vanilla-extract/css
+   * Set to `false` to disable specific aliases
+   */
+  importAliases?: ImportAliases
 }
 
 function getFileNumByFilename(filename: string) {
@@ -77,11 +87,13 @@ export function DevupUI({
   include = [],
   singleCss = false,
   prefix,
+  importAliases: userImportAliases,
 }: Partial<DevupUIPluginOptions> = {}): PluginOption {
   setDebug(debug)
   if (prefix) {
     setPrefix(prefix)
   }
+  const importAliases = mergeImportAliases(userImportAliases)
   const cssMap = new Map()
   return {
     name: 'devup-ui',
@@ -202,7 +214,16 @@ export function DevupUI({
         cssFile,
         updatedBaseStyle,
         // import main css in code
-      } = codeExtract(fileName, code, libPackage, rel, singleCss, true, false)
+      } = codeExtract(
+        fileName,
+        code,
+        libPackage,
+        rel,
+        singleCss,
+        true,
+        false,
+        importAliases,
+      )
       const promises: Promise<void>[] = []
 
       if (updatedBaseStyle) {
diff --git a/packages/webpack-plugin/src/__tests__/loader.test.ts b/packages/webpack-plugin/src/__tests__/loader.test.ts
index 23463adc..571b5087 100644
--- a/packages/webpack-plugin/src/__tests__/loader.test.ts
+++ b/packages/webpack-plugin/src/__tests__/loader.test.ts
@@ -136,6 +136,7 @@ describe('devupUILoader', () => {
       true,
       false,
       true,
+      {},
     )
     if (options.updatedBaseStyle) {
       expect(writeFileSpy).toHaveBeenCalledWith(
@@ -195,6 +196,7 @@ describe('devupUILoader', () => {
       true,
       false,
       true,
+      {},
     )
     await waitFor(() => {
       expect(asyncCallback).toHaveBeenCalledWith(null, 'code', null)
@@ -259,6 +261,7 @@ describe('devupUILoader', () => {
       true,
       false,
       true,
+      {},
     )
   })
 
diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts
index 2440f0f1..a500204a 100644
--- a/packages/webpack-plugin/src/loader.ts
+++ b/packages/webpack-plugin/src/loader.ts
@@ -18,6 +18,7 @@ export interface DevupUILoaderOptions {
   fileMapFile: string
   watch: boolean
   singleCss: boolean
+  importAliases?: Record<string, string | null>
 }
 
 const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
@@ -30,6 +31,7 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
       classMapFile,
       fileMapFile,
       singleCss,
+      importAliases = {},
     } = this.getOptions()
     const callback = this.async()
     const id = this.resourcePath
@@ -54,6 +56,7 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
         singleCss,
         false,
         true,
+        importAliases,
       )
       const sourceMap = map ? JSON.parse(map) : null
       const promises: Promise<void>[] = []
diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts
index 542de11a..b58ebb69 100644
--- a/packages/webpack-plugin/src/plugin.ts
+++ b/packages/webpack-plugin/src/plugin.ts
@@ -3,7 +3,12 @@ import { stat, writeFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
 import { join, resolve } from 'node:path'
 
-import { loadDevupConfigSync } from '@devup-ui/plugin-utils'
+import {
+  type ImportAliases,
+  loadDevupConfigSync,
+  mergeImportAliases,
+  type WasmImportAliases,
+} from '@devup-ui/plugin-utils'
 import {
   getCss,
   getDefaultTheme,
@@ -27,13 +32,20 @@ export interface DevupUIWebpackPluginOptions {
   include: string[]
   singleCss: boolean
   prefix?: string
+  /**
+   * Import aliases for redirecting imports from other CSS-in-JS libraries
+   * Merged with defaults: @emotion/styled, styled-components, @vanilla-extract/css
+   * Set to `false` to disable specific aliases
+   */
+  importAliases?: ImportAliases
 }
 
 export class DevupUIWebpackPlugin {
-  options: DevupUIWebpackPluginOptions
+  options: Omit<DevupUIWebpackPluginOptions, 'importAliases'>
   sheetFile: string
   classMapFile: string
   fileMapFile: string
+  private importAliases: WasmImportAliases
 
   constructor({
     package: libPackage = '@devup-ui/react',
@@ -45,7 +57,10 @@ export class DevupUIWebpackPlugin {
     include = [],
     singleCss = false,
     prefix,
+    importAliases: userImportAliases,
   }: Partial<DevupUIWebpackPluginOptions> = {}) {
+    this.importAliases = mergeImportAliases(userImportAliases)
+
     this.options = {
       package: libPackage,
       cssDir,
@@ -182,6 +197,7 @@ export class DevupUIWebpackPlugin {
               fileMapFile: this.fileMapFile,
               watch: this.options.watch,
               singleCss: this.options.singleCss,
+              importAliases: this.importAliases,
             },
           },
         ],

From 319fbe97ba80cc1c0073ce511b80c818ce79158b Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 20:03:43 +0900
Subject: [PATCH 27/31] Add alias

---
 .../changepack_log_Yq5qc_Svay4n89mb4Qjog.json |  1 +
 libs/extractor/src/lib.rs                     | 31 +++++++++++++++++++
 ...sts__import_alias_custom_named_export.snap | 29 +++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 .changepacks/changepack_log_Yq5qc_Svay4n89mb4Qjog.json
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap

diff --git a/.changepacks/changepack_log_Yq5qc_Svay4n89mb4Qjog.json b/.changepacks/changepack_log_Yq5qc_Svay4n89mb4Qjog.json
new file mode 100644
index 00000000..ef40465e
--- /dev/null
+++ b/.changepacks/changepack_log_Yq5qc_Svay4n89mb4Qjog.json
@@ -0,0 +1 @@
+{"changes":{"packages/bun-plugin/package.json":"Patch","packages/components/package.json":"Patch","packages/next-plugin/package.json":"Patch","packages/react/package.json":"Patch","bindings/devup-ui-wasm/package.json":"Patch","packages/plugin-utils/package.json":"Patch","packages/vite-plugin/package.json":"Patch","packages/webpack-plugin/package.json":"Patch","packages/rsbuild-plugin/package.json":"Patch"},"note":"Add importAlias option","date":"2026-01-14T11:03:40.943886300Z"}
\ No newline at end of file
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index efedf423..5bcf9c8d 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -12897,6 +12897,37 @@ const Button = myStyled.button({ bg: 'green', p: 2 })
         ));
     }
 
+    #[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() {
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
new file mode 100644
index 00000000..da0a4d6d
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
@@ -0,0 +1,29 @@
+---
+source: libs/extractor/src/lib.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",
+}

From 6161a71086cb8470228129494410cdc49a5ad9f2 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 20:16:52 +0900
Subject: [PATCH 28/31] Fix loader issue

---
 .../changepack_log_E5lA9E8yEv8BVqw14JnG6.json |   1 +
 .../src/__tests__/css-loader.test.ts          | 239 ++++++++++++------
 .../next-plugin/src/__tests__/plugin.test.ts  |  45 ++++
 packages/next-plugin/src/css-loader.ts        |  61 ++++-
 packages/next-plugin/src/plugin.ts            |   8 +
 5 files changed, 275 insertions(+), 79 deletions(-)
 create mode 100644 .changepacks/changepack_log_E5lA9E8yEv8BVqw14JnG6.json

diff --git a/.changepacks/changepack_log_E5lA9E8yEv8BVqw14JnG6.json b/.changepacks/changepack_log_E5lA9E8yEv8BVqw14JnG6.json
new file mode 100644
index 00000000..de5fd8f8
--- /dev/null
+++ b/.changepacks/changepack_log_E5lA9E8yEv8BVqw14JnG6.json
@@ -0,0 +1 @@
+{"changes":{"packages/next-plugin/package.json":"Patch"},"note":"Fix loader issue","date":"2026-01-14T11:16:47.199601600Z"}
\ No newline at end of file
diff --git a/packages/next-plugin/src/__tests__/css-loader.test.ts b/packages/next-plugin/src/__tests__/css-loader.test.ts
index a5b2fd6e..65eb174f 100644
--- a/packages/next-plugin/src/__tests__/css-loader.test.ts
+++ b/packages/next-plugin/src/__tests__/css-loader.test.ts
@@ -1,77 +1,162 @@
-import * as wasm from '@devup-ui/wasm'
-import {
-  afterAll,
-  beforeAll,
-  describe,
-  expect,
-  it,
-  mock,
-  spyOn,
-} from 'bun:test'
-
-import devupUICssLoader from '../css-loader'
-
-let getCssSpy: ReturnType<typeof spyOn>
-let registerThemeSpy: ReturnType<typeof spyOn>
-
-beforeAll(() => {
-  getCssSpy = spyOn(wasm, 'getCss').mockReturnValue('get css')
-  registerThemeSpy = spyOn(wasm, 'registerTheme').mockReturnValue(undefined)
-})
-
-afterAll(() => {
-  getCssSpy.mockRestore()
-  registerThemeSpy.mockRestore()
-})
-
-describe('devupUICssLoader', () => {
-  it('should return css on no watch', () => {
-    const callback = mock()
-    const addContextDependency = mock()
-    devupUICssLoader.bind({
-      callback,
-      addContextDependency,
-      resourcePath: 'devup-ui.css',
-      getOptions: () => ({ watch: false }),
-    } as any)(Buffer.from('data'), '')
-    expect(callback).toHaveBeenCalledWith(
-      null,
-      Buffer.from('data'),
-      '',
-      undefined,
-    )
-  })
-
-  it('should return _compiler hit css on watch', () => {
-    const callback = mock()
-    const addContextDependency = mock()
-    devupUICssLoader.bind({
-      callback,
-      addContextDependency,
-      getOptions: () => ({ watch: true }),
-      resourcePath: 'devup-ui.css',
-    } as any)(Buffer.from('data'), '')
-    expect(callback).toHaveBeenCalledWith(null, 'get css', '', undefined)
-    expect(getCssSpy).toHaveBeenCalledTimes(1)
-    getCssSpy.mockClear()
-    devupUICssLoader.bind({
-      callback,
-      addContextDependency,
-      getOptions: () => ({ watch: true }),
-      resourcePath: 'devup-ui.css',
-    } as any)(Buffer.from('data'), '')
-
-    expect(getCssSpy).toHaveBeenCalledTimes(1)
-
-    getCssSpy.mockClear()
-
-    devupUICssLoader.bind({
-      callback,
-      addContextDependency,
-      getOptions: () => ({ watch: true }),
-      resourcePath: 'devup-ui-10.css',
-    } as any)(Buffer.from(''), '')
-
-    expect(getCssSpy).toHaveBeenCalledTimes(1)
-  })
-})
+import * as fs from 'node:fs'
+
+import * as wasm from '@devup-ui/wasm'
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  mock,
+  spyOn,
+} from 'bun:test'
+
+import devupUICssLoader, { resetInit } from '../css-loader'
+
+let getCssSpy: ReturnType<typeof spyOn>
+let registerThemeSpy: ReturnType<typeof spyOn>
+let importSheetSpy: ReturnType<typeof spyOn>
+let importClassMapSpy: ReturnType<typeof spyOn>
+let importFileMapSpy: ReturnType<typeof spyOn>
+let existsSyncSpy: ReturnType<typeof spyOn>
+let readFileSyncSpy: ReturnType<typeof spyOn>
+
+const defaultOptions = {
+  watch: false,
+  sheetFile: 'sheet.json',
+  classMapFile: 'classMap.json',
+  fileMapFile: 'fileMap.json',
+  themeFile: 'devup.json',
+  theme: {},
+  defaultSheet: {},
+  defaultClassMap: {},
+  defaultFileMap: {},
+}
+
+beforeAll(() => {
+  getCssSpy = spyOn(wasm, 'getCss').mockReturnValue('get css')
+  registerThemeSpy = spyOn(wasm, 'registerTheme').mockReturnValue(undefined)
+  importSheetSpy = spyOn(wasm, 'importSheet').mockReturnValue(undefined)
+  importClassMapSpy = spyOn(wasm, 'importClassMap').mockReturnValue(undefined)
+  importFileMapSpy = spyOn(wasm, 'importFileMap').mockReturnValue(undefined)
+  existsSyncSpy = spyOn(fs, 'existsSync').mockReturnValue(false)
+  readFileSyncSpy = spyOn(fs, 'readFileSync').mockReturnValue('{}')
+})
+
+afterEach(() => {
+  resetInit()
+  getCssSpy.mockClear()
+  registerThemeSpy.mockClear()
+  importSheetSpy.mockClear()
+  importClassMapSpy.mockClear()
+  importFileMapSpy.mockClear()
+  existsSyncSpy.mockClear()
+  readFileSyncSpy.mockClear()
+})
+
+afterAll(() => {
+  getCssSpy.mockRestore()
+  registerThemeSpy.mockRestore()
+  importSheetSpy.mockRestore()
+  importClassMapSpy.mockRestore()
+  importFileMapSpy.mockRestore()
+  existsSyncSpy.mockRestore()
+  readFileSyncSpy.mockRestore()
+})
+
+describe('devupUICssLoader', () => {
+  it('should return css on no watch', () => {
+    const callback = mock()
+    const addContextDependency = mock()
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      resourcePath: 'devup-ui.css',
+      getOptions: () => ({ ...defaultOptions, watch: false }),
+    } as any)(Buffer.from('data'), '')
+    expect(callback).toHaveBeenCalledWith(
+      null,
+      Buffer.from('data'),
+      '',
+      undefined,
+    )
+    // Should initialize on first call
+    expect(importFileMapSpy).toHaveBeenCalledTimes(1)
+    expect(importClassMapSpy).toHaveBeenCalledTimes(1)
+    expect(importSheetSpy).toHaveBeenCalledTimes(1)
+    expect(registerThemeSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should return _compiler hit css on watch', () => {
+    const callback = mock()
+    const addContextDependency = mock()
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      getOptions: () => ({ ...defaultOptions, watch: true }),
+      resourcePath: 'devup-ui.css',
+    } as any)(Buffer.from('data'), '')
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(getCssSpy).toHaveBeenCalledTimes(1)
+    getCssSpy.mockClear()
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      getOptions: () => ({ ...defaultOptions, watch: true }),
+      resourcePath: 'devup-ui.css',
+    } as any)(Buffer.from('data'), '')
+
+    expect(getCssSpy).toHaveBeenCalledTimes(1)
+
+    getCssSpy.mockClear()
+
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      getOptions: () => ({ ...defaultOptions, watch: true }),
+      resourcePath: 'devup-ui-10.css',
+    } as any)(Buffer.from(''), '')
+
+    expect(getCssSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should read files from disk in watch mode when files exist', () => {
+    existsSyncSpy.mockReturnValue(true)
+    readFileSyncSpy.mockReturnValue(JSON.stringify({ theme: { color: 'red' } }))
+
+    const callback = mock()
+    const addContextDependency = mock()
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      getOptions: () => ({ ...defaultOptions, watch: true }),
+      resourcePath: 'devup-ui.css',
+    } as any)(Buffer.from('data'), '')
+
+    // Should read files from disk
+    expect(existsSyncSpy).toHaveBeenCalledTimes(4)
+    expect(readFileSyncSpy).toHaveBeenCalledTimes(4)
+    expect(importSheetSpy).toHaveBeenCalledTimes(1)
+    expect(importClassMapSpy).toHaveBeenCalledTimes(1)
+    expect(importFileMapSpy).toHaveBeenCalledTimes(1)
+    expect(registerThemeSpy).toHaveBeenCalledWith({ color: 'red' })
+  })
+
+  it('should handle missing theme in devup.json', () => {
+    existsSyncSpy.mockReturnValue(true)
+    readFileSyncSpy.mockReturnValue(JSON.stringify({}))
+
+    const callback = mock()
+    const addContextDependency = mock()
+    devupUICssLoader.bind({
+      callback,
+      addContextDependency,
+      getOptions: () => ({ ...defaultOptions, watch: true }),
+      resourcePath: 'devup-ui.css',
+    } as any)(Buffer.from('data'), '')
+
+    // Should call registerTheme with empty object when theme is missing
+    expect(registerThemeSpy).toHaveBeenCalledWith({})
+  })
+})
diff --git a/packages/next-plugin/src/__tests__/plugin.test.ts b/packages/next-plugin/src/__tests__/plugin.test.ts
index dd816c10..6498b23c 100644
--- a/packages/next-plugin/src/__tests__/plugin.test.ts
+++ b/packages/next-plugin/src/__tests__/plugin.test.ts
@@ -170,6 +170,21 @@ describe('DevupUINextPlugin', () => {
                 loader: '@devup-ui/next-plugin/css-loader',
                 options: {
                   watch: false,
+                  sheetFile: join('df', 'sheet.json'),
+                  classMapFile: join('df', 'classMap.json'),
+                  fileMapFile: join('df', 'fileMap.json'),
+                  themeFile: 'devup.json',
+                  theme: {},
+                  defaultClassMap: {},
+                  defaultFileMap: {},
+                  defaultSheet: {
+                    css: {},
+                    font_faces: {},
+                    global_css_files: [],
+                    imports: {},
+                    keyframes: {},
+                    properties: {},
+                  },
                 },
               },
             ],
@@ -237,6 +252,21 @@ describe('DevupUINextPlugin', () => {
                 loader: '@devup-ui/next-plugin/css-loader',
                 options: {
                   watch: false,
+                  sheetFile: join('df', 'sheet.json'),
+                  classMapFile: join('df', 'classMap.json'),
+                  fileMapFile: join('df', 'fileMap.json'),
+                  themeFile: 'devup.json',
+                  theme: {},
+                  defaultClassMap: {},
+                  defaultFileMap: {},
+                  defaultSheet: {
+                    css: {},
+                    font_faces: {},
+                    global_css_files: [],
+                    imports: {},
+                    keyframes: {},
+                    properties: {},
+                  },
                 },
               },
             ],
@@ -312,6 +342,21 @@ describe('DevupUINextPlugin', () => {
                 loader: '@devup-ui/next-plugin/css-loader',
                 options: {
                   watch: false,
+                  sheetFile: join('df', 'sheet.json'),
+                  classMapFile: join('df', 'classMap.json'),
+                  fileMapFile: join('df', 'fileMap.json'),
+                  themeFile: 'devup.json',
+                  theme: 'theme',
+                  defaultClassMap: {},
+                  defaultFileMap: {},
+                  defaultSheet: {
+                    css: {},
+                    font_faces: {},
+                    global_css_files: [],
+                    imports: {},
+                    keyframes: {},
+                    properties: {},
+                  },
                 },
               },
             ],
diff --git a/packages/next-plugin/src/css-loader.ts b/packages/next-plugin/src/css-loader.ts
index a0ff26d7..59ff5bdd 100644
--- a/packages/next-plugin/src/css-loader.ts
+++ b/packages/next-plugin/src/css-loader.ts
@@ -1,4 +1,12 @@
-import { getCss } from '@devup-ui/wasm'
+import { existsSync, readFileSync } from 'node:fs'
+
+import {
+  getCss,
+  importClassMap,
+  importFileMap,
+  importSheet,
+  registerTheme,
+} from '@devup-ui/wasm'
 import type { RawLoaderDefinitionFunction } from 'webpack'
 
 function getFileNumByFilename(filename: string) {
@@ -9,11 +17,55 @@ function getFileNumByFilename(filename: string) {
 export interface DevupUICssLoaderOptions {
   // turbo
   watch: boolean
+  sheetFile: string
+  classMapFile: string
+  fileMapFile: string
+  themeFile: string
+  theme?: object
+  defaultSheet: object
+  defaultClassMap: object
+  defaultFileMap: object
 }
 
+let init = false
+
 const devupUICssLoader: RawLoaderDefinitionFunction<DevupUICssLoaderOptions> =
   function (source, map, meta) {
-    const { watch } = this.getOptions()
+    const {
+      watch,
+      sheetFile,
+      classMapFile,
+      fileMapFile,
+      themeFile,
+      theme,
+      defaultClassMap,
+      defaultFileMap,
+      defaultSheet,
+    } = this.getOptions()
+
+    if (!init) {
+      init = true
+      if (watch) {
+        // restart loader issue
+        // loader should read files when they exist in watch mode
+        if (existsSync(sheetFile))
+          importSheet(JSON.parse(readFileSync(sheetFile, 'utf-8')))
+        if (existsSync(classMapFile))
+          importClassMap(JSON.parse(readFileSync(classMapFile, 'utf-8')))
+        if (existsSync(fileMapFile))
+          importFileMap(JSON.parse(readFileSync(fileMapFile, 'utf-8')))
+        if (existsSync(themeFile))
+          registerTheme(
+            JSON.parse(readFileSync(themeFile, 'utf-8'))?.['theme'] ?? {},
+          )
+      } else {
+        importFileMap(defaultFileMap)
+        importClassMap(defaultClassMap)
+        importSheet(defaultSheet)
+        registerTheme(theme)
+      }
+    }
+
     this.callback(
       null,
       !watch ? source : getCss(getFileNumByFilename(this.resourcePath), true),
@@ -22,3 +74,8 @@ const devupUICssLoader: RawLoaderDefinitionFunction<DevupUICssLoaderOptions> =
     )
   }
 export default devupUICssLoader
+
+/** @internal Reset init state for testing purposes only */
+export const resetInit = () => {
+  init = false
+}
diff --git a/packages/next-plugin/src/plugin.ts b/packages/next-plugin/src/plugin.ts
index bd94ae70..bc4d7a6e 100644
--- a/packages/next-plugin/src/plugin.ts
+++ b/packages/next-plugin/src/plugin.ts
@@ -135,6 +135,14 @@ export function DevupUI(
           loader: '@devup-ui/next-plugin/css-loader',
           options: {
             watch: process.env.NODE_ENV === 'development',
+            sheetFile,
+            classMapFile,
+            fileMapFile,
+            themeFile: devupFile,
+            defaultSheet,
+            defaultClassMap,
+            defaultFileMap,
+            theme,
           },
         },
       ],

From 974ffb2868169161dc4a8b37a335b88c61d2be00 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 20:46:54 +0900
Subject: [PATCH 29/31] Update script

---
 benchmark.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/benchmark.js b/benchmark.js
index 75795bc9..cbaebe8c 100644
--- a/benchmark.js
+++ b/benchmark.js
@@ -75,6 +75,16 @@ function clearBuildFile() {
       recursive: true,
       force: true,
     })
+  if (existsSync('./benchmark/next-vanilla-extract-devup-ui/.next'))
+    rmSync('./benchmark/next-vanilla-extract-devup-ui/.next', {
+      recursive: true,
+      force: true,
+    })
+  if (existsSync('./benchmark/next-vanilla-extract-devup-ui/df'))
+    rmSync('./benchmark/next-vanilla-extract-devup-ui/df', {
+      recursive: true,
+      force: true,
+    })
 }
 
 function checkDirSize(path) {
@@ -124,5 +134,6 @@ result.push(benchmark('devup-ui'))
 result.push(benchmark('devup-ui-single'))
 result.push(benchmark('tailwind-turbo'))
 result.push(benchmark('devup-ui-single-turbo'))
+result.push(benchmark('vanilla-extract-devup-ui'))
 
 console.info(result.join('\n'))

From c4d75bd3beb08513fa8085ec4410cf3e1d036b11 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 22:17:12 +0900
Subject: [PATCH 30/31] Support ve

---
 .gitignore                                    |   1 +
 libs/extractor/src/import_alias_visit.rs      | 406 ++++++++++++++++++
 libs/extractor/src/lib.rs                     |  78 +++-
 ...ct_css_ts_with_vanilla_extract_import.snap |  59 +++
 libs/extractor/src/vanilla_extract.rs         | 122 +++++-
 libs/extractor/src/visit.rs                   | 179 +++-----
 6 files changed, 691 insertions(+), 154 deletions(-)
 create mode 100644 libs/extractor/src/import_alias_visit.rs
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap

diff --git a/.gitignore b/.gitignore
index 9a0e6679..088c28e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ tarpaulin-report.json
 *storybook.log
 storybook-static
 .claude
+.sisyphus
diff --git a/libs/extractor/src/import_alias_visit.rs b/libs/extractor/src/import_alias_visit.rs
new file mode 100644
index 00000000..783c15f9
--- /dev/null
+++ b/libs/extractor/src/import_alias_visit.rs
@@ -0,0 +1,406 @@
+//! Import alias transformation
+//!
+//! Transforms imports from aliased packages to the target package.
+//!
+//! Examples:
+//! - `import styled from '@emotion/styled'` → `import { styled } from '@devup-ui/react'`
+//! - `import styledA from '@emotion/styled'` → `import { styled as styledA } from '@devup-ui/react'`
+//! - `import { style } from '@vanilla-extract/css'` → `import { style } from '@devup-ui/react'`
+
+use crate::ImportAlias;
+use oxc_allocator::Allocator;
+use oxc_ast::ast::ImportDeclarationSpecifier;
+use oxc_parser::Parser;
+use oxc_span::SourceType;
+use std::collections::HashMap;
+
+/// Transform source code by rewriting aliased imports to the target package
+///
+/// # Arguments
+/// * `code` - The source code to transform
+/// * `filename` - The filename (used for source type detection)
+/// * `package` - The target package (e.g., "@devup-ui/react")
+/// * `import_aliases` - Map of source package → alias configuration
+///
+/// # Returns
+/// The transformed source code, or the original code if no transformations were needed
+pub fn transform_import_aliases(
+    code: &str,
+    filename: &str,
+    package: &str,
+    import_aliases: &HashMap<String, ImportAlias>,
+) -> String {
+    // Quick check: if no aliases match, return original code
+    if import_aliases.is_empty() || !import_aliases.keys().any(|alias| code.contains(alias)) {
+        return code.to_string();
+    }
+
+    let allocator = Allocator::default();
+    let source_type = SourceType::from_path(filename).unwrap_or_default();
+
+    // Parse the code
+    let parser_ret = Parser::new(&allocator, code, source_type).parse();
+    let program = parser_ret.program;
+
+    // Collect import transformations
+    let mut transformations: Vec<(usize, usize, String)> = Vec::new();
+
+    for stmt in &program.body {
+        if let oxc_ast::ast::Statement::ImportDeclaration(import_decl) = stmt {
+            let source_value = import_decl.source.value.as_str();
+
+            if let Some(alias) = import_aliases.get(source_value) {
+                let span = import_decl.span;
+                let new_import = generate_transformed_import(import_decl, alias, package);
+                transformations.push((span.start as usize, span.end as usize, new_import));
+            }
+        }
+    }
+
+    // Apply transformations in reverse order to preserve positions
+    if transformations.is_empty() {
+        return code.to_string();
+    }
+
+    let mut result = code.to_string();
+    for (start, end, replacement) in transformations.into_iter().rev() {
+        result.replace_range(start..end, &replacement);
+    }
+
+    result
+}
+
+/// Generate the transformed import statement
+fn generate_transformed_import(
+    import_decl: &oxc_ast::ast::ImportDeclaration,
+    alias: &ImportAlias,
+    package: &str,
+) -> String {
+    let specifiers = match &import_decl.specifiers {
+        Some(specs) => specs,
+        None => return format!("import '{}';", package),
+    };
+
+    match alias {
+        ImportAlias::DefaultToNamed(named_export) => {
+            // Transform: `import foo from 'pkg'` → `import { named as foo } from 'target'`
+            let mut import_parts = Vec::new();
+
+            for specifier in specifiers {
+                match specifier {
+                    ImportDeclarationSpecifier::ImportDefaultSpecifier(default_spec) => {
+                        let local_name = default_spec.local.name.as_str();
+                        if local_name == named_export {
+                            // Same name: `import { styled } from 'pkg'`
+                            import_parts.push(named_export.clone());
+                        } else {
+                            // Different name: `import { styled as foo } from 'pkg'`
+                            import_parts.push(format!("{} as {}", named_export, local_name));
+                        }
+                    }
+                    ImportDeclarationSpecifier::ImportSpecifier(spec) => {
+                        // Keep named imports
+                        let imported = spec.imported.to_string();
+                        let local = spec.local.name.as_str();
+                        if imported == local {
+                            import_parts.push(imported);
+                        } else {
+                            import_parts.push(format!("{} as {}", imported, local));
+                        }
+                    }
+                    ImportDeclarationSpecifier::ImportNamespaceSpecifier(ns_spec) => {
+                        // Namespace imports are kept but shouldn't really happen for CSS-in-JS
+                        return format!(
+                            "import * as {} from '{}';",
+                            ns_spec.local.name.as_str(),
+                            package
+                        );
+                    }
+                }
+            }
+
+            format!(
+                "import {{ {} }} from '{}';",
+                import_parts.join(", "),
+                package
+            )
+        }
+        ImportAlias::NamedToNamed => {
+            // Just change the source, keep specifiers as-is
+            // `import { style } from 'pkg'` → `import { style } from 'target'`
+            let mut import_parts = Vec::new();
+
+            for specifier in specifiers {
+                match specifier {
+                    ImportDeclarationSpecifier::ImportDefaultSpecifier(default_spec) => {
+                        // Default import in NamedToNamed mode - just keep it
+                        // (shouldn't happen for @vanilla-extract/css)
+                        import_parts
+                            .push(format!("default as {}", default_spec.local.name.as_str()));
+                    }
+                    ImportDeclarationSpecifier::ImportSpecifier(spec) => {
+                        let imported = spec.imported.to_string();
+                        let local = spec.local.name.as_str();
+                        if imported == local {
+                            import_parts.push(imported);
+                        } else {
+                            import_parts.push(format!("{} as {}", imported, local));
+                        }
+                    }
+                    ImportDeclarationSpecifier::ImportNamespaceSpecifier(ns_spec) => {
+                        return format!(
+                            "import * as {} from '{}';",
+                            ns_spec.local.name.as_str(),
+                            package
+                        );
+                    }
+                }
+            }
+
+            format!(
+                "import {{ {} }} from '{}';",
+                import_parts.join(", "),
+                package
+            )
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_default_to_named_same_name() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@emotion/styled".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
+
+        let code = r#"import styled from '@emotion/styled'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("import { styled } from '@devup-ui/react'"),
+            "Expected named import, got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_default_to_named_different_name() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@emotion/styled".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
+
+        let code = r#"import styledA from '@emotion/styled'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("styled as styledA"),
+            "Expected 'styled as styledA', got: {}",
+            result
+        );
+        assert!(
+            result.contains("@devup-ui/react"),
+            "Expected '@devup-ui/react', got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_named_to_named() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
+        );
+
+        let code = r#"import { style, globalStyle } from '@vanilla-extract/css'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("style"),
+            "Expected 'style', got: {}",
+            result
+        );
+        assert!(
+            result.contains("globalStyle"),
+            "Expected 'globalStyle', got: {}",
+            result
+        );
+        assert!(
+            result.contains("@devup-ui/react"),
+            "Expected '@devup-ui/react', got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_no_matching_alias() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@emotion/styled".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
+
+        let code = r#"import { useState } from 'react'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        // Should be unchanged
+        assert!(
+            result.contains("react"),
+            "Expected 'react' import unchanged, got: {}",
+            result
+        );
+        assert!(
+            !result.contains("@devup-ui/react"),
+            "Should not contain '@devup-ui/react', got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_empty_aliases() {
+        let aliases = HashMap::new();
+        let code = r#"import styled from '@emotion/styled'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        // Should return original code
+        assert_eq!(result, code);
+    }
+
+    #[test]
+    fn test_styled_components() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "styled-components".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
+
+        let code = r#"import styled from 'styled-components'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("import { styled } from '@devup-ui/react'"),
+            "Expected named import, got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_css_ts_file_vanilla_extract() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
+        );
+
+        let code = r#"import { style } from '@vanilla-extract/css'
+export const container = style({ background: 'red' })"#;
+        let result = transform_import_aliases(code, "styles.css.ts", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("@devup-ui/react"),
+            "Expected '@devup-ui/react', got: {}",
+            result
+        );
+        assert!(
+            result.contains("style"),
+            "Expected 'style' import, got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_multiple_imports_same_file() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@emotion/styled".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
+        );
+
+        let code = r#"import styled from '@emotion/styled'
+import { style } from '@vanilla-extract/css'
+import { useState } from 'react'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        // Both aliased imports should be transformed
+        assert!(
+            result.matches("@devup-ui/react").count() == 2,
+            "Expected 2 @devup-ui/react imports, got: {}",
+            result
+        );
+        // React import should be unchanged
+        assert!(
+            result.contains("react"),
+            "Expected 'react' import, got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_preserves_code_after_import() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
+        );
+
+        let code = r#"import { style } from '@vanilla-extract/css'
+
+export const button = style({
+    background: 'blue',
+    padding: '8px',
+});"#;
+        let result = transform_import_aliases(code, "test.css.ts", "@devup-ui/react", &aliases);
+
+        // Import should be transformed
+        assert!(
+            result.contains("@devup-ui/react"),
+            "Expected '@devup-ui/react', got: {}",
+            result
+        );
+        // Rest of the code should be preserved
+        assert!(
+            result.contains("export const button = style"),
+            "Expected style call preserved, got: {}",
+            result
+        );
+        assert!(
+            result.contains("background: 'blue'"),
+            "Expected styles preserved, got: {}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_named_import_with_alias() {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
+        );
+
+        let code = r#"import { style as myStyle } from '@vanilla-extract/css'"#;
+        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+
+        assert!(
+            result.contains("style as myStyle"),
+            "Expected 'style as myStyle', got: {}",
+            result
+        );
+        assert!(
+            result.contains("@devup-ui/react"),
+            "Expected '@devup-ui/react', got: {}",
+            result
+        );
+    }
+}
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 5bcf9c8d..3453c897 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -5,6 +5,7 @@ pub mod extract_style;
 mod extractor;
 mod gen_class_name;
 mod gen_style;
+mod import_alias_visit;
 mod prop_modify_utils;
 mod util_type;
 mod utils;
@@ -126,15 +127,21 @@ pub fn extract(
     code: &str,
     option: ExtractOption,
 ) -> Result<ExtractOutput, Box<dyn Error>> {
-    // Check if code contains the target package or any aliased packages
-    let has_relevant_import = code.contains(option.package.as_str())
-        || option
-            .import_aliases
-            .keys()
-            .any(|alias| code.contains(alias.as_str()));
+    // Step 1: Transform import aliases
+    // e.g., `import styled from '@emotion/styled'` → `import { styled } from '@devup-ui/react'`
+    // e.g., `import { style } from '@vanilla-extract/css'` → `import { style } from '@devup-ui/react'`
+    let transformed_code = import_alias_visit::transform_import_aliases(
+        code,
+        filename,
+        &option.package,
+        &option.import_aliases,
+    );
+
+    // Step 2: Check if code contains the target package (after transformation)
+    let has_relevant_import = transformed_code.contains(option.package.as_str());
 
     if !has_relevant_import {
-        // skip if not using package or any aliases
+        // skip if not using package
         return Ok(ExtractOutput {
             styles: HashSet::new(),
             code: code.to_string(),
@@ -143,10 +150,12 @@ pub fn extract(
         });
     }
 
-    // Handle vanilla-extract style files (.css.ts, .css.js)
-    let (processed_code, is_vanilla_extract) = if vanilla_extract::is_vanilla_extract_file(filename)
-    {
-        match vanilla_extract::execute_vanilla_extract(code, &option.package, filename) {
+    // Step 3: Handle vanilla-extract style files (.css.ts, .css.js)
+    let is_ve_file = vanilla_extract::is_vanilla_extract_file(filename);
+    let (processed_code, is_vanilla_extract) = if is_ve_file {
+        // Use transformed code (with imports already pointing to @devup-ui/react)
+        match vanilla_extract::execute_vanilla_extract(&transformed_code, &option.package, filename)
+        {
             Ok(collected) => {
                 // Check if any styles are referenced in selectors
                 let referenced = vanilla_extract::find_selector_references(&collected);
@@ -182,11 +191,11 @@ pub fn extract(
             }
             Err(_) => {
                 // Fall back to treating as regular file if execution fails
-                (code.to_string(), false)
+                (transformed_code.clone(), false)
             }
         }
     } else {
-        (code.to_string(), false)
+        (transformed_code.clone(), false)
     };
 
     // For vanilla-extract files, if no styles were collected, return early
@@ -202,7 +211,7 @@ pub fn extract(
     let code_to_parse = if is_vanilla_extract {
         &processed_code
     } else {
-        code
+        &transformed_code
     };
 
     let source_type = SourceType::from_path(filename)?;
@@ -239,7 +248,6 @@ pub fn extract(
         } else {
             None
         },
-        option.import_aliases.clone(),
     );
     visitor.visit_program(&mut program);
     let result = Codegen::new()
@@ -296,7 +304,6 @@ fn extract_class_map_from_code(
             } else {
                 None
             },
-            option.import_aliases.clone(),
         );
         visitor.visit_program(&mut program);
 
@@ -10581,6 +10588,45 @@ export const link = style({ color: "blue", textDecoration: "underline" })
         ));
     }
 
+    /// 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() {
diff --git a/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
new file mode 100644
index 00000000..ad214187
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__vanilla_extract_css_ts_with_vanilla_extract_import.snap
@@ -0,0 +1,59 @@
+---
+source: libs/extractor/src/lib.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: HashMap::new()\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/src/vanilla_extract.rs b/libs/extractor/src/vanilla_extract.rs
index 33fcccb2..06370f39 100644
--- a/libs/extractor/src/vanilla_extract.rs
+++ b/libs/extractor/src/vanilla_extract.rs
@@ -785,34 +785,36 @@ fn preprocess_typescript(code: &str, package: &str) -> String {
 
     // Replace import from package with our mock object destructuring
     // e.g., import { style } from '@devup-ui/react' -> const { style } = __vanilla_extract__;
+    // Note: Import aliases (like @vanilla-extract/css) are already transformed by import_alias_visit
     let import_patterns = [
         format!("from \"{}\"", package),
         format!("from '{}'", package),
     ];
 
-    for pattern in &import_patterns {
-        if js_code.contains(pattern) {
-            // Find and replace the import line
-            let lines: Vec<&str> = js_code.lines().collect();
-            let mut new_lines = Vec::new();
-
-            for line in lines {
-                if line.contains(pattern) {
-                    // Extract imported names from: import { a, b, c } from 'package'
-                    if let Some(start) = line.find('{')
-                        && let Some(end) = line.find('}')
-                    {
-                        let imports = &line[start + 1..end];
-                        new_lines.push(format!("const {{{}}} = __vanilla_extract__;", imports));
-                        continue;
-                    }
+    // Process all import patterns (multiple imports may exist)
+    let lines: Vec<&str> = js_code.lines().collect();
+    let mut new_lines = Vec::new();
+
+    for line in lines {
+        let mut matched = false;
+        for pattern in &import_patterns {
+            if line.contains(pattern) {
+                // Extract imported names from: import { a, b, c } from 'package'
+                if let Some(start) = line.find('{')
+                    && let Some(end) = line.find('}')
+                {
+                    let imports = &line[start + 1..end];
+                    new_lines.push(format!("const {{{}}} = __vanilla_extract__;", imports));
+                    matched = true;
+                    break;
                 }
-                new_lines.push(line.to_string());
             }
-            js_code = new_lines.join("\n");
-            break;
+        }
+        if !matched {
+            new_lines.push(line.to_string());
         }
     }
+    js_code = new_lines.join("\n");
 
     // Remove 'export' keyword (boa doesn't support ES modules)
     js_code = js_code.replace("export const ", "const ");
@@ -1959,6 +1961,84 @@ export const container = style({ background: "red", padding: 16 })"#;
         assert!(!result.styles.is_empty());
     }
 
+    #[test]
+    fn test_execute_vanilla_extract_style_multiple() {
+        // Test with multiple style exports
+        let code = r#"import { style } from '@devup-ui/react'
+export const container = style({ background: "red", padding: 16 })
+export const button = style({ color: "blue" })"#;
+        let result = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
+        assert!(
+            result.styles.len() >= 2,
+            "Expected at least 2 styles but got: {:?}",
+            result
+        );
+    }
+
+    #[test]
+    fn test_collected_styles_to_code_multiple() {
+        // Test the full flow: execute → collected_styles_to_code with multiple styles
+        let code = r#"import { style } from '@devup-ui/react'
+export const container = style({ background: "red", padding: 16 })"#;
+        let collected = execute_vanilla_extract(code, "@devup-ui/react", "test.css.ts").unwrap();
+        let generated = super::collected_styles_to_code(&collected, "@devup-ui/react");
+        assert!(
+            !generated.is_empty(),
+            "Expected non-empty generated code. Collected: {:?}",
+            collected
+        );
+        assert!(
+            generated.contains("css("),
+            "Expected css() call in generated code: {}",
+            generated
+        );
+    }
+
+    #[test]
+    fn test_full_flow_multiline() {
+        // Test exactly what lib.rs extract function does (with already-transformed imports)
+        let code = r#"import { style } from '@devup-ui/react'
+export const hello = style({
+  cursor: 'pointer',
+  fontSize: 32,
+  paddingTop: '28px',
+  paddingBottom: '28px',
+})
+export const text = style({
+  color: 'var(--text)',
+})
+"#;
+        let package = "@devup-ui/react";
+        let filename = "styles.css.ts";
+
+        // This is exactly what lib.rs does
+        assert!(
+            is_vanilla_extract_file(filename),
+            "Should be vanilla-extract file"
+        );
+
+        let result = execute_vanilla_extract(code, package, filename);
+        match result {
+            Ok(collected) => {
+                assert!(
+                    !collected.styles.is_empty(),
+                    "Styles should not be empty. Collected: {:?}",
+                    collected
+                );
+                let generated = super::collected_styles_to_code(&collected, package);
+                assert!(
+                    !generated.is_empty(),
+                    "Generated code should not be empty. Generated: {}",
+                    generated
+                );
+                println!("Generated code:\n{}", generated);
+            }
+            Err(e) => {
+                panic!("execute_vanilla_extract failed: {}", e);
+            }
+        }
+    }
+
     #[test]
     fn test_execute_vanilla_extract_global_style() {
         let code = r#"import { globalStyle } from '@devup-ui/react'
@@ -2653,6 +2733,10 @@ export const box = style({ padding: 8 })"#;
         assert!(!result.contains("export const"));
     }
 
+    // Note: @vanilla-extract/css import transformation is now handled by import_alias_visit.rs
+    // before the code reaches vanilla_extract.rs, so preprocess_typescript only needs to
+    // handle the target package imports
+
     #[test]
     fn test_find_selector_references_no_refs() {
         // Test find_selector_references with no selector references
diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs
index 977e8320..51f98253 100644
--- a/libs/extractor/src/visit.rs
+++ b/libs/extractor/src/visit.rs
@@ -1,4 +1,3 @@
-use crate::ImportAlias;
 use crate::as_visit::AsVisitor;
 use crate::component::ExportVariableKind;
 use crate::css_utils::{css_to_style_literal, keyframes_to_keyframes_style, optimize_css_block};
@@ -55,8 +54,6 @@ pub struct DevupVisitor<'a> {
     pub css_files: Vec<String>,
     pub styles: HashSet<ExtractStyleValue>,
     styled_import: Option<String>,
-    /// Import aliases for redirecting imports from other CSS-in-JS libraries
-    import_aliases: HashMap<String, ImportAlias>,
 }
 
 impl<'a> DevupVisitor<'a> {
@@ -66,7 +63,6 @@ impl<'a> DevupVisitor<'a> {
         package: &str,
         css_files: Vec<String>,
         split_filename: Option<String>,
-        import_aliases: HashMap<String, ImportAlias>,
     ) -> Self {
         Self {
             ast: AstBuilder::new(allocator),
@@ -81,7 +77,6 @@ impl<'a> DevupVisitor<'a> {
             util_imports: HashMap::new(),
             split_filename,
             styled_import: None,
-            import_aliases,
         }
     }
 }
@@ -128,13 +123,10 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
 
         for i in (0..it.body.len()).rev() {
             if let Statement::ImportDeclaration(decl) = &it.body[i]
+                && decl.source.value == self.package
                 && decl.specifiers.iter().all(|s| s.is_empty())
             {
-                // Remove empty imports from main package and aliased packages
-                let source = decl.source.value.as_str();
-                if source == self.package || self.import_aliases.contains_key(source) {
-                    it.body.remove(i);
-                }
+                it.body.remove(i);
             }
         }
     }
@@ -476,122 +468,71 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
         walk_variable_declarator(self, it);
     }
     fn visit_import_declaration(&mut self, it: &mut ImportDeclaration<'a>) {
-        let source_value = it.source.value.as_str();
-
-        // Check for import aliases (e.g., @emotion/styled, styled-components, @vanilla-extract/css)
-        // Instead of modifying AST (which has lifetime issues), we just track the imports internally
-        if let Some(alias) = self.import_aliases.get(source_value).cloned() {
-            if let Some(specifiers) = &mut it.specifiers {
-                match alias {
-                    ImportAlias::DefaultToNamed(named_export) => {
-                        // Transform default import to named import
-                        // e.g., `import styled from '@emotion/styled'` → register as `styled` named import
-                        for i in (0..specifiers.len()).rev() {
-                            if let ImportDeclarationSpecifier::ImportDefaultSpecifier(
-                                default_spec,
-                            ) = &specifiers[i]
-                            {
-                                let local_name = default_spec.local.to_string();
-                                // Register as styled import (for styled-components/emotion compatibility)
-                                if named_export == "styled" {
-                                    self.styled_import = Some(local_name);
-                                }
-                                specifiers.remove(i);
-                            }
-                        }
-                    }
-                    ImportAlias::NamedToNamed => {
-                        // Named imports stay as named imports (1:1 mapping)
-                        // e.g., `import { style } from '@vanilla-extract/css'` → treat as `import { style } from '@devup-ui/react'`
-                        // Process like regular package imports
-                        for i in (0..specifiers.len()).rev() {
-                            if let ImportSpecifier(import) = &specifiers[i] {
-                                if let Ok(kind) =
-                                    ExportVariableKind::try_from(import.imported.to_string())
-                                {
-                                    self.imports.insert(import.local.to_string(), kind);
-                                    specifiers.remove(i);
-                                } else if let Ok(kind) =
-                                    UtilType::try_from(import.imported.to_string())
-                                {
-                                    self.util_imports
-                                        .insert(import.local.to_string(), Rc::new(kind));
-                                    specifiers.remove(i);
-                                } else if import.imported.to_string() == "styled" {
-                                    self.styled_import = Some(import.local.to_string());
-                                    specifiers.remove(i);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        } else if source_value != self.package && source_value == "react/jsx-runtime" {
-            if let Some(specifiers) = &it.specifiers {
-                for specifier in specifiers {
-                    if let ImportSpecifier(import) = specifier {
-                        self.jsx_imports
-                            .insert(import.local.to_string(), import.imported.to_string());
-                    }
+        if it.source.value != self.package
+            && it.source.value == "react/jsx-runtime"
+            && let Some(specifiers) = &it.specifiers
+        {
+            for specifier in specifiers {
+                if let ImportSpecifier(import) = specifier {
+                    self.jsx_imports
+                        .insert(import.local.to_string(), import.imported.to_string());
                 }
             }
-        } else if source_value == self.package {
-            if let Some(specifiers) = &mut it.specifiers {
-                for i in (0..specifiers.len()).rev() {
-                    match &specifiers[i] {
-                        ImportSpecifier(import) => {
-                            if let Ok(kind) =
-                                ExportVariableKind::try_from(import.imported.to_string())
-                            {
-                                self.imports.insert(import.local.to_string(), kind);
-                                specifiers.remove(i);
-                            } else if let Ok(kind) = UtilType::try_from(import.imported.to_string())
-                            {
-                                self.util_imports
-                                    .insert(import.local.to_string(), Rc::new(kind));
-                                specifiers.remove(i);
-                            } else if import.imported.to_string() == "styled" {
-                                self.styled_import = Some(import.local.to_string());
-                                specifiers.remove(i);
-                            }
+        } else if it.source.value == self.package
+            && let Some(specifiers) = &mut it.specifiers
+        {
+            for i in (0..specifiers.len()).rev() {
+                match &specifiers[i] {
+                    ImportSpecifier(import) => {
+                        if let Ok(kind) = ExportVariableKind::try_from(import.imported.to_string())
+                        {
+                            self.imports.insert(import.local.to_string(), kind);
+                            specifiers.remove(i);
+                        } else if let Ok(kind) = UtilType::try_from(import.imported.to_string()) {
+                            self.util_imports
+                                .insert(import.local.to_string(), Rc::new(kind));
+                            specifiers.remove(i);
+                        } else if import.imported.to_string() == "styled" {
+                            self.styled_import = Some(import.local.to_string());
+                            specifiers.remove(i);
                         }
-                        ImportDeclarationSpecifier::ImportDefaultSpecifier(
-                            import_default_specifier,
-                        ) => {
-                            for kind in ExportVariableKind::iter() {
-                                self.imports.insert(
-                                    format!("{}.{}", import_default_specifier.local, kind),
-                                    kind,
-                                );
-                            }
-                            self.util_imports.insert(
-                                format!("{}.{}", import_default_specifier.local, "css"),
-                                Rc::new(UtilType::Css),
-                            );
-
-                            self.util_imports.insert(
-                                format!("{}.{}", import_default_specifier.local, "globalCss"),
-                                Rc::new(UtilType::GlobalCss),
+                    }
+                    ImportDeclarationSpecifier::ImportDefaultSpecifier(
+                        import_default_specifier,
+                    ) => {
+                        for kind in ExportVariableKind::iter() {
+                            self.imports.insert(
+                                format!("{}.{}", import_default_specifier.local, kind),
+                                kind,
                             );
                         }
-                        ImportDeclarationSpecifier::ImportNamespaceSpecifier(
-                            import_namespace_specifier,
-                        ) => {
-                            for kind in ExportVariableKind::iter() {
-                                self.imports.insert(
-                                    format!("{}.{}", import_namespace_specifier.local, kind),
-                                    kind,
-                                );
-                            }
-                            self.util_imports.insert(
-                                format!("{}.{}", import_namespace_specifier.local, "css"),
-                                Rc::new(UtilType::Css),
-                            );
-                            self.util_imports.insert(
-                                format!("{}.{}", import_namespace_specifier.local, "globalCss"),
-                                Rc::new(UtilType::GlobalCss),
+                        self.util_imports.insert(
+                            format!("{}.{}", import_default_specifier.local, "css"),
+                            Rc::new(UtilType::Css),
+                        );
+
+                        self.util_imports.insert(
+                            format!("{}.{}", import_default_specifier.local, "globalCss"),
+                            Rc::new(UtilType::GlobalCss),
+                        );
+                    }
+                    ImportDeclarationSpecifier::ImportNamespaceSpecifier(
+                        import_namespace_specifier,
+                    ) => {
+                        for kind in ExportVariableKind::iter() {
+                            self.imports.insert(
+                                format!("{}.{}", import_namespace_specifier.local, kind),
+                                kind,
                             );
                         }
+                        self.util_imports.insert(
+                            format!("{}.{}", import_namespace_specifier.local, "css"),
+                            Rc::new(UtilType::Css),
+                        );
+                        self.util_imports.insert(
+                            format!("{}.{}", import_namespace_specifier.local, "globalCss"),
+                            Rc::new(UtilType::GlobalCss),
+                        );
                     }
                 }
             }

From dc112950c9dfaf84ebcf9675183c2c8d73e2d376 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Wed, 14 Jan 2026 22:42:27 +0900
Subject: [PATCH 31/31] Add snapshot

---
 libs/extractor/src/import_alias_visit.rs      | 336 +++++++++---------
 libs/extractor/src/lib.rs                     |  28 +-
 ...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 +
 19 files changed, 275 insertions(+), 183 deletions(-)
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_to_named.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap
 create mode 100644 libs/extractor/src/snapshots/extractor__import_alias_visit__tests__styled_components.snap

diff --git a/libs/extractor/src/import_alias_visit.rs b/libs/extractor/src/import_alias_visit.rs
index 783c15f9..295497d6 100644
--- a/libs/extractor/src/import_alias_visit.rs
+++ b/libs/extractor/src/import_alias_visit.rs
@@ -169,238 +169,224 @@ fn generate_transformed_import(
 #[cfg(test)]
 mod tests {
     use super::*;
+    use insta::assert_snapshot;
 
-    #[test]
-    fn test_default_to_named_same_name() {
+    fn emotion_alias() -> HashMap<String, ImportAlias> {
         let mut aliases = HashMap::new();
         aliases.insert(
             "@emotion/styled".to_string(),
             ImportAlias::DefaultToNamed("styled".to_string()),
         );
+        aliases
+    }
 
-        let code = r#"import styled from '@emotion/styled'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        assert!(
-            result.contains("import { styled } from '@devup-ui/react'"),
-            "Expected named import, got: {}",
-            result
+    fn vanilla_extract_alias() -> HashMap<String, ImportAlias> {
+        let mut aliases = HashMap::new();
+        aliases.insert(
+            "@vanilla-extract/css".to_string(),
+            ImportAlias::NamedToNamed,
         );
+        aliases
     }
 
-    #[test]
-    fn test_default_to_named_different_name() {
+    fn styled_components_alias() -> HashMap<String, ImportAlias> {
         let mut aliases = HashMap::new();
         aliases.insert(
-            "@emotion/styled".to_string(),
+            "styled-components".to_string(),
             ImportAlias::DefaultToNamed("styled".to_string()),
         );
-
-        let code = r#"import styledA from '@emotion/styled'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        assert!(
-            result.contains("styled as styledA"),
-            "Expected 'styled as styledA', got: {}",
-            result
-        );
-        assert!(
-            result.contains("@devup-ui/react"),
-            "Expected '@devup-ui/react', got: {}",
-            result
-        );
+        aliases
     }
 
-    #[test]
-    fn test_named_to_named() {
+    fn combined_aliases() -> HashMap<String, ImportAlias> {
         let mut aliases = HashMap::new();
+        aliases.insert(
+            "@emotion/styled".to_string(),
+            ImportAlias::DefaultToNamed("styled".to_string()),
+        );
         aliases.insert(
             "@vanilla-extract/css".to_string(),
             ImportAlias::NamedToNamed,
         );
+        aliases
+    }
 
-        let code = r#"import { style, globalStyle } from '@vanilla-extract/css'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        assert!(
-            result.contains("style"),
-            "Expected 'style', got: {}",
-            result
-        );
-        assert!(
-            result.contains("globalStyle"),
-            "Expected 'globalStyle', got: {}",
-            result
-        );
-        assert!(
-            result.contains("@devup-ui/react"),
-            "Expected '@devup-ui/react', got: {}",
-            result
-        );
+    #[test]
+    fn test_default_to_named_same_name() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
     }
 
     #[test]
-    fn test_no_matching_alias() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
+    fn test_default_to_named_different_name() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import styledA from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
 
-        let code = r#"import { useState } from 'react'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+    #[test]
+    fn test_named_to_named() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import { style, globalStyle } from '@vanilla-extract/css'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
+    }
 
-        // Should be unchanged
-        assert!(
-            result.contains("react"),
-            "Expected 'react' import unchanged, got: {}",
-            result
-        );
-        assert!(
-            !result.contains("@devup-ui/react"),
-            "Should not contain '@devup-ui/react', got: {}",
-            result
-        );
+    #[test]
+    fn test_no_matching_alias() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import { useState } from 'react'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
     }
 
     #[test]
     fn test_empty_aliases() {
-        let aliases = HashMap::new();
-        let code = r#"import styled from '@emotion/styled'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        // Should return original code
-        assert_eq!(result, code);
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &HashMap::new()
+        ));
     }
 
     #[test]
     fn test_styled_components() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "styled-components".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-
-        let code = r#"import styled from 'styled-components'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        assert!(
-            result.contains("import { styled } from '@devup-ui/react'"),
-            "Expected named import, got: {}",
-            result
-        );
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled from 'styled-components'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &styled_components_alias()
+        ));
     }
 
     #[test]
     fn test_css_ts_file_vanilla_extract() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-
-        let code = r#"import { style } from '@vanilla-extract/css'
-export const container = style({ background: 'red' })"#;
-        let result = transform_import_aliases(code, "styles.css.ts", "@devup-ui/react", &aliases);
-
-        assert!(
-            result.contains("@devup-ui/react"),
-            "Expected '@devup-ui/react', got: {}",
-            result
-        );
-        assert!(
-            result.contains("style"),
-            "Expected 'style' import, got: {}",
-            result
-        );
+        assert_snapshot!(transform_import_aliases(
+            r#"import { style } from '@vanilla-extract/css'
+export const container = style({ background: 'red' })"#,
+            "styles.css.ts",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
     }
 
     #[test]
     fn test_multiple_imports_same_file() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@emotion/styled".to_string(),
-            ImportAlias::DefaultToNamed("styled".to_string()),
-        );
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-
-        let code = r#"import styled from '@emotion/styled'
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled from '@emotion/styled'
 import { style } from '@vanilla-extract/css'
-import { useState } from 'react'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
-
-        // Both aliased imports should be transformed
-        assert!(
-            result.matches("@devup-ui/react").count() == 2,
-            "Expected 2 @devup-ui/react imports, got: {}",
-            result
-        );
-        // React import should be unchanged
-        assert!(
-            result.contains("react"),
-            "Expected 'react' import, got: {}",
-            result
-        );
+import { useState } from 'react'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &combined_aliases()
+        ));
     }
 
     #[test]
     fn test_preserves_code_after_import() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
-
-        let code = r#"import { style } from '@vanilla-extract/css'
+        assert_snapshot!(transform_import_aliases(
+            r#"import { style } from '@vanilla-extract/css'
 
 export const button = style({
     background: 'blue',
     padding: '8px',
-});"#;
-        let result = transform_import_aliases(code, "test.css.ts", "@devup-ui/react", &aliases);
-
-        // Import should be transformed
-        assert!(
-            result.contains("@devup-ui/react"),
-            "Expected '@devup-ui/react', got: {}",
-            result
-        );
-        // Rest of the code should be preserved
-        assert!(
-            result.contains("export const button = style"),
-            "Expected style call preserved, got: {}",
-            result
-        );
-        assert!(
-            result.contains("background: 'blue'"),
-            "Expected styles preserved, got: {}",
-            result
-        );
+});"#,
+            "test.css.ts",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
     }
 
     #[test]
     fn test_named_import_with_alias() {
-        let mut aliases = HashMap::new();
-        aliases.insert(
-            "@vanilla-extract/css".to_string(),
-            ImportAlias::NamedToNamed,
-        );
+        assert_snapshot!(transform_import_aliases(
+            r#"import { style as myStyle } from '@vanilla-extract/css'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
+    }
 
-        let code = r#"import { style as myStyle } from '@vanilla-extract/css'"#;
-        let result = transform_import_aliases(code, "test.tsx", "@devup-ui/react", &aliases);
+    #[test]
+    fn test_side_effect_import_no_specifiers() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
 
-        assert!(
-            result.contains("style as myStyle"),
-            "Expected 'style as myStyle', got: {}",
-            result
-        );
-        assert!(
-            result.contains("@devup-ui/react"),
-            "Expected '@devup-ui/react', got: {}",
-            result
-        );
+    #[test]
+    fn test_alias_in_comment_not_transformed() {
+        assert_snapshot!(transform_import_aliases(
+            r#"// This uses @emotion/styled but doesn't import it
+const x = 1;"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
+
+    #[test]
+    fn test_default_to_named_with_additional_named_imports() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled, { css, keyframes } from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
+
+    #[test]
+    fn test_default_to_named_with_aliased_named_import() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import styled, { css as emotionCss } from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
+
+    #[test]
+    fn test_default_to_named_namespace_import() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import * as Emotion from '@emotion/styled'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &emotion_alias()
+        ));
+    }
+
+    #[test]
+    fn test_named_to_named_with_default_specifier() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import vanillaDefault, { style } from '@vanilla-extract/css'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
+    }
+
+    #[test]
+    fn test_named_to_named_namespace_import() {
+        assert_snapshot!(transform_import_aliases(
+            r#"import * as VE from '@vanilla-extract/css'"#,
+            "test.tsx",
+            "@devup-ui/react",
+            &vanilla_extract_alias()
+        ));
     }
 }
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 3453c897..f33e12ae 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -405,6 +405,18 @@ mod tests {
             }
         }
     }
+
+    #[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() {
@@ -10620,7 +10632,7 @@ export const text = style({
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases,
+                    import_aliases
                 }
             )
             .unwrap()
@@ -12141,7 +12153,7 @@ const buttonStyle = css({ bg: 'red', p: 4 })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -12847,7 +12859,7 @@ const Button = styled.button({ bg: 'red', p: 4 })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -12877,7 +12889,7 @@ const Card = styled("div")({ bg: 'blue', m: 2 })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -12906,7 +12918,7 @@ const element = <div>Hello</div>"#,
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -12936,7 +12948,7 @@ const Button = myStyled.button({ bg: 'green', p: 2 })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -12967,7 +12979,7 @@ const Button = emotionStyled.button({ bg: 'purple', p: 3 })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
@@ -13006,7 +13018,7 @@ const Button = styled.button({ bg: 'red' })
                     css_dir: "@devup-ui/react".to_string(),
                     single_css: true,
                     import_main_css: false,
-                    import_aliases: aliases,
+                    import_aliases: aliases
                 },
             )
             .unwrap()
diff --git a/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__alias_in_comment_not_transformed.snap
new file mode 100644
index 00000000..c2831862
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__css_ts_file_vanilla_extract.snap
new file mode 100644
index 00000000..bda0523b
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_different_name.snap
new file mode 100644
index 00000000..9acbadc5
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_namespace_import.snap
new file mode 100644
index 00000000..bafcafe1
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__default_to_named_same_name.snap
new file mode 100644
index 00000000..d70f1f03
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__default_to_named_with_additional_named_imports.snap b/libs/extractor/src/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/src/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/src/snapshots/extractor__import_alias_visit__tests__default_to_named_with_aliased_named_import.snap b/libs/extractor/src/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/src/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/src/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__empty_aliases.snap
new file mode 100644
index 00000000..ce0d7512
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__multiple_imports_same_file.snap
new file mode 100644
index 00000000..50c8089b
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_import_with_alias.snap
new file mode 100644
index 00000000..b63d81ab
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__named_to_named.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_to_named.snap
new file mode 100644
index 00000000..26d93eaf
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__named_to_named_namespace_import.snap
new file mode 100644
index 00000000..52120f70
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__named_to_named_with_default_specifier.snap b/libs/extractor/src/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/src/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/src/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__no_matching_alias.snap
new file mode 100644
index 00000000..3fb23269
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__preserves_code_after_import.snap
new file mode 100644
index 00000000..d61c4531
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__side_effect_import_no_specifiers.snap
new file mode 100644
index 00000000..1302f578
--- /dev/null
+++ b/libs/extractor/src/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/src/snapshots/extractor__import_alias_visit__tests__styled_components.snap b/libs/extractor/src/snapshots/extractor__import_alias_visit__tests__styled_components.snap
new file mode 100644
index 00000000..5effdcb6
--- /dev/null
+++ b/libs/extractor/src/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';