easy-png-tools2/web/scripts/audit-css.mjs

// Фаза B: CSS/визуальный аудит. Для каждого preview-маршрута снимает
// нормализованное дерево элементов с ВЫЧИСЛЕННЫМИ стилями (и геометрией)
// нашей страницы и соответствующего refs-html файла, выравнивает деревья
// по структуре (как в audit-dom — теги нормализованы, классы игнорируются,
// матчинг по ключу), и для совпавших узлов сравнивает стили + rect.
// Дополнительно сравнивает design-токены (CSS-переменные) light/dark.
// Запуск: pnpm refs-audit  (опции: --route <path> --ref <file> --no-serve --ours <url>)
import { chromium } from "playwright";
import { spawn } from "node:child_process";
import { writeFileSync, mkdirSync, readdirSync } from "node:fs";
import { resolve, join } from "node:path";

const args = (() => {
	const a = {};
	for (let i = 0; i < process.argv.length; i++) {
		const v = process.argv[i];
		if (v === "--no-serve") a.noServe = true;
		else if (v === "--ours") a.ours = process.argv[++i];
		else if (v === "--ref") a.ref = process.argv[++i];
		else if (v === "--route") a.route = process.argv[++i];
	}
	return a;
})();

const WEB = process.cwd();
const PORT = 5179;
const REFS_DIR = resolve(WEB, "../refs-html");

// Поля вычисленного стиля, которые сравниваем (визуально значимые).
const STYLE_FIELDS = [
	"fontFamily",
	"fontSize",
	"fontWeight",
	"fontStyle",
	"lineHeight",
	"letterSpacing",
	"textAlign",
	"textTransform",
	"color",
	"backgroundColor",
	"display",
	"flexDirection",
	"alignItems",
	"justifyContent",
	"gap",
	"gridTemplateColumns",
	"padding",
	"margin",
	"borderRadius",
	"borderTopWidth",
	"borderTopColor",
	"borderTopStyle",
	"width",
	"height",
	"boxShadow",
	"opacity",
];

// Динамические сегменты: явный список значений + сопоставление id → файл рефа.
const DYNAMIC = {
	"tools/[id]": {
		ids: ["linear-gradient-png", "remove-background-png"],
		refFor: (id) =>
			id === "linear-gradient-png"
				? "gradient.html"
				: id === "remove-background-png"
					? "background-remover.html"
					: null,
	},
};

const EXCLUDE = new Set(["/preview"]);
const refNameFor = (route) => {
	if (route === "/preview") return "index.html";
	const last = route.split("/").filter(Boolean).pop();
	return `${last}.html`;
};

function discoverRoutes() {
	const base = resolve(WEB, "src/routes/preview");
	const out = [];
	const walk = (dir) => {
		let ents;
		try {
			ents = readdirSync(dir, { withFileTypes: true });
		} catch {
			return;
		}
		for (const e of ents) {
			const p = join(dir, e.name);
			if (e.isDirectory()) walk(p);
			else if (e.name === "+page.svelte") {
				const rel = p.slice(base.length).replace(/\\/g, "/");
				const parts = rel.split("/").filter(Boolean);
				parts.pop();
				out.push(parts.length ? `/preview/${parts.join("/")}` : "/preview");
			}
		}
	};
	walk(base);
	return out;
}

function refsList() {
	try {
		return readdirSync(REFS_DIR).filter((f) => f.endsWith(".html"));
	} catch {
		return [];
	}
}
const refExists = (name) => refsList().includes(name);

function buildTargets() {
	if (args.route) {
		const ref = args.ref || refNameFor(args.route);
		return [{ route: args.route, ref }];
	}
	const targets = [];
	const seen = new Set();
	const add = (route, ref) => {
		if (!ref || seen.has(route)) return;
		if (!refExists(ref)) {
			console.warn(`[css-audit] ref not found, skipped: ${route} -> ${ref}`);
			return;
		}
		seen.add(route);
		targets.push({ route, ref });
	};
	for (const route of discoverRoutes()) {
		if (route.includes("[")) continue;
		if (EXCLUDE.has(route)) {
			console.log(`[css-audit] excluded (no relevant ref): ${route}`);
			continue;
		}
		add(route, refNameFor(route));
	}
	for (const [seg, cfg] of Object.entries(DYNAMIC)) {
		for (const id of cfg.ids) {
			add(`/preview/${seg.replace("[id]", id)}`, cfg.refFor(id));
		}
	}
	const routed = new Set(targets.map((t) => t.ref));
	for (const f of refsList()) {
		if (!routed.has(f)) console.warn(`[css-audit] ref без маршрута: ${f}`);
	}
	return targets;
}

