@aihu/css-engine 0.2.4 → 0.3.0

package/crates/aihu-css-core/src/variants.rs

@@ -40,6 +40,43 @@ pub enum Variant {
     Breakpoint(String),
     /// `[&>div]:` arbitrary selector → native nesting (`& > div`).
     ArbitrarySelector(String),
+
+    // ── relational (group / peer) ────────────────────────────────────────────
+    /// `group-hover:`, `group-focus:`, `group-focus-visible:`, `group-active:`,
+    /// `group-disabled:` → ancestor-state selector
+    /// (`.group:<state> <base>`). The `Option<String>` is the ancestor state
+    /// pseudo-class. A bare `group` (no state) is NOT a variant prefix — it is a
+    /// marker utility (see `tokens::fixed_utility`) applied directly to the
+    /// ancestor element; this arm only ever carries `Some(state)`.
+    Group(Option<String>),
+    /// `peer-hover:`, `peer-focus:`, `peer-focus-visible:`, `peer-checked:`,
+    /// `peer-disabled:` → previous-sibling-state selector
+    /// (`.peer:<state> ~ <base>`). As with [`Variant::Group`], the bare `peer`
+    /// marker is a utility, not a prefix; this arm only carries `Some(state)`.
+    Peer(Option<String>),
+
+    // ── attribute / container (round 2) ───────────────────────────────────────
+    /// `aria-checked:` → `&[aria-checked="true"]` (keyword form, implicit
+    /// `="true"`). `aria-[expanded=false]:` carries an explicit `name=value`
+    /// payload → `&[aria-expanded="false"]`.
+    Aria(AttrMatch),
+    /// `data-[state=open]:` → `&[data-state="open"]` (bracket payload
+    /// `name=value`). `data-active:` (keyword) → `&[data-active]` (presence).
+    Data(AttrMatch),
+    /// Container-query breakpoint variant: `@sm:`/`@md:`/`@lg:`/`@xl:`/`@2xl:`
+    /// → `@container (min-width: …)`. Wraps the rule like `Breakpoint`, but in
+    /// an `@container` at-rule instead of `@media`.
+    Container(String),
+}
+
+/// An attribute-selector match payload for `aria-*` / `data-*` variants.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum AttrMatch {
+    /// `aria-checked` → `[aria-checked="true"]` (aria) or `[data-active]`
+    /// presence (data). The bool records whether to imply `="true"`.
+    Name { name: String, imply_true: bool },
+    /// Explicit `name=value` → `[<full>-name="value"]`.
+    NameValue { name: String, value: String },
 }
 
 impl Variant {
@@ -111,14 +148,78 @@ fn parse_prefix(prefix: &str) -> Option<Variant> {
         "hover" | "focus" | "focus-visible" | "active" | "disabled" | "visited"
         | "checked" => Variant::Pseudo(prefix.to_string()),
         "sm" | "md" | "lg" | "xl" | "2xl" => Variant::Breakpoint(prefix.to_string()),
+        // Container-query breakpoints: `@sm`/`@md`/`@lg`/`@xl`/`@2xl`.
+        "@sm" | "@md" | "@lg" | "@xl" | "@2xl" => {
+            Variant::Container(prefix[1..].to_string())
+        }
         _ => {
             if let Some(tag) = prefix.strip_prefix("slotted-") {
                 Variant::SlottedTag(tag.to_string())
             } else if let Some(name) = prefix.strip_prefix("part-") {
                 Variant::Part(name.to_string())
+            } else if let Some(state) = group_state(prefix) {
+                Variant::Group(state)
+            } else if let Some(state) = peer_state(prefix) {
+                Variant::Peer(state)
+            } else if let Some(payload) = prefix.strip_prefix("aria-") {
+                Variant::Aria(parse_attr_match(payload, true))
+            } else if let Some(payload) = prefix.strip_prefix("data-") {
+                // data-* never implies `="true"`: bare `data-active` is a
+                // presence selector `[data-active]`.
+                Variant::Data(parse_attr_match(payload, false))
             } else {
                 return None;
             }
         }
     })
 }
