From 7e4179667fc889a31f3f6acabbd0156b43bf4d84 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Fri, 18 Sep 2026 23:30:35 -0400 Subject: [PATCH 01/38] fix(bulma-ui): a compound matches one simple selector, not co-occurrence Last commit's index keyed one entry per comma-separated part, so all the classes in a descendant selector counted as one set: `.hero.is-primary .tabs` answered the query `tabs.is-primary` against a stylesheet with no such rule. That is the silent direction, a dead modifier reading as live, which is a missed defect rather than a false alarm. Parts are split into simple selectors on the combinators now, and the class set has to match the query exactly, so a rule needing a third class no longer answers for two either. Order still does not matter, which is the point of the previous fix: Bulma writes both `.notification.is-primary` and `.is-primary.input`. Measured before and after rather than reasoned about, and the honest result is narrower than the finding suggests: across the fifty-seven pairs this guard actually queries, the broken index and the fixed one agree on every one. The spurious answers are real and they are in elements this file never asks about. Exact matching and order-independent matching also agree on all fifty-seven, and both correctly answer false for `.timeinput-wheel` and `.tabs`. The literal readers accepted single quotes only. A double-quoted component name failed loudly through the call count, but a double-quoted `extraUnstyled` entry read as no extras with nothing counting it, and the inline-list check is satisfied by a double-quoted array. Both styles now. Prettier is what kept this from biting, which is not a guarantee. And the measurements came out of the comments. That is the third time this file has grown point-in-time evidence and the third time a review has had to say so; the rationale survives without the numbers. --- scripts/color-tuple-css.test.mjs | 83 ++++++++++++++++---------------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index a8d8b464e..8a17dd057 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -98,61 +98,62 @@ function stylesheet() { } /** - * Does the stylesheet carry this exact class, not a longer one starting with - * it? + * Does the stylesheet carry this class, or this exact compound? * - * Single classes are matched literally. A COMPOUND (`notification.is-primary`) - * is matched order-independently, because CSS does not care and Bulma does not - * either: it writes `.notification.is-primary` and `.is-primary.input`. An - * element-first-only regex called the second one absent, which is how a live - * modifier could have read as dead. + * A single class is matched literally. A COMPOUND (`notification.is-primary`) + * has to appear as one SIMPLE selector carrying exactly those classes, which + * is narrower than it sounds and deliberately so. * - * Indexed by class rather than scanned per query. Walking every selector for - * every pair took the first case from a third of a second to six, because - * this file asks the question a few thousand times. + * Order does not matter, because CSS does not care and Bulma does not either: + * it writes `.notification.is-primary` and `.is-primary.input`. Matching + * element-first only called the second absent, so a live modifier read as + * dead. + * + * But co-occurrence is not a match. Indexing per comma-separated part made + * `.hero.is-primary .tabs` answer the query `tabs.is-primary`, since all + * three classes sit in that one part, and that is the silent direction: a + * dead modifier reading as live, which is a missed defect rather than a false + * alarm. Parts are split into simple selectors on the combinators, and the + * class set has to match exactly, so a rule needing a third class does not + * answer for two. */ function shipsClass(css, cls) { - const parts = cls.split('.'); - const index = classIndex(css); - if (parts.length === 1) return index.has(cls); - // Start from the rarest class so the scan is over the shortest list. - const lists = parts.map(part => index.get(part) ?? new Set()); - if (lists.some(l => l.size === 0)) return false; - const smallest = lists.reduce((a, b) => (a.size <= b.size ? a : b)); - for (const id of smallest) { - if (lists.every(l => l.has(id))) return true; + const wanted = cls.split('.'); + const index = simpleSelectors(css); + if (wanted.length === 1) { + return index.some(classes => classes.has(cls)); } - return false; + return index.some( + classes => + classes.size === wanted.length && wanted.every(w => classes.has(w)) + ); } /** - * class name → the selector parts carrying it, as a set of part ids. + * The class sets of every simple selector in the stylesheet. * - * One pass over the stylesheet per file read. A part is one comma-separated - * selector, so a class list matching within a single part is what counts, - * rather than the whole selector list mentioning them somewhere apart. + * One pass per file read. Split rather than matched: a `[^{}]+` scan over a + * minified stylesheet of this size backtracks badly, where splitting is + * linear. */ const indexCache = new Map(); -function classIndex(css) { +function simpleSelectors(css) { if (!indexCache.has(css)) { - const index = new Map(); - let id = 0; - // Split rather than matched. `/([^{}]+)\{/g` over 800KB of minified CSS - // took six seconds for 6,483 selectors, which is backtracking rather than - // work; this is five milliseconds for the same index. Each `{` is - // preceded by a prelude, and the selector is whatever follows the last - // `}` in it. + const sets = []; for (const chunk of css.split('{')) { + // Each `{` is preceded by a prelude; the selector is whatever follows + // the last `}` in it. const prelude = chunk.slice(chunk.lastIndexOf('}') + 1); for (const part of prelude.split(',')) { - id += 1; - for (const c of part.matchAll(/\.([A-Za-z0-9_-]+)/g)) { - if (!index.has(c[1])) index.set(c[1], new Set()); - index.get(c[1]).add(id); + for (const simple of part.split(/[\s>+~]+/)) { + if (!simple.includes('.')) continue; + sets.push( + new Set([...simple.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1])) + ); } } } - indexCache.set(css, index); + indexCache.set(css, sets); } return indexCache.get(css); } @@ -179,7 +180,7 @@ function tupleFrom(path, name) { `could not find the \`${name}\` tuple in ${path}, so this guard cannot ` + 'run. Fix the pattern in the same change that moved it.' ); - const values = [...block[1].matchAll(/'([^']+)'/g)].map(m => m[1]); + const values = [...block[1].matchAll(/['"]([^'"]+)['"]/g)].map(m => m[1]); assert.ok(values.length > 0, `the \`${name}\` tuple read as empty`); return values; } @@ -198,7 +199,7 @@ function colorKeywords() { const source = codeOnly(readFileSync(COLOR_CLASSES, 'utf8')); const copies = [ ...source.matchAll(/\[\s*\.\.\.validColors\s*,([^\]]*)\]/g), - ].map(m => [...m[1].matchAll(/'([^']+)'/g)].map(x => x[1])); + ].map(m => [...m[1].matchAll(/['"]([^'"]+)['"]/g)].map(x => x[1])); // Counted against the spellings that EXIST, not against zero. A `> 0` // guard let a copy this pattern stopped matching drop out silently while // the function claimed to read every one of them. @@ -300,7 +301,7 @@ function warningCallers() { break; } } - const named = /warnUnstyledColor\(\s*'([^']+)'/.exec(text); + const named = /warnUnstyledColor\(\s*['"]([^'"]+)['"]/.exec(text); // A call whose component is not a string literal cannot be attributed // to an element, and is counted below rather than skipped quietly. if (!named) continue; @@ -351,7 +352,7 @@ function warningCallers() { // every bracketed span in the call text let a bracketed expression // in an earlier argument contribute a value, failing with a message // naming something the library never declared. - extraUnstyled: [...(args[2] ?? '').matchAll(/'([^']+)'/g)].map( + extraUnstyled: [...(args[2] ?? '').matchAll(/['"]([^'"]+)['"]/g)].map( x => x[1] ), }); From 1ba7bdf8934188557c7d14fa853dbfe5540b31cc Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 18:30:45 -0400 Subject: [PATCH 02/38] fix(bulma-ui): a :not() class is absent, not present MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Raised by CodeRabbit on #703. The class extraction read every `.name` in a simple selector, including the ones inside `:not(…)`, which name classes the element must NOT carry. So `.notification:not(.is-light)` would answer the query `notification.is-light`: a rule that explicitly excludes the pair reporting it as live, which is the silent direction this PR exists to close. Measured before changing it, and it affects nothing today: 201 simple selectors carry a functional pseudo-class and none of them also carries a colour modifier, so no answer changes. Latent, and worth fixing because it is the same shape as the defect the PR is for. `:is()` and `:where()` are deliberately left alone. Their classes are alternatives rather than requirements, so counting them makes the exact match demand too many classes and under-report, which is the safe way to be wrong; treating them properly means modelling branches, which is more parser than this file should carry. --- scripts/color-tuple-css.test.mjs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 8a17dd057..6550b5d90 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -147,8 +147,20 @@ function simpleSelectors(css) { for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; + // `:not(…)` names classes the element must NOT carry, so reading + // them as present lets `.notification:not(.is-light)` answer the + // query `notification.is-light` — a rule that explicitly excludes + // the pair reporting it live, which is the silent direction. + // Dropped before extraction. `:is()` and `:where()` are left alone: + // their classes are alternatives, so counting them makes the exact + // match demand too many and under-report, which is the safe way to + // be wrong. + const matchable = simple.replace(/:not\([^)]*\)/g, ''); + if (!matchable.includes('.')) continue; sets.push( - new Set([...simple.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1])) + new Set( + [...matchable.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1]) + ) ); } } From 6a2daeadf8cb8c509b37afa278c8da1eb2e09ce2 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 18:43:00 -0400 Subject: [PATCH 03/38] fix(bulma-ui): strip pseudo-class arguments before splitting, not after MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `:not()` strip ran after the selector list was split on commas, and the arguments can contain commas: `.navbar-item:not(.is-active,.is-selected)` is one selector, so splitting first fragments it and leaves `is-active` looking like a class the element carries. The strip then finds no closing paren and matches nothing. Stripping before any splitting solves the ordering and the comma at once. Measured, because the obvious check does not show it: `navbar-item` with `is-active` answers true either way, since a real `.navbar-item.is-active` rule also exists. What changes is the contribution — seven exact `{navbar-item, is-active}` sets before, five after — and across the stylesheet ten compound pairs existed ONLY inside a pseudo-class argument and now correctly do not, among them `navbar-link` with `is-arrowless` and `title` with `is-spaced`. No answer this guard queries moves, so it is latent here as well. The strip now takes `:is()` and `:where()` arguments too, which the previous version deliberately kept. Dropping them makes the exact match demand fewer classes than the selector needs and under-report, which is the safe way to be wrong, and it is what lets one rule handle the comma problem for every functional pseudo-class rather than only `:not()`. `cssBackedColors()` was the one literal reader left single-quoted after four others were widened. Prettier enforces single quotes repo-wide so none of the five needed it, but five readers of the same kind of literal should fail the same way. --- scripts/color-tuple-css.test.mjs | 37 +++++++++++++++++++------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 6550b5d90..c6ada124f 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -143,24 +143,31 @@ function simpleSelectors(css) { for (const chunk of css.split('{')) { // Each `{` is preceded by a prelude; the selector is whatever follows // the last `}` in it. - const prelude = chunk.slice(chunk.lastIndexOf('}') + 1); + // Functional pseudo-class ARGUMENTS go before anything is split, and + // the order matters twice over. `:not(…)` names classes the element + // must not carry, so reading them as present lets + // `.notification:not(.is-light)` answer the query + // `notification.is-light` — a rule that excludes the pair reporting it + // live, which is the silent direction. And the arguments can contain + // commas: `.navbar-item:not(.is-active,.is-selected)` is one selector, + // so splitting the list first fragments it and leaves `is-active` + // looking like a class the element carries. Stripping first solves + // both. + // + // `:is()` and `:where()` lose their classes to the same strip. Those + // are alternatives rather than requirements, so dropping them makes the + // exact match demand fewer classes than the selector really needs and + // under-report, which is the safe way to be wrong. Keeping them would + // mean modelling branches, which is more parser than this file should + // carry. + const prelude = chunk + .slice(chunk.lastIndexOf('}') + 1) + .replace(/:[a-z-]+\([^()]*\)/gi, ''); for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; - // `:not(…)` names classes the element must NOT carry, so reading - // them as present lets `.notification:not(.is-light)` answer the - // query `notification.is-light` — a rule that explicitly excludes - // the pair reporting it live, which is the silent direction. - // Dropped before extraction. `:is()` and `:where()` are left alone: - // their classes are alternatives, so counting them makes the exact - // match demand too many and under-report, which is the safe way to - // be wrong. - const matchable = simple.replace(/:not\([^)]*\)/g, ''); - if (!matchable.includes('.')) continue; sets.push( - new Set( - [...matchable.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1]) - ) + new Set([...simple.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1])) ); } } @@ -412,7 +419,7 @@ function acceptedKeywords(component, keywords) { /** The colours `CSS_BACKED` names to the developer as ones that work. */ function cssBackedColors() { const source = readFileSync(DEPRECATIONS, 'utf8'); - const line = /const CSS_BACKED =\s*\n?\s*'([^']+)'/.exec(source); + const line = /const CSS_BACKED =\s*\n?\s*['"]([^'"]+)['"]/.exec(source); assert.ok(line, 'could not find `CSS_BACKED` in colorDeprecations.ts'); return line[1].split(',').map(v => v.trim()); } From 4e3b51793f577b66332b81456cb2ce25baa579bc Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 18:46:00 -0400 Subject: [PATCH 04/38] fix(bulma-ui): read an escaped dot as part of the class name, not a separator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bulma spells the fractional gap helpers with an escape: `.is-gap-0\.5` is one class called `is-gap-0.5`. The tokeniser stopped at the backslash and then matched the escaped dot as if it began a second class, so that selector entered the index as `{is-gap-0, 5}` — a class the stylesheet does not have, and a set one element wider than the selector it came from. Twenty-four selectors carry an escape and all twenty-four change. None of the 234 element-and-colour answers this guard asks moves, because no element name and no colour modifier is escaped, so this is latent like the last one. It is still worth fixing: the exact-size check is the whole mechanism here, and a tokeniser that invents an extra class is the one input that quietly defeats it. --- scripts/color-tuple-css.test.mjs | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index c6ada124f..81143f8f4 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -166,8 +166,17 @@ function simpleSelectors(css) { for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; + // A class name may escape a character with a backslash, which is + // how Bulma spells the fractional gap helpers: `.is-gap-0\\.5` is + // ONE class called `is-gap-0.5`. Reading the escape as a separator + // splits it into `is-gap-0` and `5`, which both invents a class and + // inflates the set past the exact-size check. sets.push( - new Set([...simple.matchAll(/\.([A-Za-z0-9_-]+)/g)].map(m => m[1])) + new Set( + [...simple.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)].map(m => + m[1].replace(/\\(.)/g, '$1') + ) + ) ); } } From f395e76d25762b06d088d01fd3fe2582cd3c884e Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 19:01:31 -0400 Subject: [PATCH 05/38] fix(bulma-ui): only :not() drops its argument, and pin the direction Widening the strip from `:not()` to every functional pseudo-class was the cheap way to get the comma fix, and it bought that at the cost of the property the matcher is built on. `:not()` is a prohibition, so the rest of the selector already names everything the element carries and deleting the argument is right. Everything else ADDS a requirement, and deleting the argument shortens the class set: `.notification.is-primary:where(.is-light)` needs three classes, and a two-class set answers the two-class query `notification.is-primary` as live. That is precisely the over-reporting the exact-size rule exists to stop, so the previous commit removed the guard's own defence, and its comment claimed the opposite direction. Those selectors now leave a sentinel class behind, so the set grows instead of shrinking and the query reads dead. A false alarm is the one way this guard may be wrong. Comments are removed before the stylesheet is split. Their words were entering the index as classes, which is inert for the ones that ship today but is the same over-reporting shape: a comment quoting a compound answers for it. The matcher now has a test of its own, on selectors written for the purpose rather than on whatever Bulma happens to write. Every finding this file has taken has been a matcher bug rather than a library one, and each surfaced by measuring the built stylesheet, which can only cover the shapes already in it. Two of the four `:has()` selectors that ship come from our own SCSS, so this shape is ours to grow, and there is no `:is()` or `:where()` yet at all. Reverting each of the three behaviours separately fails the new test on that behaviour's own assertion, so none of them is carried by another. No answer moves. The six selectors that gain a sentinel are structural, the element-and-colour pairs are unchanged, and the only single-class answers that change are the words that were coming out of the comments. --- scripts/color-tuple-css.test.mjs | 139 +++++++++++++++++++++++++++++-- 1 file changed, 130 insertions(+), 9 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 81143f8f4..509d8188b 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -137,10 +137,33 @@ function shipsClass(css, cls) { * linear. */ const indexCache = new Map(); + +/** + * Stands in for a requirement the tokeniser does not model. + * + * The exact-size rule in `shipsClass` is the whole defence against a rule + * that needs a third class answering a two-class query, so anything that + * quietly shortens a class set defeats it. Where a selector demands + * something this file will not parse, one of these goes in the set instead, + * and the query stops matching. `assertUnmodelledIsUnused` holds the name to + * being absent from the stylesheet, so it cannot collide with a real class. + */ +const UNMODELLED = 'bestax-guard-unmodelled-requirement'; + function simpleSelectors(css) { if (!indexCache.has(css)) { + assert.ok( + !css.includes(UNMODELLED), + `the stylesheet contains \`${UNMODELLED}\`, which this file uses as a ` + + 'name no real class can have. Rename the sentinel.' + ); const sets = []; - for (const chunk of css.split('{')) { + // Comments go first, or their words become classes: the minireset + // banner and the trailing sourceMappingURL contribute sets like + // `{com, css}` today. None of those is queried, but a comment that + // happened to name a compound would answer for it, and that reads as a + // live modifier — the silent direction again. + for (const chunk of css.replace(/\/\*[\s\S]*?\*\//g, '').split('{')) { // Each `{` is preceded by a prelude; the selector is whatever follows // the last `}` in it. // Functional pseudo-class ARGUMENTS go before anything is split, and @@ -151,18 +174,23 @@ function simpleSelectors(css) { // live, which is the silent direction. And the arguments can contain // commas: `.navbar-item:not(.is-active,.is-selected)` is one selector, // so splitting the list first fragments it and leaves `is-active` - // looking like a class the element carries. Stripping first solves + // looking like a class the element carries. Handling them first solves // both. // - // `:is()` and `:where()` lose their classes to the same strip. Those - // are alternatives rather than requirements, so dropping them makes the - // exact match demand fewer classes than the selector really needs and - // under-report, which is the safe way to be wrong. Keeping them would - // mean modelling branches, which is more parser than this file should - // carry. + // Only `:not()` DROPS. Its argument is a prohibition, so the rest of + // the selector already says everything the element must carry. Every + // other functional pseudo-class adds a requirement, and deleting its + // argument shortens the set: `.notification.is-primary:where(.is-light)` + // would answer `notification.is-primary`, which is the same + // over-reporting the exact-size rule exists to stop. They leave an + // `UNMODELLED` behind instead, so the set grows rather than shrinks and + // the query reads dead. That direction is a false alarm, which is the + // one this guard is allowed to be wrong in. const prelude = chunk .slice(chunk.lastIndexOf('}') + 1) - .replace(/:[a-z-]+\([^()]*\)/gi, ''); + .replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name) => + name.toLowerCase() === 'not' ? '' : `.${UNMODELLED}` + ); for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; @@ -434,6 +462,99 @@ function cssBackedColors() { } describe('the colour tuples agree with the shipped stylesheet', () => { + // The matcher itself, on selectors written for the purpose. Every finding + // this file has taken was a matcher bug rather than a library one, and each + // was found by measuring the built stylesheet, which only covers the shapes + // Bulma happens to write today. Two of the four `:has()` selectors that ship + // come from our own SCSS, so the shapes are ours to grow. These pin the + // DIRECTION: reading a compound as live when it is not is a missed defect, + // reading it as dead when it is live is a false alarm, and the matcher is + // only ever allowed the second. + it('never reads a compound as live that the selector does not ship', () => { + const live = (css, query) => shipsClass(css, query); + + // A pseudo-class that ADDS a requirement. Deleting its argument would + // leave a two-class set answering a two-class query, when the rule needs + // three. + assert.equal( + live( + '.notification.is-primary:where(.is-light){color:red}', + 'notification.is-primary' + ), + false, + '`:where()` adds a class the element must carry, so dropping it lets a ' + + 'rule that needs three classes answer a two-class query as live.' + ); + assert.equal( + live('.title.is-spaced:has(+.subtitle){color:red}', 'title.is-spaced'), + false, + '`:has()` adds a requirement the element must satisfy, so the compound ' + + 'before it is not on its own a live rule.' + ); + assert.equal( + live( + '.notification.is-primary:nth-child(even){color:red}', + 'notification.is-primary' + ), + false, + 'a structural pseudo-class is a requirement too: the compound renders ' + + 'for some elements and not others, which is not what this guard calls ' + + 'live.' + ); + + // A pseudo-class that FORBIDS. The rest of the selector already says + // everything the element carries, so the classes inside are not its own. + assert.equal( + live('.notification:not(.is-light){color:red}', 'notification'), + true, + '`:not()` is a prohibition, so the compound outside it is still live.' + ); + assert.equal( + live( + '.navbar-item:not(.is-active,.is-selected){color:red}', + 'navbar-item.is-active' + ), + false, + 'a class the rule EXCLUDES must not read as one the element carries, ' + + 'and a multi-argument `:not()` must not fragment on its own commas.' + ); + + // The plain case still answers, or the three above would be vacuous. + assert.equal( + live('.notification.is-primary{color:red}', 'notification.is-primary'), + true, + 'a plain compound rule is exactly what this guard calls live.' + ); + + // A comment is not a selector, and an escaped dot is not a separator. + assert.equal( + live( + '/* .notification.is-primary */ .box{color:red}', + 'notification.is-primary' + ), + false, + 'a comment naming a compound would answer for it, which reads as a ' + + 'live modifier.' + ); + // `shipsClass` spells a compound with a `.`, so a class carrying a + // literal dot cannot be asked for at all. What matters is that it + // invents nothing: `.is-gap-0\\.5` is ONE class, and reading the escape + // as a separator both fabricates a compound and fabricates a shorter + // class, either of which answers a query the stylesheet never backs. + assert.equal( + live('.is-gap-0\\.5{gap:.5rem}', 'is-gap-0.5'), + false, + 'an escaped dot read as a separator turns one class into a compound ' + + 'of two, and the exact-size rule then matches it.' + ); + assert.equal( + live('.is-gap-0\\.5{gap:.5rem}', 'is-gap-0'), + false, + 'the fractional helper is not the integer one, and a stylesheet that ' + + 'ships only the first must not answer for the second.' + ); + }); + it('declares every colour whose component modifier has no CSS', () => { const css = stylesheet(); const colors = tupleFrom(HELPERS, 'validColors'); From bc056225904dceed7e44030624405c1527819b67 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 19:18:59 -0400 Subject: [PATCH 06/38] fix(bulma-ui): a requirement is a requirement, parentheses or not MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sentinel only fired on a pseudo-class written WITH parentheses, so the same commit that asserted `:nth-child(even)` makes a compound read dead answered `:first-child` live. `:hover` and `[disabled]` were in the same position. Every one of them narrows which elements carrying those classes match, which is the thing the exact-size rule has to count, and the parenthesised half of that set was the only half being counted. A pseudo-ELEMENT is the exception and stays live. `.delete::before` styles a box generated for a delete, so the delete renders; treating it as a requirement would call it dead, which is not a conservative reading but a wrong one. Arguments now resolve to a fixed point. `[^()]*` cannot cross a parenthesis and `replace` does not re-scan its own output, so one pass over `:has(:not(.is-light))` resolved the inner call and left an empty `:has()`. The leftover is caught by the bare pass either way; what needs the loop is `:not(:is(.is-light))`, where the inner call has to resolve BEFORE the `:not` around it can drop, or a prohibition reads as a requirement. Each pass removes at least one pair of parentheses, so it ends. Attribute selectors are handled before bare pseudo-classes, because an attribute value may contain a colon. The prelude normaliser moves into a named function, since the reasoning about what may drop, what must grow, and why the order is what it is had outgrown a comment inside a loop body. Nothing moves again: no element-and-colour pair changes, and no single-class answer changes. Reverting each of the five behaviours separately fails the test on that behaviour's own assertion, so none is carried by another — the nested-argument case needed a compound query to pin at all, because a single-class query cannot tell the loop from the pass that follows it. Also drops two counts of the stylesheet that had gone back into the comments, and a reference to a function that does not exist. --- scripts/color-tuple-css.test.mjs | 156 ++++++++++++++++++++++++------- 1 file changed, 124 insertions(+), 32 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 509d8188b..edbc12f08 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -145,11 +145,65 @@ const indexCache = new Map(); * that needs a third class answering a two-class query, so anything that * quietly shortens a class set defeats it. Where a selector demands * something this file will not parse, one of these goes in the set instead, - * and the query stops matching. `assertUnmodelledIsUnused` holds the name to - * being absent from the stylesheet, so it cannot collide with a real class. + * and the query stops matching. `simpleSelectors` asserts the name is absent + * from the stylesheet before indexing, so it cannot collide with a real + * class. */ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; +/** + * A selector prelude with everything that is not a class made explicit. + * + * A simple selector is only as live as its WHOLE set of requirements, and + * the exact-size rule in `shipsClass` counts classes. So anything else the + * selector demands has to end up in that count, or a rule needing more than + * the query answers it — over-reporting, and the silent direction. + * + * Three kinds of thing appear, and they are not alike: + * + * - `:not(…)` is a PROHIBITION. Its argument names classes the element must + * NOT carry, so reading them as present lets `.notification:not(.is-light)` + * answer `notification.is-light` — a rule that excludes the pair reporting + * it live. It drops, argument and all, and what remains already says + * everything the element carries. + * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a + * box generated for a delete, so the delete is live and calling it dead + * would be a plain misreading. Those are left alone. + * - Everything else — a pseudo-class with parentheses or without, and an + * attribute selector — narrows WHICH elements carrying those classes + * match. `.notification.is-primary:where(.is-light)` and + * `.notification.is-primary:first-child` are the same shape, and treating + * only the parenthesised one as a requirement is how this file came to + * contradict itself. Both leave an `UNMODELLED` behind, so the set grows + * rather than shrinks and the query reads dead. A false alarm is the one + * way this guard may be wrong. + * + * Order carries three separate reasons. Arguments are resolved before the + * caller splits on commas, because they contain commas: + * `.navbar-item:not(.is-active,.is-selected)` is ONE selector, and splitting + * first fragments it and leaves `is-active` looking like a class the element + * carries. Attribute selectors go before bare pseudo-classes, because an + * attribute VALUE may contain a colon. And the argument pass repeats to a + * fixed point, because `[^()]*` cannot cross a parenthesis and `replace` + * does not re-scan its own output: a single pass over + * `:has(:not(.is-light))` resolves the inner call and leaves an empty + * `:has()` that matches nothing, so the set shrinks back to the size of the + * query. Each pass removes at least one pair of parentheses, so it ends. + */ +function requirements(prelude) { + let text = prelude; + let previous; + do { + previous = text; + text = text.replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name) => + name.toLowerCase() === 'not' ? '' : `.${UNMODELLED}` + ); + } while (text !== previous); + return text + .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) + .replace(/(? - name.toLowerCase() === 'not' ? '' : `.${UNMODELLED}` - ); + const prelude = requirements(chunk.slice(chunk.lastIndexOf('}') + 1)); for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; @@ -502,6 +531,69 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'live.' ); + // A requirement written WITHOUT parentheses is the same requirement. + // Treating only the parenthesised ones as real is how this file came to + // assert `:nth-child(even)` dead while answering `:first-child` live. + assert.equal( + live( + '.notification.is-primary:first-child{color:red}', + 'notification.is-primary' + ), + false, + 'a structural pseudo-class restricts which elements match whether or ' + + 'not it takes an argument.' + ); + assert.equal( + live( + '.notification.is-primary:hover{color:red}', + 'notification.is-primary' + ), + false, + 'a rule that applies only on hover does not show the compound renders ' + + 'on its own.' + ); + assert.equal( + live( + '.notification.is-primary[disabled]{color:red}', + 'notification.is-primary' + ), + false, + 'an attribute selector is a requirement the class set has to account ' + + 'for.' + ); + + // A pseudo-ELEMENT is not a requirement. It styles a box generated FOR + // the compound, so the compound renders. + assert.equal( + live(".delete::before{content:''}", 'delete'), + true, + 'a pseudo-element rule renders something for the element it hangs ' + + 'off, so calling that element dead would be a plain misreading.' + ); + + // Nested parentheses. One pass resolves the INNER call and leaves an + // empty `:has()` behind, which matches nothing and shrinks the set back + // to the size of the query. + assert.equal( + live( + '.notification.is-primary:has(:not(.is-light)){color:red}', + 'notification.is-primary' + ), + false, + 'a pseudo-class emptied by resolving its own nested argument still ' + + 'requires something, so it must not vanish.' + ); + assert.equal( + live( + '.notification.is-primary:not(:is(.is-light)){color:red}', + 'notification.is-primary' + ), + true, + 'a prohibition stays a prohibition however its argument is written: ' + + 'resolving the inner call has to leave a `:not()` that then DROPS, ' + + 'or the compound outside it reads dead.' + ); + // A pseudo-class that FORBIDS. The rest of the selector already says // everything the element carries, so the classes inside are not its own. assert.equal( From 64f3d7ca2e4849d157334c4a0a140e246b768a8a Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 19:36:24 -0400 Subject: [PATCH 07/38] fix(bulma-ui): a type or ID selector is a requirement the set has to carry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Everything a selector can say ABOUT an element was being accounted for, and the element itself was not. `a.dropdown-item.is-selected` read as two classes, which says a plain `
` renders. It does not: that pair ships type-qualified and no other way, so this is the first hole in the exact-size rule demonstrable against the built stylesheet rather than latent in it. A type selector is not a token to substitute but the absence of one, so it is found by shape: whatever is left of a simple selector once the classes come out is a qualifier and takes a sentinel. `*` is the exception, since it matches everything and so requires nothing. ID selectors substitute like the rest. Pseudo-elements are removed before that residue is taken, or every `::before` rule would read as qualified. No queried answer moves, again. `dropdown-item.is-selected` flips to dead, which is the point, and the three elements this guard actually asks about all ship bare unqualified compounds. Three comments were saying more than the code does. The fixed-point loop was justified with `:has(:not(…))`, which the bare pass handles either way; the case that needs it is `:not(:is(…))`, where the inner call has to resolve before the `:not` around it can drop. The pseudo-element paragraph claimed the exception covers pseudo-elements, when it covers the `::` spelling — `:after` and the vendor placeholder prefixes take a sentinel, which is the false-alarm side, and telling them from `:hover` would mean keeping a list. And a count of the stylesheet had gone back in. --- scripts/color-tuple-css.test.mjs | 117 ++++++++++++++++++++++++------- 1 file changed, 92 insertions(+), 25 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index edbc12f08..eccfb17a6 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -168,7 +168,11 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; * everything the element carries. * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a * box generated for a delete, so the delete is live and calling it dead - * would be a plain misreading. Those are left alone. + * would be a plain misreading. The `::` spelling is left alone. The legacy + * one-colon spellings are NOT recognised as pseudo-elements and take a + * sentinel like any other bare pseudo-class, which lands them on the false + * -alarm side rather than the silent one. Telling `:after` from `:hover` + * means keeping a list of them, and nothing yet needs it. * - Everything else — a pseudo-class with parentheses or without, and an * attribute selector — narrows WHICH elements carrying those classes * match. `.notification.is-primary:where(.is-light)` and @@ -185,10 +189,13 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; * carries. Attribute selectors go before bare pseudo-classes, because an * attribute VALUE may contain a colon. And the argument pass repeats to a * fixed point, because `[^()]*` cannot cross a parenthesis and `replace` - * does not re-scan its own output: a single pass over - * `:has(:not(.is-light))` resolves the inner call and leaves an empty - * `:has()` that matches nothing, so the set shrinks back to the size of the - * query. Each pass removes at least one pair of parentheses, so it ends. + * does not re-scan its own output. What needs the repeat is a nested call + * inside a `:not()`: one pass over `:not(:is(.is-light))` resolves the inner + * call and leaves `:not(.UNMODELLED)`, and unless the `:not` is reached + * again it never drops, so a prohibition reads as a requirement. Nesting + * the other way round needs nothing — one pass over `:has(:not(…))` leaves + * an empty `:has()`, which the bare pass then sentinels anyway. Each pass + * removes at least one pair of parentheses, so it ends. */ function requirements(prelude) { let text = prelude; @@ -199,9 +206,47 @@ function requirements(prelude) { name.toLowerCase() === 'not' ? '' : `.${UNMODELLED}` ); } while (text !== previous); - return text - .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) - .replace(/(?` renders — over-reporting, and + * the silent direction. + * + * So anything left over once the classes are removed is a qualifier and + * takes a sentinel. `*` is the exception: it matches everything, so it + * requires nothing. + */ +function classesOf(simple) { + const classes = [...simple.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)].map(m => + // A class name may escape a character with a backslash, which is how + // Bulma spells the fractional gap helpers: `.is-gap-0\\.5` is ONE class + // called `is-gap-0.5`. Reading the escape as a separator splits it into + // `is-gap-0` and `5`, which both invents a class and inflates the set + // past the exact-size check. + m[1].replace(/\\(.)/g, '$1') + ); + const qualifier = simple + .replace(/\.(?:\\.|[A-Za-z0-9_-])+/g, '') + .replace(/\*/g, '') + .trim(); + return new Set(qualifier ? [...classes, UNMODELLED] : classes); } function simpleSelectors(css) { @@ -223,18 +268,7 @@ function simpleSelectors(css) { for (const part of prelude.split(',')) { for (const simple of part.split(/[\s>+~]+/)) { if (!simple.includes('.')) continue; - // A class name may escape a character with a backslash, which is - // how Bulma spells the fractional gap helpers: `.is-gap-0\\.5` is - // ONE class called `is-gap-0.5`. Reading the escape as a separator - // splits it into `is-gap-0` and `5`, which both invents a class and - // inflates the set past the exact-size check. - sets.push( - new Set( - [...simple.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)].map(m => - m[1].replace(/\\(.)/g, '$1') - ) - ) - ); + sets.push(classesOf(simple)); } } } @@ -494,11 +528,11 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // The matcher itself, on selectors written for the purpose. Every finding // this file has taken was a matcher bug rather than a library one, and each // was found by measuring the built stylesheet, which only covers the shapes - // Bulma happens to write today. Two of the four `:has()` selectors that ship - // come from our own SCSS, so the shapes are ours to grow. These pin the - // DIRECTION: reading a compound as live when it is not is a missed defect, - // reading it as dead when it is live is a false alarm, and the matcher is - // only ever allowed the second. + // Bulma happens to write today. Some of what ships comes from our own SCSS, + // so the shapes are ours to grow. These pin the DIRECTION: reading a + // compound as live when it is not is a missed defect, reading it as dead + // when it is live is a false alarm, and the matcher is only ever allowed + // the second. it('never reads a compound as live that the selector does not ship', () => { const live = (css, query) => shipsClass(css, query); @@ -594,6 +628,39 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'or the compound outside it reads dead.' ); + // A TYPE or ID selector is a requirement the tokeniser cannot see as a + // token, only as what is left over once the classes are removed. + assert.equal( + live( + 'a.dropdown-item.is-selected{color:red}', + 'dropdown-item.is-selected' + ), + false, + 'a type selector means the rule needs that element, so the classes on ' + + 'their own do not render.' + ); + assert.equal( + live( + '#main.notification.is-primary{color:red}', + 'notification.is-primary' + ), + false, + 'an ID selector is a requirement too.' + ); + assert.equal( + live('*.notification.is-primary{color:red}', 'notification.is-primary'), + true, + 'the universal selector matches everything, so it requires nothing.' + ); + assert.equal( + live( + '.dropdown-item.is-selected{color:red}', + 'dropdown-item.is-selected' + ), + true, + 'an unqualified compound is live, or the three above would be vacuous.' + ); + // A pseudo-class that FORBIDS. The rest of the selector already says // everything the element carries, so the classes inside are not its own. assert.equal( From 7059957032705134b4d4ac1508576e9c9614a686 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 20:12:51 -0400 Subject: [PATCH 08/38] fix(bulma-ui): a rule styles its subject, and only a class prohibition drops MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two more requirements the class set was not counting, both of the same shape as the type selector before them. A COMBINATOR. `.hero .tabs.is-boxed` renders a boxed tabs only inside a hero, so the pair on its own does not render, and the subject now carries a sentinel whenever anything precedes it. The other half of that was worse and had gone unnoticed: every simple selector in a part was indexed, so `.hero.is-primary .tabs` said a rule renders `.hero.is-primary` when what it renders is something inside it. A rule styles its subject. Only the subject is indexed now. A `:not()` over anything but classes. Dropping `:not(:last-child)` answers live where the mirror `.box:first-child` answers dead, which is one requirement read two ways, and a prohibition can add a requirement after all: `:not(:not(.x))` needs `.x`, and two drops leave nothing. So the argument has to be classes and nothing else. Resolution is innermost-first, so `:not(:is(.is-light))` reaches the test already rewritten to `:not(.UNMODELLED)` and still drops, which is right — it is a prohibition however its argument is spelled. Nothing moves. Not one of the element-and-colour pairs and not one of the helper-class queries answers differently, on a third of the index. The single-class path is left as a membership test, deliberately, and now says why in the code. Its callers fail in the opposite direction from the compound path: a compound that reads live where nothing renders drops a real defect out of a comparison that then passes, while a class name that reads live too often has nowhere to land and fails loudly. Tightening it would move those to the quiet side. The quote readers take a backreference, so an opening quote has to be closed by the same character, and they read source with the comments removed. The widening that started this was a no-op either way, since Prettier settles the quote style repo-wide, but a pattern that accepts a mismatched pair describes a literal none of these files can hold. Also: the comment strip is still needed, for the opposite reason it was added. Indexing only the subject already stops a comment from answering for itself; what it stops now is a comment against the selector that follows it landing in that selector's residue, which would make a live compound read dead. --- scripts/color-tuple-css.test.mjs | 145 ++++++++++++++++++++++++------- 1 file changed, 116 insertions(+), 29 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index eccfb17a6..e703e08ad 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -118,6 +118,18 @@ function stylesheet() { * answer for two. */ function shipsClass(css, cls) { + // The two paths answer differently ON PURPOSE, because their callers fail + // in opposite directions. A COMPOUND query asks whether a modifier + // renders, and the answer feeds a set compared against the colours the + // library warns about: saying live where nothing renders removes a real + // defect from that comparison and the test still passes, so the exact-size + // rule is there to stop it. A SINGLE-class query asks whether the + // stylesheet knows a name at all, and every caller of that is shaped so + // saying yes too often fails loudly — the shade `deepEqual`, the `-bis` + // and `-ter` sweep whose extra entry has nowhere to land, the `assert.ok` + // on a keyword that must NOT ship. Tightening the membership test into an + // exact match would move those toward the quiet side, so it stays + // membership. const wanted = cls.split('.'); const index = simpleSelectors(css); if (wanted.length === 1) { @@ -151,6 +163,9 @@ const indexCache = new Map(); */ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; +/** A pseudo-class argument that is a class selector list and nothing else. */ +const ONLY_CLASSES = /^(?:\s*\.(?:\\.|[A-Za-z0-9_-])+\s*,?)+$/; + /** * A selector prelude with everything that is not a class made explicit. * @@ -161,11 +176,21 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; * * Three kinds of thing appear, and they are not alike: * - * - `:not(…)` is a PROHIBITION. Its argument names classes the element must - * NOT carry, so reading them as present lets `.notification:not(.is-light)` - * answer `notification.is-light` — a rule that excludes the pair reporting - * it live. It drops, argument and all, and what remains already says - * everything the element carries. + * - `:not(…)` over CLASSES is a PROHIBITION. Its argument names classes the + * element must NOT carry, so reading them as present lets + * `.notification:not(.is-light)` answer `notification.is-light` — a rule + * that excludes the pair reporting it live. It drops, argument and all, + * and what remains already says everything the element carries. + * + * Only over classes. `:not(:last-child)` prohibits a POSITION, and + * dropping it answers live where the mirror `.box:first-child` answers + * dead, which is the same requirement read two ways. And a prohibition + * can add a requirement after all: `:not(:not(.x))` needs `.x`, and two + * drops leave nothing. So the argument has to be classes and nothing + * else, checked as written; anything else is a requirement like any + * other. Resolution runs innermost-first, so `:not(:is(.is-light))` + * reaches this test as `:not(.UNMODELLED)` and still drops, which is + * right — it is a prohibition however its argument is spelled. * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a * box generated for a delete, so the delete is live and calling it dead * would be a plain misreading. The `::` spelling is left alone. The legacy @@ -202,8 +227,10 @@ function requirements(prelude) { let previous; do { previous = text; - text = text.replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name) => - name.toLowerCase() === 'not' ? '' : `.${UNMODELLED}` + text = text.replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name, argument) => + name.toLowerCase() === 'not' && ONLY_CLASSES.test(argument) + ? '' + : `.${UNMODELLED}` ); } while (text !== previous); return ( @@ -224,16 +251,21 @@ function requirements(prelude) { * `requirements` handles everything a selector can say ABOUT an element. * What it cannot see is the element itself: a type selector is not a token * to substitute but the absence of one, and only the shape of a simple - * selector tells you it is there. `a.dropdown-item.is-selected` is the only - * form Bulma ships that pair in, so reading it as two classes says a plain + * selector tells you it is there. Bulma ships the `dropdown-item` selected + * pair type-qualified and no other way, so reading `a.dropdown-item + * .is-selected` as two classes says a plain * `
` renders — over-reporting, and * the silent direction. * * So anything left over once the classes are removed is a qualifier and * takes a sentinel. `*` is the exception: it matches everything, so it * requires nothing. + * + * A combinator is the same kind of thing one level up. `.hero .tabs.is-boxed` + * styles a boxed tabs only inside a hero, so the pair on its own does not + * render, and `contextual` is how the caller says so. */ -function classesOf(simple) { +function classesOf(simple, contextual) { const classes = [...simple.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)].map(m => // A class name may escape a character with a backslash, which is how // Bulma spells the fractional gap helpers: `.is-gap-0\\.5` is ONE class @@ -246,7 +278,7 @@ function classesOf(simple) { .replace(/\.(?:\\.|[A-Za-z0-9_-])+/g, '') .replace(/\*/g, '') .trim(); - return new Set(qualifier ? [...classes, UNMODELLED] : classes); + return new Set(qualifier || contextual ? [...classes, UNMODELLED] : classes); } function simpleSelectors(css) { @@ -266,10 +298,15 @@ function simpleSelectors(css) { // the last `}` in it. const prelude = requirements(chunk.slice(chunk.lastIndexOf('}') + 1)); for (const part of prelude.split(',')) { - for (const simple of part.split(/[\s>+~]+/)) { - if (!simple.includes('.')) continue; - sets.push(classesOf(simple)); - } + // Only the SUBJECT of a part is styled by it. `.hero .tabs` styles + // the tabs, so indexing the hero as well says a rule renders it when + // that rule renders something inside it. The subject is the last + // simple selector, and it carries a requirement of its own whenever + // anything precedes it. + const simples = part.split(/[\s>+~]+/).filter(Boolean); + const subject = simples[simples.length - 1]; + if (!subject?.includes('.')) continue; + sets.push(classesOf(subject, simples.length > 1)); } } indexCache.set(css, sets); @@ -284,12 +321,20 @@ function simpleSelectors(css) { * document the helper they call, so a comment quoting the call would invent * an element and fail the comparison for a reason unrelated to the library. */ +/** + * A quoted string literal, opening and closing quote the SAME character. + * + * `['"]…['"]` accepts a mismatched pair, which is not a literal any of these + * sources could contain. Callers read `[2]`. + */ +const QUOTED = /(['"])([^'"]+)\1/g; + const codeOnly = source => source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/[^\n]*/g, ''); /** A named `as const` string tuple, read from a source file. */ function tupleFrom(path, name) { - const source = readFileSync(path, 'utf8'); + const source = codeOnly(readFileSync(path, 'utf8')); const block = new RegExp( `export const ${name} = \\[(.*?)\\] as const;`, 's' @@ -299,7 +344,7 @@ function tupleFrom(path, name) { `could not find the \`${name}\` tuple in ${path}, so this guard cannot ` + 'run. Fix the pattern in the same change that moved it.' ); - const values = [...block[1].matchAll(/['"]([^'"]+)['"]/g)].map(m => m[1]); + const values = [...block[1].matchAll(QUOTED)].map(m => m[2]); assert.ok(values.length > 0, `the \`${name}\` tuple read as empty`); return values; } @@ -318,7 +363,7 @@ function colorKeywords() { const source = codeOnly(readFileSync(COLOR_CLASSES, 'utf8')); const copies = [ ...source.matchAll(/\[\s*\.\.\.validColors\s*,([^\]]*)\]/g), - ].map(m => [...m[1].matchAll(/['"]([^'"]+)['"]/g)].map(x => x[1])); + ].map(m => [...m[1].matchAll(QUOTED)].map(x => x[2])); // Counted against the spellings that EXIST, not against zero. A `> 0` // guard let a copy this pattern stopped matching drop out silently while // the function claimed to read every one of them. @@ -420,7 +465,7 @@ function warningCallers() { break; } } - const named = /warnUnstyledColor\(\s*['"]([^'"]+)['"]/.exec(text); + const named = /warnUnstyledColor\(\s*(['"])([^'"]+)\1/.exec(text); // A call whose component is not a string literal cannot be attributed // to an element, and is counted below rather than skipped quietly. if (!named) continue; @@ -460,20 +505,18 @@ function warningCallers() { assert.ok( args.length < 3 || args[2].startsWith('['), `${path} passes \`${args[2]}\` as \`extraUnstyled\` to ` + - `\`${named[1]}\`, which this guard can only read as an inline ` + + `\`${named[2]}\`, which this guard can only read as an inline ` + 'list. Read as none, it would empty the expected set and pass ' + 'the checks that use it without testing anything.' ); callers.push({ - component: named[1], + component: named[2], path, // From `args[2]` alone, the argument validated just above. Taking // every bracketed span in the call text let a bracketed expression // in an earlier argument contribute a value, failing with a message // naming something the library never declared. - extraUnstyled: [...(args[2] ?? '').matchAll(/['"]([^'"]+)['"]/g)].map( - x => x[1] - ), + extraUnstyled: [...(args[2] ?? '').matchAll(QUOTED)].map(x => x[2]), }); } assert.equal( @@ -518,10 +561,10 @@ function acceptedKeywords(component, keywords) { /** The colours `CSS_BACKED` names to the developer as ones that work. */ function cssBackedColors() { - const source = readFileSync(DEPRECATIONS, 'utf8'); - const line = /const CSS_BACKED =\s*\n?\s*['"]([^'"]+)['"]/.exec(source); + const source = codeOnly(readFileSync(DEPRECATIONS, 'utf8')); + const line = /const CSS_BACKED =\s*\n?\s*(['"])([^'"]+)\1/.exec(source); assert.ok(line, 'could not find `CSS_BACKED` in colorDeprecations.ts'); - return line[1].split(',').map(v => v.trim()); + return line[2].split(',').map(v => v.trim()); } describe('the colour tuples agree with the shipped stylesheet', () => { @@ -661,6 +704,21 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'an unqualified compound is live, or the three above would be vacuous.' ); + // A COMBINATOR is a requirement one level up, and only the subject of a + // part is styled by it. + assert.equal( + live('.hero .tabs.is-boxed{color:red}', 'tabs.is-boxed'), + false, + 'a compound that renders only inside an ancestor does not render on ' + + 'its own.' + ); + assert.equal( + live('.hero.is-primary .tabs{color:red}', 'hero.is-primary'), + false, + 'a rule styles its subject, so indexing the ancestor too says a rule ' + + 'renders something it only renders inside.' + ); + // A pseudo-class that FORBIDS. The rest of the selector already says // everything the element carries, so the classes inside are not its own. assert.equal( @@ -668,6 +726,22 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, '`:not()` is a prohibition, so the compound outside it is still live.' ); + assert.equal( + live('.box.is-primary:not(:last-child){color:red}', 'box.is-primary'), + false, + 'a prohibition over a POSITION is the same requirement as the ' + + '`:first-child` above, read the other way round, and must answer ' + + 'the same.' + ); + assert.equal( + live( + '.notification.is-primary:not(:not(.is-light)){color:red}', + 'notification.is-primary' + ), + false, + 'two prohibitions make a requirement, so dropping both leaves a rule ' + + 'that needs a third class answering a two-class query.' + ); assert.equal( live( '.navbar-item:not(.is-active,.is-selected){color:red}', @@ -686,14 +760,27 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); // A comment is not a selector, and an escaped dot is not a separator. + // Comments. Indexing only the subject already stops a comment BEFORE a + // rule from answering for itself, so what the strip is still for is the + // other half: its words land in the residue of the real selector that + // follows and qualify a rule nothing qualifies. assert.equal( live( '/* .notification.is-primary */ .box{color:red}', 'notification.is-primary' ), false, - 'a comment naming a compound would answer for it, which reads as a ' + - 'live modifier.' + 'a comment naming a compound must not answer for it.' + ); + assert.equal( + live( + '.a{color:red}/* note */.notification.is-primary{color:blue}', + 'notification.is-primary' + ), + true, + 'a comment sitting against the selector that follows it is not part ' + + 'of that selector, and reading it as one makes a live compound read ' + + 'dead.' ); // `shipsClass` spells a compound with a `.`, so a class carrying a // literal dot cannot be asked for at all. What matters is that it From 4274e47dd981eba2566b6362c2f01e72a579caa4 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 20:30:58 -0400 Subject: [PATCH 09/38] fix(bulma-ui): split the class-list check instead of nesting its quantifiers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CodeQL is red on the pattern that decides whether a `:not()` argument is classes and nothing else. It holds optional whitespace inside a quantifier inside another quantifier, so the two `\s*` can divide a run of spaces between them in exponentially many ways: `.a .a .a …` takes a quarter of a second by two dozen terms on this machine and grows by roughly four with every pair after. Splitting on the separator first leaves one unambiguous pattern per part, which runs flat at any length. A `:not()` now leaves a `*` behind rather than nothing. Dropping it to empty was fine while it sat beside something, and wrong when it WAS the simple selector: `.hero.is-primary :not(.is-light)` collapsed to `.hero.is-primary`, which handed the ancestor the subject position and said a rule renders the hero when it renders something inside it. That is the hole the previous commit closed, reopened through a different door. The universal selector is exactly what a prohibition leaves behind — it matches everything, it holds the position, and the qualifier check already discards it. The string-literal pattern takes a backreference on both ends. Excluding both quote characters from the body was the other way to be wrong: a literal containing the other one matched nothing at all, which is the silent empty read rather than a bad value. Two docblocks had drifted onto the wrong symbol, one describing `simpleSelectors` from above the cache it uses, the other describing `codeOnly` from above a regex that had been wedged underneath it. No answer moves, and the index is the same size. --- scripts/color-tuple-css.test.mjs | 77 +++++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 20 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index e703e08ad..40a755aaf 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -141,13 +141,7 @@ function shipsClass(css, cls) { ); } -/** - * The class sets of every simple selector in the stylesheet. - * - * One pass per file read. Split rather than matched: a `[^{}]+` scan over a - * minified stylesheet of this size backtracks badly, where splitting is - * linear. - */ +/** Built once per stylesheet, keyed by its text. */ const indexCache = new Map(); /** @@ -163,8 +157,22 @@ const indexCache = new Map(); */ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; -/** A pseudo-class argument that is a class selector list and nothing else. */ -const ONLY_CLASSES = /^(?:\s*\.(?:\\.|[A-Za-z0-9_-])+\s*,?)+$/; +/** One class selector, escapes included. */ +const CLASS_SELECTOR = /^\.(?:\\.|[A-Za-z0-9_-])+$/; + +/** + * Is this pseudo-class argument a class selector list and nothing else? + * + * Split rather than matched. Writing the list as one pattern puts a + * quantifier holding optional whitespace inside another quantifier, and the + * two `\s*` can divide a run of spaces between them in exponentially many + * ways: `.a .a .a …` against such a pattern takes seconds by a couple of + * dozen terms, and CodeQL fails the build over it. Splitting on the + * separator first leaves one unambiguous pattern per part. + */ +const onlyClasses = argument => + argument.trim() !== '' && + argument.split(',').every(part => CLASS_SELECTOR.test(part.trim())); /** * A selector prelude with everything that is not a class made explicit. @@ -179,8 +187,18 @@ const ONLY_CLASSES = /^(?:\s*\.(?:\\.|[A-Za-z0-9_-])+\s*,?)+$/; * - `:not(…)` over CLASSES is a PROHIBITION. Its argument names classes the * element must NOT carry, so reading them as present lets * `.notification:not(.is-light)` answer `notification.is-light` — a rule - * that excludes the pair reporting it live. It drops, argument and all, - * and what remains already says everything the element carries. + * that excludes the pair reporting it live. What remains already says + * everything the element carries, so it goes, argument and all, and + * leaves a `*` where it stood. + * + * The `*` is not decoration. A prohibition that is the WHOLE simple + * selector leaves nothing behind if it drops to empty, and the combinator + * before it then has no subject — `.hero.is-primary :not(.is-light)` + * collapses to `.hero.is-primary`, which hands the ancestor the subject + * position and says a rule renders the hero when it renders something + * inside it. The universal selector is exactly what a prohibition leaves: + * it matches everything, it holds the position, and it is already + * discarded as a qualifier. * * Only over classes. `:not(:last-child)` prohibits a POSITION, and * dropping it answers live where the mirror `.box:first-child` answers @@ -228,8 +246,8 @@ function requirements(prelude) { do { previous = text; text = text.replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name, argument) => - name.toLowerCase() === 'not' && ONLY_CLASSES.test(argument) - ? '' + name.toLowerCase() === 'not' && onlyClasses(argument) + ? '*' : `.${UNMODELLED}` ); } while (text !== previous); @@ -281,6 +299,13 @@ function classesOf(simple, contextual) { return new Set(qualifier || contextual ? [...classes, UNMODELLED] : classes); } +/** + * The class sets of every simple selector in the stylesheet. + * + * One pass per file read. Split rather than matched: a `[^{}]+` scan over a + * minified stylesheet of this size backtracks badly, where splitting is + * linear. + */ function simpleSelectors(css) { if (!indexCache.has(css)) { assert.ok( @@ -321,16 +346,19 @@ function simpleSelectors(css) { * document the helper they call, so a comment quoting the call would invent * an element and fail the comparison for a reason unrelated to the library. */ +const codeOnly = source => + source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/[^\n]*/g, ''); + /** - * A quoted string literal, opening and closing quote the SAME character. + * A quoted string literal: same character either end, anything between. * - * `['"]…['"]` accepts a mismatched pair, which is not a literal any of these - * sources could contain. Callers read `[2]`. + * `['"]…['"]` accepts a mismatched pair, which is not a literal any source + * can hold. Excluding both quote characters from the BODY instead is the + * other way to be wrong: a literal containing the other one then matches + * nothing at all, which is the silent empty read rather than a bad value. + * The backreference settles both. Callers read `[2]`. */ -const QUOTED = /(['"])([^'"]+)\1/g; - -const codeOnly = source => - source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/[^\n]*/g, ''); +const QUOTED = /(['"])((?:(?!\1).)+)\1/g; /** A named `as const` string tuple, read from a source file. */ function tupleFrom(path, name) { @@ -719,6 +747,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'renders something it only renders inside.' ); + // A prohibition standing on its own is still an element, and the + // combinator before it still has a subject. + assert.equal( + live('.hero.is-primary :not(.is-light){color:red}', 'hero.is-primary'), + false, + 'a `:not()` that IS the simple selector must not vanish and hand the ' + + 'subject position back to its ancestor.' + ); + // A pseudo-class that FORBIDS. The rest of the selector already says // everything the element carries, so the classes inside are not its own. assert.equal( From 662c5dd1742211f8167f9a2677d6ab075d5d9381 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 20:48:56 -0400 Subject: [PATCH 10/38] test(bulma-ui): pin the pseudo-element exception with a query that reaches it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The assertion for it used a single class, which takes the membership path and never reaches the exact-size rule, so it passed whether pseudo-elements were stripped or sentinelled. It looked like it was holding the exception and it was holding nothing. A compound query reaches the rule. That is the second time an assertion in this file has been written on the path that cannot see the behaviour it names, so it is worth saying plainly: the membership path answers a bare class, the exact-size path answers a compound, and only the second can tell a requirement from its absence. A `:not()` over a COMPOUND of classes now drops like any other class prohibition. `:not(.is-a.is-b)` names classes and nothing else, and the check read one class per part, so it was taking a sentinel and reading as a requirement. Nothing ships that shape today, and the direction was the safe one, but the rule and its description had come apart. A descendant inside the argument still takes a sentinel, since that is a shape this file does not model, and both halves are pinned now. The comment describing the fixed-point loop still said a pass over `:has(:not(…))` leaves an empty `:has()`. It leaves `:has(*)` since the prohibition started leaving a universal selector behind. --- scripts/color-tuple-css.test.mjs | 44 +++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 40a755aaf..1f8afa807 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -158,7 +158,7 @@ const indexCache = new Map(); const UNMODELLED = 'bestax-guard-unmodelled-requirement'; /** One class selector, escapes included. */ -const CLASS_SELECTOR = /^\.(?:\\.|[A-Za-z0-9_-])+$/; +const CLASS_SELECTOR = /\.(?:\\.|[A-Za-z0-9_-])+/g; /** * Is this pseudo-class argument a class selector list and nothing else? @@ -172,7 +172,14 @@ const CLASS_SELECTOR = /^\.(?:\\.|[A-Za-z0-9_-])+$/; */ const onlyClasses = argument => argument.trim() !== '' && - argument.split(',').every(part => CLASS_SELECTOR.test(part.trim())); + argument.split(',').every(part => { + // Whatever is left once the class selectors come out has to be nothing. + // A COMPOUND of them counts — `:not(.is-a.is-b)` prohibits carrying both + // and names no other kind of thing — but a space does not, because a + // descendant inside the argument is a shape this file does not model. + const trimmed = part.trim(); + return trimmed !== '' && trimmed.replace(CLASS_SELECTOR, '') === ''; + }); /** * A selector prelude with everything that is not a class made explicit. @@ -237,8 +244,8 @@ const onlyClasses = argument => * call and leaves `:not(.UNMODELLED)`, and unless the `:not` is reached * again it never drops, so a prohibition reads as a requirement. Nesting * the other way round needs nothing — one pass over `:has(:not(…))` leaves - * an empty `:has()`, which the bare pass then sentinels anyway. Each pass - * removes at least one pair of parentheses, so it ends. + * `:has(*)`, which the bare pass then sentinels anyway. Each pass removes at + * least one pair of parentheses, so it ends. */ function requirements(prelude) { let text = prelude; @@ -669,11 +676,18 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // A pseudo-ELEMENT is not a requirement. It styles a box generated FOR // the compound, so the compound renders. + // A COMPOUND query, because a single-class one takes the membership + // path and never reaches the exact-size rule, so it would pass whether + // `::` is stripped or sentinelled. assert.equal( - live(".delete::before{content:''}", 'delete'), + live( + ".notification.is-primary::before{content:''}", + 'notification.is-primary' + ), true, 'a pseudo-element rule renders something for the element it hangs ' + - 'off, so calling that element dead would be a plain misreading.' + 'off — `.delete::before` is how the X gets drawn — so treating it ' + + 'as a requirement would call a live modifier dead.' ); // Nested parentheses. One pass resolves the INNER call and leaves an @@ -763,6 +777,24 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, '`:not()` is a prohibition, so the compound outside it is still live.' ); + assert.equal( + live( + '.notification.is-primary:not(.is-a.is-b){color:red}', + 'notification.is-primary' + ), + true, + 'a COMPOUND of classes is still classes and nothing else, so ' + + 'prohibiting it prohibits and does not require.' + ); + assert.equal( + live( + '.notification.is-primary:not(.is-a .is-b){color:red}', + 'notification.is-primary' + ), + false, + 'a descendant inside the argument is a shape this file does not ' + + 'model, so it is a requirement like anything else it cannot read.' + ); assert.equal( live('.box.is-primary:not(:last-child){color:red}', 'box.is-primary'), false, From 4f3b7c2d13d5570fbd3d83955783c655fc4c275c Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 21:10:04 -0400 Subject: [PATCH 11/38] fix(bulma-ui): resolve pseudo-class arguments once, and count the at-rule Repeating the argument pass to a fixed point was the defect, not the fix for one. It resolved an inner call to something CLASS-SHAPED, which the class-list check then accepted, so `:not(:nth-last-child(1))` dropped and read live while the identical `:not(:last-child)` read dead. One pass keeps them the same: `[^()]*` cannot cross a parenthesis and `replace` does not re-scan its own output, so a nested call leaves its enclosing construct unmatched, and the bare pass reads that as the requirement it is. The loop was also doing nothing it appeared to be doing. It produced an identical index over the shipped stylesheet and identical answers on every nesting shape I could write, so removing it is a simplification as well as a correction. The guard I had added against a sentinel reaching the class-list check went with it: with one pass the enclosing call is never matched, so that check can never see one. A rule inside `@media`, `@supports` or `@container` now carries a requirement. It renders for some readers and not others, which is what `:first-child` says about elements, and the file already counts that. Half the rules in the stylesheet are inside one and none of the answers this guard asks moves, which is the same result the last four of these changes had. `@layer` is not a condition and does not count. An at-rule prelude is no longer read as a selector, which it never was. It produces no set in the stylesheet as it stands, because the conditions here are all numeric, so this is a correctness fix ahead of a `(hover:hover)` rather than a repair of one. Two assertions were passing without reaching what they named. The subject-only rule was pinned by a compound query, which cannot see which simple selector was indexed, because the contextual sentinel makes either one too wide to match; asking for the ancestor by name can. And the nested prohibition is pinned by the case that reverses, not the one that agrees. --- scripts/color-tuple-css.test.mjs | 151 +++++++++++++++++++++++++------ 1 file changed, 121 insertions(+), 30 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 1f8afa807..7be9a7f9e 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -157,6 +157,15 @@ const indexCache = new Map(); */ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; +/** + * An at-rule whose contents apply only sometimes. + * + * `@media`, `@supports` and `@container` each wrap their rules in a + * condition. `@layer` and `@font-face` and the rest do not, so a rule under + * one of those is as live as a rule at the top level. + */ +const CONDITIONAL_AT_RULE = /^@(media|supports|container)\b/i; + /** One class selector, escapes included. */ const CLASS_SELECTOR = /\.(?:\\.|[A-Za-z0-9_-])+/g; @@ -232,34 +241,32 @@ const onlyClasses = argument => * rather than shrinks and the query reads dead. A false alarm is the one * way this guard may be wrong. * - * Order carries three separate reasons. Arguments are resolved before the - * caller splits on commas, because they contain commas: + * Order carries two reasons. Arguments are handled before the caller splits + * on commas, because they contain commas: * `.navbar-item:not(.is-active,.is-selected)` is ONE selector, and splitting * first fragments it and leaves `is-active` looking like a class the element * carries. Attribute selectors go before bare pseudo-classes, because an - * attribute VALUE may contain a colon. And the argument pass repeats to a - * fixed point, because `[^()]*` cannot cross a parenthesis and `replace` - * does not re-scan its own output. What needs the repeat is a nested call - * inside a `:not()`: one pass over `:not(:is(.is-light))` resolves the inner - * call and leaves `:not(.UNMODELLED)`, and unless the `:not` is reached - * again it never drops, so a prohibition reads as a requirement. Nesting - * the other way round needs nothing — one pass over `:has(:not(…))` leaves - * `:has(*)`, which the bare pass then sentinels anyway. Each pass removes at - * least one pair of parentheses, so it ends. + * attribute VALUE may contain a colon. + * + * One pass, and this is the part that took longest to get right. `[^()]*` + * cannot cross a parenthesis, so a nested call leaves its enclosing one + * unmatched, and `replace` does not re-scan what it wrote. That is the + * correct answer rather than a gap: a construct whose argument could not be + * read is a requirement, and the bare pass sentinels it. Repeating to a + * fixed point looked like an improvement and was the opposite — it resolved + * the inner call to something CLASS-SHAPED, which `onlyClasses` then + * accepted, so `:not(:nth-last-child(1))` dropped and read live while the + * identical `:not(:last-child)` read dead. One pass keeps them the same, + * and keeps the one that is wrong on the loud side. */ function requirements(prelude) { - let text = prelude; - let previous; - do { - previous = text; - text = text.replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name, argument) => - name.toLowerCase() === 'not' && onlyClasses(argument) - ? '*' - : `.${UNMODELLED}` - ); - } while (text !== previous); return ( - text + prelude + .replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name, argument) => + name.toLowerCase() === 'not' && onlyClasses(argument) + ? '*' + : `.${UNMODELLED}` + ) .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) .replace(/(? 0; + closed-- + ) { + open.pop(); + } + // The last chunk is whatever trails the final `{`, and opens nothing. + if (i === chunks.length - 1) break; // Each `{` is preceded by a prelude; the selector is whatever follows // the last `}` in it. - const prelude = requirements(chunk.slice(chunk.lastIndexOf('}') + 1)); + const heading = chunk.slice(chunk.lastIndexOf('}') + 1).trim(); + // An at-rule prelude is not a selector. Reading it as one indexed + // `@media (hover:hover)` as a class set, and the rules INSIDE it are + // what this is really about. + if (heading.startsWith('@')) { + open.push(CONDITIONAL_AT_RULE.test(heading)); + continue; + } + const conditional = open.some(Boolean); + open.push(false); + const prelude = requirements(heading); for (const part of prelude.split(',')) { // Only the SUBJECT of a part is styled by it. `.hero .tabs` styles // the tabs, so indexing the hero as well says a rule renders it when @@ -338,7 +373,7 @@ function simpleSelectors(css) { const simples = part.split(/[\s>+~]+/).filter(Boolean); const subject = simples[simples.length - 1]; if (!subject?.includes('.')) continue; - sets.push(classesOf(subject, simples.length > 1)); + sets.push(classesOf(subject, simples.length > 1 || conditional)); } } indexCache.set(css, sets); @@ -500,7 +535,9 @@ function warningCallers() { break; } } - const named = /warnUnstyledColor\(\s*(['"])([^'"]+)\1/.exec(text); + const named = new RegExp( + `warnUnstyledColor\\(\\s*${QUOTED.source}` + ).exec(text); // A call whose component is not a string literal cannot be attributed // to an element, and is counted below rather than skipped quietly. if (!named) continue; @@ -707,10 +744,19 @@ describe('the colour tuples agree with the shipped stylesheet', () => { '.notification.is-primary:not(:is(.is-light)){color:red}', 'notification.is-primary' ), - true, - 'a prohibition stays a prohibition however its argument is written: ' + - 'resolving the inner call has to leave a `:not()` that then DROPS, ' + - 'or the compound outside it reads dead.' + false, + 'a prohibition whose argument had to be resolved away is no longer ' + + 'readable as one, and guessing is how the identical ' + + '`:not(:nth-last-child(1))` and `:not(:last-child)` came to answer ' + + 'differently.' + ); + assert.equal( + live( + '.notification.is-primary:not(:nth-last-child(1)){color:red}', + 'notification.is-primary' + ), + false, + 'and the two spellings of that one requirement answer the same.' ); // A TYPE or ID selector is a requirement the tokeniser cannot see as a @@ -746,6 +792,42 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'an unqualified compound is live, or the three above would be vacuous.' ); + // An AT-RULE condition is a requirement on the reader rather than the + // element, and it counts the same way. + assert.equal( + live( + '@media print{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a rule that applies only under a media query does not show the ' + + 'compound renders, the same as one that applies only to a first ' + + 'child.' + ); + assert.equal( + live( + '@layer base{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + true, + 'a layer is not a condition, so a rule inside one is as live as a ' + + 'rule at the top level.' + ); + assert.equal( + live( + '@media print{.box{color:red}}.notification.is-primary{color:blue}', + 'notification.is-primary' + ), + true, + 'the condition has to be popped when its block closes, or every rule ' + + 'after a media query reads conditional.' + ); + assert.equal( + live('@media (hover:hover){.box{color:red}}', 'hover'), + false, + 'an at-rule prelude is not a selector and its words are not classes.' + ); + // A COMBINATOR is a requirement one level up, and only the subject of a // part is styled by it. assert.equal( @@ -760,6 +842,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a rule styles its subject, so indexing the ancestor too says a rule ' + 'renders something it only renders inside.' ); + // A COMPOUND query cannot tell which simple selector was indexed, since + // the contextual sentinel makes either one too wide to match. Asking + // for the ancestor by NAME can. + assert.equal( + live('.hero.is-primary .tabs{color:red}', 'hero'), + false, + 'the ancestor of a rule is not styled by it, so the stylesheet does ' + + 'not know that name from this rule alone.' + ); // A prohibition standing on its own is still an element, and the // combinator before it still has a subject. From 697f9dd39327b58c07ec704ced44d1e7a9b500c7 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 21:27:39 -0400 Subject: [PATCH 12/38] fix(bulma-ui): a statement at-rule is not a heading, and an argument is not a selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A statement at-rule ends in a semicolon rather than a block, so it shares a chunk with whatever follows it. `@charset "utf-8";@media print` was tested as one heading, and since it starts with `@charset` the media query glued to it opened as unconditional, which is the silent side. `@import "x";.box` is the same shape and skipped a real rule instead. The prelude is now taken from the last semicolon as well as the last brace. Declarations end in semicolons too, but they sit before the closing brace and are already gone by then. Whatever remains inside parentheses is now removed. With one pass an unresolved call keeps its argument TEXT, and the caller splits on commas, so `:has(:nth-child(2),.notification.is-primary,.z)` fragmented into a clean `.notification.is-primary` carrying no requirement at all. This is the comma problem the first commit on this branch fixed, one nesting level down. The removal is text-level and happens after every decision has been taken, so it cannot turn a requirement into a class, which is what the fixed-point loop did and why it went. The `@media (hover:hover)` assertion was passing whether or not at-rule preludes were indexed. The shape that actually bites is a decimal — a tokeniser reading a prelude as a selector sees `.5rem` in a length and calls it a class — so that is what the assertion asks for now. Third one of these in this file, and the same lesson each time: an assertion that cannot reach the behaviour it names is worse than no assertion, because it looks like coverage. The `:not()` docblock still claimed `:not(:is(.is-light))` drops. The commit before this one made it a requirement. --- scripts/color-tuple-css.test.mjs | 102 ++++++++++++++++++++++++------- 1 file changed, 81 insertions(+), 21 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 7be9a7f9e..76c8c2b84 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -222,9 +222,10 @@ const onlyClasses = argument => * can add a requirement after all: `:not(:not(.x))` needs `.x`, and two * drops leave nothing. So the argument has to be classes and nothing * else, checked as written; anything else is a requirement like any - * other. Resolution runs innermost-first, so `:not(:is(.is-light))` - * reaches this test as `:not(.UNMODELLED)` and still drops, which is - * right — it is a prohibition however its argument is spelled. + * other. A nested call counts as anything else: `:not(:is(.is-light))` + * is never matched here at all, because the pattern cannot cross the + * inner parenthesis, and the bare pass reads the `:not` as the + * requirement it could not verify. * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a * box generated for a delete, so the delete is live and calling it dead * would be a plain misreading. The `::` spelling is left alone. The legacy @@ -260,21 +261,31 @@ const onlyClasses = argument => * and keeps the one that is wrong on the loud side. */ function requirements(prelude) { - return ( - prelude - .replace(/:([a-z-]+)\(([^()]*)\)/gi, (_, name, argument) => - name.toLowerCase() === 'not' && onlyClasses(argument) - ? '*' - : `.${UNMODELLED}` - ) - .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) - .replace(/(? + name.toLowerCase() === 'not' && onlyClasses(argument) + ? '*' + : `.${UNMODELLED}` + ) + .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) + .replace(/(? { 'an at-rule prelude is not a selector and its words are not classes.' ); + // A STATEMENT at-rule ends in a semicolon rather than a block, so it + // shares a chunk with whatever follows it. + assert.equal( + live( + '@charset "utf-8";@media print{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a statement at-rule glued to the media query after it must not be ' + + 'what decides whether that media query is a condition.' + ); + assert.equal( + live( + '@import "x.css";.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'and it must not swallow a real rule either.' + ); + + // An at-rule prelude read as a selector finds classes in it. A decimal + // is the shape that bites: the tokeniser sees `.5rem` and calls it one. + assert.equal( + live('@media (min-width:1.5rem){.box{color:red}}', '5rem'), + false, + 'a length in a media condition is not a class, and reading the ' + + 'prelude as a selector is how it becomes one.' + ); + + // An argument the passes could not resolve leaves its TEXT behind, and + // the caller splits on commas. + assert.equal( + live( + '.x:has(:nth-child(2), .notification.is-primary, .z){color:red}', + 'notification.is-primary' + ), + false, + 'an unresolved argument must not fragment on its own commas and hand ' + + 'back a clean compound with no requirement on it.' + ); + // A COMBINATOR is a requirement one level up, and only the subject of a // part is styled by it. assert.equal( From cb8d7c3e4835c9a43d2f34db67ff7c8474cd53fd Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 21:51:29 -0400 Subject: [PATCH 13/38] fix(bulma-ui): ask the two questions separately, and stop parsing for its own sake MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Whether a rule STYLES a compound and whether the stylesheet KNOWS a name are different questions, and one index was answering both. Indexing only the subject is right for the first and wrong for the second: a class that only ever appears as an ancestor stopped being findable, and a name going missing is the quiet failure for the one sweep that compares what the CSS ships against what the tuple carries. That is the first defect this file was written for, so it is the wrong place to be quiet. There are now two indexes: the subject sets, exact-size, for compounds, and every name mentioned anywhere for a bare class. Over a hundred names come back, none of them a colour helper today. The semicolon cut is now only for STATEMENT at-rules. A declaration before a heading is native nesting, and cutting there handed back `.tabs.is-boxed` from `.hero{color:red;.tabs.is-boxed{…}}` as though it stood alone, where the flattened form of that same rule reads dead. Left whole, the declaration lands in the qualifier residue and the nested rule reads dead too, which is the answer this file wants until it models nesting properly. Two of the four substitution passes were parser for its own sake. A bare pseudo-class and an ID cannot contain a `.`, so they arrive at the residue check intact and are counted there; removing their passes changed no answer and no set. The attribute pass stays, because an attribute VALUE is arbitrary text and `[data-x=".foo"]` really would put `foo` in the class set, and it has an assertion now. Nothing pins the at-rule prelude skip and nothing can. A condition is parenthesised, the paren strip removes it before any tokenising, and what survives outside carries no `.` in any at-rule CSS defines. Two attempts at an assertion both passed with the skip removed, so the comment says that rather than a third one pretending otherwise. What the skip really decides is which entry goes on the condition stack, and that is held. One more stale comment about an empty `:has()`, which has not been the behaviour for two commits. --- scripts/color-tuple-css.test.mjs | 145 ++++++++++++++++++++----------- 1 file changed, 95 insertions(+), 50 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 76c8c2b84..368548b10 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -118,24 +118,29 @@ function stylesheet() { * answer for two. */ function shipsClass(css, cls) { - // The two paths answer differently ON PURPOSE, because their callers fail - // in opposite directions. A COMPOUND query asks whether a modifier - // renders, and the answer feeds a set compared against the colours the - // library warns about: saying live where nothing renders removes a real - // defect from that comparison and the test still passes, so the exact-size - // rule is there to stop it. A SINGLE-class query asks whether the - // stylesheet knows a name at all, and every caller of that is shaped so - // saying yes too often fails loudly — the shade `deepEqual`, the `-bis` - // and `-ter` sweep whose extra entry has nowhere to land, the `assert.ok` - // on a keyword that must NOT ship. Tightening the membership test into an - // exact match would move those toward the quiet side, so it stays - // membership. + // Two questions, two indexes, and they are not the same question. + // + // A COMPOUND query asks whether a modifier RENDERS. Its answer feeds a + // set compared against the colours the library warns about, so saying + // live where nothing renders drops a real defect out of that comparison + // and the test still passes. That is why it reads the subject sets and + // why the size has to match exactly: a rule needing a third class must + // not answer for two. + // + // A SINGLE-class query asks whether the stylesheet KNOWS a name. Every + // caller of that one fails loudly on a yes it should not have given — the + // shade `deepEqual`, the `-bis`/`-ter` sweep whose extra entry has + // nowhere to land, the `assert.ok` on a keyword that must NOT ship — and + // quietly on a no. So it reads every name mentioned anywhere, subject or + // not: answering it from the subject sets would have hidden a class that + // only ever appears as an ancestor, and a colour the CSS ships and the + // tuple lacks is the first defect this file was written for. const wanted = cls.split('.'); - const index = simpleSelectors(css); + const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { - return index.some(classes => classes.has(cls)); + return names.has(cls); } - return index.some( + return sets.some( classes => classes.size === wanted.length && wanted.every(w => classes.has(w)) ); @@ -242,12 +247,10 @@ const onlyClasses = argument => * rather than shrinks and the query reads dead. A false alarm is the one * way this guard may be wrong. * - * Order carries two reasons. Arguments are handled before the caller splits - * on commas, because they contain commas: - * `.navbar-item:not(.is-active,.is-selected)` is ONE selector, and splitting - * first fragments it and leaves `is-active` looking like a class the element - * carries. Attribute selectors go before bare pseudo-classes, because an - * attribute VALUE may contain a colon. + * Arguments are handled before the caller splits on commas, because they + * contain commas: `.navbar-item:not(.is-active,.is-selected)` is ONE + * selector, and splitting first fragments it and leaves `is-active` looking + * like a class the element carries. * * One pass, and this is the part that took longest to get right. `[^()]*` * cannot cross a parenthesis, so a nested call leaves its enclosing one @@ -277,12 +280,18 @@ function requirements(prelude) { ? '*' : `.${UNMODELLED}` ) + // Attribute selectors are SUBSTITUTED rather than left to the residue + // check, because their VALUE is arbitrary text: `[data-x=".foo"]` + // otherwise puts `foo` in the class set, which is a class the element + // does not carry. Nothing else here needs a pass of its own. A bare + // pseudo-class and an ID cannot contain a `.`, so they reach the + // residue check intact and are counted there, and adding passes for + // them changed no answer and no set — they were parser for its own + // sake. .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) - .replace(/(? one.trim() === '' || one.trim().startsWith('@') + ) + ? trailing.trim() + : afterBlock.trim(); // An at-rule prelude is not a selector. Reading it as one indexed // `@media (hover:hover)` as a class set, and the rules INSIDE it are // what this is really about. @@ -390,12 +412,18 @@ function simpleSelectors(css) { // simple selector, and it carries a requirement of its own whenever // anything precedes it. const simples = part.split(/[\s>+~]+/).filter(Boolean); + // Every class MENTIONED, wherever it stands. That is a different + // question from the one the sets answer, and `shipsClass` says why. + for (const simple of simples) { + for (const name of classesOf(simple, false)) names.add(name); + } const subject = simples[simples.length - 1]; if (!subject?.includes('.')) continue; sets.push(classesOf(subject, simples.length > 1 || conditional)); } } - indexCache.set(css, sets); + names.delete(UNMODELLED); + indexCache.set(css, { sets, names }); } return indexCache.get(css); } @@ -746,9 +774,10 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'as a requirement would call a live modifier dead.' ); - // Nested parentheses. One pass resolves the INNER call and leaves an - // empty `:has()` behind, which matches nothing and shrinks the set back - // to the size of the query. + // Nested parentheses. One pass resolves the INNER call, which leaves + // the enclosing one unmatched — and that is the answer, not a gap: a + // call whose argument could not be read is a requirement, and the + // residue check counts it. assert.equal( live( '.notification.is-primary:has(:not(.is-light)){color:red}', @@ -866,16 +895,23 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, 'and it must not swallow a real rule either.' ); - - // An at-rule prelude read as a selector finds classes in it. A decimal - // is the shape that bites: the tokeniser sees `.5rem` and calls it one. + // A DECLARATION before a heading is native nesting, not a statement + // at-rule, and cutting at the semicolon there hands back a nested rule + // as though it stood alone. assert.equal( - live('@media (min-width:1.5rem){.box{color:red}}', '5rem'), + live('.hero{color:red;.tabs.is-boxed{color:blue}}', 'tabs.is-boxed'), false, - 'a length in a media condition is not a class, and reading the ' + - 'prelude as a selector is how it becomes one.' + 'a nested rule renders only inside its parent, the same as the ' + + 'flattened `.hero .tabs.is-boxed` it compiles to.' ); + // Nothing asserts that an at-rule prelude is not INDEXED, and nothing + // can: a condition is parenthesised, the paren strip removes it before + // any tokenising, and what survives outside carries no `.` in any + // at-rule CSS defines. Two attempts at pinning it both passed with the + // skip removed. What the skip really decides is which entry goes on the + // condition stack, and the two assertions above hold that. + // An argument the passes could not resolve leaves its TEXT behind, and // the caller splits on commas. assert.equal( @@ -902,14 +938,23 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a rule styles its subject, so indexing the ancestor too says a rule ' + 'renders something it only renders inside.' ); - // A COMPOUND query cannot tell which simple selector was indexed, since - // the contextual sentinel makes either one too wide to match. Asking - // for the ancestor by NAME can. + // Naming the ancestor asks the OTHER question, and gets the other + // answer. Whether a rule styles `.hero` and whether the stylesheet has + // heard of `hero` are not the same thing, and this file needs both. assert.equal( live('.hero.is-primary .tabs{color:red}', 'hero'), + true, + 'a class the stylesheet mentions anywhere is a class it knows, even ' + + 'where the rule mentioning it styles something else.' + ); + + // An attribute VALUE is arbitrary text, and a class inside one is not a + // class the element carries. + assert.equal( + live('.box[data-x=".fake-class"]{color:red}', 'fake-class'), false, - 'the ancestor of a rule is not styled by it, so the stylesheet does ' + - 'not know that name from this rule alone.' + 'a class name inside an attribute value is a string, and reading it ' + + 'as a selector invents a class the stylesheet does not ship.' ); // A prohibition standing on its own is still an element, and the From 4e4076e811b0f73912c476a1338775b5cc65adf4 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 22:12:51 -0400 Subject: [PATCH 14/38] fix(bulma-ui): read nesting off the brace stack, not off the punctuation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refusing the semicolon cut whenever a declaration preceded it closed the plain-nesting hole and opened two more. A `@media` nested inside a rule kept its whole chunk as one heading, so it never looked like an at-rule and its condition was never pushed, and the compound inside it read live. The declaration text that stayed behind reached the class tokeniser, so `margin:.5rem` contributed a class called `5rem`. Both come from reading structure out of text when the structure was already on the stack. Each open block now records whether it is a condition and whether it is a style rule. A rule open inside a style rule is nested, which is the same requirement as a descendant combinator and counted the same way, and it is nested whatever punctuation happens to precede it — a stray leading semicolon was a third door into the same hole. The heading is cut at the last semicolon unconditionally now, because both things that end in one are things the heading is not. The membership index is read from the heading rather than from the normalised prelude. A class the stylesheet names only inside a `:not()` is still a class it names, and that path exists to answer exactly that. It removes attribute values first, since a class name inside one is a string. That removal makes the substitution pass for attributes redundant, and the last one left. A bare pseudo-class, an ID and an attribute selector all survive into the qualifier residue and are counted there, so what remains of the prelude normaliser is the three things nothing else can do: distinguish a prohibition from a requirement, exempt pseudo-elements, and remove an unresolved argument before the caller splits on commas. The claim that every single-class caller fails loudly on a yes it should not have been given was not true. The `assert.ok` that a keyword MUST ship passes on a yes, so a fabricated name would quiet it. Nothing can fabricate one now that declaration text and attribute values are both out of that index, and the comment says which way each caller fails rather than flattening them into one. Dropped an assertion that could not reach what it named, and two counts that were true when written. --- scripts/color-tuple-css.test.mjs | 179 ++++++++++++++++++------------- 1 file changed, 107 insertions(+), 72 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 368548b10..d5ad10390 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -127,14 +127,21 @@ function shipsClass(css, cls) { // why the size has to match exactly: a rule needing a third class must // not answer for two. // - // A SINGLE-class query asks whether the stylesheet KNOWS a name. Every - // caller of that one fails loudly on a yes it should not have given — the - // shade `deepEqual`, the `-bis`/`-ter` sweep whose extra entry has - // nowhere to land, the `assert.ok` on a keyword that must NOT ship — and - // quietly on a no. So it reads every name mentioned anywhere, subject or - // not: answering it from the subject sets would have hidden a class that - // only ever appears as an ancestor, and a colour the CSS ships and the - // tuple lacks is the first defect this file was written for. + // A SINGLE-class query asks whether the stylesheet KNOWS a name. It reads + // every name mentioned anywhere, subject or not, prohibition included: + // answering it from the subject sets hid a class that only ever appears + // as an ancestor, and a colour the CSS ships and the tuple lacks is the + // first defect this file was written for. + // + // Most of its callers fail loudly on a yes they should not have been + // given and quietly on a no — the shade `deepEqual`, the `-bis`/`-ter` + // sweep whose extra entry has nowhere to land, the `assert.ok` on a + // keyword that must NOT ship — so the wide reading is the right way + // round for them. One runs the other way: the `assert.ok` that a keyword + // MUST ship passes on a yes, so a fabricated name would quiet it. The + // only text that can fabricate one is a declaration or an attribute + // value, and neither reaches this index: the heading is cut at the last + // semicolon and attribute values are removed before tokenising. const wanted = cls.split('.'); const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { @@ -280,18 +287,16 @@ function requirements(prelude) { ? '*' : `.${UNMODELLED}` ) - // Attribute selectors are SUBSTITUTED rather than left to the residue - // check, because their VALUE is arbitrary text: `[data-x=".foo"]` - // otherwise puts `foo` in the class set, which is a class the element - // does not carry. Nothing else here needs a pass of its own. A bare - // pseudo-class and an ID cannot contain a `.`, so they reach the - // residue check intact and are counted there, and adding passes for - // them changed no answer and no set — they were parser for its own - // sake. - .replace(/\[[^\]]*\]/g, `.${UNMODELLED}`) - // Pseudo-elements are removed rather than replaced, and last, so that - // the `::` spelling never reaches the residue check and is not read as - // a requirement. + // Nothing else is substituted. A bare pseudo-class, an ID and an + // attribute selector all survive into the qualifier residue in + // `classesOf` and are counted there, so a pass apiece would be parser + // for its own sake. The membership index does remove attribute values + // before tokenising, because that path has no residue check to catch + // them with. + // + // Pseudo-elements are the exception, removed rather than replaced and + // last, so the `::` spelling never reaches the residue check and is + // not read as a requirement. .replace(/::[a-z-]+/gi, ''); while (/\([^()]*\)/.test(text)) text = text.replace(/\([^()]*\)/g, ''); return text; @@ -354,10 +359,19 @@ function simpleSelectors(css) { // that happened to name a compound would answer for it, and that reads // as a live modifier — the silent direction again. const chunks = css.replace(/\/\*[\s\S]*?\*\//g, '').split('{'); - // One entry per block still open, true where that block only applies - // under a condition. A rule inside one renders for some readers and not - // others, which is the same thing `:first-child` says about elements, - // so it is a requirement and not a class. + // One entry per block still open. `conditional` marks a block that only + // applies sometimes, which is the same thing `:first-child` says about + // elements, so a rule inside one carries a requirement rather than a + // bare class. `rule` marks a STYLE rule, and a block open inside one of + // those is native nesting: `.hero{color:red;.tabs{…}}` styles a tabs + // inside a hero, exactly as the flattened `.hero .tabs` does. + // + // The stack is what decides both. The first attempt read nesting off + // the text instead — refusing to cut at a semicolon when a declaration + // preceded it — and that closed one hole while opening two: a `@media` + // nested in a rule lost its condition, and the declaration text it left + // behind reached the class tokeniser, so `margin:.5rem` contributed a + // class called `5rem`. const open = []; for (let i = 0; i < chunks.length; i++) { const chunk = chunks[i]; @@ -372,38 +386,38 @@ function simpleSelectors(css) { } // The last chunk is whatever trails the final `{`, and opens nothing. if (i === chunks.length - 1) break; - // Each `{` is preceded by a prelude, which is whatever follows the - // last `}` in the chunk. A STATEMENT at-rule ends in a semicolon - // rather than a block, so it shares that text with whatever comes - // after it: `@charset "utf-8";@media print` read as one heading - // starts with `@charset`, so the media query glued to it opens as - // unconditional, and `@import "x";.box` skips a real rule. - // - // Only a statement at-rule may be cut away, though. A DECLARATION - // before a heading means native CSS nesting, and cutting there hands - // back `.tabs.is-boxed` from `.hero{color:red;.tabs.is-boxed{…}}` as - // though it stood alone — the flattened form of that same rule reads - // dead, so it would be a hole rather than a fix. Left whole, the - // declaration text lands in the qualifier residue and the nested rule - // reads dead too, which is the answer this file wants until it models - // nesting properly. + // A prelude is whatever follows the last `}` in the chunk, and then + // whatever follows the last `;` in THAT. Two different things end in + // a semicolon and share a chunk with the heading after them: a + // STATEMENT at-rule like `@charset "utf-8";`, and a DECLARATION in + // the rule this one is nested inside. Neither is part of the heading, + // and neither should reach the class tokeniser, so both are cut. const afterBlock = chunk.slice(chunk.lastIndexOf('}') + 1); - const statements = afterBlock.split(';'); - const trailing = statements.pop(); - const heading = statements.every( - one => one.trim() === '' || one.trim().startsWith('@') - ) - ? trailing.trim() - : afterBlock.trim(); - // An at-rule prelude is not a selector. Reading it as one indexed - // `@media (hover:hover)` as a class set, and the rules INSIDE it are - // what this is really about. + const heading = afterBlock.slice(afterBlock.lastIndexOf(';') + 1).trim(); + // An at-rule prelude is not a selector, and what it opens may be a + // condition. if (heading.startsWith('@')) { - open.push(CONDITIONAL_AT_RULE.test(heading)); + open.push({ + conditional: CONDITIONAL_AT_RULE.test(heading), + rule: false, + }); continue; } - const conditional = open.some(Boolean); - open.push(false); + const conditional = open.some(block => block.conditional); + const nested = open.some(block => block.rule); + open.push({ conditional: false, rule: true }); + // Every class this heading MENTIONS, wherever it stands: as an + // ancestor, inside a prohibition, inside an `:is()`. Read from the + // heading rather than from `requirements`, which replaces those + // arguments wholesale — a class the stylesheet names only in a + // `:not()` is still a class it names, and the membership path is the + // one place that matters. Attribute VALUES come out first, since a + // class name inside one is a string rather than a selector. + for (const [, name] of heading + .replace(/\[[^\]]*\]/g, '') + .matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) { + names.add(name.replace(/\\(.)/g, '$1')); + } const prelude = requirements(heading); for (const part of prelude.split(',')) { // Only the SUBJECT of a part is styled by it. `.hero .tabs` styles @@ -412,14 +426,11 @@ function simpleSelectors(css) { // simple selector, and it carries a requirement of its own whenever // anything precedes it. const simples = part.split(/[\s>+~]+/).filter(Boolean); - // Every class MENTIONED, wherever it stands. That is a different - // question from the one the sets answer, and `shipsClass` says why. - for (const simple of simples) { - for (const name of classesOf(simple, false)) names.add(name); - } const subject = simples[simples.length - 1]; if (!subject?.includes('.')) continue; - sets.push(classesOf(subject, simples.length > 1 || conditional)); + sets.push( + classesOf(subject, simples.length > 1 || conditional || nested) + ); } } names.delete(UNMODELLED); @@ -870,11 +881,6 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'the condition has to be popped when its block closes, or every rule ' + 'after a media query reads conditional.' ); - assert.equal( - live('@media (hover:hover){.box{color:red}}', 'hover'), - false, - 'an at-rule prelude is not a selector and its words are not classes.' - ); // A STATEMENT at-rule ends in a semicolon rather than a block, so it // shares a chunk with whatever follows it. @@ -895,22 +901,51 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, 'and it must not swallow a real rule either.' ); - // A DECLARATION before a heading is native nesting, not a statement - // at-rule, and cutting at the semicolon there hands back a nested rule - // as though it stood alone. + // NESTING is read off the brace stack rather than the text. A rule + // open inside a style rule is nested whatever punctuation precedes it. assert.equal( live('.hero{color:red;.tabs.is-boxed{color:blue}}', 'tabs.is-boxed'), false, 'a nested rule renders only inside its parent, the same as the ' + 'flattened `.hero .tabs.is-boxed` it compiles to.' ); + assert.equal( + live('.hero{;.tabs.is-boxed{color:blue}}', 'tabs.is-boxed'), + false, + 'and it is nested whether or not a declaration precedes it, which ' + + 'is why the stack decides this and not the semicolon.' + ); + assert.equal( + live( + '.hero{color:red;@media print{.notification.is-primary{color:blue}}}', + 'notification.is-primary' + ), + false, + 'a conditional at-rule nested inside a rule is still a condition, ' + + 'and reading the heading off the text lost it.' + ); + assert.equal( + live('.hero{margin:.5rem;.box{color:blue}}', '5rem'), + false, + 'a length in a declaration is not a class, and declaration text ' + + 'must not reach the tokeniser at all.' + ); + + // The membership path means MENTIONED, and a prohibition mentions. + assert.equal( + live('.box:not(.is-shadowless){color:red}', 'is-shadowless'), + true, + 'a class the stylesheet names only in a `:not()` is still a class ' + + 'it names, and the sweep that looks for a colour the CSS ships ' + + 'reads this path.' + ); - // Nothing asserts that an at-rule prelude is not INDEXED, and nothing - // can: a condition is parenthesised, the paren strip removes it before - // any tokenising, and what survives outside carries no `.` in any - // at-rule CSS defines. Two attempts at pinning it both passed with the - // skip removed. What the skip really decides is which entry goes on the - // condition stack, and the two assertions above hold that. + // Nothing here asserts that an at-rule prelude is not INDEXED, and + // nothing can: a condition is parenthesised, the paren strip removes it + // before any tokenising, and what survives outside carries no `.` in + // any at-rule CSS defines. What the skip decides that IS observable is + // which entry goes on the condition stack, and the assertions above + // hold that. // An argument the passes could not resolve leaves its TEXT behind, and // the caller splits on commas. From caf5190d0d739a85ae7240db37fa5790f9cb7d18 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 22:49:07 -0400 Subject: [PATCH 15/38] fix(bulma-ui): a string is content, and content is not structure Everything this matcher does reads structure out of raw text: blocks split on a brace, headings cut at a semicolon, classes tokenised on a dot. A string literal is the one place all three characters appear meaning none of it, and nothing was stopping them. `content:"}"` closed a block that was still open, so a rule nested inside another read as though it stood alone, which is the forbidden direction through the mechanism the commit before this one added. `[data-x=";.fake-class"]` put a class the stylesheet does not have into the membership index, which is the direction that quiets the one assertion passing on a yes. String literals are emptied before anything else reads the text, quotes left in place so the shape survives. One rule rather than a special case at each of the three. A data URI keeps its semicolons inside a value where they belong, and an escaped quote does not end the string it sits in. That makes the attribute removal on the membership side redundant, and it goes the way the other redundant passes went: a quoted value is already empty by then, and an unquoted one is an identifier, which cannot contain a dot. `@scope` joins the conditional at-rules. A rule inside one applies within a subtree rather than everywhere, which is the same shape as a media query, and leaving it out was the silent direction. `names.delete` went. The sentinel cannot reach that index, because the index is built from the raw heading and the stylesheet is asserted not to contain the name before any of this runs. --- scripts/color-tuple-css.test.mjs | 80 +++++++++++++++++++++++++++----- 1 file changed, 69 insertions(+), 11 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index d5ad10390..33153ce4d 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -172,11 +172,12 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; /** * An at-rule whose contents apply only sometimes. * - * `@media`, `@supports` and `@container` each wrap their rules in a - * condition. `@layer` and `@font-face` and the rest do not, so a rule under - * one of those is as live as a rule at the top level. + * `@media`, `@supports`, `@container` and `@scope` each wrap their rules in + * a condition — a viewport, a feature, a size, a subtree. `@layer` and + * `@font-face` and the rest do not, so a rule under one of those is as live + * as a rule at the top level. */ -const CONDITIONAL_AT_RULE = /^@(media|supports|container)\b/i; +const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)\b/i; /** One class selector, escapes included. */ const CLASS_SELECTOR = /\.(?:\\.|[A-Za-z0-9_-])+/g; @@ -358,7 +359,23 @@ function simpleSelectors(css) { // sourceMappingURL contributes nothing anyone queries, but a comment // that happened to name a compound would answer for it, and that reads // as a live modifier — the silent direction again. - const chunks = css.replace(/\/\*[\s\S]*?\*\//g, '').split('{'); + // + // Then string literals, emptied rather than removed so the quotes stay + // where they are. Everything below this line reads STRUCTURE out of raw + // text — blocks split on `{`, headings cut at `;`, classes tokenised on + // `.` — and a string is the one place those characters appear without + // meaning any of it. `content:"}"` popped the nesting stack, which made + // a rule nested inside another read as though it stood alone, and + // `[data-x=";.fake-class"]` put a class that does not exist into the + // membership index. Emptying them first is one rule instead of a + // special case at each of the three. + const chunks = css + .replace(/\/\*[\s\S]*?\*\//g, '') + .replace( + /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, + match => match[0] + match[0] + ) + .split('{'); // One entry per block still open. `conditional` marks a block that only // applies sometimes, which is the same thing `:first-child` says about // elements, so a rule inside one carries a requirement rather than a @@ -411,11 +428,10 @@ function simpleSelectors(css) { // heading rather than from `requirements`, which replaces those // arguments wholesale — a class the stylesheet names only in a // `:not()` is still a class it names, and the membership path is the - // one place that matters. Attribute VALUES come out first, since a - // class name inside one is a string rather than a selector. - for (const [, name] of heading - .replace(/\[[^\]]*\]/g, '') - .matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) { + // one place that matters. An attribute value cannot fabricate a name + // here: a quoted one was emptied with every other string, and an + // unquoted one is an identifier, which cannot contain a `.`. + for (const [, name] of heading.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) { names.add(name.replace(/\\(.)/g, '$1')); } const prelude = requirements(heading); @@ -433,7 +449,6 @@ function simpleSelectors(css) { ); } } - names.delete(UNMODELLED); indexCache.set(css, { sets, names }); } return indexCache.get(css); @@ -872,6 +887,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a layer is not a condition, so a rule inside one is as live as a ' + 'rule at the top level.' ); + assert.equal( + live( + '@scope(.x){.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a scope is a condition though: the rule applies inside a subtree ' + + 'rather than everywhere.' + ); assert.equal( live( '@media print{.box{color:red}}.notification.is-primary{color:blue}', @@ -901,6 +925,40 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, 'and it must not swallow a real rule either.' ); + // A STRING is content, not structure. Everything this matcher does + // reads structure out of raw text, and a string is where `{`, `}`, `;` + // and `.` appear meaning none of it. + assert.equal( + live('.a{content:"}";.b.is-x{color:red}}', 'b.is-x'), + false, + 'a brace inside a string must not close a block, or a rule nested ' + + 'in another reads as though it stood alone.' + ); + assert.equal( + live('.box[data-x=";.fake-class"]{color:red}', 'fake-class'), + false, + 'a class name inside an attribute value is a string, and reading it ' + + 'as a selector invents a class the stylesheet does not ship.' + ); + assert.equal( + live( + '.a{background:url("data:image/svg;base64,xx")}' + + '.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'and emptying a string must not eat the rule after it: a data URI ' + + 'carries semicolons and is still just a value.' + ); + assert.equal( + live( + '.a{content:"a\\"b}"}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'an escaped quote does not end the string it sits in.' + ); + // NESTING is read off the brace stack rather than the text. A rule // open inside a style rule is nested whatever punctuation precedes it. assert.equal( From fe5696b48f4a5224adb4765dce7f391e9e398a44 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 23:17:11 -0400 Subject: [PATCH 16/38] test(bulma-ui): pin the escape and the container query, which nothing held Two behaviours survived their own revert. Both are coverage rather than conduct: the code does the right thing either way today, and nothing in the library moves. The escaped-quote assertion put the stray brace BEFORE the rule it asked about, where it lands on an already-empty stack and changes nothing. Reading the escape wrongly ends the string early and leaks the rest of it back into the text, so what the assertion has to do is put that leaked brace where it closes a block still open: the rule nested inside it then stops looking nested, which is the silent direction. Same lesson as the other three, and the fourth time it has been this file's lesson. `@container` was the only one of the four conditional at-rules with no assertion, and the only one the stylesheet actually ships, so deleting it from the list left the suite green. Two comments still described the attribute pass that went with the previous commit, and two assertions had converged on testing the same thing once string literals were emptied globally. --- scripts/color-tuple-css.test.mjs | 37 +++++++++++++++++--------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 33153ce4d..d6c20df7e 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -141,7 +141,7 @@ function shipsClass(css, cls) { // MUST ship passes on a yes, so a fabricated name would quiet it. The // only text that can fabricate one is a declaration or an attribute // value, and neither reaches this index: the heading is cut at the last - // semicolon and attribute values are removed before tokenising. + // semicolon, and a quoted value was emptied with every other string. const wanted = cls.split('.'); const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { @@ -291,9 +291,7 @@ function requirements(prelude) { // Nothing else is substituted. A bare pseudo-class, an ID and an // attribute selector all survive into the qualifier residue in // `classesOf` and are counted there, so a pass apiece would be parser - // for its own sake. The membership index does remove attribute values - // before tokenising, because that path has no residue check to catch - // them with. + // for its own sake. // // Pseudo-elements are the exception, removed rather than replaced and // last, so the `::` spelling never reaches the residue check and is @@ -887,6 +885,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a layer is not a condition, so a rule inside one is as live as a ' + 'rule at the top level.' ); + assert.equal( + live( + '@container (min-width:10px){.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a container query is a condition, and it is the one of these the ' + + 'stylesheet actually ships.' + ); assert.equal( live( '@scope(.x){.notification.is-primary{color:red}}', @@ -950,13 +957,18 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'and emptying a string must not eat the rule after it: a data URI ' + 'carries semicolons and is still just a value.' ); + // The escape has to be read, not just tolerated. Ending the string at + // the escaped quote leaks the rest of it — including a `}` — back into + // the text, and a leaked brace closes a block that is still open, so + // the rule nested in it stops looking nested. assert.equal( live( - '.a{content:"a\\"b}"}.notification.is-primary{color:red}', - 'notification.is-primary' + '.hero{content:"a\\"b}";.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' ), - true, - 'an escaped quote does not end the string it sits in.' + false, + 'an escaped quote does not end the string it sits in, and reading it ' + + 'as though it did hands a nested rule back as a standalone one.' ); // NESTING is read off the brace stack rather than the text. A rule @@ -1041,15 +1053,6 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'where the rule mentioning it styles something else.' ); - // An attribute VALUE is arbitrary text, and a class inside one is not a - // class the element carries. - assert.equal( - live('.box[data-x=".fake-class"]{color:red}', 'fake-class'), - false, - 'a class name inside an attribute value is a string, and reading it ' + - 'as a selector invents a class the stylesheet does not ship.' - ); - // A prohibition standing on its own is still an element, and the // combinator before it still has a subject. assert.equal( From dc1ccfff4aba8a353a651448ac00ffc390ef34c1 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 23:35:34 -0400 Subject: [PATCH 17/38] fix(bulma-ui): the must-ship check asks whether a helper renders, not whether it is named MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit There is a third question in this file and it was borrowing an answer from the wrong one. A bare class in `shipsClass` means MENTIONED, which is right where a yes that should have been a no fails loudly, and every caller of it runs that way but one: the assertion that `has-text-inherit` and its kin MUST ship passes on a yes. A class the stylesheet merely names inside someone else's selector would satisfy it, and a helper handed to the user has to be a rule of its own. `rendersAlone` asks that, and the keyword assertion uses it. Four coverage gaps closed alongside it, each found by reverting a behaviour and watching the suite stay green. The single-quoted half of the string pattern had no assertion, so `content:'}'` could have gone back to leaking a brace. Neither `conditional` nor `nested` was pinned to the whole brace stack, only to there being one. A `@layer` between a media query and a rule does not cancel the media query, and nor does one between a rule and the rule nested in it, but narrowing either flag to the innermost block left everything passing. An at-rule prelude reaching the membership index is pinnable after all. It was not while that index came from the normalised prelude, because the paren strip removed the condition before any tokenising — the index reads the raw heading now, so a length like `1.5rem` tokenises as a class called `5rem` and an assertion can see it. The comment beside it said it could not be pinned, which was true when written and stopped being true one commit later. --- scripts/color-tuple-css.test.mjs | 89 ++++++++++++++++++++++++++++---- 1 file changed, 80 insertions(+), 9 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index d6c20df7e..72331f7bd 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -117,6 +117,23 @@ function stylesheet() { * class set has to match exactly, so a rule needing a third class does not * answer for two. */ +/** + * Does the stylesheet style this class ON ITS OWN? + * + * `shipsClass` answers two questions and neither is this one. A bare class + * there means MENTIONED, which is right where a yes that should have been a + * no fails loudly — but one caller runs the other way. The assertion that + * `has-text-inherit` and its kin MUST ship passes on a yes, so a class the + * stylesheet merely mentions somewhere would satisfy it, and a helper the + * library hands the user has to be a rule of its own rather than a name in + * someone else's selector. + */ +function rendersAlone(css, cls) { + return simpleSelectors(css).sets.some( + classes => classes.size === 1 && classes.has(cls) + ); +} + function shipsClass(css, cls) { // Two questions, two indexes, and they are not the same question. // @@ -932,6 +949,27 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, 'and it must not swallow a real rule either.' ); + // `rendersAlone` is the third question, and the one caller that needs + // it passes on a YES, so it must not be satisfied by a mention. + const alone = (css, cls) => rendersAlone(css, cls); + assert.equal( + alone('.a.has-text-inherit{color:red}', 'has-text-inherit'), + false, + 'a helper compounded with something else is not a helper the user ' + + 'can reach on its own.' + ); + assert.equal( + alone('.hero .has-text-inherit{color:red}', 'has-text-inherit'), + false, + 'nor is one that only renders inside an ancestor.' + ); + assert.equal( + alone('.has-text-inherit{color:inherit}', 'has-text-inherit'), + true, + 'a rule of its own is what makes a helper live, or the two above ' + + 'would be vacuous.' + ); + // A STRING is content, not structure. Everything this matcher does // reads structure out of raw text, and a string is where `{`, `}`, `;` // and `.` appear meaning none of it. @@ -971,6 +1009,33 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'as though it did hands a nested rule back as a standalone one.' ); + assert.equal( + live(".a{content:'}';.b.is-x{color:red}}", 'b.is-x'), + false, + 'and a single-quoted string is a string too.' + ); + + // Both flags read the WHOLE stack, not the innermost block. A + // non-conditional at-rule between a condition and a rule does not + // cancel the condition, and the same goes for nesting. + assert.equal( + live( + '@media print{@layer base{.notification.is-primary{color:red}}}', + 'notification.is-primary' + ), + false, + 'a layer inside a media query does not escape the media query.' + ); + assert.equal( + live( + '.hero{color:red;@layer base{.tabs.is-boxed{color:red}}}', + 'tabs.is-boxed' + ), + false, + 'and a layer inside a rule does not make what it holds stop being ' + + 'nested in that rule.' + ); + // NESTING is read off the brace stack rather than the text. A rule // open inside a style rule is nested whatever punctuation precedes it. assert.equal( @@ -1010,12 +1075,17 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'reads this path.' ); - // Nothing here asserts that an at-rule prelude is not INDEXED, and - // nothing can: a condition is parenthesised, the paren strip removes it - // before any tokenising, and what survives outside carries no `.` in - // any at-rule CSS defines. What the skip decides that IS observable is - // which entry goes on the condition stack, and the assertions above - // hold that. + // An at-rule prelude must not be read for class names either. This + // was unpinnable while the membership index came from the normalised + // prelude, because the paren strip removed the condition before any + // tokenising; the index reads the RAW heading now, so a decimal in a + // length reaches it and `1.5rem` tokenises as a class called `5rem`. + assert.equal( + live('@media (min-width:1.5rem){.box{color:red}}', '5rem'), + false, + 'a length in a media condition is not a class, and the membership ' + + 'index reads the heading before anything strips the condition out.' + ); // An argument the passes could not resolve leaves its TEXT behind, and // the caller splits on commas. @@ -1309,9 +1379,10 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // unshaded, dead shaded. for (const keyword of keywords) { assert.ok( - shipsClass(css, `${family}-${keyword}`), - `\`${family}-${keyword}\` no longer ships, so the claim that these ` + - 'keywords are live unshaded has stopped being true.' + rendersAlone(css, `${family}-${keyword}`), + `\`${family}-${keyword}\` no longer ships as a rule of its own, so ` + + 'the claim that these keywords are live unshaded has stopped ' + + 'being true.' ); for (const shade of shades) { assert.ok( From 4c64338d26f8b18e2640ca181fd37e948474f80f Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sat, 19 Sep 2026 23:56:17 -0400 Subject: [PATCH 18/38] test(bulma-ui): one escape case per way of getting the escape wrong Third go at this assertion, and the first two both missed because there are two ways to mishandle an escape and they leak on opposite sides of it. Ignoring the backslash ends the string at the escaped quote and leaks whatever FOLLOWS it. Stopping at the backslash without consuming the pair re-pairs from the escaped quote to the next one, and leaks whatever PRECEDED it. A brace on the wrong side of the escape gets swallowed by accident in each case, so a single case can only ever catch one of them, and the earlier attempts each caught the other one. Two cases, a brace either side, and both mutants now fail on their own assertion. `@supports` was the last member of the conditional at-rule list with nothing holding it. The commit that added `@container` did so on the grounds that it was the only one, which was true of what ships and not of what the list says. The `shipsClass` docblock ended up describing `rendersAlone`, since that function was inserted between the two. And the comment strip runs before string literals are emptied, which is the wrong way round for a comment opener inside a string. Doing it properly needs a real tokeniser instead of two passes. Exercised, it lands on the loud side, because the merged text carries the open block it came from and what follows reads more nested rather than less, so the two passes stay and the file says why. --- scripts/color-tuple-css.test.mjs | 70 +++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 19 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 72331f7bd..0e3f10c60 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -97,6 +97,23 @@ function stylesheet() { return readFileSync(CSS, 'utf8'); } +/** + * Does the stylesheet style this class ON ITS OWN? + * + * `shipsClass` answers two questions and neither is this one. A bare class + * there means MENTIONED, which is right where a yes that should have been a + * no fails loudly — but one caller runs the other way. The assertion that + * `has-text-inherit` and its kin MUST ship passes on a yes, so a class the + * stylesheet merely mentions somewhere would satisfy it, and a helper the + * library hands the user has to be a rule of its own rather than a name in + * someone else's selector. + */ +function rendersAlone(css, cls) { + return simpleSelectors(css).sets.some( + classes => classes.size === 1 && classes.has(cls) + ); +} + /** * Does the stylesheet carry this class, or this exact compound? * @@ -117,23 +134,6 @@ function stylesheet() { * class set has to match exactly, so a rule needing a third class does not * answer for two. */ -/** - * Does the stylesheet style this class ON ITS OWN? - * - * `shipsClass` answers two questions and neither is this one. A bare class - * there means MENTIONED, which is right where a yes that should have been a - * no fails loudly — but one caller runs the other way. The assertion that - * `has-text-inherit` and its kin MUST ship passes on a yes, so a class the - * stylesheet merely mentions somewhere would satisfy it, and a helper the - * library hands the user has to be a rule of its own rather than a name in - * someone else's selector. - */ -function rendersAlone(css, cls) { - return simpleSelectors(css).sets.some( - classes => classes.size === 1 && classes.has(cls) - ); -} - function shipsClass(css, cls) { // Two questions, two indexes, and they are not the same question. // @@ -376,7 +376,14 @@ function simpleSelectors(css) { // as a live modifier — the silent direction again. // // Then string literals, emptied rather than removed so the quotes stay - // where they are. Everything below this line reads STRUCTURE out of raw + // where they are. That order is the wrong way round for one shape — a + // comment opener inside a string eats to the next closer, because the + // string that would have protected it has not been emptied yet — and + // doing it properly needs a real tokeniser rather than two passes. + // Exercised, it lands on the loud side: the text the strip merges + // carries the open rule or at-rule it came from, so what follows reads + // MORE nested or conditional, which is dead. A false alarm is the one + // way this guard may be wrong, so two passes stay. Everything below this line reads STRUCTURE out of raw // text — blocks split on `{`, headings cut at `;`, classes tokenised on // `.` — and a string is the one place those characters appear without // meaning any of it. `content:"}"` popped the nesting stack, which made @@ -902,6 +909,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a layer is not a condition, so a rule inside one is as live as a ' + 'rule at the top level.' ); + assert.equal( + live( + '@supports (display:grid){.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a feature query is a condition: the rule applies where the feature ' + + 'is there and nowhere else.' + ); assert.equal( live( '@container (min-width:10px){.notification.is-primary{color:red}}', @@ -999,6 +1015,13 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // the escaped quote leaks the rest of it — including a `}` — back into // the text, and a leaked brace closes a block that is still open, so // the rule nested in it stops looking nested. + // Two cases, because the two ways of getting this wrong leak on + // opposite sides of the escape. Ignoring the backslash entirely ends + // the string at the escaped quote and leaks whatever follows it; + // stopping at the backslash without consuming the pair re-pairs from + // the escaped quote to the next one, and leaks whatever PRECEDED it. A + // brace on the wrong side of the escape is swallowed by accident, so + // one case each. assert.equal( live( '.hero{content:"a\\"b}";.tabs.is-boxed{color:red}}', @@ -1006,7 +1029,16 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ), false, 'an escaped quote does not end the string it sits in, and reading it ' + - 'as though it did hands a nested rule back as a standalone one.' + 'as though it did leaks the brace that follows it.' + ); + assert.equal( + live( + '.hero{content:"}a\\"b";.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'and the escape has to be CONSUMED, not just stopped at, or the ' + + 'pattern re-pairs from it and leaks the brace before it.' ); assert.equal( From 5fb3249fb31bf75c0f2cbf444887680cec9b0eef Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 01:05:22 -0400 Subject: [PATCH 19/38] fix(bulma-ui): the last pass that deleted text now stands something in its place MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A pseudo-element was removed rather than substituted, and `::before` can be the whole simple selector. `.hero.is-primary ::before` collapsed to `.hero.is-primary`, which handed the ancestor the subject position and said a rule renders the hero when what it renders is a box generated for something inside it. Same hole, fifth door, and the same one-character fix the prohibition got: it leaves a `*`, which holds the position and requires nothing. That was the last normalisation here that deleted rather than replaced, which is what made it the last door. Comments, strings and url tokens are now emptied in ONE left-to-right pass, because the order between them is not decidable. A `/*` inside a string is not a comment and a `"` inside a comment is not a string, so stripping comments first ate from a `/*` in a string to the next `*/` — and a span like that can swallow a `{` without its `}`, which makes the brace stack SHALLOWER and a nested rule stop reading nested. A paragraph added in the last commit claimed that landed on the loud side. It does not, and I found twelve payloads where it reads live. Whichever construct starts first now wins, which is what CSS does. Unquoted url tokens are emptied with them. A url token may legally carry `{`, `}` and `;` with no quotes to protect them, so `url(x}y)` closed a block exactly the way `content:"}"` did before strings were handled. Four behaviours were surviving their own revert and now do not. The single-quoted half of the string pattern had no escape cases, and needs one per side like the double-quoted half. `onlyClasses` reads its argument a comma-separated part at a time, and nothing held that. And the class-name unescape is reachable only through `rendersAlone`, since a compound query spells itself with a `.` and so cannot ask for a class that contains one. `shipsClass` still described the caller that moved to `rendersAlone` a commit ago. Every caller it has left fails loudly on a yes it should not have been given, which is what the wide reading is for. --- scripts/color-tuple-css.test.mjs | 152 +++++++++++++++++++++++++------ 1 file changed, 123 insertions(+), 29 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 0e3f10c60..081725e5f 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -150,15 +150,13 @@ function shipsClass(css, cls) { // as an ancestor, and a colour the CSS ships and the tuple lacks is the // first defect this file was written for. // - // Most of its callers fail loudly on a yes they should not have been - // given and quietly on a no — the shade `deepEqual`, the `-bis`/`-ter` - // sweep whose extra entry has nowhere to land, the `assert.ok` on a - // keyword that must NOT ship — so the wide reading is the right way - // round for them. One runs the other way: the `assert.ok` that a keyword - // MUST ship passes on a yes, so a fabricated name would quiet it. The - // only text that can fabricate one is a declaration or an attribute - // value, and neither reaches this index: the heading is cut at the last - // semicolon, and a quoted value was emptied with every other string. + // Every caller of it fails loudly on a yes it should not have been given + // and quietly on a no — the shade `deepEqual`, the `-bis`/`-ter` sweep + // whose extra entry has nowhere to land, the `assert.ok` on a keyword + // that must NOT ship — so the wide reading is the right way round. The + // one caller that ran the other way, requiring a keyword to ship, asks + // `rendersAlone` instead, because a name in someone else's selector is + // not a helper anybody can use. const wanted = cls.split('.'); const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { @@ -310,10 +308,15 @@ function requirements(prelude) { // `classesOf` and are counted there, so a pass apiece would be parser // for its own sake. // - // Pseudo-elements are the exception, removed rather than replaced and - // last, so the `::` spelling never reaches the residue check and is - // not read as a requirement. - .replace(/::[a-z-]+/gi, ''); + // Pseudo-elements are the exception: they restrict nothing, so they + // must not reach the residue check and be read as a requirement. They + // leave a `*` rather than nothing, for the same reason `:not()` does — + // `::before` can BE the whole simple selector, and removing it outright + // left `.hero.is-primary ::before` as `.hero.is-primary`, which hands + // the ancestor the subject position. That was the last pass here that + // deleted text instead of standing something in its place, and it was + // the last door into the one hole this file has closed four times. + .replace(/::[a-z-]+/gi, '*'); while (/\([^()]*\)/.test(text)) text = text.replace(/\([^()]*\)/g, ''); return text; } @@ -370,20 +373,27 @@ function simpleSelectors(css) { ); const sets = []; const names = new Set(); - // Comments go first, or their words become classes. A banner or a - // sourceMappingURL contributes nothing anyone queries, but a comment - // that happened to name a compound would answer for it, and that reads - // as a live modifier — the silent direction again. + // Comments, strings and url tokens, in ONE left-to-right pass. // - // Then string literals, emptied rather than removed so the quotes stay - // where they are. That order is the wrong way round for one shape — a - // comment opener inside a string eats to the next closer, because the - // string that would have protected it has not been emptied yet — and - // doing it properly needs a real tokeniser rather than two passes. - // Exercised, it lands on the loud side: the text the strip merges - // carries the open rule or at-rule it came from, so what follows reads - // MORE nested or conditional, which is dead. A false alarm is the one - // way this guard may be wrong, so two passes stay. Everything below this line reads STRUCTURE out of raw + // Each of them has to go. A comment's words become classes, and one + // naming a compound would answer for it. A string is where `{`, `}`, + // `;` and `.` appear meaning no structure at all, so `content:"}"` + // closed a block that was still open. An unquoted url token may legally + // carry `{`, `}` and `;` with no quotes to protect them, so + // `url(x}y)` does the same thing. + // + // One pass rather than three, because the order between them is not + // decidable: a `/*` inside a string is not a comment, and a `"` inside + // a comment is not a string. Stripping comments first ate from a `/*` + // in a string to the next `*/`, and a span like that can swallow a `{` + // without its `}` — which makes the stack SHALLOWER, so a nested rule + // stops reading nested. That is the silent direction, and a paragraph + // here claimed otherwise until it was measured. Whichever construct + // starts first wins, which is what CSS itself does. + // + // Comments go; strings and url tokens are emptied rather than removed, + // so their delimiters stay where they are and the text around them + // keeps its shape. Everything below this line reads STRUCTURE out of raw // text — blocks split on `{`, headings cut at `;`, classes tokenised on // `.` — and a string is the one place those characters appear without // meaning any of it. `content:"}"` popped the nesting stack, which made @@ -392,10 +402,13 @@ function simpleSelectors(css) { // membership index. Emptying them first is one rule instead of a // special case at each of the three. const chunks = css - .replace(/\/\*[\s\S]*?\*\//g, '') .replace( - /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, - match => match[0] + match[0] + /\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|url\([^)"']*\)/g, + match => { + if (match.startsWith('/*')) return ''; + if (match.startsWith('url(')) return 'url()'; + return match[0] + match[0]; + } ) .split('{'); // One entry per block still open. `conditional` marks a block that only @@ -985,6 +998,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a rule of its own is what makes a helper live, or the two above ' + 'would be vacuous.' ); + // The class NAME has to come out unescaped, and this is the only query + // that can see it: a compound query spells itself with a `.`, so it + // cannot ask for a class that contains one. + assert.equal( + alone('.is-gap-0\\.5{gap:.5rem}', 'is-gap-0.5'), + true, + 'an escaped dot is part of the name, so the name the stylesheet ' + + 'ships is `is-gap-0.5` and that is what it has to answer to.' + ); // A STRING is content, not structure. Everything this matcher does // reads structure out of raw text, and a string is where `{`, `}`, `;` @@ -1046,6 +1068,69 @@ describe('the colour tuples agree with the shipped stylesheet', () => { false, 'and a single-quoted string is a string too.' ); + // The single-quoted half needs its own escape cases, both sides, for + // the same reason the double-quoted half does. + assert.equal( + live( + ".hero{content:'a\\'b}';.tabs.is-boxed{color:red}}", + 'tabs.is-boxed' + ), + false, + 'an escaped apostrophe does not end the string it sits in.' + ); + assert.equal( + live( + ".hero{content:'}a\\'b';.tabs.is-boxed{color:red}}", + 'tabs.is-boxed' + ), + false, + 'and it has to be consumed rather than stopped at, here too.' + ); + + // A COMMENT opener inside a string is not a comment, and a quote + // inside a comment is not a string. Whichever starts first wins, or a + // span from one to the other swallows a brace and the stack gets + // SHALLOWER, which reads less nested rather than more. + assert.equal( + live( + '@charset "/*";/* */.hero{color:red;.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'a comment opener inside a string must not begin a comment, or the ' + + 'span to the next closer eats the brace that opened the rule this ' + + 'one is nested in.' + ); + assert.equal( + live( + '.a{background:url("a/*b")}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'and the rule after such a string is still a rule.' + ); + + // An UNQUOTED url token may carry `{`, `}` and `;` with no quotes to + // protect them. + assert.equal( + live( + '.a{background:url(x}y);.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'a brace inside an unquoted url token must not close a block, the ' + + 'same as one inside a string.' + ); + + // A pseudo-element can BE the whole simple selector, and removing it + // outright hands the ancestor the subject position. + assert.equal( + live('.hero.is-primary ::before{content:""}', 'hero.is-primary'), + false, + 'a rule styling a pseudo-element of a descendant does not style the ' + + 'ancestor, so removing the `::` part must leave something standing ' + + 'in its place.' + ); // Both flags read the WHOLE stack, not the innermost block. A // non-conditional at-rule between a condition and a rule does not @@ -1205,6 +1290,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'two prohibitions make a requirement, so dropping both leaves a rule ' + 'that needs a third class answering a two-class query.' ); + assert.equal( + live( + '.notification.is-primary:not(.is-a,.is-b){color:red}', + 'notification.is-primary' + ), + true, + 'a LIST of classes is still classes and nothing else, so the ' + + 'argument is read a part at a time rather than whole.' + ); assert.equal( live( '.navbar-item:not(.is-active,.is-selected){color:red}', From 2c465f9552b79ef6bf5d33a32032be675d0b0051 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 01:24:24 -0400 Subject: [PATCH 20/38] fix(bulma-ui): three more spans the strip could not see, and an escape it could not either MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The one-pass strip is the only thing standing between a declaration value and the brace stack, and three spans were getting past it. `url` was matched case-sensitively, so `URL(x}y)` leaked its brace. The url token had no escape branch, so an escaped close paren ended it early and the brace after that leaked too. And both string bodies used `\.`, which does not match a newline, so a backslash-newline line continuation ended the string and leaked whatever followed. Each of the three makes the stack shallower, which is a nested rule reading unnested, which is the one direction this file forbids. Separately, and older than this diff: an escaped brace is part of a class name. Neither the split that finds blocks nor the count of closes per chunk could see the escape, so `.a\}b` popped the block the next rule was nested in. Both now skip an escaped brace. The `{` half of that only ever cost a false alarm — an extra open means more nesting, not less — but it cut the class name in half, which is visible through the one query that can ask for a name containing a brace. Two sentences in the docblock were claiming more than the code does. The `::` exemption covers a bare `::` spelling and not a functional one: `::part(x)` is taken by the argument pass first, because that pass matches any name before a parenthesis. And the pseudo-element pass was not the last one here that deletes — the paren-residue loop deletes too, and is allowed to, because by the time it runs the enclosing call's name is already a sentinel outside the parentheses, so it can only shorten an argument. --- scripts/color-tuple-css.test.mjs | 72 ++++++++++++++++++++++++++------ 1 file changed, 60 insertions(+), 12 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 081725e5f..fe5ac8d32 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -256,11 +256,12 @@ const onlyClasses = argument => * requirement it could not verify. * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a * box generated for a delete, so the delete is live and calling it dead - * would be a plain misreading. The `::` spelling is left alone. The legacy - * one-colon spellings are NOT recognised as pseudo-elements and take a - * sentinel like any other bare pseudo-class, which lands them on the false - * -alarm side rather than the silent one. Telling `:after` from `:hover` - * means keeping a list of them, and nothing yet needs it. + * would be a plain misreading. A bare `::` spelling is exempted. Two + * kinds are not, and both land on the false-alarm side: the legacy + * one-colon spellings, which are indistinguishable from `:hover` without + * keeping a list, and the functional ones like `::part(x)`, which the + * argument pass takes first because it matches any name before a + * parenthesis. * - Everything else — a pseudo-class with parentheses or without, and an * attribute selector — narrows WHICH elements carrying those classes * match. `.notification.is-primary:where(.is-light)` and @@ -313,9 +314,11 @@ function requirements(prelude) { // leave a `*` rather than nothing, for the same reason `:not()` does — // `::before` can BE the whole simple selector, and removing it outright // left `.hero.is-primary ::before` as `.hero.is-primary`, which hands - // the ancestor the subject position. That was the last pass here that - // deleted text instead of standing something in its place, and it was - // the last door into the one hole this file has closed four times. + // the ancestor the subject position — the same hole the prohibition + // opened, through the last SUBSTITUTION pass that was still deleting. + // The paren-residue loop below deletes too, and is allowed to: by the + // time it runs the enclosing call's name is already a sentinel outside + // the parentheses, so it can only shorten an argument. .replace(/::[a-z-]+/gi, '*'); while (/\([^()]*\)/.test(text)) text = text.replace(/\([^()]*\)/g, ''); return text; @@ -403,14 +406,14 @@ function simpleSelectors(css) { // special case at each of the three. const chunks = css .replace( - /\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|url\([^)"']*\)/g, + /\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*'|url\((?:[^)"'\\]|\\[\s\S])*\)/gi, match => { if (match.startsWith('/*')) return ''; - if (match.startsWith('url(')) return 'url()'; + if (match.slice(0, 4).toLowerCase() === 'url(') return 'url()'; return match[0] + match[0]; } ) - .split('{'); + .split(/(? 0; closed-- ) { @@ -1007,6 +1010,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'an escaped dot is part of the name, so the name the stylesheet ' + 'ships is `is-gap-0.5` and that is what it has to answer to.' ); + // An escaped BRACE in a class name, which only this query can ask + // about, for the same reason: splitting the stylesheet on a brace it + // cannot see cuts the name in half. + assert.equal( + alone('.a\\{b{color:red}', 'a{b'), + true, + 'a class name may escape a brace, and the split that finds blocks ' + + 'has to skip that one.' + ); // A STRING is content, not structure. Everything this matcher does // reads structure out of raw text, and a string is where `{`, `}`, `;` @@ -1121,6 +1133,42 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a brace inside an unquoted url token must not close a block, the ' + 'same as one inside a string.' ); + assert.equal( + live( + '.a{background:URL(x}y);.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'and `url` is a keyword rather than a name, so its case does not ' + + 'decide whether the brace inside it counts.' + ); + assert.equal( + live( + '.a{background:url(x\\)y}z);.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'an escaped paren does not end the url token, so the brace after it ' + + 'is still inside one.' + ); + assert.equal( + live('.a{content:"x\\\ny}";.tabs.is-boxed{color:red}}', 'tabs.is-boxed'), + false, + 'a backslash-newline is a line continuation, so the string it sits ' + + 'in has not ended.' + ); + + // An escaped brace is part of a CLASS NAME. Neither the split nor the + // count of closes can see the escape on its own. + assert.equal( + live( + '.hero{color:red;.a\\}b{color:red}.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'an escaped brace in a class name must not close the rule the next ' + + 'one is nested in.' + ); // A pseudo-element can BE the whole simple selector, and removing it // outright hands the ancestor the subject position. From 8cbda8efbcb465380fe3a420fc1c03c598dcb725 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 01:26:31 -0400 Subject: [PATCH 21/38] fix(bulma-ui): an unquoted attribute value is an identifier, and identifiers escape CodeRabbit caught one I had reasoned my way past. Two commits ago I removed the attribute strip from the membership scan as redundant, on the grounds that a quoted value is emptied with every other string and an unquoted one is an identifier that cannot contain a dot. The second half is wrong: an identifier may ESCAPE a dot, so `[data-x=\.fake-class]` is one legal unquoted value, and the scan read `fake-class` out of it. The quoted spelling was pinned at dead and the unquoted one answered live, which is two spellings of one attribute disagreeing. The strip is back, on the membership path only. The sets path genuinely does not need it: a fabricated class there makes the set bigger, so the exact-size rule refuses it and the answer goes dead. The membership path has no size to check against, which is exactly why this was the half that mattered. The direction was the loud one, since every caller of that path now fails on a yes it should not have been given. It is still worth fixing, because the reason it was safe was an accident of which callers survive rather than anything about the rule. --- scripts/color-tuple-css.test.mjs | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index fe5ac8d32..8ddd3ce75 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -466,10 +466,19 @@ function simpleSelectors(css) { // heading rather than from `requirements`, which replaces those // arguments wholesale — a class the stylesheet names only in a // `:not()` is still a class it names, and the membership path is the - // one place that matters. An attribute value cannot fabricate a name - // here: a quoted one was emptied with every other string, and an - // unquoted one is an identifier, which cannot contain a `.`. - for (const [, name] of heading.matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) { + // one place that matters. + // + // Attribute selectors come out first. A quoted value was emptied with + // every other string, but an UNQUOTED one is an identifier, and an + // identifier may escape a dot: `[data-x=\.fake-class]` is one legal + // value this scan would otherwise read as a class. The sets path does + // not need this — a fabricated class there makes the set bigger, so + // the exact-size rule refuses it — but the membership path has no + // size to check against, and the two spellings of one attribute have + // to answer the same. + for (const [, name] of heading + .replace(/\[[^\]]*\]/g, '') + .matchAll(/\.((?:\\.|[A-Za-z0-9_-])+)/g)) { names.add(name.replace(/\\(.)/g, '$1')); } const prelude = requirements(heading); @@ -1035,6 +1044,13 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a class name inside an attribute value is a string, and reading it ' + 'as a selector invents a class the stylesheet does not ship.' ); + assert.equal( + live('.box[data-x=\\.fake-class]{color:red}', 'fake-class'), + false, + 'and an UNQUOTED attribute value is an identifier rather than a ' + + 'string, so emptying strings does not reach it — the two spellings ' + + 'of one attribute have to answer the same.' + ); assert.equal( live( '.a{background:url("data:image/svg;base64,xx")}' + From acbd9629f4924ad21a4b227b88b8c4b878d32b4b Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 01:43:31 -0400 Subject: [PATCH 22/38] fix(bulma-ui): the attribute strip sees its own escapes, and a numeric escape stops the guard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The strip added last commit could not tell an escaped bracket from a real one, at either end, and the two halves fail in opposite directions. An escaped `[` is part of a class name, and matching it opened an attribute selector that swallowed the real classes after it — `.a\[b.is-real[d=e]` lost `is-real` from the membership index, which is that index's quiet direction and the one thing it exists to avoid. An escaped `]` does not close one either, and stopping at it left the tail to be read as selector text, where it fuses onto the class before the attribute and invents a name. Both ends are escape-aware now. A NUMERIC escape names a character by code point, so `.\31 23` is the class `123`, and the tokeniser reads every escape as one character — it would take `31` and lose the real name. Decoding them properly means a CSS identifier reader, which is more than this file should carry, and reading them wrongly is quiet. So it asserts instead: a stylesheet carrying one stops the guard with a message saying what to teach it. Nothing this repo builds has one, which is why an assertion is enough and a parser is not needed yet. --- scripts/color-tuple-css.test.mjs | 45 +++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 8ddd3ce75..54e160fc8 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -458,6 +458,20 @@ function simpleSelectors(css) { }); continue; } + // A NUMERIC escape names a character by code point — `.\31 23` is + // the class `123` — and the class tokeniser reads every escape as + // one character, so it would take `31` and lose the real name. That + // is the quiet direction, and decoding them properly means a real + // CSS identifier reader. Nothing this repo builds carries one, so + // the guard says it cannot read the stylesheet rather than reading + // it wrongly. + assert.ok( + !/\\[0-9a-f]/i.test(heading), + `the selector \`${heading}\` carries a numeric escape, which this ` + + 'file reads as a single character and would silently rename. ' + + 'Teach it CSS identifier decoding in the same change that ' + + 'introduced the escape.' + ); const conditional = open.some(block => block.conditional); const nested = open.some(block => block.rule); open.push({ conditional: false, rule: true }); @@ -476,8 +490,14 @@ function simpleSelectors(css) { // the exact-size rule refuses it — but the membership path has no // size to check against, and the two spellings of one attribute have // to answer the same. + // The strip has to see its own escapes, both ends. An escaped `[` + // is part of a class name and must not open an attribute selector — + // matching it deletes the real classes after it, which LOSES a name, + // the quiet direction for this index. An escaped `]` does not close + // one either, and stopping at it leaves the tail to be read as + // selector text, which fabricates one. for (const [, name] of heading - .replace(/\[[^\]]*\]/g, '') + .replace(/(? { 'string, so emptying strings does not reach it — the two spellings ' + 'of one attribute have to answer the same.' ); + // That strip has to see its own escapes, at both ends. + assert.equal( + live('.a\\[b.is-real[d=e]{color:red}', 'is-real'), + true, + 'an escaped bracket is part of a class name, so it must not open an ' + + 'attribute selector and take the real classes after it with it.' + ); + assert.equal( + live('.box[data-x=a\\]b-fake]{color:red}', 'boxb-fake'), + false, + 'and an escaped bracket does not close one either: stopping at it ' + + 'leaves the tail to be read as selector text, which fuses onto ' + + 'the class before the attribute and invents a name.' + ); + + // A NUMERIC escape names a character by code point, which this file + // cannot decode. It says so rather than renaming the class quietly. + assert.throws( + () => live('.\\31 23{color:red}', '123'), + /numeric escape/, + 'a stylesheet carrying a numeric escape has to fail loudly, because ' + + 'reading it as one character loses the name it was spelling.' + ); assert.equal( live( '.a{background:url("data:image/svg;base64,xx")}' + From c71a235819bbf07dc1957641aacef6a7e59540db Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 01:59:37 -0400 Subject: [PATCH 23/38] fix(bulma-ui): one scan for every delimiter, instead of a lookbehind per pattern MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Escape-awareness arrived here one delimiter at a time, and each arrival was a `(? { - if (match.startsWith('/*')) return ''; - if (match.slice(0, 4).toLowerCase() === 'url(') return 'url()'; - return match[0] + match[0]; - } - ) - .split(/(? { + if (match.startsWith('/*')) return ''; + if (match.slice(0, 4).toLowerCase() === 'url(') return 'url()'; + return match[0] + match[0]; + } + ); + const chunks = splitUnescaped(stripped, '{'); // One entry per block still open. `conditional` marks a block that only // applies sometimes, which is the same thing `:first-child` says about // elements, so a rule inside one carries a requirement rather than a @@ -432,11 +474,7 @@ function simpleSelectors(css) { const chunk = chunks[i]; // The braces in this chunk close blocks opened before it, so they are // popped before the block this chunk's own `{` opens is pushed. - for ( - let closed = (chunk.match(/(? 0; - closed-- - ) { + for (let closed = unescaped(chunk, '}').length; closed > 0; closed--) { open.pop(); } // The last chunk is whatever trails the final `{`, and opens nothing. @@ -447,8 +485,8 @@ function simpleSelectors(css) { // STATEMENT at-rule like `@charset "utf-8";`, and a DECLARATION in // the rule this one is nested inside. Neither is part of the heading, // and neither should reach the class tokeniser, so both are cut. - const afterBlock = chunk.slice(chunk.lastIndexOf('}') + 1); - const heading = afterBlock.slice(afterBlock.lastIndexOf(';') + 1).trim(); + const afterBlock = afterLastUnescaped(chunk, '}'); + const heading = afterLastUnescaped(afterBlock, ';').trim(); // An at-rule prelude is not a selector, and what it opens may be a // condition. if (heading.startsWith('@')) { @@ -458,47 +496,55 @@ function simpleSelectors(css) { }); continue; } - // A NUMERIC escape names a character by code point — `.\31 23` is - // the class `123` — and the class tokeniser reads every escape as - // one character, so it would take `31` and lose the real name. That - // is the quiet direction, and decoding them properly means a real - // CSS identifier reader. Nothing this repo builds carries one, so - // the guard says it cannot read the stylesheet rather than reading - // it wrongly. + const conditional = open.some(block => block.conditional); + const nested = open.some(block => block.rule); + open.push({ conditional: false, rule: true }); + + // Attribute selectors come out before any class is read. A quoted + // value was emptied with every other string, but an UNQUOTED one is + // an identifier, and an identifier may escape a dot: + // `[data-x=\.fake-class]` is one legal value that would otherwise be + // read as a class. The sets path does not need this — a fabricated + // class there makes the set bigger, so the exact-size rule refuses + // it — but the membership path has no size to check against, and the + // two spellings of one attribute have to answer the same. + // + // The strip sees its own escapes at both ends, and the two ends fail + // in opposite directions. An escaped `[` is part of a class name, and + // matching it opens an attribute selector that swallows the real + // classes after it, which LOSES a name. An escaped `]` does not close + // one, and stopping at it leaves the tail to be read as selector + // text, which invents one. + const selectorText = heading.replace( + /(? block.conditional); - const nested = open.some(block => block.rule); - open.push({ conditional: false, rule: true }); - // Every class this heading MENTIONS, wherever it stands: as an + + // Every class this selector MENTIONS, wherever it stands: as an // ancestor, inside a prohibition, inside an `:is()`. Read from the // heading rather than from `requirements`, which replaces those // arguments wholesale — a class the stylesheet names only in a // `:not()` is still a class it names, and the membership path is the // one place that matters. - // - // Attribute selectors come out first. A quoted value was emptied with - // every other string, but an UNQUOTED one is an identifier, and an - // identifier may escape a dot: `[data-x=\.fake-class]` is one legal - // value this scan would otherwise read as a class. The sets path does - // not need this — a fabricated class there makes the set bigger, so - // the exact-size rule refuses it — but the membership path has no - // size to check against, and the two spellings of one attribute have - // to answer the same. - // The strip has to see its own escapes, both ends. An escaped `[` - // is part of a class name and must not open an attribute selector — - // matching it deletes the real classes after it, which LOSES a name, - // the quiet direction for this index. An escaped `]` does not close - // one either, and stopping at it leaves the tail to be read as - // selector text, which fabricates one. - for (const [, name] of heading - .replace(/(? { ); // A NUMERIC escape names a character by code point, which this file - // cannot decode. It says so rather than renaming the class quietly. + // cannot decode. It says so rather than renaming the class quietly — + // but only where it could rename something. Inside an attribute value + // it cannot, and halting there would be a false alarm over text this + // file never reads as a selector. + assert.equal( + live('.box[data-x=\\31 2]{color:red}', 'box'), + true, + 'a numeric escape inside an attribute value renames nothing, so it ' + + 'must not stop the guard.' + ); assert.throws( () => live('.\\31 23{color:red}', '123'), /numeric escape/, @@ -1217,6 +1272,32 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'in has not ended.' ); + // Escaped DELIMITERS in a class name, and the scan that finds blocks + // has to see every one of them. Escape-awareness arrived here one + // delimiter at a time, and the two slices that feed the split were the + // last to get it — an escaped closing brace or semicolon truncated the + // heading and took the name with it, which is this index quietly + // losing a class. + assert.equal( + alone('.a\\}b{color:red}', 'a}b'), + true, + 'an escaped closing brace is part of the name, so the slice looking ' + + 'for the end of the last block must step over it.' + ); + assert.equal( + alone('.a\\;b{color:red}', 'a;b'), + true, + 'and so is an escaped semicolon, which the slice looking for a ' + + 'statement has to step over too.' + ); + assert.equal( + alone('.a\\\\{color:red}', 'a\\'), + true, + 'a class name ending in a literal backslash is followed by a REAL ' + + 'brace, which a lookbehind reads as escaped and a left-to-right ' + + 'scan does not — which is why this is a scan.' + ); + // An escaped brace is part of a CLASS NAME. Neither the split nor the // count of closes can see the escape on its own. assert.equal( From 72d82a3eea371f481683ac212a75b02007f31678 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 02:17:36 -0400 Subject: [PATCH 24/38] fix(bulma-ui): the attribute strip joins the scan, and a scope root is a name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The attribute strip was the last delimiter pattern still using a lookbehind, which is exactly the blind spot the comment on the scan ascribes to lookbehinds — so that comment was describing a rule the file had not finished applying. It is a scan now, and both ends of a bracket are escape-aware for the reasons they always needed to be: an escaped `[` is part of a class name and matching it deletes the real classes after it, while an escaped `]` does not close one and stopping there leaves the tail to be read as selector text. `@scope` is the one at-rule whose prelude is a selector list rather than a condition, so the classes in it are classes the stylesheet knows. Skipping every prelude wholesale lost them, which is the membership index's quiet direction. Only `@scope`, and only for names: what a scope root matches is not a rule that styles anything, so it contributes no compound, and every other prelude stays out because a condition carries lengths and `1.5rem` tokenises as a class called `5rem`. Two attribute shapes this file reads loosely now have assertions, not because they are right but because they are wrong in the permitted direction. Whitespace inside a bracket splits the simple selector and an unterminated bracket swallows the rest of it, and both make the rule read dead. Pinning them means a future change cannot quietly turn either into a live answer, which is the side that hides a defect. --- scripts/color-tuple-css.test.mjs | 119 +++++++++++++++++++++++++++++-- 1 file changed, 112 insertions(+), 7 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index c73e4d699..8457c4934 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -194,6 +194,18 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; */ const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)\b/i; +/** + * The at-rule whose prelude is a selector list rather than a condition. + * + * `@scope (.root) to (.limit)` names classes, and they are classes the + * stylesheet knows about. Every other at-rule prelude is a condition, where + * a length like `1.5rem` would tokenise as a class called `5rem`. + */ +const SCOPE_AT_RULE = /^@scope\b/i; + +/** A class selector wherever it appears, with its name captured. */ +const CLASS_TOKEN = /\.((?:\\.|[A-Za-z0-9_-])+)/g; + /** One class selector, escapes included. */ const CLASS_SELECTOR = /\.(?:\\.|[A-Za-z0-9_-])+/g; @@ -410,6 +422,45 @@ function afterLastUnescaped(text, char) { return text.slice((at.length ? at[at.length - 1] : -1) + 1); } +/** + * A selector with its attribute selectors removed. + * + * Same scan as the delimiters above, and for the same reason. A lookbehind + * in front of the opening bracket cannot tell an escaped `[` from a real + * one whose own backslash was escaped, and this was the last pattern still + * using one, so `unescaped` was documenting a rule the file had not + * finished applying. + * + * Both ends matter, and they fail in opposite directions. An escaped `[` is + * part of a class name, and reading it as an opening bracket deletes the + * real classes after it, which LOSES a name. An escaped `]` does not close + * one, and stopping at it leaves the tail to be read as selector text, + * which invents one. + */ +function withoutAttributes(selector) { + let out = ''; + for (let i = 0; i < selector.length; i += 1) { + if (selector[i] === '\\') { + out += selector.slice(i, i + 2); + i += 1; + continue; + } + if (selector[i] !== '[') { + out += selector[i]; + continue; + } + // Inside a bracket now: skip to its unescaped close, or to the end if + // it never comes. An unterminated bracket dropping the rest of the + // selector is the loud side — it can only shorten what is read. + i += 1; + while (i < selector.length && selector[i] !== ']') { + if (selector[i] === '\\') i += 1; + i += 1; + } + } + return out; +} + function simpleSelectors(css) { if (!indexCache.has(css)) { assert.ok( @@ -494,6 +545,20 @@ function simpleSelectors(css) { conditional: CONDITIONAL_AT_RULE.test(heading), rule: false, }); + // One at-rule prelude is made of SELECTORS rather than a condition, + // and its class names are names the stylesheet knows. Skipping + // every prelude wholesale lost them, which is the membership + // index's quiet direction. Only `@scope`, and only for names: what + // a scope root matches is not a rule that styles anything, so it + // contributes no subject set. Every other prelude stays out, since + // a condition carries lengths and `1.5rem` tokenises as a class. + if (SCOPE_AT_RULE.test(heading)) { + for (const [, name] of withoutAttributes(heading).matchAll( + CLASS_TOKEN + )) { + names.add(name.replace(/\\(.)/g, '$1')); + } + } continue; } const conditional = open.some(block => block.conditional); @@ -515,10 +580,7 @@ function simpleSelectors(css) { // classes after it, which LOSES a name. An escaped `]` does not close // one, and stopping at it leaves the tail to be read as selector // text, which invents one. - const selectorText = heading.replace( - /(? { 'the class before the attribute and invents a name.' ); + // A `@scope` prelude is a selector list, not a condition, so the + // classes in it are classes the stylesheet knows. + assert.equal( + live('@scope(.the-root){.box{color:red}}', 'the-root'), + true, + 'a class named as a scope root is a class the stylesheet knows, and ' + + 'skipping every at-rule prelude lost it.' + ); + assert.equal( + live('@scope(.the-root){.box{color:red}}', 'the-root.box'), + false, + 'but a scope root is not a rule that styles anything, so it ' + + 'contributes no compound.' + ); + assert.equal( + live('@media (min-width:1.5rem){.box{color:red}}', '5rem'), + false, + 'and only `@scope`: every other prelude is a condition, where a ' + + 'length would tokenise as a class.' + ); + + // Attribute selectors this file reads loosely. Both shapes below make + // the rule read DEAD, which is the direction it is allowed to be wrong + // in, and these assertions are here so a change cannot quietly flip + // either one to live. + assert.equal( + live( + '.notification.is-primary[data-x = y]{color:red}', + 'notification.is-primary' + ), + false, + 'whitespace inside an attribute selector splits the simple selector, ' + + 'so the rule contributes no subject — a false alarm, and it stays ' + + 'on that side.' + ); + assert.equal( + live( + '.notification.is-primary[data-x{color:red}', + 'notification.is-primary' + ), + false, + 'an unterminated bracket swallows the rest of the selector, which ' + + 'can only shorten what is read.' + ); + // A NUMERIC escape names a character by code point, which this file // cannot decode. It says so rather than renaming the class quietly — // but only where it could rename something. Inside an attribute value From aaa27505dc670522244506ce9530d6c413a0f66d Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 02:30:04 -0400 Subject: [PATCH 25/38] fix(bulma-ui): the scope harvest gets the guard it was missing, and its own pin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both defects were in the branch added last commit, which is fair: it is the one path here that reads class names outside the style-rule path, and it inherited neither the escape guard nor a pin for the restriction it claims. A numeric escape was the gap. `@scope(.\31 23)` registered the root as `31` and lost `123`, which is the quiet direction arriving inside the branch written to close the quiet direction. The guard now lives in one place and both readers use it. `/^@scope\b/i` matched `@scope-foo`, because a word boundary holds before a hyphen, so an unknown at-rule spelled that way would have its condition harvested and `1.5rem` would enter the index as `5rem`. Three assertions were holding less than they read as. The `only for names` half was pinned by a compound query, which cannot see the difference — the prelude's classes never all appear in one query — so it asks whether the root is a rule of its own instead. The two attribute shapes were pinned by compound queries as well, and the compound path reads the raw heading, so neither reached the strip; the name-level behaviour has its own case now. And one assertion was a character-for-character copy of another, so the copy asks about `@container`, which is what it is really for. The comment on the unterminated bracket named the wrong index and the wrong reason. Only the membership text is shortened, so what is lost is a name rather than the size of a set — and losing it is correct rather than merely safe, because a selector with an unclosed bracket is a parse error and the browser drops the rule, so none of those classes ship. --- scripts/color-tuple-css.test.mjs | 73 ++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 14 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 8457c4934..c0dfdd342 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -201,7 +201,18 @@ const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)\b/i; * stylesheet knows about. Every other at-rule prelude is a condition, where * a length like `1.5rem` would tokenise as a class called `5rem`. */ -const SCOPE_AT_RULE = /^@scope\b/i; +const SCOPE_AT_RULE = /^@scope(?![\w-])/i; + +/** + * A numeric escape, which names a character by code point. + * + * `.\\31 23` is the class `123`, and the tokeniser reads every escape as one + * character, so it would take `31` and lose the real name. That is the quiet + * direction, and decoding them properly means a CSS identifier reader, which + * is more than this file should carry. Every path that reads a class name + * checks for one and stops instead. + */ +const NUMERIC_ESCAPE = /\\[0-9a-f]/i; /** A class selector wherever it appears, with its name captured. */ const CLASS_TOKEN = /\.((?:\\.|[A-Za-z0-9_-])+)/g; @@ -450,8 +461,11 @@ function withoutAttributes(selector) { continue; } // Inside a bracket now: skip to its unescaped close, or to the end if - // it never comes. An unterminated bracket dropping the rest of the - // selector is the loud side — it can only shorten what is read. + // it never comes. Only the membership index reads this text, so an + // unterminated bracket loses the names after it rather than mis-sizing + // a set — and losing them is right: a selector with an unclosed bracket + // is a parse error, so the browser drops that rule and the stylesheet + // ships none of the classes in it. i += 1; while (i < selector.length && selector[i] !== ']') { if (selector[i] === '\\') i += 1; @@ -553,9 +567,15 @@ function simpleSelectors(css) { // contributes no subject set. Every other prelude stays out, since // a condition carries lengths and `1.5rem` tokenises as a class. if (SCOPE_AT_RULE.test(heading)) { - for (const [, name] of withoutAttributes(heading).matchAll( - CLASS_TOKEN - )) { + const roots = withoutAttributes(heading); + assert.ok( + !NUMERIC_ESCAPE.test(roots), + `the scope root \`${heading}\` carries a numeric escape, which ` + + 'this file reads as a single character and would silently ' + + 'rename. Teach it CSS identifier decoding in the same change ' + + 'that introduced the escape.' + ); + for (const [, name] of roots.matchAll(CLASS_TOKEN)) { names.add(name.replace(/\\(.)/g, '$1')); } } @@ -591,7 +611,7 @@ function simpleSelectors(css) { // escape inside an attribute value, which cannot rename anything, // does not halt the guard. assert.ok( - !/\\[0-9a-f]/i.test(selectorText), + !NUMERIC_ESCAPE.test(selectorText), `the selector \`${heading}\` carries a numeric escape, which this ` + 'file reads as a single character and would silently rename. ' + 'Teach it CSS identifier decoding in the same change that ' + @@ -1200,17 +1220,35 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a class named as a scope root is a class the stylesheet knows, and ' + 'skipping every at-rule prelude lost it.' ); + // ONLY for names. A compound query cannot see the difference — the + // prelude's classes never all appear in one query — so this asks the + // question that can: whether the root is a rule of its own. assert.equal( - live('@scope(.the-root){.box{color:red}}', 'the-root.box'), + alone('@scope(.the-root){.box{color:red}}', 'the-root'), false, - 'but a scope root is not a rule that styles anything, so it ' + - 'contributes no compound.' + 'a scope root is not a rule that styles anything, so it must reach ' + + 'the membership index without reaching the subject sets.' ); assert.equal( - live('@media (min-width:1.5rem){.box{color:red}}', '5rem'), + live('@container (min-width:1.5rem){.box{color:red}}', '5rem'), false, 'and only `@scope`: every other prelude is a condition, where a ' + - 'length would tokenise as a class.' + 'length tokenises as a class called `5rem`.' + ); + assert.equal( + live('@scope-foo (1.5rem){.box{color:red}}', '5rem'), + false, + 'and only `@scope` itself — a word boundary holds before a hyphen, ' + + 'so an unknown at-rule spelled that way would have its condition ' + + 'harvested.' + ); + assert.throws( + () => live('@scope(.\\31 23){.box{color:red}}', '123'), + /numeric escape/, + 'the harvest reads class names, so it needs the same guard the ' + + 'style-rule path has: without it the root registers as `31` and ' + + 'the name it was spelling is lost, which is the quiet direction ' + + 'inside the branch added to close the quiet direction.' ); // Attribute selectors this file reads loosely. Both shapes below make @@ -1233,8 +1271,15 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'notification.is-primary' ), false, - 'an unterminated bracket swallows the rest of the selector, which ' + - 'can only shorten what is read.' + 'an unterminated bracket swallows the rest of the selector, so the ' + + 'compound after it is not read.' + ); + assert.equal( + live('.a[b.fake{color:red}', 'fake'), + false, + 'and the names after it go too, which is right rather than merely ' + + 'safe: a selector with an unclosed bracket is a parse error, so ' + + 'the browser drops the rule and none of those classes ship.' ); // A NUMERIC escape names a character by code point, which this file From d50b83bb437c388c4b0d79d8c77b159d307e2d8b Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 02:50:10 -0400 Subject: [PATCH 26/38] test(bulma-ui): pin the harvest's other readers, and the one below it that had nothing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `@scope` harvest has three readers and only one had a case. The escape decode is the quiet one: without it a root spelled `.a\[b` enters the index as `a\[b`, so the name the stylesheet ships is there under a spelling nothing queries. The attribute strip is the loud one. Both have a case now, and both mutants fail on it. `CONDITIONAL_AT_RULE` still ended in `\b` where `SCOPE_AT_RULE` had been corrected to `(?![\w-])`, so `@media-foo` read as a condition while `@scope-foo` no longer read as a scope. Same boundary, same reason, and they say it the same way. `onlyClasses` opened with an emptiness check that could never decide anything: `''.split(',')` is `['']`, and the per-part test rejects that already. It was the one behaviour in the matcher with no separate revert, because reverting it changed no answer. `codeOnly` was the one reader below the matcher with nothing holding it, and it has cases now. The others each fail loudly through a guard of their own — `tupleFrom` cannot find its block or reads it short, and `colorKeywords` counts the copies it parsed against the spellings that exist and refuses an empty one, which I checked by breaking both. What `codeOnly` protects against is text that is NOT there, so nothing about a correct stylesheet can exercise it: a comment quoting the warning call invents an element, and a quoted word in a comment inside a tuple becomes a value the library does not accept. --- scripts/color-tuple-css.test.mjs | 72 +++++++++++++++++++++++++++++++- 1 file changed, 70 insertions(+), 2 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index c0dfdd342..4956da7a7 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -192,7 +192,7 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; * `@font-face` and the rest do not, so a rule under one of those is as live * as a rule at the top level. */ -const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)\b/i; +const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)(?![\w-])/i; /** * The at-rule whose prelude is a selector list rather than a condition. @@ -231,7 +231,9 @@ const CLASS_SELECTOR = /\.(?:\\.|[A-Za-z0-9_-])+/g; * separator first leaves one unambiguous pattern per part. */ const onlyClasses = argument => - argument.trim() !== '' && + // No emptiness check up front: `''.split(',')` is `['']`, and the + // per-part test below rejects that already, so a clause here could never + // decide anything. argument.split(',').every(part => { // Whatever is left once the class selectors come out has to be nothing. // A COMPOUND of them counts — `:not(.is-a.is-b)` prohibits carrying both @@ -1235,6 +1237,16 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'and only `@scope`: every other prelude is a condition, where a ' + 'length tokenises as a class called `5rem`.' ); + assert.equal( + live( + '@media-foo (min-width:10px){.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + true, + 'an unknown at-rule is not a condition, and a word boundary holds ' + + 'before a hyphen, so both at-rule patterns have to say so the ' + + 'same way.' + ); assert.equal( live('@scope-foo (1.5rem){.box{color:red}}', '5rem'), false, @@ -1242,6 +1254,21 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'so an unknown at-rule spelled that way would have its condition ' + 'harvested.' ); + // The harvest has three readers and each needs its own case. The + // escape decode is the quiet one: without it the name the CSS ships + // drops out of the index under a spelling nobody queries. + assert.equal( + live('@scope(.a\\[b){.box{color:red}}', 'a[b'), + true, + 'a scope root spelled with an escape is the class that escape ' + + 'names, so the harvest has to decode it like every other reader.' + ); + assert.equal( + live('@scope([data-x=\\.fake]){.box{color:red}}', 'fake'), + false, + 'and an attribute selector in a scope prelude is not a class, the ' + + 'same as anywhere else.' + ); assert.throws( () => live('@scope(.\\31 23){.box{color:red}}', '123'), /numeric escape/, @@ -1696,6 +1723,47 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); }); + // `codeOnly` is the one reader below the matcher with nothing holding + // it. The others fail loudly when broken, each through a guard of its + // own: `tupleFrom` cannot find its block or reads it short, and + // `colorKeywords` counts the copies it parsed against the spellings that + // exist and refuses an empty one. This has no such guard, because what it + // protects against is text that is not there — so it needs cases. + it('reads code rather than prose', () => { + const call = 'warnUnstyledColor'; + + // The caller scan looks for a call by name, and these components + // document the helper they call. A comment quoting the call invents an + // element, and an invented element is compared against the stylesheet + // as though the library had one. + assert.equal( + codeOnly(`/* ${call}('Fake', x) */\nconst a = 1;`).includes(call), + false, + 'a block comment quoting the call must not be read as the call.' + ); + assert.equal( + codeOnly(`// ${call}('Fake', x)\nconst a = 1;`).includes(call), + false, + 'nor must a line comment, which is how these components are actually ' + + 'annotated.' + ); + assert.equal( + codeOnly(`${call}('Real', x);`).includes(call), + true, + 'and the real call has to survive, or the scan finds nothing and the ' + + 'comparison it feeds is vacuous.' + ); + + // It reads values too, so a quoted word in a comment inside a tuple + // would become a value the library does not accept. + assert.equal( + codeOnly("const t = [/* 'ghost' */ 'real'] as const;").includes('ghost'), + false, + 'a quoted word in a comment is not a value, and `tupleFrom` reads ' + + 'through this on its way to the tuple.' + ); + }); + it('declares every colour whose component modifier has no CSS', () => { const css = stylesheet(); const colors = tupleFrom(HELPERS, 'validColors'); From 7d15786da315f99312d3dbd484338498ec64137a Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 03:28:48 -0400 Subject: [PATCH 27/38] fix(bulma-ui): list the at-rules that are transparent, not the ones that are conditions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The list was the wrong way round. Naming the conditions waved through every at-rule this file has not heard of, and a browser that has not heard of one drops it WITH its block, so nothing inside renders at all. `@media-foo`, `@page` and `@starting-style` all read live, which is the direction this file forbids — and the commit before this one pinned `@media-foo` at live, so the assertion was holding the wrong answer in place. `@layer` is the only at-rule whose contents are ordinary style rules that always apply, so it is the whole list now and everything else is assumed a condition. An escaped quote inside a class name was starting a string. The strip runs over raw text, so `.a\"b` opened one at its own quote and the match ran to the next quote in the file, emptying the brace of a rule in between: the stack never got deeper and what was nested inside read as top level. The strip consumes an escape pair first now, which is the same rule the delimiter scan already had and the one place still missing it. A numeric escape can spell a function name as well as a class name, and this file matches literal spellings — `\75 rl(` IS `url(` and would not be recognised, leaking whatever its parentheses hold. There is now one check over the whole stylesheet once strings, comments and url tokens are gone, so what it sees is selector and declaration text. Bracketed spans come out first, because an escape in an attribute value renames nothing and halting there would be a false alarm. A keyframe selector is a percentage, and `33.3%` offered `.3` to the class tokeniser, which returned the name `3`. A CSS identifier cannot begin with a digit, so anything that does was never a class — filtering on that closes the shape wherever it appears rather than teaching one reader about keyframes. It is the loud direction, so this is tidiness; the index over the shipped stylesheet is unchanged, and no name in it ever began with a non-letter. --- scripts/color-tuple-css.test.mjs | 137 ++++++++++++++++++++++++++++--- 1 file changed, 125 insertions(+), 12 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 4956da7a7..54d61524b 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -185,14 +185,20 @@ const indexCache = new Map(); const UNMODELLED = 'bestax-guard-unmodelled-requirement'; /** - * An at-rule whose contents apply only sometimes. + * An at-rule whose contents apply exactly as they would at the top level. * - * `@media`, `@supports`, `@container` and `@scope` each wrap their rules in - * a condition — a viewport, a feature, a size, a subtree. `@layer` and - * `@font-face` and the rest do not, so a rule under one of those is as live - * as a rule at the top level. + * Listed the other way round on purpose. Naming the CONDITIONS instead — + * `@media`, `@supports`, `@container`, `@scope` — waves through every + * at-rule this file has not heard of, and a browser that has not heard of + * one drops it WITH its block, so nothing inside renders at all. That made + * `@media-foo`, `@page` and `@starting-style` read live, which is the + * direction this file forbids, and the commit before this one pinned it. + * + * `@layer` is the only at-rule whose contents are ordinary style rules that + * always apply. `@keyframes` and `@font-face` hold no style rules to begin + * with, so calling them conditional costs nothing. */ -const CONDITIONAL_AT_RULE = /^@(media|supports|container|scope)(?![\w-])/i; +const TRANSPARENT_AT_RULE = /^@layer(?![\w-])/i; /** * The at-rule whose prelude is a selector list rather than a condition. @@ -214,6 +220,20 @@ const SCOPE_AT_RULE = /^@scope(?![\w-])/i; */ const NUMERIC_ESCAPE = /\\[0-9a-f]/i; +/** + * A name a CSS class can actually have. + * + * An identifier may not begin with a digit, nor with a hyphen followed by + * one, so anything that does was never a class — it is a number this file + * read as one. A keyframe selector is where that happens: + * `@keyframes f{33.3%{…}}` offers `.3` to the class tokeniser and it comes + * back as the name `3`. Fabricating a name is the loud direction for the + * membership index, so this is tidiness rather than a fix, and it closes + * the shape wherever it appears rather than teaching one caller about + * keyframes. + */ +const IDENTIFIER_START = /^-?[A-Za-z_\\]/; + /** A class selector wherever it appears, with its name captured. */ const CLASS_TOKEN = /\.((?:\\.|[A-Za-z0-9_-])+)/g; @@ -515,13 +535,44 @@ function simpleSelectors(css) { // membership index. Emptying them first is one rule instead of a // special case at each of the three. const stripped = css.replace( - /\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*'|url\((?:[^)"'\\]|\\[\s\S])*\)/gi, + /\\[\s\S]|\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*'|url\((?:[^)"'\\]|\\[\s\S])*\)/gi, match => { + // An escape pair comes back untouched. It has to be CONSUMED here + // rather than skipped, or the character it escapes can open one of + // the spans below: a class name spelled `.a\\"b` started a string + // at its own quote, and the match ran to the next quote in the + // file, emptying the `{` of a rule in between. The stack never got + // deeper and what was nested inside read as top level. + if (match[0] === '\\') return match; if (match.startsWith('/*')) return ''; if (match.slice(0, 4).toLowerCase() === 'url(') return 'url()'; return match[0] + match[0]; } ); + + // No numeric escape survives into the text this file reads as + // structure. Strings, comments and url tokens are gone by now, so one + // that is left sits in a selector or a declaration, and both are read + // by patterns that match literal spellings: `\\75 rl(` IS `url(` and + // would not be recognised as one, leaking whatever its parentheses + // hold. Decoding identifiers is a CSS reader's job and more than this + // file should carry, so it stops instead of guessing. + // Bracketed spans come out first. A numeric escape in an attribute + // value renames nothing — attribute selectors are removed before any + // class is read, and in the sets path they land in the qualifier + // residue — so halting there would be a false alarm over text this + // file never reads as either a selector or a function. + const structural = withoutAttributes(stripped); + const numeric = NUMERIC_ESCAPE.exec(structural); + assert.ok( + !numeric, + `the stylesheet carries a numeric escape near ` + + `\`${structural.slice(Math.max(0, numeric?.index - 40), (numeric?.index ?? 0) + 40).trim()}\`, ` + + 'which names a character by code point. This file matches literal ' + + 'spellings, so it would read neither the class nor the function ' + + 'that escape spells. Teach it CSS identifier decoding in the same ' + + 'change that introduced the escape.' + ); const chunks = splitUnescaped(stripped, '{'); // One entry per block still open. `conditional` marks a block that only // applies sometimes, which is the same thing `:first-child` says about @@ -558,7 +609,7 @@ function simpleSelectors(css) { // condition. if (heading.startsWith('@')) { open.push({ - conditional: CONDITIONAL_AT_RULE.test(heading), + conditional: !TRANSPARENT_AT_RULE.test(heading), rule: false, }); // One at-rule prelude is made of SELECTORS rather than a condition, @@ -578,6 +629,7 @@ function simpleSelectors(css) { 'that introduced the escape.' ); for (const [, name] of roots.matchAll(CLASS_TOKEN)) { + if (!IDENTIFIER_START.test(name)) continue; names.add(name.replace(/\\(.)/g, '$1')); } } @@ -627,6 +679,7 @@ function simpleSelectors(css) { // `:not()` is still a class it names, and the membership path is the // one place that matters. for (const [, name] of selectorText.matchAll(CLASS_TOKEN)) { + if (!IDENTIFIER_START.test(name)) continue; names.add(name.replace(/\\(.)/g, '$1')); } const prelude = requirements(heading); @@ -1177,6 +1230,65 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'has to skip that one.' ); + // An at-rule this file has not heard of is not transparent. Naming + // the conditions instead of the exceptions waved every unknown one + // through as live, and a browser that has not heard of an at-rule + // drops it WITH its block. + assert.equal( + live( + '@page{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'a page context is not the top level, so a compound inside one is ' + + 'not shown to render.' + ); + assert.equal( + live( + '@starting-style{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'and neither is a starting style, which is exactly the kind of ' + + 'at-rule an allow-list of conditions cannot know about.' + ); + + // An escaped quote inside a CLASS NAME is not the start of a string. + // The span from it to the next quote in the file emptied the brace of + // a rule in between, so the stack never got deeper and what was + // nested inside read as top level. + assert.equal( + live( + '.a\\"b{color:red}.hero{content:"}";.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + false, + 'an escaped quote in a class name must not open a string, or the ' + + 'match runs past the rule that follows and takes its brace.' + ); + + // A numeric escape can spell a FUNCTION name as well as a class one, + // and this file matches literal spellings. + assert.throws( + () => + live( + '.a{background:\\75 rl(x}y);.tabs.is-boxed{color:red}}', + 'tabs.is-boxed' + ), + /numeric escape/, + '`\\75 rl(` is `url(`, which would not be recognised as one, so the ' + + 'brace inside its parentheses would leak. The guard stops rather ' + + 'than guessing.' + ); + + // A KEYFRAME selector is a percentage, and a percentage is not a class. + assert.equal( + live('@keyframes f{33.3%{opacity:1}}', '3'), + false, + 'a CSS identifier cannot begin with a digit, so a decimal read as a ' + + 'class was never a class.' + ); + // A STRING is content, not structure. Everything this matcher does // reads structure out of raw text, and a string is where `{`, `}`, `;` // and `.` appear meaning none of it. @@ -1242,10 +1354,11 @@ describe('the colour tuples agree with the shipped stylesheet', () => { '@media-foo (min-width:10px){.notification.is-primary{color:red}}', 'notification.is-primary' ), - true, - 'an unknown at-rule is not a condition, and a word boundary holds ' + - 'before a hyphen, so both at-rule patterns have to say so the ' + - 'same way.' + false, + 'an at-rule this file has not heard of is not transparent: a browser ' + + 'that has not heard of one drops it WITH its block, so nothing ' + + 'inside renders. Listing the conditions instead of the exceptions ' + + 'waved every unknown one through as live.' ); assert.equal( live('@scope-foo (1.5rem){.box{color:red}}', '5rem'), From 89d7a3f6dd5b1eee005fbe133d77d091c2b90745 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 03:50:31 -0400 Subject: [PATCH 28/38] fix(bulma-ui): inside brackets nothing is structure, whatever the function is called MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Twelve rounds of this file have been spent adding constructs to a list. First comments. Then strings, because `content:"}"` closed a block. Then unquoted url tokens, because they carry a brace with no quotes to protect it. Then escape pairs, because `.a\"b` opened a string at its own quote. Then a halt on numeric escapes, because `\75 rl(` is `url(` and matching a literal spelling catches none of them. The list was never going to end, and this round named why: `\url(`, `u\rl(` and `ur\l(` are three more spellings of the same function and none of them is the text an alternation looks for. So the list is gone and there is a rule instead. Inside parentheses or brackets, `{`, `}` and `;` are never block structure, because CSS has no way to open a block in there — which makes the function's name irrelevant, however it is spelled. A depth counter covers every spelling at once, including ones nobody has written yet, and it closes the bracket-block case for free: `grid:[a}b]` was popping the stack too. That replaces three alternations and the structural half of the numeric halt with one left-to-right scan, which is also the honest shape for what it does — this is the one place the file reads raw text before it knows any structure, so it is where every leak has come from. The numeric halt stays only where it is still needed, on a heading, where an escape renames a class rather than hiding a delimiter. `IDENTIFIER_START` was rejecting `--foo`, which is a legal class name, so such a name dropped out of the membership index — the quiet direction for the sweep that looks for a colour the CSS ships. It allows a double hyphen now. The `@scope` harvest was missing that filter's pin, so deleting its copy left every case green. Nothing moves: the index over the shipped stylesheet is the same 5758 sets and 3553 names as before, and six spellings of a brace-hiding function plus the bracket block each have a case that dies when the depth counter does. --- scripts/color-tuple-css.test.mjs | 178 ++++++++++++++++++------------- 1 file changed, 101 insertions(+), 77 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 54d61524b..968c2e69c 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -232,7 +232,7 @@ const NUMERIC_ESCAPE = /\\[0-9a-f]/i; * the shape wherever it appears rather than teaching one caller about * keyframes. */ -const IDENTIFIER_START = /^-?[A-Za-z_\\]/; +const IDENTIFIER_START = /^(?:--|-?[A-Za-z_\\])/; /** A class selector wherever it appears, with its name captured. */ const CLASS_TOKEN = /\.((?:\\.|[A-Za-z0-9_-])+)/g; @@ -412,6 +412,66 @@ function classesOf(simple, contextual) { * minified stylesheet of this size backtracks badly, where splitting is * linear. */ +/** + * The stylesheet with everything that is not block structure taken out. + * + * This is the one place the file reads raw text before it knows any + * structure, so it is where every leak has come from, and it took a while + * to find the rule underneath them. The first version removed comments. + * Then strings, because `content:"}"` closed a block. Then unquoted url + * tokens, because they may carry a brace with no quotes to protect it. + * Then escapes, because `.a\\"b` opened a string at its own quote. Each + * addition was one more construct that can hide a `{`, and the list was + * never going to end: `\\75 rl(`, `\\url(`, `u\\rl(` and `ur\\l(` all spell + * the same function, and matching a literal `url(` catches none of them. + * + * The rule is simpler than the list. Inside parentheses or brackets, + * `{`, `}` and `;` are NEVER block structure — CSS has no way to open a + * block in there — so it does not matter what the function is called or + * how its name is spelled. A depth counter handles every spelling at + * once, and an attribute value carrying a brace comes free with it. + * + * Comments go. Strings keep their delimiters and lose their contents, so + * the text around them keeps its shape. Escape pairs are consumed whole, + * which is what stops an escaped delimiter from opening anything. + */ +function nonStructure(css) { + let out = ''; + let depth = 0; + for (let i = 0; i < css.length; i += 1) { + const ch = css[i]; + if (ch === '\\') { + out += css.slice(i, i + 2); + i += 1; + continue; + } + if (ch === '/' && css[i + 1] === '*') { + const end = css.indexOf('*/', i + 2); + i = end === -1 ? css.length : end + 1; + continue; + } + if (ch === '"' || ch === "'") { + out += ch + ch; + i += 1; + while (i < css.length && css[i] !== ch) { + if (css[i] === '\\') i += 1; + i += 1; + } + continue; + } + if (ch === '(' || ch === '[') depth += 1; + else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1); + // A brace or semicolon inside either kind of bracket is content. Held + // as a space so the text keeps its length and nothing fuses across it. + else if (depth > 0 && (ch === '{' || ch === '}' || ch === ';')) { + out += ' '; + continue; + } + out += ch; + } + return out; +} + /** * Every position in `text` where `char` appears UNESCAPED. * @@ -506,73 +566,7 @@ function simpleSelectors(css) { ); const sets = []; const names = new Set(); - // Comments, strings and url tokens, in ONE left-to-right pass. - // - // Each of them has to go. A comment's words become classes, and one - // naming a compound would answer for it. A string is where `{`, `}`, - // `;` and `.` appear meaning no structure at all, so `content:"}"` - // closed a block that was still open. An unquoted url token may legally - // carry `{`, `}` and `;` with no quotes to protect them, so - // `url(x}y)` does the same thing. - // - // One pass rather than three, because the order between them is not - // decidable: a `/*` inside a string is not a comment, and a `"` inside - // a comment is not a string. Stripping comments first ate from a `/*` - // in a string to the next `*/`, and a span like that can swallow a `{` - // without its `}` — which makes the stack SHALLOWER, so a nested rule - // stops reading nested. That is the silent direction, and a paragraph - // here claimed otherwise until it was measured. Whichever construct - // starts first wins, which is what CSS itself does. - // - // Comments go; strings and url tokens are emptied rather than removed, - // so their delimiters stay where they are and the text around them - // keeps its shape. Everything below this line reads STRUCTURE out of raw - // text — blocks split on `{`, headings cut at `;`, classes tokenised on - // `.` — and a string is the one place those characters appear without - // meaning any of it. `content:"}"` popped the nesting stack, which made - // a rule nested inside another read as though it stood alone, and - // `[data-x=";.fake-class"]` put a class that does not exist into the - // membership index. Emptying them first is one rule instead of a - // special case at each of the three. - const stripped = css.replace( - /\\[\s\S]|\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*'|url\((?:[^)"'\\]|\\[\s\S])*\)/gi, - match => { - // An escape pair comes back untouched. It has to be CONSUMED here - // rather than skipped, or the character it escapes can open one of - // the spans below: a class name spelled `.a\\"b` started a string - // at its own quote, and the match ran to the next quote in the - // file, emptying the `{` of a rule in between. The stack never got - // deeper and what was nested inside read as top level. - if (match[0] === '\\') return match; - if (match.startsWith('/*')) return ''; - if (match.slice(0, 4).toLowerCase() === 'url(') return 'url()'; - return match[0] + match[0]; - } - ); - - // No numeric escape survives into the text this file reads as - // structure. Strings, comments and url tokens are gone by now, so one - // that is left sits in a selector or a declaration, and both are read - // by patterns that match literal spellings: `\\75 rl(` IS `url(` and - // would not be recognised as one, leaking whatever its parentheses - // hold. Decoding identifiers is a CSS reader's job and more than this - // file should carry, so it stops instead of guessing. - // Bracketed spans come out first. A numeric escape in an attribute - // value renames nothing — attribute selectors are removed before any - // class is read, and in the sets path they land in the qualifier - // residue — so halting there would be a false alarm over text this - // file never reads as either a selector or a function. - const structural = withoutAttributes(stripped); - const numeric = NUMERIC_ESCAPE.exec(structural); - assert.ok( - !numeric, - `the stylesheet carries a numeric escape near ` + - `\`${structural.slice(Math.max(0, numeric?.index - 40), (numeric?.index ?? 0) + 40).trim()}\`, ` + - 'which names a character by code point. This file matches literal ' + - 'spellings, so it would read neither the class nor the function ' + - 'that escape spells. Teach it CSS identifier decoding in the same ' + - 'change that introduced the escape.' - ); + const stripped = nonStructure(css); const chunks = splitUnescaped(stripped, '{'); // One entry per block still open. `conditional` marks a block that only // applies sometimes, which is the same thing `:first-child` says about @@ -1267,18 +1261,35 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'match runs past the rule that follows and takes its brace.' ); - // A numeric escape can spell a FUNCTION name as well as a class one, - // and this file matches literal spellings. - assert.throws( - () => + // A function's NAME does not matter. Every one of these spells `url` + // and none of them is the literal `url(` an alternation would look + // for, which is why the rule is about the parentheses instead: inside + // them CSS has no way to open a block, so nothing in there is + // structure whatever the function is called. + for (const [label, value] of [ + ['plain', 'url(x}y)'], + ['upper case', 'URL(x}y)'], + ['numeric escape', '\\75 rl(x}y)'], + ['escaped first letter', '\\url(x}y)'], + ['escaped middle letter', 'u\\rl(x}y)'], + ['a function this file has never heard of', 'foo(x}y)'], + ]) { + assert.equal( live( - '.a{background:\\75 rl(x}y);.tabs.is-boxed{color:red}}', + `.a{background:${value};.tabs.is-boxed{color:red}}`, 'tabs.is-boxed' ), - /numeric escape/, - '`\\75 rl(` is `url(`, which would not be recognised as one, so the ' + - 'brace inside its parentheses would leak. The guard stops rather ' + - 'than guessing.' + false, + `a brace inside a function's parentheses is content, and ${label} ` + + 'is one more spelling an alternation would have had to know.' + ); + } + assert.equal( + live('.hero{grid:[a}b];.tabs.is-boxed{color:red}}', 'tabs.is-boxed'), + false, + 'and a bracket block is the same shape: CSS drops the declaration, ' + + 'but error recovery keeps the block structure, so the rule really ' + + 'is nested.' ); // A KEYFRAME selector is a percentage, and a percentage is not a class. @@ -1288,6 +1299,13 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a CSS identifier cannot begin with a digit, so a decimal read as a ' + 'class was never a class.' ); + assert.equal( + live('.--foo{color:red}', '--foo'), + true, + 'but a double hyphen IS a legal class name, and rejecting anything ' + + 'not starting with a letter dropped it — the quiet direction for ' + + 'the index that looks for a colour the CSS ships.' + ); // A STRING is content, not structure. Everything this matcher does // reads structure out of raw text, and a string is where `{`, `}`, `;` @@ -1382,6 +1400,12 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'and an attribute selector in a scope prelude is not a class, the ' + 'same as anywhere else.' ); + assert.equal( + live('@scope(.5x){.box{color:red}}', '5x'), + false, + 'and a token that cannot be an identifier is not a class here ' + + 'either — the harvest needs every filter the style-rule path has.' + ); assert.throws( () => live('@scope(.\\31 23){.box{color:red}}', '123'), /numeric escape/, From 1d08e11f0aec6d4032e828790e93402a7fb30463 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 04:11:45 -0400 Subject: [PATCH 29/38] fix(bulma-ui): a comment opener is content in there too, and brackets have to balance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The depth counter was consulted for `{`, `}` and `;` and not for `/*`, which is the one character the `url(…)` alternation it replaced had been quietly covering. An unquoted url token may hold a comment opener, and opening a comment there ran the span to the next `*/` or to the end of the file, taking every rule after it — a whole stylesheet's classes leaving the membership index without a word. CSS agrees a comment cannot start inside a url token or an attribute value, so the depth decides that too now. The shipped stylesheet has no comment inside parentheses at all, so the only thing this costs is a fabricated name if one ever appears there, which is the loud side. The floor on the counter was the wrong answer to an imbalance. One unclosed bracket parks the depth above zero for the rest of the file, after which no brace is read as structure and every later rule leaves both indexes — the quiet direction, applied to everything at once. It is an assertion now, so a stylesheet this file cannot find the block structure of stops the guard. That turns the two unterminated-bracket cases from answers into refusals. They were answering dead, and right by luck rather than by reasoning: the swallowed tail happened to carry the compound away with it. `cssBackedColors` was the last literal reader still excluding both quote characters from its body, which is the shape the shared pattern's docblock names as the other way to be wrong. No case can tell the two apart, because both read the same value out of the real source; it is consistency rather than a fix. Three comments credited a pass that no longer exists — nothing substitutes a bare pseudo-class, it survives into the qualifier residue and is counted there — and the `simpleSelectors` docblock had drifted onto the function inserted beneath it, for the third time. --- scripts/color-tuple-css.test.mjs | 116 +++++++++++++++++++++++-------- 1 file changed, 87 insertions(+), 29 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 968c2e69c..684af752f 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -297,8 +297,9 @@ const onlyClasses = argument => * else, checked as written; anything else is a requirement like any * other. A nested call counts as anything else: `:not(:is(.is-light))` * is never matched here at all, because the pattern cannot cross the - * inner parenthesis, and the bare pass reads the `:not` as the - * requirement it could not verify. + * inner parenthesis, so the `:not` survives into the qualifier residue + * in `classesOf` and is counted there as the requirement it could not + * verify. * - A pseudo-ELEMENT does not restrict anything. `.delete::before` styles a * box generated for a delete, so the delete is live and calling it dead * would be a plain misreading. A bare `::` spelling is exempted. Two @@ -325,7 +326,7 @@ const onlyClasses = argument => * cannot cross a parenthesis, so a nested call leaves its enclosing one * unmatched, and `replace` does not re-scan what it wrote. That is the * correct answer rather than a gap: a construct whose argument could not be - * read is a requirement, and the bare pass sentinels it. Repeating to a + * read is a requirement, and the residue check counts it. Repeating to a * fixed point looked like an improvement and was the opposite — it resolved * the inner call to something CLASS-SHAPED, which `onlyClasses` then * accepted, so `:not(:nth-last-child(1))` dropped and read live while the @@ -335,8 +336,8 @@ const onlyClasses = argument => function requirements(prelude) { // Whatever is still inside parentheses once the passes above have run is // the argument of a call none of them could resolve, and it has already - // been accounted for: the bare pass turned the call's NAME into a - // sentinel. Leaving the text behind is what hurts, because the caller + // been accounted for: the call's NAME survives into the qualifier + // residue in `classesOf`, which sentinels it there. Leaving the text behind is what hurts, because the caller // splits on commas and an argument may hold them — // `:has(:nth-child(2),.notification.is-primary,.z)` fragments into a // clean `.notification.is-primary` with no sentinel on it, which reads @@ -405,13 +406,6 @@ function classesOf(simple, contextual) { return new Set(qualifier || contextual ? [...classes, UNMODELLED] : classes); } -/** - * The class sets of every simple selector in the stylesheet. - * - * One pass per file read. Split rather than matched: a `[^{}]+` scan over a - * minified stylesheet of this size backtracks badly, where splitting is - * linear. - */ /** * The stylesheet with everything that is not block structure taken out. * @@ -445,7 +439,15 @@ function nonStructure(css) { i += 1; continue; } - if (ch === '/' && css[i + 1] === '*') { + // A comment opener is content in here as well, and this was the one + // character the depth counter was not consulted for. An unquoted url + // token may hold `/*`, and opening a comment there ran the span to the + // next `*/` or to the end of the file, taking every rule after it — + // that is a whole stylesheet's classes leaving the membership index + // quietly. The `url(…)` alternation this scan replaced was covering + // the shape without saying so. CSS agrees: a comment cannot start + // inside a url token or an attribute value. + if (ch === '/' && css[i + 1] === '*' && depth === 0) { const end = css.indexOf('*/', i + 2); i = end === -1 ? css.length : end + 1; continue; @@ -460,7 +462,7 @@ function nonStructure(css) { continue; } if (ch === '(' || ch === '[') depth += 1; - else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1); + else if (ch === ')' || ch === ']') depth -= 1; // A brace or semicolon inside either kind of bracket is content. Held // as a space so the text keeps its length and nothing fuses across it. else if (depth > 0 && (ch === '{' || ch === '}' || ch === ';')) { @@ -469,6 +471,19 @@ function nonStructure(css) { } out += ch; } + // Brackets have to balance, and a floor on the counter was the wrong way + // to handle their not doing. One unclosed `(` parks the depth above zero + // for the rest of the file, after which no `{` is read as structure and + // every later rule leaves both indexes — the quiet direction, and over + // the whole stylesheet at once. A stylesheet that gets here malformed is + // something this file cannot read, so it says so. + assert.equal( + depth, + 0, + 'the stylesheet has unbalanced brackets, so this file cannot tell ' + + 'which of its braces open blocks. Every rule after the imbalance ' + + 'would drop out of both indexes silently.' + ); return out; } @@ -557,6 +572,13 @@ function withoutAttributes(selector) { return out; } +/** + * The class sets of every simple selector in the stylesheet. + * + * One pass per file read. Split rather than matched: a `[^{}]+` scan over a + * minified stylesheet of this size backtracks badly, where splitting is + * linear. + */ function simpleSelectors(css) { if (!indexCache.has(css)) { assert.ok( @@ -949,7 +971,9 @@ function acceptedKeywords(component, keywords) { /** The colours `CSS_BACKED` names to the developer as ones that work. */ function cssBackedColors() { const source = codeOnly(readFileSync(DEPRECATIONS, 'utf8')); - const line = /const CSS_BACKED =\s*\n?\s*(['"])([^'"]+)\1/.exec(source); + const line = new RegExp( + `const CSS_BACKED =\\s*\\n?\\s*${QUOTED.source}` + ).exec(source); assert.ok(line, 'could not find `CSS_BACKED` in colorDeprecations.ts'); return line[2].split(',').map(v => v.trim()); } @@ -1284,6 +1308,28 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'is one more spelling an alternation would have had to know.' ); } + // A comment opener inside a url token is content too, and it was the + // one character the depth counter was not consulted for. + assert.equal( + live( + '.a{background:url(x/*y)}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'a `/*` inside an unquoted url token does not open a comment, or ' + + 'the span runs to the end of the file and takes every rule after ' + + 'it out of both indexes.' + ); + assert.equal( + live( + '.a{background:url(x/*y)*/}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'and it does not open one that closes later either, which would eat ' + + 'the `)` as well and never let the depth return to zero.' + ); + assert.equal( live('.hero{grid:[a}b];.tabs.is-boxed{color:red}}', 'tabs.is-boxed'), false, @@ -1429,21 +1475,33 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'so the rule contributes no subject — a false alarm, and it stays ' + 'on that side.' ); - assert.equal( - live( - '.notification.is-primary[data-x{color:red}', - 'notification.is-primary' - ), - false, - 'an unterminated bracket swallows the rest of the selector, so the ' + - 'compound after it is not read.' + // An unterminated bracket is a REFUSAL, not an answer. It used to + // produce one — dead, because the swallowed tail carried the compound + // away with it — and that was right by luck rather than by reasoning: + // one unclosed bracket parks the depth counter above zero for the rest + // of the file, after which no `{` is read as structure and every later + // rule leaves both indexes. A stylesheet this file cannot tell the + // block structure of is one it has to stop on. + assert.throws( + () => + live( + '.notification.is-primary[data-x{color:red}', + 'notification.is-primary' + ), + /unbalanced brackets/, + 'a stylesheet whose brackets do not balance has to stop the guard, ' + + 'because the alternative is every rule after the imbalance ' + + 'dropping out of both indexes without a word.' ); - assert.equal( - live('.a[b.fake{color:red}', 'fake'), - false, - 'and the names after it go too, which is right rather than merely ' + - 'safe: a selector with an unclosed bracket is a parse error, so ' + - 'the browser drops the rule and none of those classes ship.' + assert.throws( + () => + live( + '.a{background:foo(x}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + /unbalanced brackets/, + 'and an unclosed parenthesis is the same thing: it is the shape that ' + + 'costs the WHOLE stylesheet rather than one selector.' ); // A NUMERIC escape names a character by code point, which this file From 1608f1e91480b5b6ddc1fd8a12a8f49e474bc4cf Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 04:30:39 -0400 Subject: [PATCH 30/38] fix(bulma-ui): brackets have to balance as they go, not on the net MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three versions of this check and each was weaker than it looked. The floor at zero hid a stray closer entirely. Replacing it with a net check at the end hid it differently: a stray closer and a later unclosed opener cancel out, so the net is zero while everything between them was read one bracket too shallow — which is a brace inside a function coming back as block structure, and a rule nested inside another reading as top level. Both halves are checked now, the stray recorded where it happens rather than asserted per character, since a message built per character is a message built eight hundred thousand times. The docblock claimed comments go, flatly. They go at depth zero, which is the change the commit before this one made, and the limit is worth stating rather than glossing: at depth the scan reads a comment opener as content, which is right inside a url token or an attribute value and wrong inside `rgb()` or `:is()`, where CSS allows one. Telling those apart means reading the function's name, and not reading names is the whole point of the scan. A comment in there stops the guard rather than being ignored, which is loud, and nothing this repo builds has one. Two behaviours in the scan cannot be held by a case and now say so. One string delimiter emitted instead of two is legibility rather than an answer, because nothing downstream counts a quote; the emptiness guard in `onlyClasses` covers an empty `:not()`, which is not valid CSS. The PR body claimed every behaviour was separately revertible, so it names these two instead. --- scripts/color-tuple-css.test.mjs | 74 +++++++++++++++++++++++++------- 1 file changed, 59 insertions(+), 15 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 684af752f..27f75bba3 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -425,13 +425,29 @@ function classesOf(simple, contextual) { * how its name is spelled. A depth counter handles every spelling at * once, and an attribute value carrying a brace comes free with it. * - * Comments go. Strings keep their delimiters and lose their contents, so - * the text around them keeps its shape. Escape pairs are consumed whole, - * which is what stops an escaped delimiter from opening anything. + * Strings keep their delimiters and lose their contents, so the text + * around them keeps its shape. Nothing downstream counts a quote, so that + * is legibility rather than an answer, and no case can hold it. Escape pairs are consumed whole, which is + * what stops an escaped delimiter from opening anything. Comments go at + * depth zero, for the reason the loop gives where it decides that. + * + * The limit worth knowing: at depth the scan treats a comment opener as + * content, which is right inside a url token or an attribute value and + * wrong inside `rgb()`, `calc()` or `:is()`, where CSS does allow one. + * Telling those apart means reading the function's name, and reading names + * is what this scan was written to stop doing — `\75 rl(`, `\url(` and + * `u\rl(` are all the same function. A comment inside parentheses + * carrying an odd quote or an unmatched bracket therefore stops the guard + * rather than being ignored, which is loud, and no stylesheet this repo + * builds has one. */ function nonStructure(css) { let out = ''; let depth = 0; + // Where a closer arrived with nothing open. Recorded rather than + // asserted in the loop, because a message built per character is a + // message built eight hundred thousand times. + let stray = -1; for (let i = 0; i < css.length; i += 1) { const ch = css[i]; if (ch === '\\') { @@ -462,7 +478,10 @@ function nonStructure(css) { continue; } if (ch === '(' || ch === '[') depth += 1; - else if (ch === ')' || ch === ']') depth -= 1; + else if (ch === ')' || ch === ']') { + if (depth === 0 && stray < 0) stray = i; + depth -= 1; + } // A brace or semicolon inside either kind of bracket is content. Held // as a space so the text keeps its length and nothing fuses across it. else if (depth > 0 && (ch === '{' || ch === '}' || ch === ';')) { @@ -471,18 +490,27 @@ function nonStructure(css) { } out += ch; } - // Brackets have to balance, and a floor on the counter was the wrong way - // to handle their not doing. One unclosed `(` parks the depth above zero - // for the rest of the file, after which no `{` is read as structure and - // every later rule leaves both indexes — the quiet direction, and over - // the whole stylesheet at once. A stylesheet that gets here malformed is - // something this file cannot read, so it says so. + // Brackets have to balance, and they have to balance AS THEY GO. The + // first version floored the counter at zero, which hid a stray closer; + // the second checked only the net at the end, which is weaker still — a + // stray closer and a later unclosed opener cancel out, and the span + // between them was read at a depth one too low, so a brace inside a + // function came back as block structure. Either way what follows the + // imbalance leaves both indexes, which is the quiet direction applied to + // a whole stylesheet at once, so both halves are checked. + assert.ok( + stray < 0, + 'the stylesheet closes a bracket that was never opened, near ' + + `\`${css.slice(Math.max(0, stray - 40), stray + 40).trim()}\`. ` + + 'Everything after it is read one bracket too shallow, so a brace ' + + 'inside a function would be taken for block structure.' + ); assert.equal( depth, 0, - 'the stylesheet has unbalanced brackets, so this file cannot tell ' + - 'which of its braces open blocks. Every rule after the imbalance ' + - 'would drop out of both indexes silently.' + 'the stylesheet leaves a bracket open, so this file cannot tell which ' + + 'of its braces open blocks. Every rule after it would drop out of ' + + 'both indexes silently.' ); return out; } @@ -1488,7 +1516,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { '.notification.is-primary[data-x{color:red}', 'notification.is-primary' ), - /unbalanced brackets/, + /leaves a bracket open/, 'a stylesheet whose brackets do not balance has to stop the guard, ' + 'because the alternative is every rule after the imbalance ' + 'dropping out of both indexes without a word.' @@ -1499,10 +1527,26 @@ describe('the colour tuples agree with the shipped stylesheet', () => { '.a{background:foo(x}.notification.is-primary{color:red}', 'notification.is-primary' ), - /unbalanced brackets/, + /leaves a bracket open/, 'and an unclosed parenthesis is the same thing: it is the shape that ' + 'costs the WHOLE stylesheet rather than one selector.' ); + // They have to balance AS THEY GO, not just on the net. A stray closer + // and a later unclosed opener cancel out, and everything between them + // was read one bracket too shallow — which is a brace inside a + // function coming back as block structure. + assert.throws( + () => + live( + '.a{color:red)}.hero{color:red;.tabs.is-boxed{color:red}}' + + '.b{background:foo(x}', + 'tabs.is-boxed' + ), + /never opened/, + 'a stray closing bracket has to be caught where it happens: its net ' + + 'cancels against a later unclosed opener, and the span between ' + + 'them is where the wrong answers come from.' + ); // A NUMERIC escape names a character by code point, which this file // cannot decode. It says so rather than renaming the class quietly — From 3965c04e9044292e80be41f96003d426ef3d5847 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 04:48:25 -0400 Subject: [PATCH 31/38] fix(bulma-ui): a string ends at its line, and the transparent list stays at one An unterminated string ran to the next quote in the FILE and deleted every rule in between, out of both indexes, with nothing asserting. CSS ends a string at the newline it started on, so the scan does too, and a line continuation still works because the escape is consumed together with the newline after it. That was the last way a single malformed character could cost the whole stylesheet quietly. `TRANSPARENT_AT_RULE` had the boundary that keeps its list to one at-rule and nothing holding it, so `@layer-foo` and `@layerx` could have joined `@layer` and read live. That is the shape two commits ago fixed for `@media-foo`, one at-rule to the left, and it is the forbidden direction on the only at-rule this file trusts. Neutralising a semicolon inside brackets turned out to be holdable after all, contrary to what I had assumed of it: the heading is cut at the last semicolon, so leaving one inside an attribute value cuts away every class before it, and `.box[data-x=a;b].is-real` loses `box` from the membership index. What is genuinely unholdable in this scan is now stated together in one place: the count of string delimiters it emits, and the space it leaves where a neutralised delimiter stood. Neither is readable by any query, so they are legibility rather than answers, and the PR body says so without a count that will go stale. --- scripts/color-tuple-css.test.mjs | 58 ++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 27f75bba3..4a01062a5 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -427,7 +427,9 @@ function classesOf(simple, contextual) { * * Strings keep their delimiters and lose their contents, so the text * around them keeps its shape. Nothing downstream counts a quote, so that - * is legibility rather than an answer, and no case can hold it. Escape pairs are consumed whole, which is + * is legibility rather than an answer, and no case can hold it. The space + * left where a neutralised delimiter stood is the same: it keeps text from + * fusing across the gap, and no query can tell. Escape pairs are consumed whole, which is * what stops an escaped delimiter from opening anything. Comments go at * depth zero, for the reason the loop gives where it decides that. * @@ -471,7 +473,13 @@ function nonStructure(css) { if (ch === '"' || ch === "'") { out += ch + ch; i += 1; - while (i < css.length && css[i] !== ch) { + // A newline ends it, which is what CSS does: an unterminated string + // is a parse error bounded by the line it started on. Running to the + // next quote in the FILE instead deleted every rule in between, both + // indexes, no assertion — the last way one malformed character could + // cost the whole stylesheet quietly. A line continuation still + // works, because the escape is consumed with the newline after it. + while (i < css.length && css[i] !== ch && css[i] !== '\n') { if (css[i] === '\\') i += 1; i += 1; } @@ -1172,6 +1180,52 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'compound renders, the same as one that applies only to a first ' + 'child.' ); + // The boundary keeps the transparent list to ONE at-rule. Without it + // every at-rule beginning with those letters joins it, which is the + // shape that made `@media-foo` read as a condition two commits before + // this one, one at-rule to the left. + assert.equal( + live( + '@layer-foo{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'an at-rule that merely starts with `layer` is not `@layer`, and ' + + 'calling it transparent is the forbidden direction on the one ' + + 'at-rule this file trusts.' + ); + assert.equal( + live( + '@layerx{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + false, + 'and a word boundary alone would not have caught this one.' + ); + + // An unterminated STRING is bounded by its line, the way CSS bounds + // it. Running to the next quote in the file deleted every rule in + // between. + assert.equal( + live( + '.a{content:"oops\n}.notification.is-primary{color:red}\n.b{content:""}', + 'notification.is-primary' + ), + true, + 'a string that never closes ends at the newline, so the rules after ' + + 'it are still rules.' + ); + + // A semicolon inside brackets is content, and that is observable: the + // heading is cut at the last semicolon, so leaving one in there cuts + // away the classes before it. + assert.equal( + live('.box[data-x=a;b].is-real{color:red}', 'box'), + true, + 'a semicolon in an attribute value does not end a statement, and ' + + 'reading it as one loses every class before it.' + ); + assert.equal( live( '@layer base{.notification.is-primary{color:red}}', From ce9b565ea76180d0b3abe977b9fc994279796cd0 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 05:32:48 -0400 Subject: [PATCH 32/38] fix(bulma-ui): all three line breaks end a string, and a feature query names classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bounding an unterminated string on the newline left the same leak open one character to the side. CSS ends one at a carriage return and a form feed too, so a stylesheet with either line ending still ran the string to the next quote in the file and deleted every rule in between. All three count now. `@supports selector(.a:has(.b))` is the other at-rule prelude made of selectors, and it was not harvested, so a class named only there was absent from the membership index — the quiet direction for the sweep that looks for a colour the CSS ships. The list is the two at-rules whose preludes mean it; every other prelude stays out on the identifier filter's merit rather than by name, since a condition offers a length and `5rem` is not a name a class can have. Four escape cases were answering for the wrong reason and one scope case for no reason. The escape cases each pass a mis-paired quote through a broken scan, which opens a phantom string — and the phantom ran to the end of the input and ate the rule being asked about, so the answer was dead by deletion rather than by nesting. A line break bounds the phantom. It then leaves its two delimiters in front of the subject, where they read as a qualifier and sentinel it, so the answer was dead for a third wrong reason; a semicolon after the break cuts them off the heading. Both characters are load-bearing in the case and neither is in the shape, which is worth the four lines of comment it now carries. The `@scope` boundary case offered a length, which the identifier filter refuses before the boundary is consulted, so it answered dead either way. It offers a class name now. --- scripts/color-tuple-css.test.mjs | 103 ++++++++++++++++++++++++------- 1 file changed, 82 insertions(+), 21 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 4a01062a5..82b186c1e 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -201,13 +201,21 @@ const UNMODELLED = 'bestax-guard-unmodelled-requirement'; const TRANSPARENT_AT_RULE = /^@layer(?![\w-])/i; /** - * The at-rule whose prelude is a selector list rather than a condition. + * An at-rule whose prelude can name classes. * - * `@scope (.root) to (.limit)` names classes, and they are classes the - * stylesheet knows about. Every other at-rule prelude is a condition, where - * a length like `1.5rem` would tokenise as a class called `5rem`. + * Two of them do. `@scope (.root) to (.limit)` is a selector list outright, + * and `@supports selector(.a:has(.b))` carries one inside a condition. + * Those are classes the stylesheet knows about, and skipping every prelude + * lost them — the membership index's quiet direction. + * + * The rest stay out on their own merit rather than by this list: a + * condition carries lengths, and `IDENTIFIER_START` already refuses the + * `5rem` a decimal would offer. Keeping the list to the two that mean it + * is the narrower claim, and a name fabricated from a prelude would be + * loud rather than quiet, so the cost of being wrong here is a false + * alarm. */ -const SCOPE_AT_RULE = /^@scope(?![\w-])/i; +const SELECTOR_PRELUDE = /^@(scope|supports)(?![\w-])/i; /** * A numeric escape, which names a character by code point. @@ -220,6 +228,15 @@ const SCOPE_AT_RULE = /^@scope(?![\w-])/i; */ const NUMERIC_ESCAPE = /\\[0-9a-f]/i; +/** + * A character CSS ends an unterminated string at. + * + * Line feed, carriage return and form feed, all three. Bounding on the + * newline alone left the leak this closed open for a stylesheet with CR or + * FF endings, which is the same shape one character to the side. + */ +const LINE_BREAK = /[\n\r\f]/; + /** * A name a CSS class can actually have. * @@ -473,13 +490,16 @@ function nonStructure(css) { if (ch === '"' || ch === "'") { out += ch + ch; i += 1; - // A newline ends it, which is what CSS does: an unterminated string - // is a parse error bounded by the line it started on. Running to the - // next quote in the FILE instead deleted every rule in between, both - // indexes, no assertion — the last way one malformed character could - // cost the whole stylesheet quietly. A line continuation still - // works, because the escape is consumed with the newline after it. - while (i < css.length && css[i] !== ch && css[i] !== '\n') { + // A line break ends it, which is what CSS does: an unterminated + // string is a parse error bounded by the line it started on. Running + // to the next quote in the FILE instead deleted every rule in + // between, both indexes, no assertion — the last way one malformed + // character could cost the whole stylesheet quietly. All three of + // CSS's line breaks count, because bounding on the newline alone + // left the same hole open one character to the side. A line + // continuation still works, since the escape is consumed together + // with whichever break follows it. + while (i < css.length && css[i] !== ch && !LINE_BREAK.test(css[i])) { if (css[i] === '\\') i += 1; i += 1; } @@ -671,7 +691,7 @@ function simpleSelectors(css) { // a scope root matches is not a rule that styles anything, so it // contributes no subject set. Every other prelude stays out, since // a condition carries lengths and `1.5rem` tokenises as a class. - if (SCOPE_AT_RULE.test(heading)) { + if (SELECTOR_PRELUDE.test(heading)) { const roots = withoutAttributes(heading); assert.ok( !NUMERIC_ESCAPE.test(roots), @@ -1216,6 +1236,35 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'it are still rules.' ); + // CSS ends an unterminated string at any of its three line breaks. + // Bounding on the newline alone left the same leak open one character + // to the side, for a stylesheet with CR or FF endings. + assert.equal( + live( + '.a{content:"oops\r}.notification.is-primary{color:red}\r.b{content:""}', + 'notification.is-primary' + ), + true, + 'a carriage return ends an unterminated string, so the rules after ' + + 'it are still rules.' + ); + assert.equal( + live( + '.a{content:"oops\f}.notification.is-primary{color:red}\f.b{content:""}', + 'notification.is-primary' + ), + true, + 'and so does a form feed.' + ); + + // `@supports selector(…)` is the other prelude made of selectors. + assert.equal( + live('@supports selector(.the-root){.box{color:red}}', 'the-root'), + true, + 'a class named inside a feature query is a class the stylesheet ' + + 'knows, and skipping every prelude but one lost it.' + ); + // A semicolon inside brackets is content, and that is observable: the // heading is cut at the last semicolon, so leaving one in there cuts // away the classes before it. @@ -1507,11 +1556,13 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'waved every unknown one through as live.' ); assert.equal( - live('@scope-foo (1.5rem){.box{color:red}}', '5rem'), + live('@scope-foo (.the-root){.box{color:red}}', 'the-root'), false, - 'and only `@scope` itself — a word boundary holds before a hyphen, ' + - 'so an unknown at-rule spelled that way would have its condition ' + - 'harvested.' + 'and only `@scope` itself. A word boundary holds before a hyphen, ' + + 'so an at-rule merely starting with those letters would have its ' + + 'prelude read — and the case has to offer a real class name, ' + + 'because a length is refused by the identifier filter first and ' + + 'would answer dead either way.' ); // The harvest has three readers and each needs its own case. The // escape decode is the quiet one: without it the name the CSS ships @@ -1640,9 +1691,19 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // the escaped quote to the next one, and leaks whatever PRECEDED it. A // brace on the wrong side of the escape is swallowed by accident, so // one case each. + // The line break and the semicolon are both load-bearing IN THE CASE + // rather than in the shape, and it took two goes to get them right. + // Without the break, a mis-paired quote opens a phantom string that + // runs to the end of the input and eats the rule being asked about, so + // a broken scan answers dead by deletion. With the break but no + // semicolon after it, the phantom leaves its two delimiters sitting in + // front of the subject, where they read as a qualifier and sentinel it + // — dead again, for a third wrong reason. The semicolon cuts them off + // the heading, so the rule reaches the index clean and a broken scan + // finally reads it live. assert.equal( live( - '.hero{content:"a\\"b}";.tabs.is-boxed{color:red}}', + '.hero{content:"a\\"b}"\n;.tabs.is-boxed{color:red}}\n', 'tabs.is-boxed' ), false, @@ -1651,7 +1712,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); assert.equal( live( - '.hero{content:"}a\\"b";.tabs.is-boxed{color:red}}', + '.hero{content:"}a\\"b";\n.tabs.is-boxed{color:red}}\n', 'tabs.is-boxed' ), false, @@ -1668,7 +1729,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // the same reason the double-quoted half does. assert.equal( live( - ".hero{content:'a\\'b}';.tabs.is-boxed{color:red}}", + ".hero{content:'a\\'b}';\n.tabs.is-boxed{color:red}}\n", 'tabs.is-boxed' ), false, @@ -1676,7 +1737,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); assert.equal( live( - ".hero{content:'}a\\'b';.tabs.is-boxed{color:red}}", + ".hero{content:'}a\\'b';\n.tabs.is-boxed{color:red}}\n", 'tabs.is-boxed' ), false, From 90820242a1d3584ede5a7aa806f26dec8a055ff2 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 05:49:24 -0400 Subject: [PATCH 33/38] fix(bulma-ui): a CRLF is one line ending, and only a selector() names classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Consuming only the carriage return of an escaped CRLF left the line feed to end the string, which opens a phantom at the next quote and drops rules out of both indexes. Same leak as the last two commits, one line-ending shape further out, and the last variant I can construct. The widened prelude harvest was reading the whole of a `@supports` condition, and a condition can spell a class name by accident: `(background:url(x.svg))` offers `svg`, which the identifier filter cannot refuse because it is a perfectly good name. A fabricated name is usually loud, but not everywhere — the shade comparison asks which colours the stylesheet shades, and a fabricated entry there can make an equality hold that should have failed, which hides a divergence rather than raising one. Only what sits inside `selector(…)` is read now. `@scope` keeps its whole prelude, which really is a selector list. Four escape cases and the CRLF case were passing for the wrong reason, in two different ways, and both are about the order of two characters. A mis-paired quote in a broken scan opens a phantom string. Unbounded, it eats the rule being asked about, so the answer is dead by deletion. Bounded by a line break, it leaves its two delimiters in front of the subject, where they read as a qualifier and sentinel it — dead again. Only a semicolon AFTER the break cuts them off the heading, and one of the five had that order while the other four did not. The CRLF case needed a third thing: a brace inside the string. Without one, the string ending early changes no structure at all and the case answers the same either way. Three places still said the harvest was only `@scope`, including the halt message, which called a feature query a scope root. --- scripts/color-tuple-css.test.mjs | 86 ++++++++++++++++++++++++++------ 1 file changed, 70 insertions(+), 16 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 82b186c1e..bcb712e17 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -217,6 +217,9 @@ const TRANSPARENT_AT_RULE = /^@layer(?![\w-])/i; */ const SELECTOR_PRELUDE = /^@(scope|supports)(?![\w-])/i; +/** The half of that pair whose WHOLE prelude is selectors. */ +const SCOPE_AT_RULE = /^@scope(?![\w-])/i; + /** * A numeric escape, which names a character by code point. * @@ -500,7 +503,14 @@ function nonStructure(css) { // continuation still works, since the escape is consumed together // with whichever break follows it. while (i < css.length && css[i] !== ch && !LINE_BREAK.test(css[i])) { - if (css[i] === '\\') i += 1; + // A CRLF is ONE line ending. Consuming only the carriage return + // left the line feed to end the string, which opens a phantom at + // the next quote and drops rules out of both indexes — this leak + // one line-ending shape further out, and the third time this + // branch has closed it. + if (css[i] === '\\') { + i += css[i + 1] === '\r' && css[i + 2] === '\n' ? 2 : 1; + } i += 1; } continue; @@ -684,18 +694,36 @@ function simpleSelectors(css) { conditional: !TRANSPARENT_AT_RULE.test(heading), rule: false, }); - // One at-rule prelude is made of SELECTORS rather than a condition, - // and its class names are names the stylesheet knows. Skipping - // every prelude wholesale lost them, which is the membership - // index's quiet direction. Only `@scope`, and only for names: what - // a scope root matches is not a rule that styles anything, so it - // contributes no subject set. Every other prelude stays out, since - // a condition carries lengths and `1.5rem` tokenises as a class. + // Two at-rule preludes name SELECTORS rather than conditions, and + // their class names are names the stylesheet knows. Skipping every + // prelude wholesale lost them, which is the membership index's + // quiet direction. + // + // For names only: what a scope root or a feature query matches is + // not a rule that styles anything, so neither contributes a + // subject set. And for `@supports`, only the part inside + // `selector(…)` — the rest is a condition, and a condition can + // spell a name by accident. if (SELECTOR_PRELUDE.test(heading)) { - const roots = withoutAttributes(heading); + // For `@supports`, only what sits inside `selector(…)`. The rest + // of a feature query is a condition, and a condition can spell a + // class name by accident — `(background:url(x.svg))` offers + // `svg`, which the identifier filter cannot refuse because it is + // a perfectly good name. A fabricated name is usually loud, but + // not everywhere: the shade comparison asks which colours the + // stylesheet shades, and a fabricated entry there can make an + // equality hold that should have failed, which hides a real + // divergence rather than raising one. + const prelude = SCOPE_AT_RULE.test(heading) + ? heading + : [...heading.matchAll(/selector\(([^()]*)\)/gi)] + .map(m => m[1]) + .join(' '); + const roots = withoutAttributes(prelude); assert.ok( !NUMERIC_ESCAPE.test(roots), - `the scope root \`${heading}\` carries a numeric escape, which ` + + `the selector prelude \`${heading}\` carries a numeric escape, ` + + 'which ' + 'this file reads as a single character and would silently ' + 'rename. Teach it CSS identifier decoding in the same change ' + 'that introduced the escape.' @@ -1257,6 +1285,31 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'and so does a form feed.' ); + // A CRLF is ONE line ending, so an escape has to consume both halves. + // The brace inside the string is what makes the case move: without it + // the early end changes no structure, and with the phantom unbounded + // the rule under test is eaten rather than answered. + assert.equal( + live( + '.hero{content:"x\\\r\n}y"\n;.tabs.is-boxed{color:red}}\n', + 'tabs.is-boxed' + ), + false, + 'a line continuation spelled with a CRLF does not end the string, so ' + + 'the brace inside it is still content and the rule after it is ' + + 'still nested.' + ); + + // Only what sits inside `selector(…)` of a feature query. The rest is + // a condition, and a condition can spell a class name by accident. + assert.equal( + live('@supports (background:url(x.svg)){.box{color:red}}', 'svg'), + false, + 'a filename in a feature condition is not a class, and the ' + + 'identifier filter cannot refuse it because `svg` is a name a ' + + 'class could have.' + ); + // `@supports selector(…)` is the other prelude made of selectors. assert.equal( live('@supports selector(.the-root){.box{color:red}}', 'the-root'), @@ -1541,8 +1594,8 @@ describe('the colour tuples agree with the shipped stylesheet', () => { assert.equal( live('@container (min-width:1.5rem){.box{color:red}}', '5rem'), false, - 'and only `@scope`: every other prelude is a condition, where a ' + - 'length tokenises as a class called `5rem`.' + 'and not every prelude: a condition is not a selector list, and a ' + + 'length in one would tokenise as a class called `5rem`.' ); assert.equal( live( @@ -1558,7 +1611,8 @@ describe('the colour tuples agree with the shipped stylesheet', () => { assert.equal( live('@scope-foo (.the-root){.box{color:red}}', 'the-root'), false, - 'and only `@scope` itself. A word boundary holds before a hyphen, ' + + 'and the name has to match exactly. A word boundary holds before ' + + 'a hyphen, ' + 'so an at-rule merely starting with those letters would have its ' + 'prelude read — and the case has to offer a real class name, ' + 'because a length is refused by the identifier filter first and ' + @@ -1712,7 +1766,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); assert.equal( live( - '.hero{content:"}a\\"b";\n.tabs.is-boxed{color:red}}\n', + '.hero{content:"}a\\"b"\n;.tabs.is-boxed{color:red}}\n', 'tabs.is-boxed' ), false, @@ -1729,7 +1783,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { // the same reason the double-quoted half does. assert.equal( live( - ".hero{content:'a\\'b}';\n.tabs.is-boxed{color:red}}\n", + ".hero{content:'a\\'b}'\n;.tabs.is-boxed{color:red}}\n", 'tabs.is-boxed' ), false, @@ -1737,7 +1791,7 @@ describe('the colour tuples agree with the shipped stylesheet', () => { ); assert.equal( live( - ".hero{content:'}a\\'b';\n.tabs.is-boxed{color:red}}\n", + ".hero{content:'}a\\'b'\n;.tabs.is-boxed{color:red}}\n", 'tabs.is-boxed' ), false, From 0edfb47cb87dee8a1ab5a156a4f9d327c0fb67b7 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 06:03:36 -0400 Subject: [PATCH 34/38] fix(bulma-ui): read the selector condition with a scan, since it has a parenthesis in it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The narrowing in the last commit was a regression and the review was right to call it that. `selector(.a:has(.b))` is the shape the branch exists for and the shape its own docblock cites, and a pattern that cannot cross a parenthesis harvested neither name out of it — so a commit written to stop fabricating names started losing them instead, which is the quiet direction the branch was added to close. It is a balanced scan now, and both names come back. What is still lost rather than read is stated where the scan is, because neither shape is worth guessing at. A nested grouping paren is not reached. And the function is found by its literal spelling, which is exactly the reading the main scan was rewritten to stop doing, so `\73 elector(` and `s\elector(` name the same function and match nothing. Decoding those means an identifier reader; the alternative to losing a name here is fabricating one, and the shade comparison is the one place a fabricated name stops being loud. Nothing this repo builds carries `@supports` at all. `SCOPE_AT_RULE` lost its word boundary, which was unreachable rather than merely unexercised: nothing gets there that the outer gate has not already matched with one. And the boundary case was on the wrong at-rule. The boundary lives on the gate that decides whether a prelude is read at all, so `@scope-foo` answers dead on the scope branch either way and never reaches it; the case asks about `@supports-foo` now. --- scripts/color-tuple-css.test.mjs | 95 ++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 5 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index bcb712e17..fb13850be 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -217,8 +217,14 @@ const TRANSPARENT_AT_RULE = /^@layer(?![\w-])/i; */ const SELECTOR_PRELUDE = /^@(scope|supports)(?![\w-])/i; -/** The half of that pair whose WHOLE prelude is selectors. */ -const SCOPE_AT_RULE = /^@scope(?![\w-])/i; +/** + * The half of that pair whose WHOLE prelude is selectors. + * + * No boundary of its own: nothing reaches this that `SELECTOR_PRELUDE` has + * not already matched with one, so a second copy would be unreachable + * rather than merely unexercised. + */ +const SCOPE_AT_RULE = /^@scope/i; /** * A numeric escape, which names a character by code point. @@ -553,6 +559,45 @@ function nonStructure(css) { return out; } +/** + * The selector conditions of a `@supports` prelude, contents only. + * + * A balanced scan, because the shape this exists for has a parenthesis + * inside it: `selector(.a:has(.b))` is the example its own docblock gives, + * and a pattern that cannot cross a parenthesis harvested neither name from + * it. Only these contents are read — the rest of a feature query is a + * condition, and a condition can spell a class name by accident, which is + * loud everywhere except the shade comparison, where a fabricated entry + * makes an equality hold that should have failed. + * + * Two shapes are still lost rather than read, both quietly, and both are + * worth naming because neither is worth guessing at. A nested grouping + * paren, `((selector(.a)))`, is not reached. And the function is found by + * its literal spelling, which is the reading `nonStructure` was rewritten + * to stop doing, so `\73 elector(` and `s\elector(` name the same + * function and match nothing. Reading them means decoding identifiers; the + * alternative to losing a name here is fabricating one, and the shade + * comparison is where a fabricated name stops being loud. No stylesheet + * this repo builds carries `@supports` at all. + */ +function selectorConditions(prelude) { + const found = []; + const at = /selector\(/gi; + for (let m = at.exec(prelude); m; m = at.exec(prelude)) { + let depth = 1; + let i = m.index + m[0].length; + const from = i; + for (; i < prelude.length && depth > 0; i += 1) { + if (prelude[i] === '\\') i += 1; + else if (prelude[i] === '(') depth += 1; + else if (prelude[i] === ')') depth -= 1; + } + found.push(prelude.slice(from, depth === 0 ? i - 1 : i)); + at.lastIndex = i; + } + return found.join(' '); +} + /** * Every position in `text` where `char` appears UNESCAPED. * @@ -716,9 +761,7 @@ function simpleSelectors(css) { // divergence rather than raising one. const prelude = SCOPE_AT_RULE.test(heading) ? heading - : [...heading.matchAll(/selector\(([^()]*)\)/gi)] - .map(m => m[1]) - .join(' '); + : selectorConditions(heading); const roots = withoutAttributes(prelude); assert.ok( !NUMERIC_ESCAPE.test(roots), @@ -1317,6 +1360,40 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a class named inside a feature query is a class the stylesheet ' + 'knows, and skipping every prelude but one lost it.' ); + // The shape that exists has a parenthesis inside it, which is why the + // extraction is a balanced scan and not a pattern. + assert.equal( + live( + '@supports selector(.the-root:has(.inner)){.box{color:red}}', + 'the-root' + ), + true, + 'a nested parenthesis inside the condition must not end it, or the ' + + 'one shape this branch was written for harvests nothing at all.' + ); + assert.equal( + live( + '@supports selector(.the-root:has(.inner)){.box{color:red}}', + 'inner' + ), + true, + 'and the name inside the nested call is a name too.' + ); + assert.equal( + live( + '@supports selector(.one) and selector(.two){.box{color:red}}', + 'two' + ), + true, + 'and a prelude may carry more than one of them.' + ); + // `@scope` keeps its WHOLE prelude, which is a selector list by spec. + assert.equal( + live('@scope (.the-root) to (.the-limit){.box{color:red}}', 'the-limit'), + true, + 'a scope limit is a selector as much as its root is, so the whole ' + + 'prelude is read rather than a function inside it.' + ); // A semicolon inside brackets is content, and that is observable: the // heading is cut at the last semicolon, so leaving one in there cuts @@ -1608,6 +1685,14 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'inside renders. Listing the conditions instead of the exceptions ' + 'waved every unknown one through as live.' ); + assert.equal( + live('@supports-foo selector(.the-root){.box{color:red}}', 'the-root'), + false, + 'the boundary is on the gate that lets a prelude be read at all, so ' + + 'the case has to reach it: an at-rule merely starting with those ' + + 'letters must not have its prelude harvested, and the `@scope-foo` ' + + 'spelling answers dead on the scope branch either way.' + ); assert.equal( live('@scope-foo (.the-root){.box{color:red}}', 'the-root'), false, From 5557f53a727cffaf487b6fb7bbae5075153f2735 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 06:39:11 -0400 Subject: [PATCH 35/38] test(bulma-ui): pin the condition scan's escape, and both cases it ignores MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The escape step in the new balanced scan had nothing holding it, and it is the one behaviour on this branch that changes an answer rather than losing one: without it `selector(.a\)b)` closes on the escaped parenthesis and the class comes back as `a` instead of `a)b`. A name changed is what no other case here can see, since every other case asks about a name being present or absent. Both case-insensitivity flags were unheld too — the gate that decides whether a prelude is read, and the lookup that finds the function inside it — so `@SUPPORTS SELECTOR(.x)` would have lost its name to either. And the docblock was wrong about a nested grouping paren. `((selector(.a)))` is reached and harvested, because the scan looks for the function wherever it sits rather than at a fixed depth. What goes wrong instead is one loss and one fabrication, and both are named there now: an escaped spelling of the function matches nothing, so those names are lost, and a comment inside a condition survives the strip by design, so `selector(.fake)` written in one is read and that name is invented. Reading the first means decoding identifiers and avoiding the second means parsing comments the scan deliberately leaves alone. --- scripts/color-tuple-css.test.mjs | 56 +++++++++++++++++++++++++++----- 1 file changed, 47 insertions(+), 9 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index fb13850be..96c619ace 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -570,15 +570,20 @@ function nonStructure(css) { * loud everywhere except the shade comparison, where a fabricated entry * makes an equality hold that should have failed. * - * Two shapes are still lost rather than read, both quietly, and both are - * worth naming because neither is worth guessing at. A nested grouping - * paren, `((selector(.a)))`, is not reached. And the function is found by - * its literal spelling, which is the reading `nonStructure` was rewritten - * to stop doing, so `\73 elector(` and `s\elector(` name the same - * function and match nothing. Reading them means decoding identifiers; the - * alternative to losing a name here is fabricating one, and the shade - * comparison is where a fabricated name stops being loud. No stylesheet - * this repo builds carries `@supports` at all. + * Two shapes go wrong and both are worth naming, because neither is worth + * guessing at. The function is found by its literal spelling, which is the + * reading `nonStructure` was rewritten to stop doing, so `\73 elector(` and + * `s\elector(` name the same function and match nothing — those names are + * lost. And a comment inside a condition survives, because the scan treats + * a comment opener at depth as content, so `selector(.fake)` written inside + * one is read and that name is fabricated. Reading the first means decoding + * identifiers and avoiding the second means parsing comments the scan + * deliberately does not; the alternative to each is worse than the loss. No + * stylesheet this repo builds carries `@supports` at all. + * + * A nested grouping paren is fine, incidentally — `((selector(.a)))` is + * reached and harvested, since the scan looks for the function wherever it + * sits rather than at a fixed depth. */ function selectorConditions(prelude) { const found = []; @@ -1387,6 +1392,39 @@ describe('the colour tuples agree with the shipped stylesheet', () => { true, 'and a prelude may carry more than one of them.' ); + // The scan consumes escape pairs, so an escaped parenthesis inside + // the condition does not end it. Without that, the class comes back as + // `a` instead of `a)b` — a name changed rather than lost, which no + // other case here can see. + assert.equal( + live('@supports selector(.a\\)b){.box{color:red}}', 'a)b'), + true, + 'an escaped parenthesis is part of the class name, so the scan has ' + + 'to step over it rather than close on it.' + ); + assert.equal( + live('@supports selector(.a\\)b){.box{color:red}}', 'a'), + false, + 'and closing on it would leave the truncated name behind, which is ' + + 'a class the stylesheet does not ship.' + ); + + // An at-rule keyword and a function name are both case-insensitive. + assert.equal( + live('@SUPPORTS SELECTOR(.the-root){.box{color:red}}', 'the-root'), + true, + 'CSS does not care how either of these is cased, so neither the ' + + 'gate nor the function lookup may.' + ); + + // A nested grouping paren is reached, because the function is found + // wherever it sits rather than at a fixed depth. + assert.equal( + live('@supports ((selector(.the-root))){.box{color:red}}', 'the-root'), + true, + 'a condition wrapped in grouping parentheses is still a condition.' + ); + // `@scope` keeps its WHOLE prelude, which is a selector list by spec. assert.equal( live('@scope (.the-root) to (.the-limit){.box{color:red}}', 'the-limit'), From b4e03778f3df4320b1665eae37a64a9291743c44 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 06:57:32 -0400 Subject: [PATCH 36/38] fix(bulma-ui): the function needs a boundary, and every keyword case has a case MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `selectorConditions` found its function by substring, so it also fired on the tail of a longer identifier: `x-selector(.fake)` is not a selector condition and reading it as one invented that name. It matches at a boundary now, which makes it the third shape on that path to be fixed rather than accepted. Every keyword on this path is case-insensitive in CSS, and five places read one: the gate that admits a prelude, the lookup that finds the function inside it, the test that decides which half of the pair it is, the transparent at-rule, and the escape the guard refuses to decode. Two had cases. All five do now — an upper-case scope root was dropping out of the membership index, an upper-case layer was reading as a condition, and an escape opening on an upper-case hex digit was not stopping the guard. `shipsClass` claimed every caller of the membership path fails loudly on a yes it should not have been given, and two other comments in the same file name the shade comparison as the one place such a yes is quiet. Those two are right: that comparison is between two computed lists, so a fabricated name can make an equality hold that should have failed. It is what bounds the widening, so it now says which caller runs which way and why every source of a fabricated name is enumerated rather than waved at. And a comment in `withoutAttributes` described a loss that cannot happen. Its unterminated-bracket branch is unreachable: braces inside brackets are neutralised, so a bracket span never crosses a block boundary, and balance is asserted as it goes, so such a stylesheet stops the guard before a heading is read at all. --- scripts/color-tuple-css.test.mjs | 79 +++++++++++++++++++++++++------- 1 file changed, 62 insertions(+), 17 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 96c619ace..de061fa84 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -150,13 +150,22 @@ function shipsClass(css, cls) { // as an ancestor, and a colour the CSS ships and the tuple lacks is the // first defect this file was written for. // - // Every caller of it fails loudly on a yes it should not have been given - // and quietly on a no — the shade `deepEqual`, the `-bis`/`-ter` sweep - // whose extra entry has nowhere to land, the `assert.ok` on a keyword - // that must NOT ship — so the wide reading is the right way round. The - // one caller that ran the other way, requiring a keyword to ship, asks - // `rendersAlone` instead, because a name in someone else's selector is - // not a helper anybody can use. + // Most callers of it fail loudly on a yes they should not have been + // given and quietly on a no — the `-bis`/`-ter` sweep whose extra entry + // has nowhere to land, the `assert.ok` on a keyword that must NOT ship — + // so the wide reading is the right way round for them. The one that + // required a keyword to SHIP asks `rendersAlone` instead, because a name + // in someone else's selector is not a helper anybody can use. + // + // One caller is quiet on a bad yes, and it is worth being exact about + // because it is what bounds the widening: the shade `deepEqual` compares + // two computed lists, so a fabricated name added to the left can make an + // equality hold that should have failed, hiding a real divergence rather + // than raising it. That is why every source of a fabricated name is + // enumerated rather than waved at — declaration text is cut at the + // semicolon, attribute values are stripped, at-rule conditions are not + // harvested, and a token that cannot be an identifier is refused. What + // is left is named where it happens, in `selectorConditions`. const wanted = cls.split('.'); const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { @@ -587,7 +596,10 @@ function nonStructure(css) { */ function selectorConditions(prelude) { const found = []; - const at = /selector\(/gi; + // A boundary before the name, or the substring also matches the tail of + // a longer identifier: `x-selector(.fake)` is not a selector condition, + // and reading it as one invents that name. + const at = /(? { 'a class the stylesheet does not ship.' ); - // An at-rule keyword and a function name are both case-insensitive. + // CSS is case-insensitive about every keyword on this path, and each + // of the three places that reads one needs its own case: the gate that + // admits a prelude, the lookup that finds the function inside it, the + // test that decides which half of the pair it is, the transparent + // at-rule, and the escape the guard refuses to decode. assert.equal( live('@SUPPORTS SELECTOR(.the-root){.box{color:red}}', 'the-root'), true, - 'CSS does not care how either of these is cased, so neither the ' + - 'gate nor the function lookup may.' + 'the gate that admits a prelude and the lookup that finds the ' + + 'function in it both have to ignore case.' + ); + assert.equal( + live('@SCOPE(.the-root){.box{color:red}}', 'the-root'), + true, + 'and so does the test that decides which half of the pair this is, ' + + 'or an upper-case scope root drops out of the index silently.' + ); + assert.equal( + live( + '@LAYER base{.notification.is-primary{color:red}}', + 'notification.is-primary' + ), + true, + 'and the transparent at-rule, or an upper-case layer reads as a ' + + 'condition and everything inside it reads dead.' + ); + assert.throws( + () => live('@scope(.\\A1 x){.box{color:red}}', 'x'), + /numeric escape/, + 'and the escape this file refuses to decode, whose hex digits may ' + + 'be upper case.' + ); + + // The function is found at a boundary, or the substring matches the + // tail of a longer identifier. + assert.equal( + live('@supports x-selector(.fake){.box{color:red}}', 'fake'), + false, + 'an identifier ending in `selector` is not a selector condition, ' + + 'and reading it as one invents the name inside it.' ); // A nested grouping paren is reached, because the function is found From 484498a2dbdf0501d2334579fb369bbf7e5f4efc Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 07:35:09 -0400 Subject: [PATCH 37/38] fix(bulma-ui): track which bracket is open, not how many MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit One counter could not tell a `]` closing a `(` from a real close, so `foo(]` balanced and everything after it was read one bracket too shallow — a brace inside a function coming back as block structure, which is the direction this file forbids. Both halves of the balance check missed it on their own: the stray only fires on a closer with nothing open at all, and the net reads the same either way. It is a stack of kinds now, and a mismatch is caught where it happens. The shade comparison asks `rendersAlone` instead of membership, which removes the one caller that could not see a bad yes rather than going on enumerating what might produce one. A shade helper is a rule of its own or it is not a helper, so the narrow question is also the right one — and with that caller gone, a name fabricated anywhere fails loudly at every caller that remains, which is what the widened membership path was always claimed to rest on. A comment inside a selector's parentheses was the newest way to fabricate one, and it no longer reaches anything quiet. Three keyword case-folds in `requirements` had nothing holding them, and each changes an answer: a prohibition spelled `:NOT(` read as a requirement, an upper-case pseudo-class stopped being counted as one, and an upper-case pseudo-element stopped being exempt. Every shade helper the stylesheet ships is a sole subject, so no case can tell the two questions apart there. That one is the mechanism being right rather than a behaviour a revert would catch, and it says so where it sits. --- scripts/color-tuple-css.test.mjs | 94 ++++++++++++++++++++++++++++---- 1 file changed, 84 insertions(+), 10 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index de061fa84..577e652c3 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -480,8 +480,15 @@ function classesOf(simple, contextual) { */ function nonStructure(css) { let out = ''; - let depth = 0; - // Where a closer arrived with nothing open. Recorded rather than + // The KINDS of bracket still open, innermost last. A single counter + // could not tell a `]` closing a `(` from a real close, so `foo(]` + // balanced and everything after it was read one bracket too shallow — a + // brace inside a function coming back as block structure, which is the + // direction this file forbids. Both halves of the balance check missed + // it: the stray only fires on a closer with nothing open at all, and the + // final check reads only the net. + const open = []; + // Where a closer arrived that did not match. Recorded rather than // asserted in the loop, because a message built per character is a // message built eight hundred thousand times. let stray = -1; @@ -500,7 +507,7 @@ function nonStructure(css) { // quietly. The `url(…)` alternation this scan replaced was covering // the shape without saying so. CSS agrees: a comment cannot start // inside a url token or an attribute value. - if (ch === '/' && css[i + 1] === '*' && depth === 0) { + if (ch === '/' && css[i + 1] === '*' && open.length === 0) { const end = css.indexOf('*/', i + 2); i = end === -1 ? css.length : end + 1; continue; @@ -530,14 +537,16 @@ function nonStructure(css) { } continue; } - if (ch === '(' || ch === '[') depth += 1; + if (ch === '(' || ch === '[') open.push(ch); else if (ch === ')' || ch === ']') { - if (depth === 0 && stray < 0) stray = i; - depth -= 1; + const wanted = ch === ')' ? '(' : '['; + if (open[open.length - 1] !== wanted) { + if (stray < 0) stray = i; + } else open.pop(); } // A brace or semicolon inside either kind of bracket is content. Held // as a space so the text keeps its length and nothing fuses across it. - else if (depth > 0 && (ch === '{' || ch === '}' || ch === ';')) { + else if (open.length > 0 && (ch === '{' || ch === '}' || ch === ';')) { out += ' '; continue; } @@ -553,13 +562,14 @@ function nonStructure(css) { // a whole stylesheet at once, so both halves are checked. assert.ok( stray < 0, - 'the stylesheet closes a bracket that was never opened, near ' + + 'the stylesheet closes a bracket that was never opened, or closes one ' + + 'kind with the other, near ' + `\`${css.slice(Math.max(0, stray - 40), stray + 40).trim()}\`. ` + 'Everything after it is read one bracket too shallow, so a brace ' + 'inside a function would be taken for block structure.' ); assert.equal( - depth, + open.length, 0, 'the stylesheet leaves a bracket open, so this file cannot tell which ' + 'of its braces open blocks. Every rule after it would drop out of ' + @@ -1420,6 +1430,59 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a class the stylesheet does not ship.' ); + // A mismatched bracket KIND defeats both halves of the balance check + // on its own: the stray only fires on a closer with nothing open, and + // the net reads the same either way. + assert.throws( + () => + live( + '.hero{a:foo(]}.notification.is-primary{color:red}[)}', + 'notification.is-primary' + ), + /never opened, or closes one kind with the other/, + 'a `]` does not close a `(`, and reading it as though it did leaves ' + + 'everything after it one bracket too shallow, so a brace inside a ' + + 'function comes back as block structure.' + ); + assert.equal( + live( + '.a{b:foo([x])}.notification.is-primary{color:red}', + 'notification.is-primary' + ), + true, + 'and the kinds nest normally, so a bracket inside a function is ' + + 'still just content.' + ); + + // The pseudo-class keywords are case-insensitive too, in all three + // places `requirements` reads one. + assert.equal( + live( + '.notification.is-primary:NOT(.is-a){color:red}', + 'notification.is-primary' + ), + true, + 'a prohibition spelled in upper case is still a prohibition, or it ' + + 'reads as a requirement and the compound goes dead.' + ); + assert.equal( + live( + '.notification.is-primary:HOVER{color:red}', + 'notification.is-primary' + ), + false, + 'and a pseudo-class spelled in upper case is still a requirement.' + ); + assert.equal( + live( + '.notification.is-primary::BEFORE{content:""}', + 'notification.is-primary' + ), + true, + 'and a pseudo-element spelled in upper case is still exempt, or the ' + + 'compound it hangs off reads dead.' + ); + // CSS is case-insensitive about every keyword on this path, and each // of the three places that reads one needs its own case: the gate that // admits a prelude, the lookup that finds the function inside it, the @@ -2472,7 +2535,18 @@ describe('the colour tuples agree with the shipped stylesheet', () => { for (const shade of shades) { const judged = colors.filter(c => !ambiguous(c, shade)); assert.deepEqual( - judged.filter(c => shipsClass(css, `${family}-${c}-${shade}`)).sort(), + // `rendersAlone`, not membership. A shade helper is a rule of its + // own or it is not a helper, and asking the narrow question is + // what stops this comparison being the one place a fabricated + // name is quiet: it is between two computed lists, so an extra + // entry on the left can make an equality hold that should have + // failed. Every shade helper the stylesheet ships is a sole + // subject today, so no case can tell the two questions apart + // here — this is the mechanism being right rather than a + // behaviour a revert would catch. + judged + .filter(c => rendersAlone(css, `${family}-${c}-${shade}`)) + .sort(), judged.filter(c => !declared.has(c)).sort(), `the colours the stylesheet shades \`-${shade}\` under ` + `\`${family}-\` and the colours with a live component modifier ` + From e24dbc6cf4e8f9fe226fb00c37133d941d1b8512 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 20 Sep 2026 07:51:49 -0400 Subject: [PATCH 38/38] test(bulma-ui): the safety argument is about the callers, so say that MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three comments still explained why the membership path is safe in terms of a caller it no longer has. The shade comparison was the one place a wrong yes was quiet, and the commit before this one moved it to `rendersAlone`, so those paragraphs described a hazard that had already been removed — which is the kind of prose that reads as a live constraint and quietly stops being one. What holds now is simpler and worth stating in its own right: this path is safe because no caller reads it in a direction where a wrong yes is quiet. That is a property of the call sites, not of the index, and the index can still be wrong — a comment inside a selector's parentheses survives the strip by design, because a comment opener at depth is content, which is what keeps an unquoted url token from opening one. So the check when adding a caller is which way it fails rather than whether the index can be wrong, and there is a case pinning that fabrication so the day a caller stops failing loudly, this is already written down. --- scripts/color-tuple-css.test.mjs | 46 ++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/scripts/color-tuple-css.test.mjs b/scripts/color-tuple-css.test.mjs index 577e652c3..ed1822cb5 100644 --- a/scripts/color-tuple-css.test.mjs +++ b/scripts/color-tuple-css.test.mjs @@ -157,15 +157,16 @@ function shipsClass(css, cls) { // required a keyword to SHIP asks `rendersAlone` instead, because a name // in someone else's selector is not a helper anybody can use. // - // One caller is quiet on a bad yes, and it is worth being exact about - // because it is what bounds the widening: the shade `deepEqual` compares - // two computed lists, so a fabricated name added to the left can make an - // equality hold that should have failed, hiding a real divergence rather - // than raising it. That is why every source of a fabricated name is - // enumerated rather than waved at — declaration text is cut at the - // semicolon, attribute values are stripped, at-rule conditions are not - // harvested, and a token that cannot be an identifier is refused. What - // is left is named where it happens, in `selectorConditions`. + // There used to be a caller that was quiet on a bad yes — the shade + // `deepEqual`, which compares two computed lists, so a fabricated name + // on the left could make an equality hold that should have failed. It + // asks `rendersAlone` now. That is the point worth keeping: this path is + // safe because no caller reads it in a direction where a wrong yes is + // quiet, and that is a property of the call sites rather than of the + // index. A name can still be fabricated — a comment inside a selector's + // parentheses survives the strip by design and is read — so the check + // when adding a caller is which way it fails, not whether the index can + // be wrong. const wanted = cls.split('.'); const { sets, names } = simpleSelectors(css); if (wanted.length === 1) { @@ -585,9 +586,7 @@ function nonStructure(css) { * inside it: `selector(.a:has(.b))` is the example its own docblock gives, * and a pattern that cannot cross a parenthesis harvested neither name from * it. Only these contents are read — the rest of a feature query is a - * condition, and a condition can spell a class name by accident, which is - * loud everywhere except the shade comparison, where a fabricated entry - * makes an equality hold that should have failed. + * condition, and a condition can spell a class name by accident. * * Two shapes go wrong and both are worth naming, because neither is worth * guessing at. The function is found by its literal spelling, which is the @@ -780,11 +779,7 @@ function simpleSelectors(css) { // of a feature query is a condition, and a condition can spell a // class name by accident — `(background:url(x.svg))` offers // `svg`, which the identifier filter cannot refuse because it is - // a perfectly good name. A fabricated name is usually loud, but - // not everywhere: the shade comparison asks which colours the - // stylesheet shades, and a fabricated entry there can make an - // equality hold that should have failed, which hides a real - // divergence rather than raising one. + // a perfectly good name. const prelude = SCOPE_AT_RULE.test(heading) ? heading : selectorConditions(heading); @@ -1430,6 +1425,23 @@ describe('the colour tuples agree with the shipped stylesheet', () => { 'a class the stylesheet does not ship.' ); + // A comment inside a selector's parentheses IS read, and the name in + // it is fabricated. That is the direction the scan chose deliberately — + // a comment opener at depth is content, which is what keeps an + // unquoted url token from opening one — and it is recorded here rather + // than fixed, because it is safe by where it lands rather than by + // being impossible: every caller of the membership path fails loudly + // on a yes it should not have been given. The case exists so that the + // day one of them stops doing that, this is already written down. + assert.equal( + live('.box:is(/* .zz */ .a){color:red}', 'zz'), + true, + 'a comment inside parentheses survives the strip, so the name in it ' + + 'reaches the membership index — loud at every caller today, and ' + + 'the reason the safety argument is about the callers rather than ' + + 'about the index.' + ); + // A mismatched bracket KIND defeats both halves of the balance check // on its own: the stray only fires on a closer with nothing open, and // the net reads the same either way.