|
| 1 | +#!/usr/bin/env node |
| 2 | +/** |
| 3 | + * Baseline audit: scan the web package for raw Tailwind color classes |
| 4 | + * (`text-red-500`, `bg-blue-400`, `border-green-700`, etc.) that should |
| 5 | + * be driven by CSS custom properties instead. |
| 6 | + * |
| 7 | + * Never fails the build — prints a count so future PRs can track drift. |
| 8 | + */ |
| 9 | +import { readFile, readdir } from 'node:fs/promises'; |
| 10 | +import { join, relative } from 'node:path'; |
| 11 | +import { fileURLToPath } from 'node:url'; |
| 12 | + |
| 13 | +const ROOT = fileURLToPath(new URL('../src', import.meta.url)); |
| 14 | +const EXTS = new Set(['.ts', '.tsx', '.css']); |
| 15 | +const IGNORE = new Set(['node_modules', 'dist', 'e2e', 'public']); |
| 16 | + |
| 17 | +// Tailwind color palette tokens we want to discourage in favor of CSS vars. |
| 18 | +// Excludes: white, black, transparent, current, inherit, auto (they aren't palette colors). |
| 19 | +const COLOR_NAMES = [ |
| 20 | + 'slate', 'gray', 'zinc', 'neutral', 'stone', |
| 21 | + 'red', 'orange', 'amber', 'yellow', 'lime', |
| 22 | + 'green', 'emerald', 'teal', 'cyan', 'sky', |
| 23 | + 'blue', 'indigo', 'violet', 'purple', 'fuchsia', |
| 24 | + 'pink', 'rose', |
| 25 | +]; |
| 26 | +const UTILITIES = ['text', 'bg', 'border', 'ring', 'from', 'to', 'via', 'fill', 'stroke', 'placeholder', 'decoration', 'outline', 'shadow', 'divide', 'accent', 'caret']; |
| 27 | + |
| 28 | +const RE = new RegExp( |
| 29 | + `\\b(?:${UTILITIES.join('|')})-(?:${COLOR_NAMES.join('|')})-(?:50|100|200|300|400|500|600|700|800|900|950)\\b`, |
| 30 | + 'g', |
| 31 | +); |
| 32 | + |
| 33 | +async function* walk(dir) { |
| 34 | + for (const entry of await readdir(dir, { withFileTypes: true })) { |
| 35 | + if (IGNORE.has(entry.name)) continue; |
| 36 | + const full = join(dir, entry.name); |
| 37 | + if (entry.isDirectory()) { |
| 38 | + yield* walk(full); |
| 39 | + } else if (entry.isFile()) { |
| 40 | + const idx = entry.name.lastIndexOf('.'); |
| 41 | + if (idx >= 0 && EXTS.has(entry.name.slice(idx))) yield full; |
| 42 | + } |
| 43 | + } |
| 44 | +} |
| 45 | + |
| 46 | +const hits = new Map(); |
| 47 | +let total = 0; |
| 48 | + |
| 49 | +for await (const file of walk(ROOT)) { |
| 50 | + const text = await readFile(file, 'utf8'); |
| 51 | + const matches = text.match(RE); |
| 52 | + if (!matches) continue; |
| 53 | + hits.set(relative(ROOT, file), matches.length); |
| 54 | + total += matches.length; |
| 55 | +} |
| 56 | + |
| 57 | +const sorted = [...hits.entries()].sort((a, b) => b[1] - a[1]); |
| 58 | + |
| 59 | +console.log(`Raw Tailwind color audit — ${total} hit(s) across ${hits.size} file(s)`); |
| 60 | +if (sorted.length > 0) { |
| 61 | + console.log(''); |
| 62 | + console.log('Top offenders:'); |
| 63 | + for (const [file, count] of sorted.slice(0, 20)) { |
| 64 | + console.log(` ${count.toString().padStart(4)} ${file}`); |
| 65 | + } |
| 66 | +} |
| 67 | + |
| 68 | +// Baseline only — always exit 0. |
| 69 | +process.exit(0); |
0 commit comments