@aihu/css-engine 0.2.5 → 0.4.0

package/crates/aihu-css-core/tests/parity.rs

@@ -0,0 +1,274 @@
+//! Tailwind-v4 parity round: coverage for the utility families, the
+//! `(--var)` shorthand, the arbitrary border-color typing fix, palette-token
+//! injection, and the pseudo-class/element variants added to render a
+//! full Tailwind-authored landing page on the engine.
+
+use aihu_css_core::{compile_classes, compile_sfc_scoped, parse_ast};
+
+fn css(classes: &[&str]) -> String {
+    compile_classes(&classes.iter().map(|s| s.to_string()).collect::<Vec<_>>())
+}
+
+fn one(class: &str) -> String {
+    compile_classes(&[class.to_string()])
+}
+
+fn sfc(classes: &str) -> aihu_css_core::SfcAst {
+    let json = format!(
+        r#"{{"tag":"X","astVersion":1,"style":null,"meta":{{"name":"X"}},
+        "template":[{{"kind":"element","tag":"div","attrs":[
+          {{"kind":"static","name":"class","value":"{classes}"}}
+        ],"children":[]}}]}}"#
+    );
+    parse_ast(&json).unwrap()
+}
+
+// ── The root-cause fix: arbitrary border value typed as color, not width ─────
+
+#[test]
+fn arbitrary_border_value_is_color_typed_by_value() {
+    // A color-looking value → border-color (previously always border-width).
+    assert_eq!(
+        one("border-[var(--border)]"),
+        ".border-[var(--border)] { border-color: var(--border); }\n"
+    );
+    assert_eq!(
+        one("border-[#abc]"),
+        ".border-[#abc] { border-color: #abc; }\n"
+    );
+    // A length value still maps to width.
+    assert_eq!(
+        one("border-[2px]"),
+        ".border-[2px] { border-width: 2px; }\n"
+    );
+    // Explicit data-type hints override the heuristic.
+    assert_eq!(
+        one("outline-[color:var(--x)]"),
+        ".outline-[color:var(--x)] { outline-color: var(--x); }\n"
+    );
+}
+
+// ── The CSS-variable shorthand `prefix-(--token)` ───────────────────────────
+
+#[test]
+fn var_shorthand_keeps_prefix_property_typing() {
+    assert_eq!(
+        one("bg-(--background)"),
+        ".bg-(--background) { background-color: var(--background); }\n"
+    );
+    assert_eq!(
+        one("text-(--muted-fg)"),
+        ".text-(--muted-fg) { color: var(--muted-fg); }\n"
+    );
+    // border keeps COLOR typing (not width) through the shorthand.
+    assert_eq!(
+        one("border-(--border)"),
+        ".border-(--border) { border-color: var(--border); }\n"
+    );
+}
+
+#[test]
+fn var_shorthand_opacity_modifier_color_mixes() {
+    assert_eq!(
+        one("bg-(--background)/90"),
+        ".bg-(--background)/90 { background-color: color-mix(in oklab, var(--background) 90%, transparent); }\n"
+    );
+}
+
+// ── Sizing / aspect / order / fractions ─────────────────────────────────────
+
+#[test]
+fn size_emits_width_and_height() {
+    assert_eq!(one("size-16"), ".size-16 { width: 4rem; height: 4rem; }\n");
+    assert_eq!(
+        one("size-full"),
+        ".size-full { width: 100%; height: 100%; }\n"
+    );
+}
+
+#[test]
+fn aspect_ratio_keywords_and_bare_ratio() {
+    assert_eq!(
+        one("aspect-square"),
+        ".aspect-square { aspect-ratio: 1 / 1; }\n"
+    );
+    assert_eq!(
+        one("aspect-video"),
+        ".aspect-video { aspect-ratio: 16 / 9; }\n"
+    );
+    assert_eq!(
+        one("aspect-1108/632"),
+        ".aspect-1108/632 { aspect-ratio: 1108 / 632; }\n"
+    );
+}
+
+#[test]
+fn fractional_position_and_negative_translate() {
+    assert_eq!(one("left-1/2"), ".left-1/2 { left: 50%; }\n");
+    assert_eq!(one("top-1/2"), ".top-1/2 { top: 50%; }\n");
+    assert_eq!(
+        one("-translate-x-1/2"),
+        ".-translate-x-1/2 { transform: translateX(-50%); }\n"
+    );
+}
+
+#[test]
+fn negative_margin_and_z_index() {
+    assert_eq!(one("-ml-4"), ".-ml-4 { margin-left: -1rem; }\n");
+    assert_eq!(one("-z-10"), ".-z-10 { z-index: -10; }\n");
+    assert_eq!(one("order-2"), ".order-2 { order: 2; }\n");
+}
+
+// ── Gradients ───────────────────────────────────────────────────────────────
+
+#[test]
+fn linear_gradient_direction_and_stops() {
+    assert_eq!(
+        one("bg-linear-to-r"),
+        ".bg-linear-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n"
+    );
+    assert!(one("from-amber-200").contains("--tw-gradient-from: var(--color-amber-200)"));
+    assert!(one("to-amber-600").contains("--tw-gradient-to: var(--color-amber-600)"));
+    assert!(one("via-(--accent)").contains("var(--accent)"));
+}
+
+// ── Effects / typography long-tail ──────────────────────────────────────────
+
+#[test]
+fn blur_mask_shadow_outline_scales() {
+    assert_eq!(one("blur-3xl"), ".blur-3xl { filter: blur(64px); }\n");
+    assert!(one("backdrop-blur-sm").contains("backdrop-filter: blur(8px)"));
+    assert!(one("mask-[radial-gradient(circle,white,transparent)]")
+        .contains("mask-image: radial-gradient(circle,white,transparent)"));
+    assert!(one("shadow-xl").contains("box-shadow:"));
+    assert_eq!(
+        one("outline-2"),
+        ".outline-2 { outline-style: solid; outline-width: 2px; }\n"
+    );
+    assert_eq!(
+        one("-outline-offset-1"),
+        ".-outline-offset-1 { outline-offset: -1px; }\n"
+    );
+}
+
+#[test]
+fn type_scale_slash_line_height_and_family() {
+    assert_eq!(
+        one("text-7xl"),
+        ".text-7xl { font-size: 4.5rem; line-height: 1; }\n"
+    );
+    assert_eq!(
+        one("text-sm/6"),
+        ".text-sm/6 { font-size: 0.875rem; line-height: 1.5rem; }\n"
+    );
+    assert_eq!(
+        one("font-serif"),
+        ".font-serif { font-family: var(--font-serif); }\n"
+    );
+    assert_eq!(one("text-pretty"), ".text-pretty { text-wrap: pretty; }\n");
+}
+
+#[test]
+fn long_tail_fixed_utilities() {
+    assert_eq!(one("isolate"), ".isolate { isolation: isolate; }\n");
+    assert_eq!(
+        one("cursor-pointer"),
+        ".cursor-pointer { cursor: pointer; }\n"
+    );
+    assert_eq!(
+        one("rounded-3xl"),
+        ".rounded-3xl { border-radius: 1.5rem; }\n"
+    );
+    assert_eq!(one("list-none"), ".list-none { list-style-type: none; }\n");
+    assert_eq!(one("shrink-0"), ".shrink-0 { flex-shrink: 0; }\n");
+    assert_eq!(
+        one("self-start"),
+        ".self-start { align-self: flex-start; }\n"
+    );
+    assert!(one("sr-only").contains("position: absolute"));
+}
+
+// ── Palette injection: referenced palette tokens resolve at :host ────────────
+
+#[test]
+fn scoped_injects_used_palette_tokens() {
+    let out = compile_sfc_scoped(&sfc("bg-amber-500 text-stone-300")).unwrap();
+    // The utility refs the palette token…
+    assert!(out.contains("background-color: var(--color-amber-500)"));
+    // …and the scoped emitter registers its oklch value at :host.
+    assert!(out.contains("--color-amber-500: oklch("));
+    assert!(out.contains("--color-stone-300: oklch("));
+    // Only USED palette tokens are injected — an unrelated family is absent.
+    assert!(!out.contains("--color-rose-500"));
+}
+
+// ── Variants: pseudo-classes, pseudo-elements, relational open ──────────────
+
+#[test]
+fn pseudo_class_variants_first_last_open() {
+    let out = compile_sfc_scoped(&sfc("first:mt-0 last:mb-0 open:block")).unwrap();
+    assert!(out.contains(":first-child"));
+    assert!(out.contains(":last-child"));
+    assert!(out.contains(":open"));
+}
+
+#[test]
+fn pseudo_element_variants_marker_and_placeholder() {
+    let out = compile_sfc_scoped(&sfc("marker:text-primary placeholder:text-stone-400")).unwrap();
+    assert!(out.contains("::marker"));
+    assert!(out.contains("::placeholder"));
+}
+
+#[test]
+fn group_open_relational_variant() {
+    let out = compile_sfc_scoped(&sfc("group-open:rotate-180")).unwrap();
+    assert!(out.contains(".group:open"));
+}
+
+// ── A representative slice of the real landing compiles end to end ───────────
+
+#[test]
+fn landing_utility_slice_all_emit() {
+    // Base (non-variant) utilities only — flat `compile_classes` does not emit
+    // variant-prefixed classes (those are exercised by the variant tests above).
+    let slice = [
+        "relative",
+        "isolate",
+        "overflow-hidden",
+        "bg-(--background)",
+        "size-full",
+        "mask-[radial-gradient(100%_100%_at_top_right,white,transparent)]",
+        "stroke-(--border)",
+        "fill-(--muted)",
+        "aspect-1108/632",
+        "bg-linear-to-r",
+        "from-amber-200",
+        "to-amber-600",
+        "opacity-20",
+        "max-w-7xl",
+        "px-6",
+        "text-7xl",
+        "font-serif",
+        "text-pretty",
+        "text-(--foreground)",
+        "text-lg/8",
+        "rounded-md",
+        "bg-(--primary)",
+        "text-(--primary-fg)",
+        "shadow-xs",
+        "size-3",
+        "rounded-full",
+        "bg-red-400",
+        "ring-1",
+        "ring-gray-900/10",
+    ];
+    let out = css(&slice);
+    // Every class in the slice must produce a rule (no silently-dropped utility).
+    for class in slice {
+        let sel = format!(".{class} {{");
+        assert!(
+            out.contains(&sel),
+            "landing utility `{class}` produced no rule"
+        );
+    }
+}