const waitFor = async (url, ms = 60000) => {
	const t = Date.now();
	while (Date.now() - t < ms) {
		try {
			const r = await fetch(url);
			if (r.ok) return;
			if (r.status >= 400) {
				throw new Error(
					`route ${url} returned HTTP ${r.status} (server is up, page failed to render)`,
				);
			}
		} catch (e) {
			if (e instanceof Error && e.message.includes("returned HTTP")) throw e;
		}
		await new Promise((r) => setTimeout(r, 500));
	}
	throw new Error("dev server not up: " + url);
};

// Теги-обёртки нормализуем к "box", чтобы выравнивать по сути, а не по
// конкретному тегу (наш div/main vs рефовый div/main). Семантические — как есть.
const STRUCT_TAGS = new Set([
	"div",
	"main",
	"section",
	"article",
	"aside",
	"ul",
	"li",
	"form",
	"fieldset",
]);
const normTag = (tag) => (STRUCT_TAGS.has(tag) ? "box" : tag);
const keyOf = (n) =>
	n.children.length === 0 ? `${normTag(n.tag)}|${n.text}` : normTag(n.tag);

const snapshot = (page) =>
	page.evaluate((styleFields) => {
		const sig = (el) => {
			const s = getComputedStyle(el);
			const o = {};
			for (const f of styleFields) o[f] = s[f];
			return o;
		};
		const rectOf = (el) => {
			const r = el.getBoundingClientRect();
			return {
				x: Math.round(r.x),
				y: Math.round(r.y),
				w: Math.round(r.width),
				h: Math.round(r.height),
			};
		};
		const readTokens = () => {
			const s = getComputedStyle(document.documentElement);
			const out = {};
			for (const k of s)
				if (k.startsWith("--")) out[k] = s.getPropertyValue(k).trim();
			return out;
		};
		const tokensLight = readTokens();
		const prev = document.documentElement.getAttribute("data-theme");
		document.documentElement.setAttribute("data-theme", "dark");
		const tokensDark = readTokens();
		if (prev) document.documentElement.setAttribute("data-theme", prev);
		else document.documentElement.removeAttribute("data-theme");

		const walk = (el) => {
			const tag = el.tagName.toLowerCase();
			if (["script", "style", "noscript", "template"].includes(tag))
				return null;
			if (el.id === "svelte-announcer") return null;
			if (el.hasAttribute("hidden")) return null;
			const cs = getComputedStyle(el);
			if (cs.display === "none" || cs.visibility === "hidden") return null;
			let ownText = "";
			for (const c of el.childNodes)
				if (c.nodeType === 3) ownText += c.textContent;
			ownText = ownText.replace(/\s+/g, " ").trim();
			const node = {
				tag,
				text: ownText,
				style: sig(el),
				rect: rectOf(el),
				children: [],
			};
			if (tag === "svg") return node;
			for (const child of el.children) {
				const cn = walk(child);
				if (cn) node.children.push(cn);
			}
			return node;
		};
		return { tokensLight, tokensDark, tree: walk(document.body) };
	}, STYLE_FIELDS);

const TOK_NOISE = /^(--tw-|--lightningcss-|--default-)/;

function compareStyle(ours, ref, path, out) {
	if (!ours || !ref) return;
	if (ours.tag !== ref.tag) {
		out.push({ path, type: "tagMismatch", ours: ours.tag, ref: ref.tag });
		return;
	}
	if (ours.text && ref.text && ours.text !== ref.text) {
		out.push({ path, type: "textMismatch", ours: ours.text, ref: ref.text });
	}
	const deltas = {};
	for (const f of STYLE_FIELDS) {
		const ov = (ours.style[f] ?? "").toString();
		const rv = (ref.style[f] ?? "").toString();
		if (ov !== rv) deltas[f] = { ours: ov, ref: rv };
	}
	const dr = ours.rect;
	const rr = ref.rect;
	if (
		Math.abs(dr.x - rr.x) > 2 ||
		Math.abs(dr.y - rr.y) > 2 ||
		Math.abs(dr.w - rr.w) > 2 ||
		Math.abs(dr.h - rr.h) > 2
	)
		deltas.rect = { ours: dr, ref: rr };
	if (Object.keys(deltas).length)
		out.push({ path, type: "style", tag: ours.tag, text: ours.text, deltas });

	// Выравниваем детей по ключу (жадно), рекурсивно сравнивая стили.
	const bByKey = new Map();
	ref.children.forEach((c, idx) => {
		const k = keyOf(c);
		if (!bByKey.has(k)) bByKey.set(k, []);
		bByKey.get(k).push(idx);
	});
	const used = new Set();
	for (let i = 0; i < ours.children.length; i++) {
		const aNode = ours.children[i];
		const cands = bByKey.get(keyOf(aNode));
		let bIdx = -1;
		if (cands)
			for (const ci of cands)
				if (!used.has(ci)) {
					bIdx = ci;
					break;
				}
		if (bIdx >= 0) {
			used.add(bIdx);
			compareStyle(
				aNode,
				ref.children[bIdx],
				`${path} > ${aNode.tag}:${i + 1}`,
				out,
			);
		} else {
			out.push({
				path: `${path} > ${aNode.tag}:${i + 1}`,
				type: "added",
				tag: aNode.tag,
			});
		}
	}
	for (let j = 0; j < ref.children.length; j++) {
		if (used.has(j)) continue;
		out.push({
			path: `${path} > ${ref.children[j].tag}:${j + 1}`,
			type: "removed",
			tag: ref.children[j].tag,
		});
	}
}

