fix(nexu-io#6250): make opening-brace scan quote-aware for selectors

PerishCode CHANGES_REQUESTED on PR nexu-io#6250 (round 4):
  "Make the opening-brace search quote-aware too. The new quote state
   begins only after  has already selected an
   opener, so a valid selector such as  treats the brace inside the attribute value as the rule
   boundary. ...  is , and the Buttons group has
   no selectors or token references, so both rules are lost."

The previous opener lookup used , which finds
the first  byte with no lexical context. A quoted  inside a
selector — e.g.  — was therefore selected as
the rule opener, leaving the closing  of the same attribute value as
the body's first  and  as a corrupt
selectorList. The body scanner then ran with mismatched braces and
emitted zero rules.

Fix: replace the  lookup with a quote-aware scan that mirrors
the closing-brace scanner's lexical handling. The scan walks from
, tracking single / double quote state plus backslash escapes,
and skips  /  that appear inside a quoted string (also skipping
 comments defensively). The first un-quoted  found is the
real rule-body opener.

Coverage: add a regression suite at
packages/contracts/tests/components-manifest-6250-quoted-selector.test.ts
covering both double- and single-quoted attribute selectors that
contain a . Each case pairs the quoted-brace selector with a
trailing flat rule and asserts both selectors plus their --a / --b
attribution survive on the buttons group.

Local verification:
- pnpm --filter @open-design/contracts vitest run
  tests/components-manifest-6250-quoted-selector.test.ts -> 2/2 pass
- pnpm --filter @open-design/contracts test -> 254/254 pass
- pnpm --filter @open-design/contracts typecheck -> clean

Author: xxiaoxiong

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

@@ -342,7 +342,52 @@ function iterateCssRules(css: string): CssRule[] {
     // Find the next '{' that opens a rule body. Skip '@container' at-rule
     // bodies (their inner rules are emitted with the at-rule header stripped,
     // matching stripContainerAtRuleHeaders behaviour).
-    const openIndex = css.indexOf('{', index);
+    //
+    // Quote-aware scan (PR #6250 reviewer #4): a `{` that appears inside a
+    // quoted selector context — e.g. `.btn-a[data-icon="{"]` — must NOT be
+    // treated as the rule opener. We walk from `index` tracking single /
+    // double quote state and backslash escapes, ignoring `{` / `}` that
+    // appear inside a quoted string, so the first un-quoted `{` we find is
+    // the real rule-body opener. Without this, valid CSS such as
+    // `.btn-a[data-icon="{"] { color: var(--a); }` mistreats the brace
+    // inside the attribute value as the opener and `manifest.selectors`
+    // silently drops both rules.
+    let openIndex = -1;
+    let quoteScan = index;
+    let inQuote: '"' | "'" | null = null;
+    while (quoteScan < length) {
+      const ch = css[quoteScan];
+      if (ch === '/' && css[quoteScan + 1] === '*') {
+        // Skip a /* ... */ comment block so braces inside comments do not
+        // perturb the quote scan.
+        const closeIdx = css.indexOf('*/', quoteScan + 2);
+        quoteScan = closeIdx === -1 ? length : closeIdx + 2;
+        continue;
+      }
+      if (inQuote !== null) {
+        if (ch === '\\') {
+          quoteScan += 2;
+          continue;
+        }
+        if (ch === inQuote) {
+          inQuote = null;
+          quoteScan += 1;
+          continue;
+        }
+        quoteScan += 1;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        inQuote = ch;
+        quoteScan += 1;
+        continue;
+      }
+      if (ch === '{') {
+        openIndex = quoteScan;
+        break;
+      }
+      quoteScan += 1;
+    }
     if (openIndex === -1) break;
 
     const selectorList = css.slice(index, openIndex).trim();
@@ -360,7 +405,7 @@ function iterateCssRules(css: string): CssRule[] {
     // Track the open CSS quote (single or double) so braces inside a
     // quoted value such as `content: "}"` are not mistaken for the rule
     // terminator (PR #6250 reviewer #3). null = outside any quoted string.
-    let inQuote: '"' | "'" | null = null;
+    let bodyInQuote: '"' | "'" | null = null;
     while (cursor < length) {
       const char = css[cursor];
       if (char === '/' && css[cursor + 1] === '*') {
@@ -377,14 +422,14 @@ function iterateCssRules(css: string): CssRule[] {
       // ignore `{` / `}` that appear between a pair of quotes. Handle
       // escaped quotes \" and \' so a `}` preceded by \" doesn't escape
       // the quoted context.
-      if (inQuote === '"' || inQuote === "'") {
+      if (bodyInQuote === '"' || bodyInQuote === "'") {
         if (char === '\\') {
           // Skip the escaped character (could be \" or \' or any escape).
           cursor += 2;
           continue;
         }
-        if (char === inQuote) {
-          inQuote = null;
+        if (char === bodyInQuote) {
+          bodyInQuote = null;
           cursor += 1;
           continue;
         }
@@ -394,7 +439,7 @@ function iterateCssRules(css: string): CssRule[] {
         continue;
       }
       if (char === '"' || char === "'") {
-        inQuote = char;
+        bodyInQuote = char;
         cursor += 1;
         continue;
       }

packages/contracts/tests/components-manifest-6250-quoted-selector.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+
+import { extractComponentsManifest } from '../src/design-systems/components-manifest.js';
+
+describe('quoted braces in selectors (#6250 reviewer #4)', () => {
+  it('treats braces inside quoted attribute selectors as data, not rule openers', () => {
+    // PerishCode CHANGES_REQUESTED on PR #6250:
+    //   "Make the opening-brace search quote-aware too. The new quote state
+    //    begins only after `css.indexOf('{', index)` has already selected an
+    //    opener, so a valid selector such as `.btn-a[data-icon="{"] { color:
+    //    var(--a); }` treats the brace inside the attribute value as the rule
+    //    boundary. ... manifest.selectors is `[]`, and the Buttons group has
+    //    no selectors or token references ..."
+    //
+    // The fix: scan for the opening delimiter with the same single-quote,
+    // double-quote, and escape state used for the closing delimiter. A
+    // `{` / `}` that appears inside a quoted attribute selector (or any
+    // other quoted selector context) must not terminate the selector scan.
+    const manifest = extractComponentsManifest({
+      brandId: 'quoted-selector-brace',
+      tokensCss: ':root { --a: red; --b: blue; }',
+      fixtureHtml: `
+        <style>
+          .btn-a[data-icon="{"] { color: var(--a); }
+          .btn-b { color: var(--b); }
+        </style>
+        <button class="btn-a btn-b">x</button>
+      `,
+    });
+
+    expect(manifest.selectors).toEqual(
+      expect.arrayContaining(['.btn-a[data-icon="{"]', '.btn-b']),
+    );
+    const buttonsGroup = manifest.groups.find((g) => g.id === 'buttons');
+    expect(buttonsGroup?.selectors).toEqual(
+      expect.arrayContaining(['.btn-a[data-icon="{"]', '.btn-b']),
+    );
+    expect(buttonsGroup?.tokenReferences).toEqual(
+      expect.arrayContaining(['--a', '--b']),
+    );
+  });
+
+  it('treats braces inside single-quoted attribute selectors as data', () => {
+    // Same shape, single-quoted variant. Selector `.btn-a[data-icon='{']`
+    // must NOT be split at the `{` inside the attribute.
+    const manifest = extractComponentsManifest({
+      brandId: 'quoted-selector-brace-single',
+      tokensCss: ':root { --a: red; --b: blue; }',
+      fixtureHtml: `
+        <style>
+          .btn-a[data-icon='{'] { color: var(--a); }
+          .btn-b { color: var(--b); }
+        </style>
+        <button class="btn-a btn-b">x</button>
+      `,
+    });
+
+    // The selector is preserved verbatim — single quotes stay single,
+    // double quotes stay double. We assert the single-quoted form here.
+    expect(manifest.selectors).toEqual(
+      expect.arrayContaining([".btn-a[data-icon='{']", '.btn-b']),
+    );
+    const buttonsGroup = manifest.groups.find((g) => g.id === 'buttons');
+    expect(buttonsGroup?.selectors).toEqual(
+      expect.arrayContaining([".btn-a[data-icon='{']", '.btn-b']),
+    );
+    expect(buttonsGroup?.tokenReferences).toEqual(
+      expect.arrayContaining(['--a', '--b']),
+    );
+  });
+});