fix(nexu-io#6250): traverse at-rule bodies + preserve nested token refs

PerishCode CHANGES_REQUESTED on PR nexu-io#6250 — two scanner fixes:

1. Traverse supported at-rule bodies (nexu-io#6250 reviewer #1)
   stripContainerAtRuleHeaders rewrites @media/@supports/@container/
   @layer headers to '{', leaving an empty selector that swallowed the
   entire at-rule body as one rule and silently dropped every inner
   selector. iterateCssRules now recurses into the body slice on the
   empty-selector branch so inner rules surface with their real
   selectors and real bodies. extractCssSelectors reuses the same
   scanner so manifest.selectors matches manifest.groups[].selectors
   instead of falling back to the legacy regex that lost every
   selector immediately inside an at-rule.

2. Preserve nested-rule token references (nexu-io#6250 reviewer #2)
   flattenNestedBody previously tracked depth and only emitted
   declarations at depth === 0, which dropped inner-inner
   declarations two or more levels deep. The flatten now strips only
   the brace characters themselves and keeps every declaration body,
   so var(--token) references inside '& .child { & .grand { ... } }'
   attribute to the outermost ancestor instead of vanishing.

Tests: 2 new regression cases in components-manifest-6224.test.ts
covering at-rule body traversal (@media/@supports/@layer) and
multi-level nested token preservation (vitest 5/5). 251 contracts
package tests still pass. typecheck clean.

Author: xxiaoxiong

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix components manifest extractor losing every other flat CSS rule because the legacy `(?:^|[{}])\s*([^@{}][^{}]*?)\s*\{([^{}]*)\}` regex consumed each rule's closing `}` as the next rule's `[{}]` anchor. Replaced with a brace-depth scanner that also flattens one level of CSS nesting so tokens referenced inside `&:hover { ... }` attribute to the parent selector instead of leaking into a synthesised pseudo-selector. (#6224)
 - Anchor `classMatchers` to `^name(?:$|-)` so prefix-sharing classnames like `.navbar-button-thing`, `.mystatus`, `.platform-form` no longer cross-group via substring leakage. (#6224)
+- Fix components manifest extractor dropping selectors inside supported at-rule bodies (`@media` / `@supports` / `@container` / `@layer`). `stripContainerAtRuleHeaders` rewrites the at-rule header to `{`, and the brace-depth scanner now recurses into the resulting body slice so inner rules surface with their real selectors and token attribution preserved. `extractCssSelectors` reuses the same scanner so `manifest.selectors` matches `manifest.groups[].selectors` instead of falling back to a regex that lost every selector immediately inside an at-rule. (#6250)
+- Fix components manifest extractor losing token references declared inside nested-rule blocks two or more levels deep. `flattenNestedBody` now strips only the `{` / `}` brace characters and keeps every declaration body, so `var(--token)` references inside `& .child { & .grand { background: var(--c) } }` attribute to the outermost ancestor instead of being dropped. (#6250)
 
 ## [0.9.0] - 2026-05-29
 

packages/contracts/src/design-systems/components-manifest.ts

@@ -260,16 +260,29 @@ function extractStyleBlocks(html: string): string[] {
 function extractCssSelectors(css: string): string[] {
   const selectors = new Set<string>();
   const commentlessCss = stripContainerAtRuleHeaders(stripCssComments(css));
-  const selectorPattern = /(?:^|[{}])\s*([^@{}][^{}]*?)\s*\{/g;
-  let match: RegExpExecArray | null;
 
-  while ((match = selectorPattern.exec(commentlessCss)) !== null) {
-    const rawSelectorList = match[1]?.trim();
-    if (rawSelectorList == null || rawSelectorList.length === 0) continue;
-    if (rawSelectorList.includes(':root')) continue;
-    if (/^(?:from|to|\d+(?:\.\d+)?%)$/i.test(rawSelectorList)) continue;
+  // The legacy `(?:^|[{}])\s*([^@{}][^{}]*?)\s*\{` regex anchored each
+  // rule at the *previous* rule's closing `}`, so half the flat rules in
+  // a sheet were silently dropped (#6224 part 1). It also mis-handled
+  // supported at-rule bodies: after `stripContainerAtRuleHeaders` turns
+  // `@media ... {` into `{`, the regex sees `{ \n .inside { ... }` and
+  // the bare `[^@{}]` exclusion rejects the inner selector — silent loss
+  // of every selector immediately inside an at-rule (#6250 reviewer #1).
+  //
+  // Reuse the brace-depth scanner that already powers
+  // `extractSelectorTokenReferences` — it walks the CSS character-by-character
+  // and recursively descends into supported at-rule bodies so inner
+  // selectors surface with their real selectors preserved.
+  for (const { selectorList } of iterateCssRules(commentlessCss)) {
+    if (selectorList.length === 0) continue;
+    if (selectorList.includes(':root')) continue;
+    if (/^(?:from|to|\d+(?:\.\d+)?%)$/i.test(selectorList)) continue;
+    // Skip supported at-rule headers — they survived the strip pass because
+    // the body wasn't processed by stripContainerAtRuleHeaders (e.g. nested
+    // recursion landed on `@media`). At-rules never contribute a *selector*.
+    if (selectorList.startsWith('@')) continue;
 
-    for (const selector of splitSelectorList(rawSelectorList)) {
+    for (const selector of splitSelectorList(selectorList)) {
       const normalized = normalizeSelector(selector);
       if (normalized.length > 0 && !normalized.startsWith('@')) {
         selectors.add(normalized);
@@ -375,9 +388,29 @@ function iterateCssRules(css: string): CssRule[] {
     // Extract outer-body declarations, stripping nested `{ ... }` blocks
     // (their inner declarations are folded in via a recursive flatten so
     // tokens referenced inside `&:hover { background: var(--x) }` count
-    // toward `.parent`).
-    const body = flattenNestedBody(css.slice(bodyStart, bodyEnd));
-    if (selectorList.length > 0) {
+    // toward `.parent`). flattenNestedBody recursively folds nested-block
+    // inner declarations — including declarations nested *two or more*
+    // levels deep — so `& .child { & .grand { background: var(--c) } }`
+    // contributes --c to the outermost ancestor (PR #6250 reviewer #2).
+    const bodySlice = css.slice(bodyStart, bodyEnd);
+    const body = flattenNestedBody(bodySlice);
+
+    if (selectorList.length === 0) {
+      // Empty selector — the at-rule header (`@media`/`@supports`/
+      // `@container`/`@layer`) was stripped to '{' by
+      // stripContainerAtRuleHeaders before this scanner ran. The outermost
+      // `{` after stripping opens an empty selector; we must NOT push it as
+      // a rule (that would swallow the whole at-rule body as one giant
+      // "rule" and lose every inner selector). Instead recurse into the
+      // body slice so inner rules are emitted with their real selectors
+      // and real bodies (PR #6250 reviewer #1).
+      rules.push(...iterateCssRules(bodySlice));
+    } else if (!selectorList.startsWith('@') || isSupportedAtRuleHeader(selectorList)) {
+      // Ordinary selector, or a supported at-rule header that survived the
+      // strip pass (e.g. recursive call landed on `@media` whose header was
+      // not stripped because the parent body wasn't processed by
+      // stripContainerAtRuleHeaders). Push it as-is; the body still has
+      // nested-block declarations flattened into it.
       rules.push({ selectorList, body });
     }
     index = bodyEnd + 1;
@@ -389,15 +422,33 @@ function iterateCssRules(css: string): CssRule[] {
   return rules;
 }
 
+// Supported at-rule headers whose bodies contain ordinary CSS rules whose
+// selectors + bodies must be enumerated (PR #6250 reviewer #1). Other
+// at-rules (@keyframes, @font-face, @page, @import, @namespace, @charset)
+// have bodies that are NOT ordinary rule trees — we treat them as opaque
+// declaration blocks and do not descend into them via the conditional
+// recursion in iterateCssRules.
+function isSupportedAtRuleHeader(selectorList: string): boolean {
+  return /^@(?:media|supports|container|layer)\b/i.test(selectorList);
+}
+
 function flattenNestedBody(bodySlice: string): string {
   // For `.parent { color: var(--a); &:hover { background: var(--b); } }` we
   // receive the inner slice `color: var(--a); &:hover { background: var(--b); } `
   // and want to emit `color: var(--a); background: var(--b); ` so both tokens
   // attribute to `.parent`. We strip the nested `{ ... }` wrapper but keep
   // its inner declarations, dropping the `&:hover` selector prefix — the
   // parent already owns the tokens.
+  //
+  // The flatten is *recursive*: declarations nested two or more levels
+  // deep (`& .child { & .grand { background: var(--c) } }`) still fold
+  // into the outermost ancestor, so the inner-inner `var(--c)` is counted
+  // for `.parent` rather than dropped (PR #6250 reviewer #2). We walk the
+  // body slice, dropping only the `{` / `}` brace characters themselves
+  // and the nested-rule *selector prefix* between `{` and the next `{`/`;`
+  // — but keeping every declaration body so all `var(--token)` references
+  // at every depth survive on the outermost rule.
   let out = '';
-  let depth = 0;
   let cursor = 0;
   const length = bodySlice.length;
   while (cursor < length) {
@@ -407,19 +458,17 @@ function flattenNestedBody(bodySlice: string): string {
       cursor = closeIdx === -1 ? length : closeIdx + 2;
       continue;
     }
-    if (char === '{') {
-      depth += 1;
-      cursor += 1;
-      continue;
-    }
-    if (char === '}') {
-      depth = Math.max(0, depth - 1);
+    if (char === '{' || char === '}') {
+      // Drop the brace; keep scanning. We deliberately do NOT skip the
+      // nested-rule selector prefix between '{' and the next declaration
+      // — that prefix (e.g. `&:hover`) is just text with no `var(--token)`
+      // references, and if it did contain a var() we'd want to surface it
+      // on the outer selector anyway (rare in practice). Stripping only
+      // the braces gives us full-depth folding with O(n) cost.
       cursor += 1;
       continue;
     }
-    if (depth === 0) {
-      out += char;
-    }
+    out += char;
     cursor += 1;
   }
   return out;

packages/contracts/tests/components-manifest-6224.test.ts

@@ -104,4 +104,136 @@ describe('components manifest extraction (#6224 regression suite)', () => {
     // `/^form(?:$|-)/i` rejects it.
     expect(inputsClasses).not.toContain('platform-form');
   });
+
+  it('keeps traversing supported at-rule bodies for token attribution (#6250 reviewer #1)', () => {
+    // PerishCode CHANGES_REQUESTED on PR #6250:
+    //   "keep traversing supported at-rule bodies for token attribution"
+    //
+    // The current scanner replaces `@media ... {` with `{` (via
+    // stripContainerAtRuleHeaders) and then treats everything inside the
+    // at-rule as one giant body of the *empty* selector that opened the
+    // at-rule. Rules inside `@media`/`@supports`/`@container`/`@layer`
+    // therefore lose their selector + token attribution — every selector
+    // inside `@media (min-width: 600px) { .inside-media { color: var(--bg) } }`
+    // is silently dropped, and the inner rule's token references are lost entirely.
+    //
+    // The fix: the scanner must descend into supported at-rule bodies and
+    // emit the inner rules with their real selectors preserved.
+    //
+    // We use `.btn-*` selectors so the inner rules land in the buttons group,
+    // where we can assert both the selector survival and token attribution.
+    const manifest = extractComponentsManifest({
+      brandId: 'at-rule',
+      tokensCss: ':root { --bg: #fff; --fg: #000; }',
+      fixtureHtml: `
+        <style>
+          .btn-outside { color: var(--fg); }
+          @media (min-width: 600px) {
+            .btn-inside-media { background: var(--bg); }
+            .btn-inside-media-two { border-color: var(--fg); }
+          }
+          @supports (display: grid) {
+            .btn-inside-supports { color: var(--fg); }
+          }
+          @layer framework {
+            .btn-inside-layer { background: var(--bg); }
+          }
+        </style>
+        <button class="btn-outside btn-inside-media btn-inside-media-two btn-inside-supports btn-inside-layer">x</button>
+      `,
+    });
+
+    expect(manifest.selectors).toEqual(
+      expect.arrayContaining([
+        '.btn-outside',
+        '.btn-inside-media',
+        '.btn-inside-media-two',
+        '.btn-inside-supports',
+        '.btn-inside-layer',
+      ]),
+    );
+    // Inner rules keep their token attribution, not lost to the at-rule wrapper.
+    const buttonsGroup = manifest.groups.find((g) => g.id === 'buttons');
+    expect(buttonsGroup?.selectors).toEqual(
+      expect.arrayContaining([
+        '.btn-outside',
+        '.btn-inside-media',
+        '.btn-inside-media-two',
+        '.btn-inside-supports',
+        '.btn-inside-layer',
+      ]),
+    );
+    // .btn-inside-media carries --bg, .btn-inside-media-two carries --fg.
+    expect(buttonsGroup?.tokenReferences).toEqual(
+      expect.arrayContaining(['--bg', '--fg']),
+    );
+  });
+
+  it('preserves nested-rule token references so the parent group receives outer and nested tokens (#6250 reviewer #2)', () => {
+    // PerishCode CHANGES_REQUESTED on PR #6250:
+    //   "preserve nested-rule token references so the parent group receives
+    //    both outer and nested tokens"
+    //
+    // When a rule has BOTH outer declarations AND a nested block, the
+    // resulting parent-group entry must include both the outer-body tokens
+    // AND the nested-block tokens (no silent loss of nested-only tokens).
+    // The minimal failing case: `.btn-parent { color: var(--outer); &:focus { background: var(--inner); } }`.
+    // We use `.btn-parent` so the selector lands in the buttons group, where
+    // we can assert both tokens end up on the same group entry.
+    const manifest = extractComponentsManifest({
+      brandId: 'nested-both',
+      tokensCss: ':root { --outer: red; --inner: blue; }',
+      fixtureHtml: `
+        <style>
+          .btn-parent {
+            color: var(--outer);
+            &:focus {
+              background: var(--inner);
+            }
+          }
+        </style>
+        <button class="btn-parent">x</button>
+      `,
+    });
+
+    expect(manifest.selectors).toEqual(['.btn-parent']);
+    const buttonsGroup = manifest.groups.find((g) => g.id === 'buttons');
+    expect(buttonsGroup?.selectors).toContain('.btn-parent');
+    expect(buttonsGroup?.tokenReferences).toEqual(
+      expect.arrayContaining(['--inner', '--outer']),
+    );
+
+    // Deeper nesting: an `.btn-ancestor` rule wraps two levels of CSS nesting.
+    // All three tokens (--a / --b / --c) must end up on the buttons group,
+    // proving nested-rule token references are preserved at every depth —
+    // not just the first nesting level.
+    const deep = extractComponentsManifest({
+      brandId: 'nested-deep',
+      tokensCss: ':root { --a: red; --b: green; --c: blue; }',
+      fixtureHtml: `
+        <style>
+          .btn-ancestor {
+            color: var(--a);
+            & .descendant {
+              color: var(--b);
+              & .granddesc {
+                background: var(--c);
+              }
+            }
+          }
+        </style>
+        <button class="btn-ancestor">
+          <span class="descendant">
+            <span class="granddesc">x</span>
+          </span>
+        </button>
+      `,
+    });
+    expect(deep.selectors).toContain('.btn-ancestor');
+    const deepButtons = deep.groups.find((g) => g.id === 'buttons');
+    expect(deepButtons?.selectors).toContain('.btn-ancestor');
+    expect(deepButtons?.tokenReferences).toEqual(
+      expect.arrayContaining(['--a', '--b', '--c']),
+    );
+  });
 });