package/crates/aihu-css-core/tests/progressive_snapshot.rs

@@ -22,7 +22,7 @@ fn sfc(classes: &str) -> aihu_css_core::SfcAst {
 
 #[test]
 fn view_transition_is_supports_gated_css_only() {
-    let css = compile_sfc_scoped(&sfc("view-transition:hero"));
+    let css = compile_sfc_scoped(&sfc("view-transition:hero")).unwrap();
     assert!(
         css.contains("@supports (view-transition-name: none)"),
         "view-transition gated behind @supports: {css}"
@@ -36,14 +36,14 @@ fn view_transition_is_supports_gated_css_only() {
 
 #[test]
 fn view_transition_snapshot() {
-    insta::assert_snapshot!(compile_sfc_scoped(&sfc("view-transition:hero")));
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("view-transition:hero")).unwrap());
 }
 
 // ── Task 6: anchor: (@supports gate + JS fallback marker) ────────────────────
 
 #[test]
 fn anchor_is_supports_gated_with_js_marker() {
-    let css = compile_sfc_scoped(&sfc("anchor:tooltip"));
+    let css = compile_sfc_scoped(&sfc("anchor:tooltip")).unwrap();
     assert!(
         css.contains("@supports (anchor-name: --a)"),
         "anchor gated behind @supports (anchor-name): {css}"
@@ -57,14 +57,14 @@ fn anchor_is_supports_gated_with_js_marker() {
 
 #[test]
 fn anchor_snapshot() {
-    insta::assert_snapshot!(compile_sfc_scoped(&sfc("anchor:tooltip")));
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("anchor:tooltip")).unwrap());
 }
 
 // ── Task 7: popover: (@supports gate + portal JS fallback marker) ────────────
 
 #[test]
 fn popover_is_supports_gated_with_js_marker() {
-    let css = compile_sfc_scoped(&sfc("popover:menu"));
+    let css = compile_sfc_scoped(&sfc("popover:menu")).unwrap();
     assert!(
         css.contains("@supports (selector(:popover-open))"),
         "popover gated behind @supports selector(:popover-open): {css}"
@@ -77,14 +77,14 @@ fn popover_is_supports_gated_with_js_marker() {
 
 #[test]
 fn popover_snapshot() {
-    insta::assert_snapshot!(compile_sfc_scoped(&sfc("popover:menu")));
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("popover:menu")).unwrap());
 }
 
 // ── Task 8: text-balance: (no gate, no JS) ───────────────────────────────────
 
 #[test]
 fn text_balance_no_gate_no_js() {
-    let css = compile_sfc_scoped(&sfc("text-balance:"));
+    let css = compile_sfc_scoped(&sfc("text-balance:")).unwrap();
     assert!(css.contains("text-wrap: balance"), "emits text-wrap: balance: {css}");
     assert!(
         !css.contains("@supports"),
@@ -98,5 +98,5 @@ fn text_balance_no_gate_no_js() {
 
 #[test]
 fn text_balance_snapshot() {
-    insta::assert_snapshot!(compile_sfc_scoped(&sfc("text-balance:")));
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("text-balance:")).unwrap());
 }

package/crates/aihu-css-core/tests/scoped_snapshot.rs

@@ -25,7 +25,7 @@ fn flat_output_for_class_list() {
 
 #[test]
 fn scoped_output_for_sfc() {
-    insta::assert_snapshot!(compile_sfc_scoped(&sfc("bg-primary p-4 rounded-lg")));
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("bg-primary p-4 rounded-lg")).unwrap());
 }
 
 #[test]
@@ -35,7 +35,7 @@ fn scoped_with_authored_style_block() {
       "meta":{"name":"Card"},
       "template":[{"kind":"element","tag":"div","attrs":[
         {"kind":"static","name":"class","value":"p-4 shadow-md"}],"children":[]}]}"#;
-    insta::assert_snapshot!(compile_sfc_scoped(&ast(json)));
+    insta::assert_snapshot!(compile_sfc_scoped(&ast(json)).unwrap());
 }
 
 #[test]
@@ -43,31 +43,103 @@ fn scoped_with_global_style_block() {
     let json = r#"{"tag":"X","astVersion":1,
       "style":{"content":"body { margin: 0; }","scope":"global"},
       "meta":{"name":"X"},"template":null}"#;
-    insta::assert_snapshot!(compile_sfc_scoped(&ast(json)));
+    insta::assert_snapshot!(compile_sfc_scoped(&ast(json)).unwrap());
+}
+
+#[test]
+fn scoped_space_y_nested_rule() {
+    // Locks in the nested `& > * + *` sibling-margin shape inside component
+    // scope (Round 1: tailwind-support `space-x/y-*` family).
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("space-y-4")).unwrap());
+}
+
+#[test]
+fn scoped_divide_y_nested_rule() {
+    // Locks in the nested `& > * + *` sibling-border shape inside component
+    // scope (Round 2: tailwind-support `divide-x/y-*` family). Confirms the
+    // nested rule survives the scoped CSS-nesting emission path, mirroring
+    // `scoped_space_y_nested_rule`.
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("divide-y-2")).unwrap());
+}
+
+#[test]
+fn scoped_animate_spin_hoists_keyframes() {
+    // Locks the `animate-*` emission shape: the scoped `.animate-spin` rule
+    // followed by a hoisted top-level `@keyframes spin` sibling (Round 2:
+    // tailwind-support `motion` track).
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("animate-spin")).unwrap());
+}
+
+#[test]
+fn scoped_transition_and_transform() {
+    // Locks transition shorthand + a transform utility under component scope.
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc(
+        "transition-transform duration-300 hover:scale-105"
+    )).unwrap());
 }
 
 #[test]
 fn wc_native_variants() {
     insta::assert_snapshot!(compile_sfc_scoped(&sfc(
         "host:bg-primary slotted:p-4 slotted-img:rounded-lg part-thumb:bg-accent host-context-dark:bg-surface"
-    )));
+    )).unwrap());
 }
 
 #[test]
 fn standard_variants() {
     insta::assert_snapshot!(compile_sfc_scoped(&sfc(
         "hover:bg-primary focus:text-accent dark:bg-surface md:p-8 [&>div]:text-primary md:hover:bg-primary"
-    )));
+    )).unwrap());
+}
+
+#[test]
+fn style_block_does_not_suppress_scanned_utilities() {
+    // Regression for #278: an `@style` block must NOT make the utility-class
+    // scanner mutually exclusive. Both the scanned template utilities AND the
+    // authored `@style` content must land in the same scoped stylesheet.
+    //
+    // Repro: `<div class="text-3xl gap-4">` + `@style { .__probe__ { ... } }`.
+    // Before the fix the sheet contained ONLY `.__probe__`; the utilities
+    // vanished. Assert all three rules coexist (concatenated).
+    let json = r#"{"tag":"Probe","astVersion":1,
+      "style":{"content":".__probe__ { color: rgb(1,2,3); }","scope":"scoped"},
+      "meta":{"name":"Probe"},
+      "template":[{"kind":"element","tag":"div","attrs":[
+        {"kind":"static","name":"class","value":"text-3xl gap-4"}],"children":[]}]}"#;
+    // `.unwrap()` added in the PR-1 merge: compile_sfc_scoped now returns Result.
+    let css = compile_sfc_scoped(&ast(json)).unwrap();
+
+    // Scanned template utilities survive.
+    assert!(
+        css.contains(".text-3xl"),
+        "scanned utility .text-3xl missing when @style present:\n{css}"
+    );
+    assert!(
+        css.contains(".gap-4"),
+        "scanned utility .gap-4 missing when @style present:\n{css}"
+    );
+    // Authored @style content survives. (PR-1 merge: authored @style is now
+    // re-rendered through the shared @style parser to enable @apply, so it is
+    // whitespace-normalized rather than byte-identical — assert the selector
+    // and declaration are present, not the exact single-line form. The #278
+    // regression intent (scanned utilities AND authored @style coexist) holds.)
+    assert!(css.contains(".__probe__"), "authored @style selector missing:\n{css}");
+    assert!(
+        css.contains("color: rgb(1,2,3)"),
+        "authored @style declaration missing:\n{css}"
+    );
 }
 
 #[test]
 fn theme_default_vs_override() {
-    let default = compile_sfc_scoped(&sfc("bg-primary"));
+    let default = compile_sfc_scoped(&sfc("bg-primary")).unwrap();
     let json = r#"{"tag":"X","astVersion":1,
       "style":{"content":"@theme { --color-primary: oklch(0.55 0.18 28); }","scope":"scoped"},
       "meta":{"name":"X"},
       "template":[{"kind":"element","tag":"div","attrs":[
         {"kind":"static","name":"class","value":"bg-primary"}],"children":[]}]}"#;
