@aihu/css-engine 0.1.0

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

@@ -0,0 +1,148 @@
+//! Scoped-output, variant, and @theme emission tests (Plan 2 Tasks 4–7).
+
+use aihu_css_core::{compile_sfc_scoped, parse_ast};
+
+fn ast(json: &str) -> aihu_css_core::SfcAst {
+    parse_ast(json).unwrap()
+}
+
+/// Build a single-element SFC AST with a static class list.
+fn sfc_with_classes(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":[]}}]}}"#
+    );
+    ast(&json)
+}
+
+// ── Task 4: scoped output, no global stylesheet ──────────────────────────────
+
+#[test]
+fn scoped_output_has_no_bare_global_utility_sheet() {
+    let css = compile_sfc_scoped(&sfc_with_classes("bg-primary p-4"));
+    // The utility rules are class selectors inside the shadow <style>; they are
+    // scoped by living in the shadow root. There is no separate global sheet.
+    assert!(css.contains(".bg-primary"));
+    assert!(css.contains("padding: 1rem"));
+    // Theme tokens emitted at :host so var(--color-*) resolves in the shadow.
+    assert!(css.contains(":host {"));
+    assert!(css.contains("--color-primary"));
+}
+
+#[test]
+fn scoped_folds_authored_style_block() {
+    let json = r#"{"tag":"X","astVersion":1,
+      "style":{"content":".extra { color: red; }","scope":"scoped"},
+      "meta":{"name":"X"},
+      "template":[{"kind":"element","tag":"div","attrs":[
+        {"kind":"static","name":"class","value":"p-4"}],"children":[]}]}"#;
+    let css = compile_sfc_scoped(&ast(json));
+    assert!(css.contains(".p-4"));
+    assert!(css.contains(".extra { color: red; }"), "authored scoped @style folded in");
+}
+
+#[test]
+fn global_style_block_passes_through_edge_e6() {
+    let json = r#"{"tag":"X","astVersion":1,
+      "style":{"content":"body { margin: 0; }","scope":"global"},
+      "meta":{"name":"X"},"template":null}"#;
+    let css = compile_sfc_scoped(&ast(json));
+    assert!(css.contains("body { margin: 0; }"));
+    assert!(css.contains("unscoped"), "global block annotated as unscoped");
+}
+
+// ── Task 5: WC-native variants ───────────────────────────────────────────────
+
+#[test]
+fn host_variant_emits_host_rule() {
+    let css = compile_sfc_scoped(&sfc_with_classes("host:bg-primary"));
+    assert!(css.contains(":host("), "host: → :host(...) selector: {css}");
+    assert!(css.contains("background-color: var(--color-primary)"));
+}
+
+#[test]
+fn slotted_variants() {
+    let css = compile_sfc_scoped(&sfc_with_classes("slotted:p-4 slotted-img:rounded-lg"));
+    assert!(css.contains("::slotted("));
+    assert!(css.contains("::slotted(img"));
+}
+
+#[test]
+fn part_variant_emits_part_selector() {
+    let css = compile_sfc_scoped(&sfc_with_classes("part-thumb:bg-accent"));
+    assert!(css.contains("::part(thumb)"));
+}
+
+#[test]
+fn host_context_dark_uses_cascade_not_host_context() {
+    let css = compile_sfc_scoped(&sfc_with_classes("host-context-dark:bg-surface"));
+    assert!(
+        !css.contains(":host-context("),
+        "Firefox-safe: must NOT emit :host-context(): {css}"
+    );
+    assert!(css.contains("dark cascade"), "uses the documented cascade mechanism");
+    assert!(css.contains(":root.dark"), "dark value gated on consumer .dark scope");
+}
+
+// ── Task 6: standard variants ────────────────────────────────────────────────
+
+#[test]
+fn hover_variant_appends_pseudo_class() {
+    let css = compile_sfc_scoped(&sfc_with_classes("hover:bg-primary"));
+    assert!(css.contains(":hover"), "hover: → :hover pseudo-class: {css}");
+}
+
+#[test]
+fn dark_variant_no_host_context() {
+    let css = compile_sfc_scoped(&sfc_with_classes("dark:bg-surface"));
+    assert!(!css.contains(":host-context("), "dark: must NOT emit :host-context()");
+    assert!(css.contains("dark cascade"));
+}
+
+#[test]
+fn responsive_md_wraps_media_query() {
+    let css = compile_sfc_scoped(&sfc_with_classes("md:p-8"));
+    assert!(css.contains("@media (min-width:"), "md: → @media: {css}");
+    assert!(css.contains("padding: 2rem"));
+}
+
+#[test]
+fn arbitrary_selector_variant() {
+    let css = compile_sfc_scoped(&sfc_with_classes("[&>div]:text-primary"));
+    assert!(css.contains(">div"), "[&>div]: → child selector: {css}");
+    assert!(css.contains("color: var(--color-primary)"));
+}
+
+#[test]
+fn stacked_variants_md_hover() {
+    let css = compile_sfc_scoped(&sfc_with_classes("md:hover:bg-primary"));
+    assert!(css.contains("@media (min-width:"));
+    assert!(css.contains(":hover"));
+}
+
+// ── Task 7: @theme directive ─────────────────────────────────────────────────
+
+#[test]
+fn theme_override_registers_token() {
+    let json = r#"{"tag":"X","astVersion":1,
+      "style":{"content":"@theme { --color-primary: oklch(0.7 0.2 30); }","scope":"scoped"},
+      "meta":{"name":"X"},
+      "template":[{"kind":"element","tag":"div","attrs":[
+        {"kind":"static","name":"class","value":"bg-primary"}],"children":[]}]}"#;
+    let css = compile_sfc_scoped(&ast(json));
+    // The override value is registered as a :host token...
+    assert!(css.contains("--color-primary: oklch(0.7 0.2 30)"), "@theme override registered: {css}");
+    // ...and the utility references it.
+    assert!(css.contains("background-color: var(--color-primary)"));
+    // The @theme directive itself is NOT emitted as raw CSS.
+    assert!(!css.contains("@theme"), "@theme directive stripped from raw output");
+}
+
+#[test]
+fn default_aihu_brand_tokens_present() {
+    let css = compile_sfc_scoped(&sfc_with_classes("bg-accent"));
+    // Default accent is the aihu terracotta.
+    assert!(css.contains("--color-accent: #c8543a"), "baked aihu brand default present: {css}");
+}

package/crates/aihu-css-core/tests/fixtures/button.ast.json

@@ -0,0 +1,19 @@
+{
+  "tag": "Button",
+  "astVersion": 1,
+  "style": null,
+  "template": [
+    {
+      "kind": "element",
+      "tag": "button",
+      "attrs": [
+        { "kind": "static", "name": "class", "value": "base" },
+        { "kind": "binding", "name": "class", "expr": "cn('btn', size)" },
+        { "kind": "macro", "name": "class:loading", "value": { "form": "curly", "expr": "busy" } },
+        { "kind": "macro", "name": "on:click", "value": { "form": "curly", "expr": "go" } }
+      ],
+      "children": [{ "kind": "text", "value": "Go" }]
+    }
+  ],
+  "meta": { "name": "Button" }
+}

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

@@ -0,0 +1,102 @@
+//! Snapshot + behavior coverage for the progressive features (Plan 3 Tasks 5–8).
+//!
+//! Asserts each feature's `@supports`/fallback contract via `compile_sfc_scoped`
+//! (the production path that routes progressive prefixes through the registry).
+
+use aihu_css_core::{compile_sfc_scoped, parse_ast};
+
+fn ast(json: &str) -> aihu_css_core::SfcAst {
+    parse_ast(json).unwrap()
+}
+
+fn sfc(classes: &str) -> aihu_css_core::SfcAst {
+    ast(&format!(
+        r#"{{"tag":"X","astVersion":1,"style":null,"meta":{{"name":"X"}},
+        "template":[{{"kind":"element","tag":"div","attrs":[
+          {{"kind":"static","name":"class","value":"{classes}"}}
+        ],"children":[]}}]}}"#
+    ))
+}
+
+// ── Task 5: view-transition: (CSS-only, no JS) ───────────────────────────────
+
+#[test]
+fn view_transition_is_supports_gated_css_only() {
+    let css = compile_sfc_scoped(&sfc("view-transition:hero"));
+    assert!(
+        css.contains("@supports (view-transition-name: none)"),
+        "view-transition gated behind @supports: {css}"
+    );
+    assert!(css.contains("view-transition-name: hero"));
+    assert!(
+        !css.contains("aihu:progressive-fallback"),
+        "view-transition is CSS-only — NO JS fallback marker: {css}"
+    );
+}
+
+#[test]
+fn view_transition_snapshot() {
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("view-transition:hero")));
+}
+
+// ── 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"));
+    assert!(
+        css.contains("@supports (anchor-name: --a)"),
+        "anchor gated behind @supports (anchor-name): {css}"
+    );
+    assert!(css.contains("anchor-name: --tooltip"));
+    assert!(
+        css.contains("aihu:progressive-fallback anchorFallback"),
+        "anchor emits a runtime-fallback marker: {css}"
+    );
+}
+
+#[test]
+fn anchor_snapshot() {
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("anchor:tooltip")));
+}
+
+// ── 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"));
+    assert!(
+        css.contains("@supports (selector(:popover-open))"),
+        "popover gated behind @supports selector(:popover-open): {css}"
+    );
+    assert!(
+        css.contains("aihu:progressive-fallback popoverFallback"),
+        "popover emits a runtime-fallback marker: {css}"
+    );
+}
+
+#[test]
+fn popover_snapshot() {
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("popover:menu")));
+}
+
+// ── Task 8: text-balance: (no gate, no JS) ───────────────────────────────────
+
+#[test]
+fn text_balance_no_gate_no_js() {
+    let css = compile_sfc_scoped(&sfc("text-balance:"));
+    assert!(css.contains("text-wrap: balance"), "emits text-wrap: balance: {css}");
+    assert!(
+        !css.contains("@supports"),
+        "text-balance has NO @supports gate (silently ignored if unsupported): {css}"
+    );
+    assert!(
+        !css.contains("aihu:progressive-fallback"),
+        "text-balance is CSS-only — NO JS fallback marker: {css}"
+    );
+}
+
+#[test]
+fn text_balance_snapshot() {
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("text-balance:")));
+}

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

