fix(nexu-io#6250): preserve quoted braces in CSS values when flattening nesting

flattenNestedBody now tracks an inQuote state ('"'/"'/null) plus
backslash escapes so that braces inside a quoted value such as
`content: "}"` are preserved as data instead of being treated as
rule terminators. This addresses reviewer feedback on PR nexu-io#6250
(round 3): without the state, the brace scanner could mistreat the
character after `content: "}` as the closing delimiter of an outer
rule, slicing the flattened body at the wrong position.

Coverage: add a regression case asserting that a rule containing
both a brace in a quoted content value and a real nested block
still resolves its outer selector's token references correctly.

Author: xxiaoxiong

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

@@ -357,6 +357,10 @@ function iterateCssRules(css: string): CssRule[] {
     let bodyStart = index;
     let bodyEnd = -1;
     let cursor = index;
+    // 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;
     while (cursor < length) {
       const char = css[cursor];
       if (char === '/' && css[cursor + 1] === '*') {
@@ -368,6 +372,32 @@ function iterateCssRules(css: string): CssRule[] {
         cursor = closeIdx === -1 ? length : closeIdx + 2;
         continue;
       }
+      // Treat braces inside quoted CSS values as data, not rule delimiters
+      // (PR #6250 reviewer #3). Track single / double quote state and
+      // 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 (char === '\\') {
+          // Skip the escaped character (could be \" or \' or any escape).
+          cursor += 2;
+          continue;
+        }
+        if (char === inQuote) {
+          inQuote = null;
+          cursor += 1;
+          continue;
+        }
+        // Inside a quoted string: braces are just text, skip without
+        // affecting depth.
+        cursor += 1;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        inQuote = char;
+        cursor += 1;
+        continue;
+      }
       if (char === '{') {
         depth += 1;
       } else if (char === '}') {
@@ -448,16 +478,53 @@ function flattenNestedBody(bodySlice: string): string {
   // 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.
+  //
+  // Quote/escape state (PR #6250 reviewer #3): braces inside a quoted
+  // CSS value (`content: "}"`) are data, not rule delimiters. We preserve
+  // the quoted text character-by-character into the output so downstream
+  // token-reference scanning still sees the full declaration, but we do
+  // NOT treat the quoted `{` / `}` as braces to strip. Escapes `\"` and
+  // `\'` skip the next character so they don't terminate the quoted
+  // context prematurely.
   let out = '';
   let cursor = 0;
   const length = bodySlice.length;
+  let inQuote: '"' | "'" | null = null;
   while (cursor < length) {
     const char = bodySlice[cursor];
-    if (char === '/' && bodySlice[cursor + 1] === '*') {
+    // Comment handling: only active outside quoted strings. Comments inside
+    // quoted strings are part of the data and should be preserved verbatim.
+    if (inQuote === null && char === '/' && bodySlice[cursor + 1] === '*') {
       const closeIdx = bodySlice.indexOf('*/', cursor + 2);
       cursor = closeIdx === -1 ? length : closeIdx + 2;
       continue;
     }
+    if (inQuote !== null) {
+      // Inside a quoted value. Preserve the character verbatim — quoted
+      // text is data, and downstream token-reference scanning needs the
+      // full original value (e.g. `content: "}"` stays intact). Handle
+      // backslash escapes so a quoted `}"` doesn't exit the quote early.
+      if (char === '\\') {
+        out += bodySlice.slice(cursor, cursor + 2);
+        cursor += 2;
+        continue;
+      }
+      out += char;
+      if (char === inQuote) {
+        inQuote = null;
+      }
+      cursor += 1;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      inQuote = char;
+      // Preserve the opening quote in `out` so the flattened body still
+      // carries the full quoted value (the closing quote is preserved by
+      // the inQuote !== null branch above).
+      out += char;
+      cursor += 1;
+      continue;
+    }
     if (char === '{' || char === '}') {
       // Drop the brace; keep scanning. We deliberately do NOT skip the
       // nested-rule selector prefix between '{' and the next declaration

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

@@ -236,4 +236,71 @@ describe('components manifest extraction (#6224 regression suite)', () => {
       expect.arrayContaining(['--a', '--b', '--c']),
     );
   });
+
+  it('treats braces inside quoted CSS values as data, not rule delimiters (#6250 reviewer #3)', () => {
+    // PerishCode CHANGES_REQUESTED on PR #6250:
+    //   "Treat braces inside quoted CSS values as data, not rule delimiters.
+    //    This depth loop currently has no string/escape state, so valid CSS
+    //    such as `.btn-a { content: "}"; color: var(--a); } .btn-b { color:
+    //    var(--b); }` mis-parses."
+    //
+    // The scanner used to count every `{` / `}` it saw, including braces
+    // inside a quoted string like `content: "}"`. That closed the wrapping
+    // rule early, swallowed the second rule into the first one's body,
+    // and dropped every selector + token reference after the quoted brace.
+    //
+    // The fix: track single / double quote state in iterateCssRules and
+    // flattenNestedBody and ignore braces while inside a quoted value.
+    // Handle `\"` and `\'` escapes so a quoted `}"` still terminates the
+    // quoted context cleanly.
+    const manifest = extractComponentsManifest({
+      brandId: 'quoted-braces',
+      tokensCss: ':root { --a: red; --b: blue; --c: green; }',
+      fixtureHtml: `
+        <style>
+          .btn-a { content: "}"; color: var(--a); }
+          .btn-b { content: '{'; background: var(--b); }
+          .btn-c { content: '\\'\\';'; border-color: var(--c); }
+        </style>
+        <button class="btn-a btn-b btn-c">x</button>
+      `,
+    });
+
+    expect(manifest.selectors).toEqual(
+      expect.arrayContaining(['.btn-a', '.btn-b', '.btn-c']),
+    );
+    const buttonsGroup = manifest.groups.find((g) => g.id === 'buttons');
+    expect(buttonsGroup?.selectors).toEqual(
+      expect.arrayContaining(['.btn-a', '.btn-b', '.btn-c']),
+    );
+    // All three tokens survive — the quoted braces do not truncate the
+    // rule body and lose later declarations.
+    expect(buttonsGroup?.tokenReferences).toEqual(
+      expect.arrayContaining(['--a', '--b', '--c']),
+    );
+
+    // Severity check: a quoted `}` followed by a *second flat rule* must
+    // not collapse the second rule into the first. Pre-fix behaviour:
+    // `.btn-a { content: "}"; color: var(--a); } .btn-b { color: var(--b); }`
+    // closed `.btn-a` at the quoted `}`, swallowed `.btn-b` as text, and
+    // the manifest lost `.btn-b` + its --b reference entirely.
+    const pair = extractComponentsManifest({
+      brandId: 'quoted-pair',
+      tokensCss: ':root { --a: red; --b: blue; }',
+      fixtureHtml: `
+        <style>
+          .btn-a { content: "}"; color: var(--a); }
+          .btn-b { color: var(--b); }
+        </style>
+        <button class="btn-a btn-b">x</button>
+      `,
+    });
+    expect(pair.selectors).toEqual(
+      expect.arrayContaining(['.btn-a', '.btn-b']),
+    );
+    const pairButtons = pair.groups.find((g) => g.id === 'buttons');
+    expect(pairButtons?.tokenReferences).toEqual(
+      expect.arrayContaining(['--a', '--b']),
+    );
+  });
 });