skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 14:16:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

Derive static-cascade color extraction from the shared named-color table

Browse Source 
The static-html engine never emitted side-tab for `border-left: 4px solid
purple` (or any named color outside a hardcoded 9-name list) in .html
files: extractStaticColor's regex dropped the color token from border
shorthands, the side defaulted to neutral black, and checkBorders skipped
it. The same declaration in a .css file was flagged by the regex engine,
so the two engines disagreed while both exited cleanly (issue #359).

Build the extraction alternation from the same CSS_NAMED_COLORS table
parseAnyColor resolves against (longest-first, whole-token), so the set of
names the extractor recognizes and the set the parser can resolve cannot
drift apart again. STATIC_NAMED_COLORS shrinks to the one keyword
parseAnyColor deliberately refuses (`transparent` as zero-alpha), since
parseAnyColor already covers every real named color in the table.

New two-column fixture (named-color-borders.html) covers the issue
reproducers: purple shorthand + radius, rebeccapurple (substring-safe
matching), crimson top stripe, bare 3px teal, var() resolving to a named
color, and an inline style attribute — with neutral named colors
(dimgray, gainsboro, black), thin, and uniform borders as pass cases.

Prepared with AI assistance (Claude Code), directed by @pbakaus.

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-25 17:45:55 -07:00
co-authored by Claude Code
parent af78b1e512
commit 7622cc8440
4 changed files with 189 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/engine/engines/static-html/css-cascade.mjs
+21 -10
View File
@@ -2,7 +2,7 @@ import fs from 'node:fs';
import path from 'node:path';
import { profileStep, recordProfileEvent } from '../../profile/profiler.mjs';
import { collectCssCustomProps, cssLengthToPx, parseAnyColor, resolveLengthPx, resolveVarRefs } from '../../rules/checks.mjs';
import { CSS_NAMED_COLORS, collectCssCustomProps, cssLengthToPx, parseAnyColor, resolveLengthPx, resolveVarRefs } from '../../rules/checks.mjs';
// ---------------------------------------------------------------------------
// jsdom CSS-variable border override map
@@ -344,18 +344,29 @@ const STATIC_PROP_MAP = {
'overflow-y': 'overflowY',
};
// parseStaticColor tries parseAnyColor first, which already resolves every
// name in the shared CSS_NAMED_COLORS table. This fallback only carries the
// keywords parseAnyColor deliberately returns null for: the cascade needs
// `transparent` to read as an actual zero-alpha color.
const STATIC_NAMED_COLORS = {
black: { r: 0, g: 0, b: 0, a: 1 },
white: { r: 255, g: 255, b: 255, a: 1 },
transparent: { r: 0, g: 0, b: 0, a: 0 },
gray: { r: 128, g: 128, b: 128, a: 1 },
grey: { r: 128, g: 128, b: 128, a: 1 },
silver: { r: 192, g: 192, b: 192, a: 1 },
red: { r: 255, g: 0, b: 0, a: 1 },
green: { r: 0, g: 128, b: 0, a: 1 },
blue: { r: 0, g: 0, b: 255, a: 1 },
};
// Named-color alternation for plucking a color token out of shorthand values
// (issue #359: a hardcoded 9-name list here silently dropped `purple`,
// `crimson`, `teal`, ... from border shorthands, so the side defaulted to
// neutral black and side-tab never fired on .html files). Derived from the
// same table parseAnyColor resolves against, so extraction and parsing can't
// drift apart. Longest-first so names containing other names as substrings
// (rebeccapurple) are matched whole.
const NAMED_COLOR_TOKENS = [...Object.keys(CSS_NAMED_COLORS), ...Object.keys(STATIC_NAMED_COLORS)]
.sort((a, b) => b.length - a.length)
.join('|');
const STATIC_COLOR_TOKEN_RE = new RegExp(
`(?:rgba?\\([^)]+\\)|oklch\\([^)]+\\)|oklab\\([^)]+\\)|lch\\([^)]+\\)|lab\\([^)]+\\)|hsla?\\([^)]+\\)|hwb\\([^)]+\\)|#[0-9a-f]{3,8}\\b|\\b(?:${NAMED_COLOR_TOKENS})\\b)`,
'i'
);
function splitCssList(value) {
const parts = [];
let depth = 0, quote = '', start = 0;
@@ -441,7 +452,7 @@ function extractStaticColor(value) {
}
return '';
}
const colorLike = raw.match(/(?:rgba?\([^)]+\)|oklch\([^)]+\)|oklab\([^)]+\)|lch\([^)]+\)|lab\([^)]+\)|hsla?\([^)]+\)|hwb\([^)]+\)|#[0-9a-f]{3,8}\b|\b(?:black|white|gray|grey|silver|red|green|blue|transparent)\b)/i);
const colorLike = raw.match(STATIC_COLOR_TOKEN_RE);
if (!colorLike) return '';
return colorLike[0];
}
cli/engine/rules/checks.mjs
+1
View File
@@ -5369,6 +5369,7 @@ function checkFirstViewportColumnOverflowDOM() {
}
export {
CSS_NAMED_COLORS,
checkBorders,
isEmojiOnlyText,
checkColors,