@josueavalosjim/taste-check 0.11.0 → 0.12.0

package/README.md

@@ -637,12 +637,16 @@ publisher over OIDC, so no npm token is stored in the repository and every
 release carries a provenance attestation. For a minor or major bump, run
 `npm version minor` or `npm version major` and `git push --follow-tags`.
 
-171 tests. Most of them plant a violation into a fixture that was passing a
+183 tests. Most of them plant a violation into a fixture that was passing a
 moment earlier and demand it gets caught: a token darkened below its floor, an
 unapproved class added to a clean file, a class buried in a template literal
 hole, a fabricated token hidden in a ternary, a file pattern pointed at
 nothing.
 
+The count is not the point and is easy to inflate. What the suite is actually
+worth is measured by breaking the source on purpose and checking the right
+test goes red, which is where the 0.12.0 fixes came from.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josueavalosjim/taste-check",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Design review in CI with a line down the middle: measured checks that gate the build (WCAG contrast from your tokens or from a real rendered page, one-off values in your markup) and a fresh-eyes model judge whose verdicts stay advisory. Zero dependencies. Ships no design rules of its own.",
   "keywords": [
     "accessibility",

package/src/contrast.mjs

@@ -19,7 +19,7 @@
 import { readFileSync } from 'node:fs';
 import { contrastRatio, isOpaque, parseColor } from './color.mjs';
 import { lineAt, parseDeclarations, resolveScopes, resolveValue, unmatchedScopes } from './css.mjs';
-import { expand, label } from './files.mjs';
+import { expandEach, label } from './files.mjs';
 
 /** A token name, or a literal colour, resolved to rgba for one theme. */
 function side(spec, table, theme) {
@@ -40,9 +40,14 @@ export function runContrast(config, cwd) {
   const problems = [];
   const { tokens, themes, pairs } = config;
 
-  const files = expand(tokens, cwd);
+  const { files, empty: deadPatterns } = expandEach(tokens, cwd);
+  // Per pattern. A dead one beside a live one leaves the union non-empty, so
+  // a renamed token file stops being read without anything saying so.
+  for (const p of deadPatterns) problems.push(`no token files matched "${p}"`);
   if (!files.length) {
-    problems.push(`no token files matched ${tokens.map((t) => `"${t}"`).join(', ')}`);
+    if (!deadPatterns.length) {
+      problems.push(`no token files matched ${tokens.map((t) => `"${t}"`).join(', ')}`);
+    }
     return { name: 'contrast', samples, problems, summary: '' };
   }
 

package/src/css.mjs

@@ -39,11 +39,6 @@
  */
 const CONDITIONAL = /^@(media|supports|container|scope|document)\b/;
 
-/** Blank out comments, keeping every offset and newline so lines stay true. */
-function blankComments(css) {
-  return css.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '));
-}
-
 const normalize = (selector) => selector.replace(/\s+/g, ' ').replace(/'/g, '"').trim();
 
 /**
@@ -51,16 +46,25 @@ const normalize = (selector) => selector.replace(/\s+/g, ' ').replace(/'/g, '"')
  * under and the at-rules it is nested inside.
  */
 export function parseDeclarations(css) {
-  const source = blankComments(css);
+  const source = css;
   const decls = [];
   const stack = [];
   let buffer = '';
   let bufferStart = 0;
+  /* Offset of the first non-whitespace character in the buffer, recorded as
+     it is read rather than derived afterwards by trimming. Deriving it worked
+     only while comments were blanked to spaces up front: once they are stepped
+     over instead, the source still holds the comment text, so trimming stops
+     at the "/" and every declaration under a comment reported the comment's
+     line as its own. */
+  let ink = -1;
   let quote = null;
 
-  const flush = (end) => {
+  const flush = () => {
     const text = buffer.trim();
     buffer = '';
+    const at = ink;
+    ink = -1;
     if (!text) return;
     const colon = text.indexOf(':');
     if (colon === -1) return;
@@ -77,13 +81,14 @@ export function parseDeclarations(css) {
       value,
       selector,
       atRules: stack.filter((s) => s.startsWith('@')),
-      index: bufferStart + (source.slice(bufferStart, end).length - source.slice(bufferStart, end).trimStart().length),
+      index: at === -1 ? bufferStart : at,
     });
   };
 
   for (let i = 0; i < source.length; i += 1) {
     const c = source[i];
     if (quote) {
+      if (ink === -1) ink = i;
       buffer += c;
       if (c === '\\') {
         buffer += source[i + 1] ?? '';
@@ -91,29 +96,44 @@ export function parseDeclarations(css) {
       } else if (c === quote) quote = null;
       continue;
     }
+    /* Comments are skipped here rather than blanked before the walk.
+       Blanking first cannot see quotes, so a "/*" inside one string value and
+       a "*\/" inside another erased every declaration between them. A theme
+       override lost that way does not fail: resolveScopes falls back to the
+       base value and the dark theme gets measured against light numbers, which
+       is the exact miss this file exists to catch. Offsets stay true because
+       nothing is rewritten, only stepped over. */
+    if (c === '/' && source[i + 1] === '*') {
+      const end = source.indexOf('*\/', i + 2);
+      i = end === -1 ? source.length : end + 1;
+      continue;
+    }
     if (c === '"' || c === "'") {
       quote = c;
+      if (ink === -1) ink = i;
       buffer += c;
       continue;
     }
     if (c === '{') {
       stack.push(buffer.trim().replace(/\s+/g, ' '));
       buffer = '';
+      ink = -1;
       bufferStart = i + 1;
       continue;
     }
     if (c === '}') {
-      flush(i);
+      flush();
       stack.pop();
       bufferStart = i + 1;
       continue;
     }
     if (c === ';') {
-      flush(i);
+      flush();
       bufferStart = i + 1;
       continue;
     }
     if (!buffer) bufferStart = i;
+    if (ink === -1 && c.trim()) ink = i;
     buffer += c;
   }
   return decls;

package/src/files.mjs

@@ -56,25 +56,44 @@ function walk(dir, out) {
 }
 
 /**
- * Absolute paths matching the patterns, relative to `cwd`, sorted and
- * de-duplicated so a run is reproducible and a report is diffable.
+ * Absolute paths matching the patterns, plus the patterns that matched
+ * nothing.
+ *
+ * The misses are returned rather than inferred from an empty result, because
+ * a list is checked as a union. Two patterns, one naming src and one naming
+ * components, with components renamed: the src half still returns every file
+ * it matched, so the union is not empty and that whole second tree silently
+ * stops being checked. This file's own header promises a typo is reported
+ * where it happened, and only a per-pattern answer keeps that promise.
  */
-export function expand(patterns, cwd) {
+export function expandEach(patterns, cwd) {
   const found = new Set();
+  const empty = [];
   for (const pattern of patterns) {
+    const before = found.size;
     const absolute = isAbsolute(pattern) ? pattern : resolve(cwd, pattern);
     if (!/[*?]/.test(pattern)) {
       if (existsSync(absolute) && statSync(absolute).isFile()) found.add(absolute);
+      else empty.push(pattern);
       continue;
     }
     const base = resolve(cwd, baseOf(pattern));
-    if (!existsSync(base) || !statSync(base).isDirectory()) continue;
+    if (!existsSync(base) || !statSync(base).isDirectory()) {
+      empty.push(pattern);
+      continue;
+    }
     const test = toRegExp(isAbsolute(pattern) ? pattern : resolve(cwd, pattern).split(sep).join('/'));
     for (const file of walk(base, [])) {
       if (test.test(file.split(sep).join('/'))) found.add(file);
     }
+    if (found.size === before) empty.push(pattern);
   }
-  return [...found].sort();
+  return { files: [...found].sort(), empty };
+}
+
+/** Just the paths, for callers with nothing useful to say about a miss. */
+export function expand(patterns, cwd) {
+  return expandEach(patterns, cwd).files;
 }
 
 /** A path as you would paste it into an editor. */

package/src/judge.mjs

@@ -41,7 +41,7 @@
 import { execFileSync } from 'node:child_process';
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { expand, label } from './files.mjs';
+import { expandEach, label } from './files.mjs';
 
 /**
  * The instructions wrapped around the user's checklist.
@@ -182,7 +182,21 @@ export function prepareJudge(config, cwd) {
     if (!made.ok) return { ok: false, result: empty([made.reason], failOn) };
   }
 
-  const images = expand(shots, cwd);
+  const { files: images, empty: deadShots } = expandEach(shots, cwd);
+  /* A dead shot pattern is the same failure as no shots at all, one screen at
+     a time: the judge answers about the frames it was given and says nothing
+     about the one nobody handed it. */
+  if (deadShots.length) {
+    return {
+      ok: false,
+      result: empty(
+        deadShots.map(
+          (p) => `no screenshots matched "${p}". A screen the judge never saw cannot pass.`,
+        ),
+        failOn,
+      ),
+    };
+  }
   if (!images.length) {
     return {
       ok: false,

package/src/runtime.mjs

@@ -38,11 +38,19 @@ const MEASURE = `(targets) => targets.map(({ selector, prop, againstParent }) =>
   if (!el) return { error: 'matched no element' };
   if (!el.getClientRects().length) return { error: 'matched an element that is not rendered' };
   const cs = getComputedStyle(el);
-  const fg = cs[prop];
+  // Read either spelling. A config saying border-top-color is the natural
+  // thing to write and the validator accepts it, so it must not fall through
+  // to an undefined lookup.
+  const fg = prop.includes('-') ? cs.getPropertyValue(prop) : cs[prop];
   if (!fg) return { error: 'has no ' + prop };
-  if (prop.startsWith('border')) {
-    const side = prop.replace(/^border|Color$/g, '');
-    const width = parseFloat(cs['border' + (side || 'Top') + 'Width']);
+  if (/^border/i.test(prop)) {
+    /* Both spellings again. Stripping only the camelCase affixes turned
+       border-top-color into "-top-color" and then read borderTopWidth as
+       border-top-colorWidth, which is undefined, so every dash-case edge
+       reported "no width, so no edge is drawn" over a real border. */
+    const side = prop.replace(/^border-?/i, '').replace(/-?color$/i, '');
+    const dashed = side ? side.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase() : 'top';
+    const width = parseFloat(cs.getPropertyValue('border-' + dashed + '-width'));
     if (!width) return { error: 'has a ' + prop + ' but no width, so no edge is drawn' };
   }
   const layers = [];

package/src/tokens.mjs

@@ -29,7 +29,7 @@
  */
 import { readFileSync } from 'node:fs';
 import { lineAt, parseDeclarations } from './css.mjs';
-import { expand, label } from './files.mjs';
+import { expandEach, label } from './files.mjs';
 
 /**
  * The name is `[\w-]+` for the same reason `resolveValue` in css.mjs uses it:
@@ -72,10 +72,17 @@ export function runTokens(config, cwd) {
   const { declaredIn, files: patterns, allow = [], allowPrefixes = [] } = config;
 
   const quoted = (list) => list.map((p) => `"${p}"`).join(', ');
-  const tokenFiles = expand(declaredIn, cwd);
-  const files = expand(patterns, cwd);
+  const declared_ = expandEach(declaredIn, cwd);
+  const scanned_ = expandEach(patterns, cwd);
+  const tokenFiles = declared_.files;
+  const files = scanned_.files;
 
-  if (!tokenFiles.length) problems.push(`no token files matched ${quoted(declaredIn)}`);
+  /* Per pattern, not per list. A list is a union, so one dead pattern beside
+     a live one leaves the union non-empty and that tree stops being checked
+     in silence. */
+  for (const p of declared_.empty) problems.push(`no token files matched "${p}"`);
+  for (const p of scanned_.empty) problems.push(`no markup files matched "${p}"`);
+  if (!tokenFiles.length && !declared_.empty.length) problems.push(`no token files matched ${quoted(declaredIn)}`);
   const declared = declaredNames(tokenFiles);
   if (tokenFiles.length && !declared.size) {
     problems.push(
@@ -83,7 +90,7 @@ export function runTokens(config, cwd) {
         `but none of them declares a custom property. Every reference would read as undefined.`,
     );
   }
-  if (!files.length) problems.push(`no markup files matched ${quoted(patterns)}`);
+  if (!files.length && !scanned_.empty.length) problems.push(`no markup files matched ${quoted(patterns)}`);
 
   // Without a trustworthy declared set there is nothing to compare against,
   // and reporting every reference in the codebase as undefined would bury the

package/src/treatments.mjs

@@ -21,7 +21,7 @@
  */
 import { readFileSync } from 'node:fs';
 import { lineAt } from './css.mjs';
-import { expand, label } from './files.mjs';
+import { expandEach, label } from './files.mjs';
 
 /** Literal value shapes worth flagging when they are not on the list. */
 const VALUE_SHAPES = [
@@ -61,10 +61,18 @@ export function* openTags(source, names) {
   }
 }
 
-/** The value of `attr` when it is a plain string literal, else null. */
+/**
+ * The value of `attr` when it is a plain string literal, else null.
+ *
+ * Both quote styles. Matching only double quotes meant class='a b' and
+ * style='...' hit neither this nor the expression path, so the element was
+ * read as carrying no classes and no values: a file full of unapproved
+ * classes reported clean and exited 0. Single quotes are the house style in
+ * a lot of HTML, and `files` accepts .html, so this was not a corner.
+ */
 export function literalAttr(attrs, attr) {
-  const m = attrs.match(new RegExp(`(?:^|\\s)${attr}\\s*=\\s*"([^"]*)"`));
-  return m ? { text: m[1], at: m.index + m[0].indexOf('"') + 1 } : null;
+  const m = attrs.match(new RegExp(`(?:^|\\s)${attr}\\s*=\\s*(["'])([\\s\\S]*?)\\1`));
+  return m ? { text: m[2], at: m.index + m[0].indexOf(m[1]) + 1 } : null;
 }
 
 /** The braced expression for `attr`, brace-balanced, or null. */
@@ -190,9 +198,11 @@ export function runTreatments(config, cwd) {
     approvedValues = [],
   } = config;
 
-  const files = expand(patterns, cwd);
+  const { files, empty } = expandEach(patterns, cwd);
+  // Per pattern: a dead one beside a live one leaves the union non-empty.
+  for (const p of empty) problems.push(`no markup files matched "${p}"`);
   if (!files.length) {
-    problems.push(`no markup files matched ${patterns.map((p) => `"${p}"`).join(', ')}`);
+    if (!empty.length) problems.push(`no markup files matched ${patterns.map((p) => `"${p}"`).join(', ')}`);
     return { name: 'treatments', failures, problems, summary: '' };
   }