function tokDiff(a, b) {
	const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
	const rows = [];
	for (const k of keys) {
		if (TOK_NOISE.test(k)) continue;
		const av = a[k] ?? "—";
		const bv = b[k] ?? "—";
		if (av !== bv) rows.push({ key: k, ours: av, ref: bv });
	}
	return rows;
}

async function auditOne(browser, target) {
	const oursUrl = args.ours || `http://127.0.0.1:${PORT}${target.route}`;

	const page = await browser.newPage({
		viewport: { width: 1440, height: 900 },
		deviceScaleFactor: 1,
	});
	await page.goto(oursUrl, { waitUntil: "load" });
	await page.evaluate(() => document.fonts.ready);
	// Рефы — только светлые; наше приложение по умолчанию может рендерить
	// тёмную тему (app.html смотрит prefers-color-scheme). Нормализуем ОБЕ
	// стороны к light, чтобы аудит мерил реальные расхождения дизайна, а не
	// инверсию темы.
	await page.evaluate(() => {
		document.documentElement.dataset.theme = "light";
	});
	await page.waitForTimeout(500);
	const ours = await snapshot(page);
	await page.close();

	// Реф грузим в ИЗОЛИРОВАННОМ контексте через goto(file://): переход
	// http → file в одной странице уничтожает execution context и роняет прогон.
	const refUrl = "file:///" + resolve(REFS_DIR, target.ref).replace(/\\/g, "/");
	const ctx = await browser.newContext();
	const refPage = await ctx.newPage();
	await refPage.goto(refUrl, { waitUntil: "load" });
	await refPage.evaluate(() => document.fonts.ready);
	await refPage.evaluate(() => {
		document.documentElement.dataset.theme = "light";
	});
	await refPage.waitForTimeout(400);
	const ref = await snapshot(refPage);
	await ctx.close();

	const deltas = [];
	compareStyle(ours.tree, ref.tree, "body", deltas);
	const tokenDiffs = {
		light: tokDiff(ours.tokensLight, ref.tokensLight),
		dark: tokDiff(ours.tokensDark, ref.tokensDark),
	};
	return {
		route: target.route,
		ref: target.ref,
		deltas,
		tokenDiffs,
		counts: tally(deltas, tokenDiffs),
	};
}

function tally(deltas, tokenDiffs) {
	const c = {
		tagMismatch: 0,
		textMismatch: 0,
		added: 0,
		removed: 0,
		styleDiffs: 0,
		rectDiffs: 0,
		fieldDiffs: 0,
	};
	for (const d of deltas) {
		if (d.type === "style") {
			c.styleDiffs++;
			c.fieldDiffs += Object.keys(d.deltas).length;
			if (d.deltas.rect) c.rectDiffs++;
		} else if (d.type in c) c[d.type]++;
	}
	return {
		...c,
		tokenLight: tokenDiffs.light.length,
		tokenDark: tokenDiffs.dark.length,
	};
}

