ai-for-dummies/.agents/scripts/check-tokens.mjs

#!/usr/bin/env node
// Fails when a raw colour, px font-size, or ad-hoc breakpoint appears outside
// the token layer. A rule nobody checks is a suggestion — wire this into
// `pnpm run verify`.
//
// ESCAPE HATCH — `token-gap:`. Some legacy values have no token yet, and only
// `design-system-keeper` may add one. Without an escape, an agent told both
// "keep the site identical" and "get the gate green" has to break one of them,
// and tasks 10 and 11 both broke the first: `#e5eeeb` became `var(--paper)`,
// diff-added green became `var(--accent)` purple. Substituting a near-miss
// token is a silent redesign; it is worse than a raw value, because the raw
// value is at least honest about what it is.
//
// So: mark the line, keep the true value, stay green.
//
//   /* token-gap: no --step-* covers 12px; owner design-system-keeper */
//   font-size: 12px;
//
// Marked values are counted and listed on every run — they are a visible debt
// queue, not a way to make the finding disappear. The marker needs a reason;
// a bare `token-gap:` does not count.
//
// Usage: node .agents/scripts/check-tokens.mjs [srcDir]

import { readdirSync, readFileSync, statSync } from 'node:fs';
import { join, extname } from 'node:path';

// lint-staged appends staged file paths; a bare run sweeps `src`.
const ARGS = process.argv.slice(2);
const TOKEN_FILES = ['tokens.css', 'base.css'];
const ALLOWED_BREAKPOINTS = ['560px', '800px', '1100px', '1600px', '2200px'];

const walk = (dir) =>
  readdirSync(dir).flatMap((name) => {
    const path = join(dir, name);
    return statSync(path).isDirectory() ? walk(path) : [path];
  });

const targets = ARGS.length
  ? ARGS.flatMap((arg) => (statSync(arg).isDirectory() ? walk(arg) : [arg]))
  : walk('src');

const findings = [];
const gaps = [];

// A finding is waived when its own line, or the line above it, carries a
// `token-gap:` marker with a reason after the colon.
const MARKER = /token-gap:([^\n]*)/;
// The reason is what is left after the marker once the comment terminator and
// punctuation are stripped. `/* token-gap: */` is not a reason.
const reason = (line) => {
  const found = MARKER.exec(line ?? '');
  if (!found) return null;
  const text = found[1]
    .replace(/\*\/\s*$/, '')
    .replace(/[\s*/]+$/, '')
    .trim();
  return /[a-z0-9]/i.test(text) ? [null, text] : null;
};
const waiver = (lines, index) =>
  reason(lines[index]) || (index > 0 ? reason(lines[index - 1]) : null);

for (const path of targets) {
  if (!['.astro', '.css'].includes(extname(path))) continue;
  if (TOKEN_FILES.some((allowed) => path.endsWith(allowed))) continue;

  const lines = readFileSync(path, 'utf8').split('\n');
  lines.forEach((line, index) => {
    const at = `${path}:${index + 1}`;
    const waived = waiver(lines, index);
    const record = (finding) => {
      if (waived) gaps.push(`${at}: ${finding.slice(at.length + 2)} [${waived[1]}]`);
      else findings.push(finding);
    };

    // Raw hex — the drifted-palette failure mode this whole layer exists to stop.
    const hex = line.match(/#[0-9a-fA-F]{3,8}\b/g);
    if (hex) record(`${at}: raw hex ${hex.join(', ')} — use a token from tokens.css`);

    // rgb()/hsl() literals are the same problem wearing a different hat.
    if (/\b(rgba?|hsla?)\(\s*\d/.test(line)) record(`${at}: raw colour function — use a token`);

    // Hard-coded font sizes bypass the type scale.
    const fontSize = line.match(/font-size:\s*\d+(\.\d+)?px/);
    if (fontSize) record(`${at}: hard-coded ${fontSize[0]} — use var(--step-*)`);

    // Ad-hoc breakpoints are how sixteen of them accumulated last time.
    const media = line.match(/@media[^{]*?\(\s*(?:max|min)-width:\s*(\d+px)/);
    if (media && !ALLOWED_BREAKPOINTS.includes(media[1]))
      record(
        `${at}: breakpoint ${media[1]} is not a named one (${ALLOWED_BREAKPOINTS.join(', ')})`,
      );
  });
}

if (gaps.length) {
  console.log(`token check: ${gaps.length} marked token-gap(s) awaiting design-system-keeper:\n`);
  gaps.forEach((gap) => console.log(`  ${gap}`));
  console.log('');
}

if (findings.length) {
  console.error(`token check failed — ${findings.length} finding(s):\n`);
  findings.forEach((finding) => console.error(`  ${finding}`));
  process.exit(1);
}

import { existsSync } from 'node:fs';
import { basename } from 'node:path';

if (existsSync('dist')) {
  const builtCss = walk('dist').filter((p) => p.endsWith('.css'));
  const tokensBuilt = builtCss.find((p) => /[\\/]tokens\.[^\\/]+\.css$/.test(p));

  if (!tokensBuilt) {
    console.error('token check failed — tokens.css was not built into dist/');
    process.exit(1);
  }

  const tokensContent = readFileSync(tokensBuilt, 'utf8');
  if (!tokensContent.includes('#527f9f')) {
    console.error(
      'token check failed — built tokens.css does not contain the canonical --blue value #527f9f',
    );
    process.exit(1);
  }

  const htmlFiles = walk('dist').filter(
    (p) =>
      p.endsWith('.html') &&
      !p.includes('/hands-on/') &&
      !p.includes('\\hands-on\\') &&
      !p.includes('/submitted-skills/') &&
      !p.includes('\\submitted-skills\\'),
  );

  const tokenChunkName = basename(tokensBuilt);
  for (const html of htmlFiles) {
    const content = readFileSync(html, 'utf8');
    if (!content.includes(tokenChunkName)) {
      console.error(
        `token check failed — ${html} does not load the token layer (${tokenChunkName})`,
      );
      process.exit(1);
    }
  }
}

console.log('token check passed');