+
+/// States a `group-*:` prefix may carry. Returns `Some(Some(state))` when
+/// `prefix` is a recognized `group-<state>` form. (`group` alone is a marker
+/// utility, not a variant — so it is NOT matched here.)
+fn group_state(prefix: &str) -> Option<Option<String>> {
+    let state = prefix.strip_prefix("group-")?;
+    relational_state(state).map(Some)
+}
+
+/// States a `peer-*:` prefix may carry. See [`group_state`].
+fn peer_state(prefix: &str) -> Option<Option<String>> {
+    let state = prefix.strip_prefix("peer-")?;
+    relational_state(state).map(Some)
+}
+
+/// The closed set of states `group-*:` / `peer-*:` accept. They map 1:1 to a
+/// pseudo-class on the ancestor / previous-sibling marker element.
+fn relational_state(state: &str) -> Option<String> {
+    matches!(
+        state,
+        "hover" | "focus" | "focus-visible" | "active" | "disabled" | "checked"
+    )
+    .then(|| state.to_string())
+}
+
+/// Parse the payload after `aria-`/`data-` into an [`AttrMatch`].
+///
+/// Two shapes:
+/// - `checked` (keyword) → `Name { name: "checked", imply_true }`.
+/// - `[state=open]` (bracket, from `data-[state=open]`) → `NameValue`. The
+///   bracket-aware splitter in [`split_variants`] keeps the `[...]` attached to
+///   the prefix, so the payload arrives here as `[state=open]`.
+fn parse_attr_match(payload: &str, imply_true: bool) -> AttrMatch {
+    // Strip an outer `[...]` if present (arbitrary form).
+    let inner = payload
+        .strip_prefix('[')
+        .and_then(|s| s.strip_suffix(']'))
+        .unwrap_or(payload);
+    if let Some((name, value)) = inner.split_once('=') {
+        AttrMatch::NameValue {
+            name: name.trim().to_string(),
+            value: value.trim().trim_matches('"').to_string(),
+        }
+    } else {
+        AttrMatch::Name {
+            name: inner.trim().to_string(),
+            imply_true,
+        }
+    }
+}

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

@@ -122,6 +122,72 @@ fn stacked_variants_md_hover() {
     assert!(css.contains(":hover"));
 }
 
+// ── Round 2: group / peer relational variants ────────────────────────────────
+
+#[test]
+fn group_hover_emits_ancestor_state_selector() {
+    let css = compile_sfc_scoped(&sfc_with_classes("group-hover:bg-primary"));
+    // Ancestor descendant-combinator: `.group:hover .group-hover\:bg-primary`.
+    assert!(
+        css.contains(".group:hover .group-hover\\:bg-primary"),
+        "group-hover: → `.group:hover <base>` ancestor selector: {css}"
+    );
+    assert!(css.contains("background-color: var(--color-primary)"));
+}
+
+#[test]
+fn group_focus_variants_emit_each_state() {
+    for (cls, sel) in [
+        ("group-focus:bg-primary", ".group:focus "),
+        ("group-focus-visible:bg-primary", ".group:focus-visible "),
+        ("group-active:bg-primary", ".group:active "),
+        ("group-disabled:bg-primary", ".group:disabled "),
+    ] {
+        let css = compile_sfc_scoped(&sfc_with_classes(cls));
+        assert!(css.contains(sel), "{cls} → `{sel}` prefix: {css}");
+    }
+}
+
+#[test]
+fn peer_checked_emits_sibling_state_selector() {
+    let css = compile_sfc_scoped(&sfc_with_classes("peer-checked:bg-primary"));
+    // Subsequent-sibling combinator: `.peer:checked ~ .peer-checked\:bg-primary`.
+    assert!(
+        css.contains(".peer:checked ~ .peer-checked\\:bg-primary"),
+        "peer-checked: → `.peer:checked ~ <base>` sibling selector: {css}"
+    );
+    assert!(css.contains("background-color: var(--color-primary)"));
+}
+
+#[test]
+fn peer_state_variants_emit_each_state() {
+    for (cls, sel) in [
+        ("peer-hover:bg-primary", ".peer:hover ~ "),
+        ("peer-focus:bg-primary", ".peer:focus ~ "),
+        ("peer-focus-visible:bg-primary", ".peer:focus-visible ~ "),
+        ("peer-disabled:bg-primary", ".peer:disabled ~ "),
+    ] {
+        let css = compile_sfc_scoped(&sfc_with_classes(cls));
+        assert!(css.contains(sel), "{cls} → `{sel}` prefix: {css}");
+    }
+}
+
+#[test]
+fn bare_group_and_peer_markers_emit_empty_rules() {
+    let css = compile_sfc_scoped(&sfc_with_classes("group peer"));
+    // Markers survive as empty-body rules so the relational selectors resolve.
+    assert!(css.contains(".group {"), "bare `group` marker kept: {css}");
+    assert!(css.contains(".peer {"), "bare `peer` marker kept: {css}");
+}
+
+#[test]
+fn group_peer_stack_with_responsive() {
+    // `md:group-hover:bg-primary` — breakpoint wraps the relational rule.
+    let css = compile_sfc_scoped(&sfc_with_classes("md:group-hover:bg-primary"));
+    assert!(css.contains("@media (min-width:"), "breakpoint wrapper: {css}");
+    assert!(css.contains(".group:hover "), "relational selector inside media: {css}");
+}
+
 // ── Task 7: @theme directive ─────────────────────────────────────────────────
 
 #[test]