@@ -0,0 +1,99 @@
+//! Scanner tests — proves the three class-forms (Static / Binding / Macro) are
+//! distinguished and that non-class macros never enter the utility set. The
+//! fixture is REAL `aihu-compile --ast-json` output (not hand-authored).
+
+use aihu_css_core::{parse_ast, scan, scan_ast, SfcAst};
+
+fn fixture_ast() -> SfcAst {
+    // From `aihu-compile --ast-json` for:
+    //   <button class="base" $class={cn('btn', size)} $class:loading={busy} $on.click={go}>Go</button>
+    parse_ast(include_str!("fixtures/button.ast.json")).unwrap()
+}
+
+#[test]
+fn extracts_static_form_a() {
+    let set = scan_ast(&fixture_ast());
+    assert!(set.contains("base"), "Form A static class missing: {set:?}");
+}
+
+#[test]
+fn extracts_binding_string_literals_form_b() {
+    let set = scan_ast(&fixture_ast());
+    assert!(set.contains("btn"), "string literal in cn('btn', size) missing");
+    assert!(!set.contains("size"), "bare identifier `size` must NOT be a utility");
+}
+
+#[test]
+fn flags_unresolved_binding_identifiers() {
+    let result = scan(&fixture_ast());
+    assert!(
+        result.unresolved.contains("size"),
+        "unresolved identifier `size` should be flagged for diagnostics: {:?}",
+        result.unresolved
+    );
+}
+
+#[test]
+fn extracts_macro_class_toggle_form_c() {
+    let set = scan_ast(&fixture_ast());
+    assert!(set.contains("loading"), "Form C $class:loading toggle missing");
+}
+
+#[test]
+fn skips_non_class_macros() {
+    // $on.click / $if must never enter the utility set.
+    let set = scan_ast(&fixture_ast());
+    assert!(
+        !set.iter().any(|c| c.contains("click") || c == "if" || c.contains("on:")),
+        "non-class macro leaked into utility set: {set:?}"
+    );
+}
+
+#[test]
+fn rejects_unsupported_ast_version() {
+    let json = r#"{"tag":"X","astVersion":2,"style":null,"template":null,"meta":{"name":"X"}}"#;
+    assert!(parse_ast(json).is_err(), "astVersion 2 must be rejected");
+}
+
+#[test]
+fn empty_template_yields_empty_set() {
+    let json = r#"{"tag":"X","astVersion":1,"style":null,"template":null,"meta":{"name":"X"}}"#;
+    let ast = parse_ast(json).unwrap();
+    assert!(scan_ast(&ast).is_empty(), "no @template → empty utility set (edge E5)");
+}
+
+#[test]
+fn skips_component_node_class_attrs_edge_e10() {
+    // A macroElement (component) node owns its own shadow scope; its class
+    // attrs must not be compiled into the parent sheet.
+    let json = r#"{
+      "tag":"Parent","astVersion":1,"style":null,"meta":{"name":"Parent"},
+      "template":[
+        {"kind":"macroElement","name":"UserCard","attrs":[
+          {"kind":"static","name":"class","value":"should-not-appear"}
+        ],"children":[
+          {"kind":"element","tag":"span","attrs":[
+            {"kind":"static","name":"class","value":"slotted-content"}
+          ],"children":[]}
+        ]}
+      ]}"#;
+    let ast = parse_ast(json).unwrap();
+    let set = scan_ast(&ast);
+    assert!(!set.contains("should-not-appear"), "component class must be skipped (E10)");
+    assert!(set.contains("slotted-content"), "child HTML element class should still scan");
+}
+
+#[test]
+fn array_binding_extracts_literals_edge_e2() {
+    // $class={['a', cond && 'b']} → 'a','b' utilities, `cond` unresolved.
+    let json = r#"{
+      "tag":"X","astVersion":1,"style":null,"meta":{"name":"X"},
+      "template":[{"kind":"element","tag":"div","attrs":[
+        {"kind":"binding","name":"class","expr":"['a', cond && 'b']"}
+      ],"children":[]}]}"#;
+    let ast = parse_ast(json).unwrap();
+    let result = scan(&ast);
+    assert!(result.utilities.contains("a"));
+    assert!(result.utilities.contains("b"));
+    assert!(result.unresolved.contains("cond"));
+}

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

