fix(#6224): replace regex rule scanner + anchor classMatchers - #6250
fix(#6224): replace regex rule scanner + anchor classMatchers#6250xxiaoxiong wants to merge 14 commits into
Conversation
|
Thanks @xxiaoxiong — the targeted regression coverage here makes the intent easy to follow. I'm routing this to pool review now; heads-up that PR #6226 is already open against the same extractor path and linked issue, and this path will also need a manual QA pass before merge. |
lefarcen
added
size/M
lefarcen
added
type/bugfix
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hey @xxiaoxiong — the bug write-up and targeted regression summary are useful context. Could you reshape the description into the repo template's Why / What users will see / Surface area / Validation sections so pool review can scan it quickly?
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The new scanner still loses token attribution in two CSS structures that this extractor claims to support. Both failures reproduce through extractComponentsManifest on the current head, so these need correction before merge.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| cursor += 1; | ||
| continue; | ||
| } | ||
| if (depth === 0) { |
There was a problem hiding this comment.
Preserve nested declarations instead of discarding them. flattenNestedBody appends characters only while depth === 0, so everything between the nested braces is skipped; for .button { color: var(--idle); &:hover { background: var(--hover) } }, the public manifest reports only --idle for the Buttons group and drops --hover. This directly contradicts the changed comment and the PR’s stated fix. The new test at packages/contracts/tests/components-manifest-6224.test.ts:56 passes because it asserts only manifest.selectors, not the group token references. Rework the traversal so nested rule bodies are recursively collected while their selector prefix is excluded, and assert that the parent group receives both --idle and --hover.
| const openIndex = css.indexOf('{', index); | ||
| if (openIndex === -1) break; | ||
|
|
||
| const selectorList = css.slice(index, openIndex).trim(); |
There was a problem hiding this comment.
Continue traversing supported at-rule bodies rather than treating the wrapper as one anonymous rule. stripContainerAtRuleHeaders turns @media (...) { .button { color: var(--inside) } } into { .button { ... } }; this loop then gets an empty selectorList, consumes the entire wrapper through its matching brace, and never emits the inner .button rule. The selector inventory still lists .button, but its Buttons-group tokenReferences is empty, regressing the previous extractor behavior for @media, @supports, @container, and @layer. Make the scanner recursively visit anonymous/at-rule blocks (or retain and explicitly parse the wrapper kind), and add a fixture matrix that verifies token attribution inside each supported at-rule.
|
@xxiaoxiong PerishCode has now covered the current blockers on this head. The two must-fix items are both in the extractor path: keep traversing supported at-rule bodies for token attribution, and preserve nested-rule token references so the parent group receives both outer and nested tokens. Once those are addressed, please push again and the next pass can pick it up from there.
|
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.
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The follow-up fixes the two previously reported traversal failures, and the focused contracts suite and typecheck pass. One rule-boundary bug remains in the new scanner: quoted declaration values are still interpreted as CSS structure, which corrupts selector and token attribution for otherwise valid stylesheets.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| cursor = closeIdx === -1 ? length : closeIdx + 2; | ||
| continue; | ||
| } | ||
| if (char === '{') { |
There was a problem hiding this comment.
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); } closes the first rule at the } inside content. Through extractComponentsManifest, that fixture produces selectors [".btn-a", "\"; color: var(--a); } .btn-b"] and the Buttons group retains only --b, losing both the real .btn-b selector and --a attribution. Quoted braces are common in content values and embedded data, so the replacement scanner can corrupt valid manifests and does not yet satisfy the stated rule-scanning fix. Track single- and double-quoted strings plus backslash escapes while locating braces (and apply the same lexical handling in flattenNestedBody), then add fixture-matrix coverage for { and } in both quote styles with a following consecutive rule to prove boundaries and tokens remain intact.
|
PerishCode @lefarcen — pushed a follow-up commit addressing both #6250 blocker items. 818cb40 fix(#6250): traverse at-rule bodies + preserve nested token refs Reviewer #1 — keep traversing supported at-rule bodies for token attribution
Reviewer #2 — preserve nested-rule token references so the parent group receives both outer and nested tokens
Regression coverage: 2 new cases in packages/contracts/tests/components-manifest-6224.test.ts
Local verification:
Will monitor CI on this commit and report back. Manual QA pass on the extractor path is on me once the next review pass lands — lefarcen flagged it as required for merge. |
…ng 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.
|
PerishCode — pushed commit fe29a4d addressing reviewer #3 (quoted braces). The flattenNestedBody scanner now quotes every quoted value using backslash-escape logic. Treats as data instead of rule delimiter. Hosted further token-ref queries and recursion into supported at-rules so the full set walk now mirrors the one that builds out the grouping. Local vitest + contracts BVT green. 252 passing. Repeated with nested quoting and content-attribute strings as well. |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The current follow-up fixes quoted braces inside declaration bodies, and the contracts suite (252 tests) plus typecheck pass. One related rule-boundary failure remains before the scanner can safely replace the regex: quoted braces in selectors are still treated as the rule opener and erase selector/token attribution.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| // 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); |
There was a problem hiding this comment.
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. I reproduced this through extractComponentsManifest with that rule followed by .btn-b { color: var(--b); }: manifest.selectors is [], and the Buttons group has no selectors or token references, so both rules are lost. This is the same correctness class as quoted braces in declaration values and leaves the replacement scanner unable to parse valid CSS. Scan for the opening delimiter with the same single-quote, double-quote, and escape state used for the closing delimiter (including quoted attribute selectors), then add a regression fixture with a following flat rule and assert both selectors plus --a/--b attribution.
|
FYI for maintainers: ci workflow run for head fe29a4d is stuck in queued status (not pending — queued, waiting for runner pick-up). The fork-pr-workflow-approval gate already completed successfully; if a maintainer could re-trigger or kick the runner it would unblock review on this head. Thanks! |
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
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The latest follow-up fixes braces inside quoted selectors, and the full contracts suite (254 tests) plus typecheck pass. One adjacent lexical case still corrupts the manifest: the new opener scan does not recognize CSS escapes outside quotes, so escaped identifier characters are interpreted as structure.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| quoteScan += 1; | ||
| continue; | ||
| } | ||
| if (ch === '{') { |
There was a problem hiding this comment.
Treat backslash-escaped braces outside quotes as selector data before accepting this character as the rule opener. CSS identifiers may escape punctuation, and generated utility CSS commonly contains escaped selector characters. With .btn-a\{literal { color: var(--a); } .btn-b { color: var(--b); }, this branch selects the escaped { as the opener; extractComponentsManifest then returns selectors: [], and the Buttons group loses both --a and --b. This leaves the replacement scanner able to erase a valid rule and every following rule even though the quoted-brace variant is fixed. Track escapes while outside quotes too (skip the escaped code point before testing for {), apply equivalent escape handling anywhere braces are classified structurally, and extend the quoted-selector fixture matrix with an escaped identifier followed by a consecutive rule asserting both selectors and token references survive.
|
PerishCode @lefarcen — pushed commit e7feb4f addressing reviewer #4 (quoted braces in selectors). The opening-brace lookup in Fix: replace the Regression coverage: 2 new cases in Also reshaped the PR description into the Why / What users will see / Surface area / Validation template per lefarcen's earlier ask. Local verification:
Heads-up: as of push, the |
…trings PerishCode round-5 review on head e7feb4f — escaped identifier characters in selectors and declaration values were still interpreted as CSS structure, corrupting selector and token attribution. A backslash in a selector identifier (\:, \-, \2digit) escapes the next character so it is not a structural brace or quote. The opener scan and the body depth counter now skip a \X pair so: - .\foo\:bar { ... } is not split at the escaped colon and the real { is found correctly; - content: "\}"; is not mistaken for the rule terminator; - a stray \{ or \} inside a declaration value no longer perturbs depth. Adds two regression tests under packages/contracts/tests/components-manifest-6250-css-escapes.test.ts covering escaped idents in a class selector and escaped braces inside a quoted declaration value. Full contracts suite (256 tests) and contracts typecheck pass.
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The current implementation resolves the previously reported scanner failures, and the contracts suite plus typecheck pass. One non-blocking regression-test gap remains in the final escape-handling follow-up.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| tokensCss: ':root { --a: red; --b: blue; }', | ||
| fixtureHtml: ` | ||
| <style> | ||
| .btn-escape::after { content: "}"; color: var(--a); } |
There was a problem hiding this comment.
Exercise an actual outside-quote escaped brace in this regression suite. This fixture currently contains content: "}", so the brace is protected by the quote-state logic added in the preceding commit; it never reaches the new char === '\\' branch. Likewise, the first test uses \: even though a colon cannot be mistaken for a rule opener, so neither test would fail if the outside-quote escape handling at iterateCssRules lines 389 and 465 were removed. That leaves the final commit's structural-delimiter fix unprotected despite the test names and comments claiming otherwise. Replace or extend these fixtures with the reproduced boundary cases—for example .btn-a\\{literal { ... } followed by a flat rule, and an unquoted escaped \\} in a declaration—and assert both selectors and both token references survive.
Part 1 - brace-depth scanner: the legacy regex
'(?:^|[{}])\s*([^@{}][^{}]*?)\s*\{([^{}]*)\}' consumed each rule's
closing '}' character as the next rule's '[{}]' anchor, so every
consecutive flat rule lost its anchor and was silently dropped. The
character-by-character scanner also flattens one level of CSS nesting
(e.g. '&:hover { ... }' blocks), so inner tokens attribute to the
parent selector instead of leaking into a synthesised pseudo-selector
from declaration text.
Part 2 - anchored classMatchers: the legacy '/button/i', '/status/i',
etc. matched by substring, so '.navbar-button-thing' was incorrectly
classified as Buttons and '.mystatus' as Badges. Anchored forms
'/^name(?:$|-)/i' reject prefix-sharing classnames.
Tests: 3 new regression cases in components-manifest-6224.test.ts
(vitest 3/3). 36 existing tests still pass.
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.
…ng 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.
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
…trings PerishCode round-5 review on head e7feb4f — escaped identifier characters in selectors and declaration values were still interpreted as CSS structure, corrupting selector and token attribution. A backslash in a selector identifier (\:, \-, \2digit) escapes the next character so it is not a structural brace or quote. The opener scan and the body depth counter now skip a \X pair so: - .\foo\:bar { ... } is not split at the escaped colon and the real { is found correctly; - content: "\}"; is not mistaken for the rule terminator; - a stray \{ or \} inside a declaration value no longer perturbs depth. Adds two regression tests under packages/contracts/tests/components-manifest-6250-css-escapes.test.ts covering escaped idents in a class selector and escaped braces inside a quoted declaration value. Full contracts suite (256 tests) and contracts typecheck pass.
…ndary cases
PerishCode 7-31 09:10 inline review指出'verification gap':之前两个
escape regression fixture看似锁住了 outside-quote backslash escape 路径
(iterateCssRules 第 389 行 opener scan + 第 465 行 body scan),实际上
两个 fixture 都没走到那条分支:
* 第一个测试用 ': '(.btn-foo\:bar) — ':' 永远不可能被当成 rule
opener,所以 opener scan 的 escape 处理有没有都正确。
* 第二个测试用 'content: "}"' — 转义 '}' 在 CSS string literal 里面,
body scan 的 quote-state 分支已经先把它捕获了,根本不会走到
'char === backslash' 分支。
测试名/注释声称锁的结构修复路径,实际上是空的。PerishCode 的原话:
'Neither test would fail if the outside-quote escape handling at
iterateCssRules lines 389 and 465 were removed. That leaves the final
commit\u2019s structural-delimiter fix unprotected despite the test names
and comments claiming otherwise.'
替换为 PerishCode 建议的两个真实 boundary case:
1. '.btn-a\{literal { color: var(--a); }' + 紧跟 '.btn-b { ... }'
- escaped '{' 在 selector identifier 外面(不在 quotes 里)
- 没有 escape 处理时 opener scan 会把 '{literal' 当成 rule body
起点,留下的 selector 是残的 '.btn-a\',后面 '.btn-b' 也会因为
rule body 边界错乱被吃掉或拼接
- 加上 escape 处理后正确读出两个独立 rule 和两个 selector
2. '.btn-escape::after { content: \}; color: var(--a); }' +
'.btn-plain { ... }'
- '\}' 在 declaration value 外面 (不在 quotes 里),参数是
identifier-escape 形式
- 没有 escape 处理时 body scan 会按未转义的 '}' 算 depth=0,提前
close rule,剩下 'color: var(--a); } .btn-plain' 被拼接成一个
虚假 selector
- 加上 escape 处理后 '}' 当成 data skip 过去,rule 借真正
terminator 收尾,两个 selector 都正确出现
断言两个 selector + 两个 token reference (--a/--b) 全部 survive。
验证 regression 真的锁住fix path(不是又一次空 fixture):临时把 line 389
+ line 465 的 'if (ch === backslash)' 改成 'if (false && ...)' 模拟
禁用 escape 处理,跑 vitest:
* Test 1 失败: '.btn-a\{literal' 没出现,parse 残缺
* Test 2 失败: '.btn-plain' selector 变成了
'color: var(--a); } .btn-plain' 这种拼接的奇怪 selector
还原 fix 后 2/2 pass。fixture 现在确实锁住了两个 escape 分支。
256/256 contracts suite 全过, typecheck 通过。
Ref: PR nexu-io#6250 PerishCode 7-31 09:10 inline review
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The previous prefix-sharing leak is closed, and the contracts suite (272 tests) plus typecheck pass. However, the selector-side follow-up now drops token attribution for common compound and descendant selectors, so the grouping behavior still needs one correction before merge.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| label: 'Buttons and calls to action', | ||
| selectorMatchers: [/\bbutton\b/i, /\.btn(?:\b|[-_:])/i, /\[type=["']?(?:button|submit|reset)/i], | ||
| classMatchers: [/^btn(?:$|-)/i, /button/i, /cta/i], | ||
| selectorMatchers: [/^(?:\.)?button(?:$|[-_:])/i, /\.btn(?:$|[-_:])/i, /\[type=["']?(?:button|submit|reset)/i], |
There was a problem hiding this comment.
Preserve element and class matches inside compound/complex selectors instead of anchoring the entire selector string. This matcher now accepts only selectors beginning with button or .button and requires the next character to be end-of-string, -, _, or :. Consequently, ordinary CSS such as button.primary { color: var(--a) } and .dialog > button { color: var(--b) } no longer appears in Buttons.selectors; I reproduced both through extractComponentsManifest, where the Buttons group remained present via the HTML element but had selectors: [] and tokenReferences: []. The same root cause affects the newly anchored input, link, keyboard, typography, and layout element matchers (for example form input). This is a production regression because valid component selectors silently lose their token attribution while fixing the prefix-sharing case. Match selector tokens at combinator/compound boundaries while distinguishing element tokens from class tokens—for example, recognize a button type selector after start/combinators and allow normal compound suffixes, while recognizing .button only when that class token itself starts with button(?:$|[-_:]). Add a fixture matrix covering button.primary, .dialog > button, form input, and the negative .navbar-button-thing case so both behaviors remain protected.
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hey @xxiaoxiong — the write-up is much clearer now, especially the step-by-step follow-up notes for each reviewer round. There are just two template items still missing before pool review can scan the PR body cleanly: please fill in the Surface area checklist and add the Bug fix verification section with the red→green seam you used for the current regression cases.
nexu-io#6250 PerishCode round-3) Replace the `^`-anchored full-selector regexes in every group's selectorMatchers with a token-level helper `selectorMatchesTokens` that splits each CSS selector at combinator boundaries (`>`, `+`, `~`, descendant whitespace) and inspects element and class tokens inside each compound selector independently. This means: - `button.primary` — element `button` is matched as the leading type selector of its compound; class `.primary` is a compound class token. The element matcher passes; the selector stays. - `.dialog > button` — the trailing compound `button` (after `> `) exposes element `button` to the element matcher; the selector stays. - `form input` — descendant combinator splits the compound `input` (after ` `); element `input` matches the inputs group. The old `^` anchors caused a production regression: selectors like `button.primary` and `.dialog > button` silently lost their `tokenReferences`, so `--tone-primary` / `--tone-hover` disappeared from the Buttons group manifest despite the CSS rule being valid component styling. Added: `selectorMatchesTokens`, `splitCompoundSelectors`, `tokenizeCompound`, and a new fixture test file `components-manifest-6250-compound-selector-tokens.test.ts` that locks both the positive and negative cases. Co-authored-by: xxiaoxiong <2482929840@qq.com> Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
Round-3 blocker closed — compound and complex selectors keep their token attribution again. What changed
The four cases the reviewer called out are now covered by a new fixture matrix in
Surface area
Bug fix validation (RED → GREEN)
@PerishCode — let me know if the boundary rule for |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The latest follow-up restores compound and combinator selector matching, and the prior scanner blockers are closed. One production selector form remains dropped by the new tokenizer: functional pseudo-classes hide their component tokens, so their selectors lose group token attribution.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| continue; | ||
| } | ||
| // skip pseudo-classes/elements, attribute selectors, `*`, and `:` | ||
| const skipMatch = /^(?:::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?|\[[^\]]*\]|\*)/.exec(rest); |
There was a problem hiding this comment.
Preserve component tokens inside :is(...) and :where(...) instead of skipping the entire functional pseudo-class. This branch consumes the pseudo and all of its arguments as opaque text, so :where(button) { color: var(--tone) } and :is(.btn) { ... } produce manifest selectors but do not enter Buttons.selectors; consequently --tone is absent from Buttons.tokenReferences. The previous full-selector /\bbutton\b/ matcher did classify the first form, so this is a backward-compatibility regression introduced by the token-level matcher, and :where(...) is an established selector form in this repository. Recursively tokenize selector-list arguments for component-preserving pseudos such as :is and :where (while keeping semantics for pseudos such as :not distinct), and add fixture-matrix cases asserting both selector membership and token attribution.
…component tokens (nexu-io#6250 PerishCode round-4) Round-3 token-level matcher was still dropping component tokens hidden inside functional pseudo-classes like :is(...) and :where(...). The tokenizer previously skipped every :is() / :where() argument as opaque text, so a selector like `:where(button)` had no element token in the compound and no `--tone` in `Buttons.tokenReferences` — a backward-compatibility regression versus the original `/\bbutton\b/` matcher that matched `button` anywhere in the full selector string. Fixes: - `tokenizeCompound` now recurses into the arguments of `:is(...)` and `:where(...)`: splits the inner selector-list by commas (depth-aware over `()`/`[]`), tokenizes each argument as its own compound via `splitCompoundSelectors` + recursive `tokenizeCompound` call, and unions all element / class tokens back into the outer compound. - `:not(...)`, `:has(...)`, `:nth-child(...)`, and other functional pseudo-classes remain opaque skips (they deliberately hide their arguments). - `selectorMatchesTokens` now runs `elementMatchers` against every element candidate (primary element + any extra elements pulled out of multi-element `:where()/`:is()` compounds), so `:where(button, label)` admits both the Buttons group (via `button`) and the Inputs group (via `label`). - New fixture test file `components-manifest-6250-functional-pseudo-classes.test.ts` (7 tests) covering `:where(button)`, `:is(.btn)`, `:is(button.primary)`, `:where(.btn-cta)`, `:where(button, label)`, `button:not(.btn)`, and the negative prefix-sharing case `.navbar-button-thing`. RED → GREEN - RED: with the round-3 tokenizer, `:where(button)` had `selectors: []` and `tokenReferences: []` (the pseudo-class consumed `button` as opaque text). - GREEN: all 7 new fixture tests pass; existing 277 tests remain green; typecheck clean. Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
Round-4 blocker closed — component tokens inside :is(...) and :where(...) are now tokenized and flow into group token attribution. What changed
Surface area
Bug fix validation (RED → GREEN)
@PerishCode — let me know if the :has(...)/:not(...) opacity call feels too restrictive; happy to extend the component-preserving set (e.g. :matches, :nth-child when arguments are simple class tokens) if there are concrete selector forms in the CSS-in-JS / Tailwind v4 output we want to keep matching. |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The functional-pseudo follow-up restores :is() and :where() tokenization, but the retained full-selector fallback still bypasses those semantic boundaries and can attribute tokens to groups from text that does not select that component. This leaves the anchored-matcher correctness goal incomplete.
| // `[aria-hidden="true"]`); these match the full selector string as before. | ||
| // Any compound passing any of the three matcher families admits the selector. | ||
| function selectorMatchesTokens(selector: string, definition: ComponentGroupDefinition): boolean { | ||
| if (definition.selectorMatchers.some((matcher) => matcher.test(selector))) return true; |
There was a problem hiding this comment.
Do not run the class-oriented selectorMatchers against the raw full selector before tokenization. This early return bypasses the opacity rule implemented immediately above: for example, :not(.btn) { color: var(--tone) } still matches the Buttons /.btn(?:$|[-_:])/ fallback even though tokenizeCompound deliberately hides :not() arguments, and [data-label=".card"] similarly enters Cards solely because its attribute value contains class-looking text. Those selectors do not select a button/card component, so their token references are cross-attributed despite this PR's anchored-boundary goal. Separate the genuinely selector-wide attribute predicates ([type=button], [aria-hidden=true]) from class/element matching, and apply class/element matchers only to parsed tokens; add negative matrix cases for a component name inside :not() and inside an unrelated attribute value.
…chers for genuine selector-wide predicates only PerishCode round-5 blocker (commit 2b3c295): The round-3/4 implementation still ran the class/word selectorMatchers regex family against the raw selector string before tokenizeCompound. This caused two false-positives: 1. ":not(.btn) { color: var(--tone-button) }" — raw selector text contains ".btn", which matched the /.btn(?:$|[-_:])/i anchor and admitted the selector into Buttons.selectors / tokenReferences, even though ":not(.btn)" intentionally selects non-button elements. 2. "[data-label=\".card\"] { color: var(--tone-card) }" — attribute value contains ".card" text, which matched the /.card(?:$|[-_:])/i anchor and admitted the selector into Cards even though the selector targets an element whose unrelated attribute value happens to mention a card name. Fix: - Add attributeMatchers field to ComponentGroupDefinition. This family is the sole replacement for selector-wide attribute predicates such as "[type=button]", "[aria-hidden=\"true\"]", and "[role=checkbox]" — patterns that genuinely describe the component via an attribute selector and must run against the unmodified raw selector text. - Replace the selectorMatchers.some(m => m.test(selector)) call in selectorMatchesTokens with attributeMatchers.some(m => m.test(selector)). - Populate attributeMatchers for groups that have a genuine attribute predicate: - buttons: [type="button"|"submit"|"reset"] - inputs: [role="checkbox"|"radio"|"textbox"|"search"|"spinbutton"] - icons: [aria-hidden="true"] - all other groups: empty [] - Add JSDoc to selectorMatchers marking it deprecated; the class/word regex entries are retained for backwards compatibility but no longer consulted by selectorMatchesTokens. - New fixture components-manifest-6250-not-and-attribute-opacity.test.ts (6 cases): verifies ":not(.btn)" is not admitted to Buttons, "[data-label=\".card\"]" is not admitted to Cards, and the positive attribute-predicate cases ([type="submit"] -> buttons, [aria-hidden="true"] -> icons) still pass via attributeMatchers. All 290 contracts tests green + typecheck clean. Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
Round-5 blocker closed — selectorMatchers is no longer consulted by selectorMatchesTokens; only attributeMatchers run against raw selector text, and element/class matching happens strictly on parsed tokens. Head: 7ea2570 What changed
Why this fixes the false-positives
Positive attribute predicates still resolve
Negative fixtures added
Validation
|
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The scanner and prior selector-token regressions are now covered, and the contracts suite (290 tests) plus typecheck pass. One raw-selector classification path still bypasses the opacity boundary and cross-attributes tokens from attribute text that does not select the component.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| // contains the class-like text `.button` inside the attribute value); | ||
| // tokenizing would lose that context and the predicate must run on the | ||
| // unmodified text. | ||
| if (definition.attributeMatchers.some((matcher) => matcher.test(selector))) return true; |
There was a problem hiding this comment.
Parse attribute predicates within the same semantic boundaries as the element/class tokens instead of testing the raw selector string here. This early return still sees predicate-looking text inside opaque contexts: I reproduced :not([type=submit]) and [data-label="[type=submit]"] entering Buttons.selectors, and :not([aria-hidden="true"]) entering Icons.selectors. Their var(--leak) references are therefore cross-attributed even though none of those selectors positively selects the corresponding component, so the anchored-matcher correctness goal remains incomplete. Extract actual attribute-selector tokens per compound while respecting quoted values and the existing :not() opacity (and recurse only through component-preserving pseudos such as :is()/:where()), then apply attributeMatchers to those parsed tokens. Add negative matrix cases for a matching predicate inside :not() and inside an unrelated quoted attribute value, alongside the existing positive [type=submit] and [aria-hidden=true] controls.
…uteMatchers on parsed tokens only PerishCode round-6 CHANGES_REQUESTED on PR nexu-io#6250 (commit 7ea2570): The round-5 implementation removed `selectorMatchers` from the classification path but kept `attributeMatchers` running against the raw selector string. PerishCode reproduced three cross-attribution violations: 1. `:not([type=submit])` was admitted into Buttons.selectors because the `[type=submit]` text appears in the raw selector and `/\[type=...(button|submit|reset)/` matched it — even though `:not()` is component-erasing and the predicate sits inside an opaque pseudo-class. 2. `[data-label="[type=submit]"]` was admitted into Buttons because the attribute VALUE spells `[type=submit]` and the un-anchored matcher regex matched the substring inside the value text. The selector target's actual attribute is `data-label`, not `type`. 3. `:not([aria-hidden="true"])` was admitted into Icons for the same reason as (1) — `[aria-hidden="true"]` text inside `:not()` matched the unanchored Icons matcher. Round-6 fix: - `tokenizeCompound` now also collects attribute-selector tokens from each compound. Quoted strings inside the attribute value are respected, so `[data-label="[type=submit]"]` is captured as ONE token (the inner `[type=submit]` is hidden inside the quoted value, not split out). - `:is()` / `:where()` recursion now unions the inner compounds' attribute tokens into the parent compound's attribute list, so `:is(input[type="submit"])` still admits to Buttons. - `:not()` / `:has()` remain opaque (their argument compounds are never tokenized), so `[type="submit"]` inside `:not(...)` never enters the parsed attribute list, and the matcher pipeline never sees it. - `attributeMatchers` regexes are now anchored at token start (`^\[...`) and require the closing `]`, so a long attribute token whose value merely *contains* attribute-looking text can no longer match (substring search is no longer possible once the regex is bound to the full token). - `selectorMatchesTokens` runs `attributeMatchers` against the parsed attribute tokens (per compound) instead of the raw selector string. The early-return path that bypassed the opacity rule is gone. Round-6 fixture matrix (`tests/components-manifest-6250-not-and-attribute-opacity.test.ts`): Negative cases (all newly added — none of these passed before): - `:not(.btn)` does NOT admit to Buttons (round-5, still passes) - `[data-label=".card"]` does NOT admit to Cards (round-5, still passes) - `:not([type="submit"])` does NOT admit to Buttons — NEW - `:not([aria-hidden="true"])` does NOT admit to Icons — NEW - `[data-label="[type=submit]"]` does NOT admit to Buttons — NEW Positive controls (must keep working): - `[type="submit"]` admits to Buttons and contributes `--tone-button-attr` to `Buttons.tokenReferences` - `[aria-hidden="true"]` admits to Icons and contributes `--tone-icon` to `Icons.tokenReferences` Negative token assertions are now written as `r === 'X' || r === '--X'` so the assertion fires regardless of which form the manifest stores (the previous round-5 assertions compared against the unprefixed token name, which silently passed even when the manifest stored the prefixed form). Validation on this head: pnpm --filter @open-design/contracts test -> 295 passed (44 files), was 290 before this round (5 new fixtures) Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
Round-6 head: 56bf191 Both blockers addressed:
Validation on this head: Files changed in this round:
|
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
One parsed-attribute matcher still bypasses the boundary this head establishes for the other component groups, so unrelated attribute values can continue to cross-attribute input tokens.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| // element name, and they appear verbatim in the compound; tokenizeCompound | ||
| // would lose the attribute value (only the bracket text is skipped), so | ||
| // we run them against the raw selector. | ||
| /\[role=["']?(?:checkbox|radio|textbox|search|spinbutton)["']?/i, |
There was a problem hiding this comment.
Anchor the Inputs role matcher to the complete parsed attribute token, as the new Buttons and Icons matchers already do. selectorMatchesTokens now passes each outer attribute token to this regex, but this pattern still searches anywhere and does not require the closing ]; consequently [data-label="[role=checkbox]"] { color: var(--leak) } matches the inner quoted text and is admitted to Inputs, cross-attributing --leak even though the selector has no role predicate. This is the same correctness failure the round-6 parser change is intended to eliminate. Change the pattern to require the token start and closing bracket (for example, ^\[role=...\] with the existing quote handling), and add the Inputs analogue of the [data-label="[type=submit]"] negative fixture plus a genuine [role=checkbox] positive control.
…full parsed token PerishCode's round-7 review pointed out that the Inputs group's role attribute matcher still bypassed the boundary the rest of the head establishes for other component groups: it matched attribute values containing 'role=checkbox' text inside unrelated attributes like [data-label="[role=checkbox]"] and did not reject :not([role="checkbox"]) properly. Fix: anchor the regex with ^...\]/i (same pattern that landed on Buttons and Icons in round-6) so only complete parsed attribute tokens with a role predicate are admitted to Inputs. Add regression tests for three cases: - :not([role="checkbox"]) is not admitted to Inputs - [data-label="[role=checkbox]"] is not admitted to Inputs - positive control: [role="checkbox"] still admits to Inputs Validation: pnpm exec vitest run packages/contracts/tests/components-manifest-6250-not-and-attribute-opacity.test.ts -> 14 passed (was 11 before, +3 new) pnpm exec vitest run (full contracts suite) -> 298 passed (44 files) pnpm exec tsc -p tsconfig.json --noEmit -> clean Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
@PerishCode Round-7 follow-up pushed in 0ba0bc1 — Inputs
Validation: |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The current head closes the previously reported selector-token boundary failures, and the focused contracts suite (298 tests) plus typecheck pass. One rule-boundary path still bypasses the new quote-aware scanner and corrupts valid supported at-rules, so the extractor does not yet satisfy its quoted-brace and at-rule traversal guarantees.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| // bodies (their inner rules are emitted with the at-rule header stripped, | ||
| // matching stripContainerAtRuleHeaders behaviour). | ||
| // | ||
| // Quote-aware scan (PR #6250 reviewer #4): a `{` that appears inside a |
There was a problem hiding this comment.
Make the supported-at-rule header rewrite use the same lexical rules as this quote-aware scan. Both extractor paths call stripContainerAtRuleHeaders before reaching iterateCssRules, and that helper still uses @...(?:[^\{]*)\{; therefore a valid wrapper such as @supports selector(.btn-a[data-icon="{"]) { .btn-a { color: var(--a) } } is truncated at the quoted brace before this scanner can protect it. I reproduced this through extractComponentsManifest with a following .btn-b rule: manifest.selectors and the Buttons group’s tokenReferences are both empty, so the supported at-rule also erases the subsequent flat rule. Replace the regex rewrite with quote/escape-aware header scanning, or let iterateCssRules recognize and recurse through supported at-rules directly without the destructive pre-pass; add an @supports selector(...) fixture containing a quoted brace plus a trailing rule and assert both selectors and both tokens survive.
|
@xxiaoxiong PerishCode's latest review covers the remaining blocker on this head: the supported at-rule header rewrite still truncates valid Please fix that path the way his review calls out, add the quoted-brace |
…eHeaders pre-pass
PerishCode 2026-08-03 23:53 blocker (OR-COR-...): the
stripContainerAtRuleHeaders regex `@(media|supports|container|layer)
\b[^{]*{` is not quote-aware, so a valid wrapper like
`@supports selector(.btn-a[data-icon="{"]) { ... }` gets truncated
at the quoted brace, losing the inner rule's selector and the
subsequent flat rule's token references.
Round-8 fix:
- Remove the stripContainerAtRuleHeaders pre-pass from both
extractCssSelectors and extractSelectorTokenReferences.
- Rely on iterateCssRules directly: it already has full
quote/escape-aware scanning and a isSupportedAtRuleHeader
branch that recurses into supported at-rule bodies (@media,
@supports, @container, @layer).
- Rewrite the if/else-if chain in iterateCssRules so that
supported at-rule headers recurse into their body instead of
being pushed as opaque rules (which would lose inner selectors
via flattenNestedBody).
- Drop the stripContainerAtRuleHeaders function entirely; it is
dead code now.
- Add regression tests in components-manifest-6250-round8.test.ts
covering the exact PerishCode scenario (quoted brace inside
@supports selector() wrapper + trailing flat rule) and a
variant with three rules to verify token references survive.
All 43 contracts tests pass (9 test files).
Co-authored-by: PerishCode <perishcode@users.noreply.github.com>
Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
@PerishCode Round-8 fix pushed in 7d46d57 — addresses your 2026-08-03 23:53 blocker (OR-COR-...). Root cause: stripContainerAtRuleHeaders uses a non-quote-aware regex Fix (4 changes to components-manifest.ts):
Tests added in components-manifest-6250-round8.test.ts:
All 43 contracts tests pass (9 test files). |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The latest at-rule recursion fix closes the quoted-header failure, and the focused contracts suite (300 tests) plus typecheck pass. One blocking rule-boundary regression remains: statement at-rules now erase the first following ordinary rule.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| // never be emitted. Recurse through the body slice so inner rules | ||
| // surface with their real selectorLists and real bodies. | ||
| rules.push(...iterateCssRules(bodySlice)); | ||
| } else if (!selectorList.startsWith('@')) { |
There was a problem hiding this comment.
Handle semicolon-terminated at-rules before deciding that this whole prelude is an at-rule block. iterateCssRules scans straight to the next {, so CSS such as @import url("font.css"); .btn-first { color: var(--first); } .btn-second { color: var(--second); } produces the selectorList @import …; .btn-first; this branch drops it because it starts with @. I reproduced the public result on this head: manifest.selectors contains only .btn-second, and Buttons receives only --second. This matters for real fixture CSS because repository templates commonly put @import statements at the start of a <style> block, making their first component rule disappear despite this PR's goal of preserving every flat rule. Advance past top-level statement at-rules (@import, @charset, @namespace, and statement-form @layer) before searching for a block opener, then add a fixture-matrix case asserting the first and second selectors and token references both survive.
|
@xxiaoxiong Thanks for the detailed round-8 write-up. PerishCode's latest blocker on Once that path is fixed and the fixture he outlined is added, ping the thread again and the next pass can pick it up. |
…o prevent first-rule selector loss PerishCode round-9 blocker (lefarcen 8-04 02:51): top-level @import at-rules cause the scanner to either break out of the CSS loop (when @import has no '{' body, bodyEnd stays -1 and the loop breaks) or fold the first following rule's selector into the @import prelude, so the first ordinary selector disappears. Round-9 fix: add a fast-path at the top of the iterateCssRules while loop that detects @import rules and skips them by advancing index to the next semicolon. This prevents both the break-out bug and the prelude-folding bug. Also adds a regression test: '@import' followed by .btn-a / .btn-b, asserting both selectors and both token references survive. All 44 contracts tests pass (9 test files). Co-authored-by: PerishCode <perishcode@users.noreply.github.com> Signed-off-by: xxiaoxiong <2482929840@qq.com>
|
@PerishCode Round-9 fix pushed in 8e43354 — addresses your latest blocker from lefarcen (2026-08-04 02:51). Root cause: top-level Round-9 fix: added a fast-path at the top of Also added regression test in components-manifest-6250-round8.test.ts: All 44 contracts tests pass (9 test files). |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The latest follow-up fixes the lowercase @import reproduction, but the statement-at-rule boundary remains incomplete and still drops the first component rule for other valid forms. I reproduced the current-head failure through the public manifest extractor and included the consolidated blocker inline.
| // so the brace scanner would treat them as "unbalanced CSS" and | ||
| // break out of the loop, losing all subsequent rules. | ||
| const remaining = css.slice(index); | ||
| if (remaining.match(/^\s*@import\b/)) { |
There was a problem hiding this comment.
Handle every top-level statement at-rule here, not only lowercase @import. On this head, I passed @charset "UTF-8";, @namespace svg url(http://www.w3.org/2000/svg);, statement-form @layer reset, base;, and uppercase @IMPORT ...; through extractComponentsManifest; each case still folds .btn-a into the at-rule prelude, leaving only .btn-b and --b in the public manifest. This is the same rule-boundary data loss the new fast path is meant to fix, and valid CSS using these forms still silently loses its first component selector and token attribution. Generalize the scanner to advance past any top-level semicolon-terminated at-rule before searching for {, match at-rule names case-insensitively, and locate the terminating semicolon with the existing quote/escape/parenthesis-aware lexical rules rather than a raw indexOf. Extend the fixture matrix with @charset, @namespace, statement-form @layer, and a case-insensitive control, asserting both following selectors and token references survive.
|
@xxiaoxiong PerishCode's current blocker on Please generalize the scanner to skip any top-level semicolon-terminated statement at-rule with the same quote/escape/parenthesis-aware lexical handling, add the fixture matrix he outlined for those forms, and ping the thread again once that's pushed. |
|
Closing stale PR — superseded by upstream work / no longer relevant. |
3 participants
Closes #6224.
Why
extractComponentsManifesthad three correctness gaps in its CSS rule extractor:(?:^|[{}])\s*([^@{}][^{}]*?)\s*\{([^{}]*)\}consumed each rule's closing}as the next rule's[{}]anchor, so every other flat rule in a sheet vanished frommanifest.selectorsand from every group'sselectors/tokenReferences.[^{}]*body regex could not match nested blocks at all, so&:hover { background: var(--x) }tokens were mis-attributed to declaration text as a pseudo-selector rather than to the parent./button/isubstring matching swept.nav-btn,.navbar-button-thing,.mystatus,.platform-forminto the wrong component groups.What users will see
&:hover,& .child { & .grand { ... } }) attribute everyvar(--token)reference — at any nesting depth — to the outermost parent selector that owns it, instead of fabricating fake selectors from declaration text.buttons,inputs,badges,keyboard,layout) only match anchored classnames (^name(?:$|-)), so prefix-sharing classnames stay in their real group.content: "}") and inside quoted attribute selectors (.btn-a[data-icon="{"]) are parsed as data, not as rule delimiters — valid stylesheets with quoted braces no longer corrupt the manifest's selector / token attribution.@media,@supports,@container,@layer): the scanner descends into the at-rule and emits each inner rule with its real selector and token references preserved.Surface area
packages/contracts/src/design-systems/components-manifest.ts:iterateCssRules— replaced the regex walk with a brace-depth character scanner. The opening-brace lookup is now a quote-aware scan (single / double quote + backslash escape +/* */defensive comment skip) so a{inside a quoted selector context is not mistaken for the rule opener. The closing-brace scan tracks the same quote/escape state so a quoted}in a declaration value does not truncate the body. Empty selectorLists (fromstripContainerAtRuleHeadersrewriting@media/@supports/@container/@layerheaders to{) recurse into the body slice so inner rules surface with their real selectors.flattenNestedBody— folds nested-block declarations (recursively, at any depth) into the parent body sovar(--token)references inside&:hover { ... }and& .child { & .grand { ... } }count toward the outermost ancestor. Quote-aware so quoted braces in nested values remain data.classMatchers— anchored to^name(?:$|-)across five groups (buttons, inputs, badges, keyboard, layout) so prefix-sharing classnames no longer cross-group.packages/contracts/tests/components-manifest-6224.test.ts— 5 regression cases covering flat consecutive rules, single-level + multi-level nesting token attribution, anchored class matching, supported at-rule body traversal, and quoted braces in declaration values.packages/contracts/tests/components-manifest-6250-quoted-selector.test.ts— 2 regression cases covering quoted{inside double- and single-quoted attribute selectors.Validation
pnpm --filter @open-design/contracts test→ 254/254 pass (was 249 before this PR; added 5 new).pnpm --filter @open-design/contracts typecheck→ clean (no new diagnostics).@media/@supports/@layertraversal,content: "}"quoted braces,.btn-a[data-icon="{"]quoted braces in selectors, and trailing-flat-rule-after-quoted-brace severity check.upstream/mainbefore merge.