Add ve case

Author: owjs3901

Cargo.lock

@@ -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"

libs/extractor/Cargo.toml

@@ -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]

libs/extractor/src/lib.rs

@@ -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",
+}

libs/extractor/src/snapshots/extractor__tests__vanilla_extract_composition.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",
+}

libs/extractor/src/snapshots/extractor__tests__vanilla_extract_container.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",
+}