Fix e2e tests

Author: JakeLane

crates/atlassian-swc-compiled-css/src/lib.rs

@@ -10456,6 +10456,16 @@ impl<'a> TransformVisitor<'a> {
 
   fn process_css_prop(&mut self, element: &mut JSXElement) -> Option<(Vec<String>, Option<Expr>)> {
     let debug_css = std::env::var_os("COMPILED_DEBUG_CSS").is_some();
+    if debug_css {
+      let element_name = match &element.opening.name {
+        JSXElementName::Ident(ident) => ident.sym.as_ref().to_string(),
+        _ => "<complex>".to_string(),
+      };
+      eprintln!(
+        "[compiled-debug] process_css_prop called for <{}>",
+        element_name
+      );
+    }
     let mut css_index = None;
     let mut class_index = None;
     let mut key_expr: Option<Expr> = None;
@@ -10588,9 +10598,32 @@ impl<'a> TransformVisitor<'a> {
     } else if let Some(expr) = &original_css_expr {
       if let Expr::Ident(ident) = expr {
         self.mark_css_binding_used(ident);
-        match self.css_runtime_artifacts.get(&to_id(ident)).cloned() {
+        let ident_id = to_id(ident);
+        if std::env::var_os("COMPILED_DEBUG_CSS").is_some() {
+          eprintln!(
+            "[compiled-debug] process_css_prop looking up artifacts for ident: {}",
+            ident.sym
+          );
+          eprintln!(
+            "[compiled-debug] css_runtime_artifacts keys: {:?}",
+            self
+              .css_runtime_artifacts
+              .keys()
+              .map(|(sym, _)| sym.to_string())
+              .collect::<Vec<_>>()
+          );
+        }
+        match self.css_runtime_artifacts.get(&ident_id).cloned() {
           Some(artifacts) => artifacts,
-          None => return None,
+          None => {
+            if std::env::var_os("COMPILED_DEBUG_CSS").is_some() {
+              eprintln!(
+                "[compiled-debug] process_css_prop artifact not found for: {}",
+                ident.sym
+              );
+            }
+            return None;
+          }
         }
       } else {
         using_runtime_artifacts = true;
@@ -11413,7 +11446,10 @@ impl<'a> VisitMut for TransformVisitor<'a> {
           JSXElementName::Ident(ident) => ident.sym.as_ref().to_string(),
           _ => "<complex>".to_string(),
         };
-        eprintln!("[compiled-debug] visit JSXElement name={}", element_name);
+        eprintln!(
+          "[compiled-debug] visit_mut_expr JSXElement name={}",
+          element_name
+        );
       }
       if let Some(mut replacement) = self.handle_class_names_element(element) {
         replacement.visit_mut_with(self);
@@ -12079,17 +12115,67 @@ impl<'a> VisitMut for TransformVisitor<'a> {
   }
 
   fn visit_mut_jsx_element(&mut self, element: &mut JSXElement) {
+    if std::env::var_os("COMPILED_DEBUG_CSS").is_some() {
+      let element_name = match &element.opening.name {
+        JSXElementName::Ident(ident) => ident.sym.as_ref().to_string(),
+        _ => "<complex>".to_string(),
+      };
+      eprintln!("[compiled-debug] visit_mut_jsx_element <{}>", element_name);
+    }
+
+    // Process the css={} prop
+    let css_info = self.process_css_prop(element);
+
+    // Walk children
+    element.visit_mut_children_with(self);
+    self.walk_jsx_children(element);
+
+    // Handle xcss attributes and runtime sheets
+    let mut runtime_sheets: Vec<String> = Vec::new();
+    let mut key_expr: Option<Expr> = None;
+    let mut xcss_transformed = false;
+
+    if let Some((sheets, key)) = css_info {
+      if !self.options.extract && !sheets.is_empty() {
+        runtime_sheets.extend(sheets);
+      }
+      key_expr = key;
+      if std::env::var_os("COMPILED_DEBUG_CSS").is_some() {
+        eprintln!(
+          "[compiled-debug] visit_mut_jsx_element css_info runtime_sheets={} key_set={}",
+          runtime_sheets.len(),
+          key_expr.is_some()
+        );
+      }
+    }
+
     if self.options.extract {
       if let Some(result) = self.process_xcss_attributes(element) {
+        if !result.runtime_sheets.is_empty() {
+          runtime_sheets.extend(result.runtime_sheets);
+        }
         if !result.pending_class_names.is_empty() {
           let mut resolved = self.resolve_pending_xcss(&result.pending_class_names);
-          if std::env::var_os("COMPILED_DEBUG_CSS").is_some() && resolved.is_empty() {
-            eprintln!("[compiled-debug] resolve_pending_xcss produced no sheets");
-          }
+          runtime_sheets.append(&mut resolved);
+        }
+        if result.transformed || !result.pending_class_names.is_empty() {
+          xcss_transformed = true;
         }
       }
     }
-    self.walk_jsx_children(element);
+
+    if !runtime_sheets.is_empty() {
+      if !self.options.extract {
+        self.needs_runtime_ax = true;
+      }
+      let inner = element.clone();
+      let wrapper =
+        self.build_runtime_component(Expr::JSXElement(Box::new(inner)), runtime_sheets, key_expr);
+      // Note: We cannot directly replace the element here. The element is being processed in-place.
+      // The wrapper would need to be created at a higher level in visit_mut_expr.
+    } else if xcss_transformed {
+      // Metadata registrations have already occurred; no runtime wrapper required.
+    }
   }
 }
 

crates/node-bindings/src/plugin_compiled_css_in_js.rs

@@ -1001,4 +1001,62 @@ const modalHeaderStyles = css({
       "Should have collected style rules"
     );
   }
+
+  #[test]
+  fn test_e2e() {
+    unsafe {
+      std::env::set_var("COMPILED_DEBUG_CSS", "1");
+    }
+    let config = create_test_config(true, false);
+
+    let code = indoc! {r#"
+/* eslint-disable react/no-unknown-property */
+/* eslint-disable no-undef */
+
+import React from 'react';
+import {css} from '@compiled/react';
+import {createRoot} from 'react-dom/client';
+
+import Button from '@atlaskit/button/new';
+
+const divStyles = css({color: 'blue'});
+
+const root = createRoot(document.getElementById('app'));
+
+const page = (
+  <>
+    <h1 data-testid="heading" css={headingStyles}>
+      Hello, world!
+    </h1>
+    <div css={divStyles}>Content</div>
+    <Button testId="button">Click me</Button>
+  </>
+);
+
+const headingStyles = css({color: 'red'});
+
+root.render(page);
+"#};
+
+    let result = process_compiled_css_in_js(code, &config);
+    assert!(result.is_ok(), "Transformation should succeed");
+
+    let transformed = result.unwrap();
+
+    // The important part: verify that the styles are transformed correctly
+    // even though the component is declared before the styles
+    eprintln!("[test_e2e] transformed code:\n{}", transformed.code);
+    assert!(
+      !transformed.code.contains("css={"),
+      "Should not have css in the code"
+    );
+    assert!(
+      transformed.code.contains("className="),
+      "Should have className in the code"
+    );
+    assert!(
+      !transformed.style_rules.is_empty(),
+      "Should have collected style rules"
+    );
+  }
 }