function toMarkdown(reports) {
	const tokTable = (rows) =>
		rows.length
			? `| token | ours | ref |\n|---|---|---|\n` +
				rows.map((r) => `| \`${r.key}\` | ${r.ours} | ${r.ref} |`).join("\n")
			: "_все совпадают_";
	const elBlock = (el) => {
		const d = Object.entries(el.deltas)
			.map(([k, v]) => {
				if (k === "rect") {
					const f = (r) => `${r.x},${r.y} ${r.w}x${r.h}`;
					return `    - **rect**: \`${f(v.ours)}\` → \`${f(v.ref)}\``;
				}
				return `    - **${k}**: \`${v.ours}\` → \`${v.ref}\``;
			})
			.join("\n");
		return `### \`${el.path}\`${el.text ? ` — "${el.text}"` : ""}\n${d}`;
	};
	const summary =
		`# CSS audit (phase B)\n\n_${new Date().toISOString()}_\n\n` +
		`## Сводка\n\n| route | ref | tokL | tokD | style (el) | fields | rect | +struct | -struct | tag | text |\n|---|---|---|---|---|---|---|---|---|---|---|\n` +
		reports
			.map(
				(r) =>
					`| \`${r.route}\` | ${r.ref} | ${r.counts.tokenLight} | ${r.counts.tokenDark} | ${r.counts.styleDiffs} | ${r.counts.fieldDiffs} | ${r.counts.rectDiffs} | ${r.counts.added} | ${r.counts.removed} | ${r.counts.tagMismatch} | ${r.counts.textMismatch} |`,
			)
			.join("\n");
	const sections = reports
		.map((r) => {
			const styleDiffs = r.deltas.filter((d) => d.type === "style");
			const sorted = [...styleDiffs].sort(
				(x, y) => Object.keys(y.deltas).length - Object.keys(x.deltas).length,
			);
			const els = sorted.length
				? sorted.slice(0, 150).map(elBlock).join("\n\n")
				: "_расхождений стилей нет_";
			const struct = r.deltas
				.filter((d) => d.type !== "style")
				.map(
					(d) => `- \`${d.path}\` — **${d.type}**${d.tag ? ` (${d.tag})` : ""}`,
				)
				.join("\n");
			return (
				`\n\n## ${r.route}  (vs ${r.ref})\n\n` +
				`- Токены light: **${r.counts.tokenLight}**, dark: **${r.counts.tokenDark}**\n` +
				`- Стиль-расхождений: **${r.counts.styleDiffs}** элементов / **${r.counts.fieldDiffs}** полей (из них геометрия: ${r.counts.rectDiffs})\n` +
				`- Структурные: +${r.counts.added} / -${r.counts.removed} / tag ${r.counts.tagMismatch} / text ${r.counts.textMismatch}\n\n` +
				`### Токены — Light\n\n${tokTable(r.tokenDiffs.light)}\n\n` +
				`### Токены — Dark\n\n${tokTable(r.tokenDiffs.dark)}\n\n` +
				`### Расхождения стилей (топ ${Math.min(150, sorted.length)})\n\n${els}\n\n` +
				`### Структурные расхождения\n\n` +
				(struct || "_—_")
			);
		})
		.join("\n");
	return summary + sections + "\n";
}

async function main() {
	const targets = buildTargets();
	if (!targets.length) {
		console.error("no audit targets (refs-html/*.html missing?)");
		process.exit(1);
	}
	console.log(`[css-audit] targets: ${targets.map((t) => t.route).join(", ")}`);

	let server;
	if (!args.noServe) {
		const bin = process.platform === "win32" ? "pnpm.cmd" : "pnpm";
		server = spawn(bin, ["dev", "--port", String(PORT), "--strictPort"], {
			cwd: WEB,
			stdio: "ignore",
			shell: true,
			detached: process.platform !== "win32",
		});
		await waitFor(args.ours || `http://127.0.0.1:${PORT}${targets[0].route}`);
	}

	const browser = await chromium.launch();
	const reports = [];
	try {
		for (const target of targets) {
			try {
				const rep = await auditOne(browser, target);
				reports.push(rep);
				console.log(
					`[css-audit] ${rep.route}: tokL=${rep.counts.tokenLight} tokD=${rep.counts.tokenDark} style=${rep.counts.styleDiffs} fields=${rep.counts.fieldDiffs} rect=${rep.counts.rectDiffs} +struct=${rep.counts.added} -struct=${rep.counts.removed}`,
				);
			} catch (e) {
				console.error(`[css-audit] ${target.route} failed: ${e.message}`);
			}
		}
		mkdirSync(resolve(WEB, "audit"), { recursive: true });
		writeFileSync(
			resolve(WEB, "audit/audit-report.json"),
			JSON.stringify(
				{ generatedAt: new Date().toISOString(), reports },
				null,
				2,
			),
		);
		writeFileSync(resolve(WEB, "audit/audit-report.md"), toMarkdown(reports));
		console.log(`report: web/audit/audit-report.md`);
	} finally {
		await browser.close();
		if (server) {
			try {
				if (process.platform === "win32")
					spawn("taskkill", ["/pid", String(server.pid), "/f", "/t"], {
						stdio: "ignore",
					});
				else server.kill("SIGTERM");
			} catch {}
		}
	}
}

main().catch((e) => {
	console.error(e);
	process.exit(1);
});