-    let overridden = compile_sfc_scoped(&ast(json));
-    insta::assert_snapshot!(format!("--- default ---\n{default}\n--- override ---\n{overridden}"));
+    let overridden = compile_sfc_scoped(&ast(json)).unwrap();
+    insta::assert_snapshot!(format!(
+        "--- default ---\n{default}\n--- override ---\n{overridden}"
+    ));
 }

package/crates/aihu-css-core/tests/snapshots/apply__apply_inside_nested_rule.snap

@@ -0,0 +1,11 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 91
+expression: css
+---
+.card {
+  display: grid;
+  & .title {
+    font-weight: 500;
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__arbitrary_value_utility_in_apply.snap

@@ -0,0 +1,8 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 103
+expression: css
+---
+.swatch {
+  background-color: #fff;
+}

package/crates/aihu-css-core/tests/snapshots/apply__arbitrary_value_variant_in_apply.snap

@@ -0,0 +1,10 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 111
+expression: css
+---
+.swatch {
+  &:hover {
+    background-color: #fff;
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__base_utility_inlines_declarations.snap

@@ -0,0 +1,9 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 39
+expression: css
+---
+.btn {
+  display: inline-flex;
+  align-items: center;
+}

package/crates/aihu-css-core/tests/snapshots/apply__dark_variant_cascade_in_apply.snap

@@ -0,0 +1,10 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 143
+expression: css
+---
+.panel {
+  :host([data-theme="dark"]) &, :root.dark & {
+    background-color: var(--color-surface);
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__data_attribute_variant.snap

@@ -0,0 +1,10 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 131
+expression: css
+---
+.btn {
+  &[data-state="open"] {
+    background-color: var(--color-accent);
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__multi_token_apply.snap

@@ -0,0 +1,11 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 66
+expression: css
+---
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+}

package/crates/aihu-css-core/tests/snapshots/apply__multiple_apply_directives_per_rule.snap

@@ -0,0 +1,12 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 78
+expression: css
+---
+.btn {
+  display: inline-flex;
+  border-radius: 0.375rem;
+  &:hover {
+    background-color: var(--color-accent);
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__responsive_variant_wraps_media.snap

@@ -0,0 +1,12 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 120
+expression: css
+---
+.grid {
+  @media (min-width: 48rem) {
+    & {
+      display: flex;
+    }
+  }
+}

package/crates/aihu-css-core/tests/snapshots/apply__single_variant_lifts_to_nested_rule.snap

@@ -0,0 +1,10 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/apply.rs
+assertion_line: 54
+expression: css
+---
+.btn {
+  &:hover {
+    background-color: var(--color-accent);
+  }
+}

package/crates/aihu-css-core/tests/snapshots/progressive_snapshot__anchor_snapshot.snap

@@ -20,6 +20,7 @@ expression: "compile_sfc_scoped(&sfc(\"anchor:tooltip\"))"
   --color-surface: #faf8f4;
   --color-surface-foreground: #1a1d24;
 }
+*, ::before, ::after { border-style: solid; border-width: 0; }
 @supports (anchor-name: --a) {
   .anchor\:tooltip { anchor-name: --tooltip; position-anchor: --tooltip; }
 }

package/crates/aihu-css-core/tests/snapshots/progressive_snapshot__popover_snapshot.snap

@@ -20,6 +20,7 @@ expression: "compile_sfc_scoped(&sfc(\"popover:menu\"))"
   --color-surface: #faf8f4;
   --color-surface-foreground: #1a1d24;
 }
+*, ::before, ::after { border-style: solid; border-width: 0; }
 @supports (selector(:popover-open)) {
   .popover\:menu:popover-open { position: fixed; margin: 0; inset: auto; }
 }

package/crates/aihu-css-core/tests/snapshots/progressive_snapshot__text_balance_snapshot.snap

@@ -20,4 +20,5 @@ expression: "compile_sfc_scoped(&sfc(\"text-balance:\"))"
   --color-surface: #faf8f4;
   --color-surface-foreground: #1a1d24;
 }
+*, ::before, ::after { border-style: solid; border-width: 0; }
 .text-balance { text-wrap: balance; }

package/crates/aihu-css-core/tests/snapshots/progressive_snapshot__view_transition_snapshot.snap

@@ -20,6 +20,7 @@ expression: "compile_sfc_scoped(&sfc(\"view-transition:hero\"))"
   --color-surface: #faf8f4;
   --color-surface-foreground: #1a1d24;
 }
+*, ::before, ::after { border-style: solid; border-width: 0; }
 @supports (view-transition-name: none) {
   .view-transition\:hero { view-transition-name: hero; }
 }

package/crates/aihu-css-core/tests/snapshots/scoped_snapshot__scoped_animate_spin_hoists_keyframes.snap

@@ -0,0 +1,25 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"animate-spin\"))"
+---
+:host {
+  --color-accent: #c8543a;
+  --color-accent-foreground: #faf8f4;
+  --color-background: #faf8f4;
+  --color-border: #ddd9d2;
+  --color-destructive: #a8432b;
+  --color-destructive-foreground: #faf8f4;
+  --color-foreground: #1a1d24;
+  --color-muted: #5a5a55;
+  --color-muted-foreground: #8a8880;
+  --color-primary: #1a1d24;
+  --color-primary-foreground: #faf8f4;
+  --color-ring: #c8543a;
+  --color-secondary: #5a5a55;
+  --color-secondary-foreground: #faf8f4;
+  --color-surface: #faf8f4;
+  --color-surface-foreground: #1a1d24;
+}
+*, ::before, ::after { border-style: solid; border-width: 0; }
+.animate-spin { animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }

package/crates/aihu-css-core/tests/snapshots/scoped_snapshot__scoped_divide_y_nested_rule.snap

@@ -0,0 +1,24 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"divide-y-2\"))"
+---
+:host {
+  --color-accent: #c8543a;
+  --color-accent-foreground: #faf8f4;
+  --color-background: #faf8f4;
+  --color-border: #ddd9d2;
+  --color-destructive: #a8432b;
+  --color-destructive-foreground: #faf8f4;
+  --color-foreground: #1a1d24;
+  --color-muted: #5a5a55;
+  --color-muted-foreground: #8a8880;
+  --color-primary: #1a1d24;
+  --color-primary-foreground: #faf8f4;
+  --color-ring: #c8543a;
+  --color-secondary: #5a5a55;
+  --color-secondary-foreground: #faf8f4;
+  --color-surface: #faf8f4;
+  --color-surface-foreground: #1a1d24;
+}
+*, ::before, ::after { border-style: solid; border-width: 0; }
+.divide-y-2 { & > * + * { border-block-width: 2px; } }