@@ -0,0 +1,73 @@
+//! Snapshot coverage for scoped output + variants + @theme (Plan 2 Tasks 4–7).
+
+use aihu_css_core::{compile_classes, compile_sfc_scoped, parse_ast};
+
+fn ast(json: &str) -> aihu_css_core::SfcAst {
+    parse_ast(json).unwrap()
+}
+
+fn sfc(classes: &str) -> aihu_css_core::SfcAst {
+    ast(&format!(
+        r#"{{"tag":"X","astVersion":1,"style":null,"meta":{{"name":"X"}},
+        "template":[{{"kind":"element","tag":"div","attrs":[
+          {{"kind":"static","name":"class","value":"{classes}"}}
+        ],"children":[]}}]}}"#
+    ))
+}
+
+#[test]
+fn flat_output_for_class_list() {
+    insta::assert_snapshot!(compile_classes(&[
+        "bg-primary".to_string(),
+        "p-4".to_string()
+    ]));
+}
+
+#[test]
+fn scoped_output_for_sfc() {
+    insta::assert_snapshot!(compile_sfc_scoped(&sfc("bg-primary p-4 rounded-lg")));
+}
+
+#[test]
+fn scoped_with_authored_style_block() {
+    let json = r#"{"tag":"Card","astVersion":1,
+      "style":{"content":".inner { display: grid; gap: 1rem; }","scope":"scoped"},
+      "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)));
+}
+
+#[test]
+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)));
+}
+
+#[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"
+    )));
+}
+
+#[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"
+    )));
+}
+
+#[test]
+fn theme_default_vs_override() {
+    let default = compile_sfc_scoped(&sfc("bg-primary"));
+    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}"));
+}

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

@@ -0,0 +1,24 @@
+use aihu_css_core::compile_classes;
+
+#[test]
+fn compiles_basic_class() {
+    let output = compile_classes(&["bg-primary".to_string()]);
+    insta::assert_snapshot!(output);
+}
+
+#[test]
+fn compiles_multiple_classes() {
+    let output = compile_classes(&[
+        "bg-primary".to_string(),
+        "text-primary-foreground".to_string(),
+        "rounded-md".to_string(),
+        "p-4".to_string(),
+    ]);
+    insta::assert_snapshot!(output);
+}
+
+#[test]
+fn unknown_class_returns_empty_string() {
+    let output = compile_classes(&["this-class-does-not-exist".to_string()]);
+    assert_eq!(output, "");
+}

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

@@ -0,0 +1,26 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/progressive_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"anchor:tooltip\"))"
+---
+: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;
+}
+@supports (anchor-name: --a) {
+  .anchor\:tooltip { anchor-name: --tooltip; position-anchor: --tooltip; }
+}
+/* aihu:progressive-fallback anchorFallback (when not @supports anchor-name: --a) */

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

@@ -0,0 +1,26 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/progressive_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"popover:menu\"))"
+---
+: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;
+}
+@supports (selector(:popover-open)) {
+  .popover\:menu:popover-open { position: fixed; margin: 0; inset: auto; }
+}
+/* aihu:progressive-fallback popoverFallback (when not @supports selector(:popover-open)) */

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

@@ -0,0 +1,23 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/progressive_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"text-balance:\"))"
+---
+: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;
+}
+.text-balance { text-wrap: balance; }

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

@@ -0,0 +1,25 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/progressive_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"view-transition:hero\"))"
+---
+: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;
+}
+@supports (view-transition-name: none) {
+  .view-transition\:hero { view-transition-name: hero; }
+}

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

@@ -0,0 +1,6 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: "compile_classes(&[\"bg-primary\".to_string(), \"p-4\".to_string()])"
+---
+.bg-primary { background-color: var(--color-primary); }
+.p-4 { padding: 1rem; }

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

@@ -0,0 +1,25 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"bg-primary p-4 rounded-lg\"))"
+---
+: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;
+}
+.bg-primary { background-color: var(--color-primary); }
+.p-4 { padding: 1rem; }
+.rounded-lg { border-radius: 0.5rem; }

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

@@ -0,0 +1,26 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: compile_sfc_scoped(&ast(json))
+---
+: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;
+}
+.p-4 { padding: 1rem; }
+.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
+/* authored @style (scoped) */
+.inner { display: grid; gap: 1rem; }

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

@@ -0,0 +1,24 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: compile_sfc_scoped(&ast(json))
+---
+: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;
+}
+/* authored @style ($global — unscoped) */
+body { margin: 0; }