@@ -146,3 +212,145 @@ fn default_aihu_brand_tokens_present() {
     // Default accent is the aihu terracotta.
     assert!(css.contains("--color-accent: #c8543a"), "baked aihu brand default present: {css}");
 }
+
+// ── Round 2: aria-* / data-* attribute variants ─────────────────────────────
+
+#[test]
+fn aria_keyword_variant_emits_true_attr_selector() {
+    let css = compile_sfc_scoped(&sfc_with_classes("aria-checked:bg-accent"));
+    assert!(
+        css.contains(r#"[aria-checked="true"]"#),
+        "aria-checked: → [aria-checked=\"true\"] selector: {css}"
+    );
+    assert!(css.contains("background-color: var(--color-accent)"));
+}
+
+#[test]
+fn aria_expanded_variant() {
+    let css = compile_sfc_scoped(&sfc_with_classes("aria-expanded:underline"));
+    assert!(
+        css.contains(r#"[aria-expanded="true"]"#),
+        "aria-expanded: → [aria-expanded=\"true\"]: {css}"
+    );
+    assert!(css.contains("text-decoration-line: underline"));
+}
+
+#[test]
+fn aria_disabled_selected_pressed_variants() {
+    for (cls, attr) in [
+        ("aria-disabled:opacity-50", r#"[aria-disabled="true"]"#),
+        ("aria-selected:bg-primary", r#"[aria-selected="true"]"#),
+        ("aria-pressed:bg-accent", r#"[aria-pressed="true"]"#),
+    ] {
+        let css = compile_sfc_scoped(&sfc_with_classes(cls));
+        assert!(css.contains(attr), "{cls} → {attr}: {css}");
+    }
+}
+
+#[test]
+fn aria_arbitrary_value_variant() {
+    let css = compile_sfc_scoped(&sfc_with_classes("aria-[expanded=false]:underline"));
+    assert!(
+        css.contains(r#"[aria-expanded="false"]"#),
+        "aria-[expanded=false]: → [aria-expanded=\"false\"]: {css}"
+    );
+}
+
+#[test]
+fn data_state_variant_emits_attr_selector() {
+    let css = compile_sfc_scoped(&sfc_with_classes("data-[state=open]:bg-accent"));
+    assert!(
+        css.contains(r#"[data-state="open"]"#),
+        "data-[state=open]: → [data-state=\"open\"] selector: {css}"
+    );
+    assert!(css.contains("background-color: var(--color-accent)"));
+}
+
+#[test]
+fn data_keyword_variant_is_presence_selector() {
+    // Bare `data-active:` is a presence selector (no implicit ="true").
+    let css = compile_sfc_scoped(&sfc_with_classes("data-active:underline"));
+    assert!(
+        css.contains("[data-active]"),
+        "data-active: → [data-active] presence selector: {css}"
+    );
+    assert!(!css.contains(r#"[data-active="true"]"#));
+}
+
+// ── Round 2: container queries (@container) ──────────────────────────────────
+
+#[test]
+fn container_marker_sets_container_type() {
+    let css = compile_sfc_scoped(&sfc_with_classes("@container"));
+    assert!(
+        css.contains("container-type: inline-size"),
+        "@container marker → container-type: inline-size: {css}"
+    );
+}
+
+#[test]
+fn named_container_marker_sets_type_and_name() {
+    let css = compile_sfc_scoped(&sfc_with_classes("@container/sidebar"));
+    assert!(css.contains("container-type: inline-size"), "{css}");
+    assert!(
+        css.contains("container-name: sidebar"),
+        "@container/sidebar → container-name: sidebar: {css}"
+    );
+}
+
+#[test]
+fn container_md_wraps_rule_in_container_at_rule() {
+    let css = compile_sfc_scoped(&sfc_with_classes("@md:flex"));
+    assert!(
+        css.contains("@container (min-width:"),
+        "@md: → @container (min-width: ...): {css}"
+    );
+    // Container scale differs from the viewport breakpoint scale (md = 28rem).
+    assert!(css.contains("28rem"), "container @md = 28rem: {css}");
+    assert!(css.contains("display: flex"));
+    // Must NOT be an @media rule.
+    assert!(!css.contains("@media"), "@md: is a container query, not @media: {css}");
+}
+
+#[test]
+fn container_sm_lg_scale() {
+    let sm = compile_sfc_scoped(&sfc_with_classes("@sm:block"));
+    assert!(sm.contains("@container (min-width: 24rem)"), "@sm = 24rem: {sm}");
+    let lg = compile_sfc_scoped(&sfc_with_classes("@lg:hidden"));
+    assert!(lg.contains("@container (min-width: 32rem)"), "@lg = 32rem: {lg}");
+}
+
+#[test]
+fn container_parent_and_child_pair() {
+    // A @container parent + @md:flex child — the proven user-visible pattern.
+    let json = r#"{"tag":"X","astVersion":1,"style":null,"meta":{"name":"X"},
+      "template":[{"kind":"element","tag":"div","attrs":[
+        {"kind":"static","name":"class","value":"@container"}],
+        "children":[{"kind":"element","tag":"div","attrs":[
+          {"kind":"static","name":"class","value":"@md:flex"}],"children":[]}]}]}"#;
+    let css = compile_sfc_scoped(&ast(json));
+    assert!(css.contains("container-type: inline-size"), "{css}");
+    assert!(css.contains("@container (min-width: 28rem)"), "{css}");
+}
+
+// ── Over-implementation probe: no spurious rules for unknown base utilities ──
+
+#[test]
+fn aria_data_without_known_base_emits_nothing() {
+    // Unknown base utility behind an aria/data variant must not emit a rule.
+    let css = compile_sfc_scoped(&sfc_with_classes(
+        "aria-checked:notathing data-[state=open]:alsonope @md:bogus",
+    ));
+    assert!(
+        !css.contains("[aria-checked"),
+        "no aria selector for unknown base: {css}"
+    );
+    assert!(
+        !css.contains("[data-state"),
+        "no data selector for unknown base: {css}"
+    );
+    assert!(
+        !css.contains("@container"),
+        "no container at-rule for unknown base: {css}"
+    );
+}

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

@@ -46,6 +46,38 @@ fn scoped_with_global_style_block() {
     insta::assert_snapshot!(compile_sfc_scoped(&ast(json)));
 }
 
+#[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")));
+}
+
+#[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")));
+}
+
+#[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")));
+}
+
+#[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"
+    )));
+}
+
 #[test]
 fn wc_native_variants() {
     insta::assert_snapshot!(compile_sfc_scoped(&sfc(
@@ -69,5 +101,7 @@ fn theme_default_vs_override() {
       "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}"));
+    insta::assert_snapshot!(format!(
+        "--- default ---\n{default}\n--- override ---\n{overridden}"
+    ));
 }

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
+assertion_line: 61
+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;
+}
+.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,23 @@
+---
+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;
+}
+.divide-y-2 { & > * + * { border-block-width: 2px; } }

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

@@ -0,0 +1,23 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+expression: "compile_sfc_scoped(&sfc(\"space-y-4\"))"
+---
+: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;
+}
+.space-y-4 { & > * + * { margin-block-start: 1rem; } }

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

@@ -0,0 +1,26 @@
+---
+source: packages/css-engine/crates/aihu-css-core/tests/scoped_snapshot.rs
+assertion_line: 67
+expression: "compile_sfc_scoped(&sfc(\"transition-transform duration-300 hover:scale-105\"))"
+---
+: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;
+}
+.duration-300 { transition-duration: 300ms; }
+.hover\:scale-105:hover { transform: scale(1.05); }
+.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }