1import fs from 'node:fs';
2import path from 'node:path';
3 
4import { GENERIC_FONTS, OVERUSED_FONTS } from '../../shared/constants.mjs';
5import {
6  checkSourceDesignSystem,
7  collectStaticDesignSystemFindings,
8  mergeDesignSystemFindings,
9} from '../../design-system.mjs';
10import { isFullPage } from '../../shared/page.mjs';
11import { applyInlineIgnores } from '../../shared/inline-ignores.mjs';
12import { finding } from '../../findings.mjs';
13import { profileFindings, profileStep, profileStepAsync } from '../../profile/profiler.mjs';
14import {
15  checkElementBorders,
16  checkElementClippedOverflow,
17  checkElementColors,
18  checkElementGlow,
19  checkElementGptBorderShadow,
20  checkElementHeroEyebrow,
21  checkElementIconTile,
22  checkElementItalicSerif,
23  checkElementMotion,
24  checkElementOversizedH1,
25  checkElementQuality,
26  checkCreamPalette,
27  checkHtmlPatterns,
28  checkPageLayout,
29  checkPageQualityFromDoc,
30  checkRepeatedSectionKickersFromDoc,
31  resolveBackground,
32  resolveBorderRadiusPx,
33} from '../../rules/checks.mjs';
34import { filterByProviders } from '../../registry/antipatterns.mjs';
35import { detectText, runTextContentAnalyzers } from '../regex/detect-text.mjs';
36import {
37  StaticDocument,
38  buildStaticStyleMap,
39  buildStaticWindow,
40  collectStaticCssText,
41} from './css-cascade.mjs';
42 
43function checkStaticPageTypography(document, window) {
44  const findings = [];
45  const fonts = new Set();
46  const overusedFound = new Set();
47  for (const el of document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, dd, blockquote, figcaption, a, button, label, span, div')) {
48    const hasText = el.childNodes.some(n => n.nodeType === 3 && n.textContent.trim().length > 0);
49    if (!hasText) continue;
50    const ff = window.getComputedStyle(el).fontFamily || '';
51    const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
52    const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
53    if (!primary) continue;
54    fonts.add(primary);
55    if (OVERUSED_FONTS.has(primary)) overusedFound.add(primary);
56  }
57  for (const font of overusedFound) {
58    findings.push({ id: 'overused-font', snippet: `Primary font: ${font}` });
59  }
60  if (fonts.size === 1 && document.querySelectorAll('*').length >= 20) {
61    findings.push({ id: 'single-font', snippet: `only font used is ${[...fonts][0]}` });
62  }
63  const sizes = new Set();
64  for (const el of document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div')) {
65    const fontSize = parseFloat(window.getComputedStyle(el).fontSize);
66    if (fontSize >= 8 && fontSize < 200) sizes.add(Math.round(fontSize * 10) / 10);
67  }
68  if (sizes.size >= 3) {
69    const sorted = [...sizes].sort((a, b) => a - b);
70    const ratio = sorted[sorted.length - 1] / sorted[0];
71    if (ratio < 2.0) {
72      findings.push({ id: 'flat-type-hierarchy', snippet: `Sizes: ${sorted.map(s => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
73    }
74  }
75  return findings;
76}
77 
78function checkElementBrokenImage(el) {
79  const src = (el.getAttribute && el.getAttribute('src')) ?? el.attribs?.src;
80  // Missing src attribute entirely
81  if (src === undefined || src === null) {
82    return [{ id: 'broken-image', snippet: '<img> with no src attribute' }];
83  }
84  const trimmed = String(src).trim();
85  // Empty or placeholder-only src values
86  if (trimmed === '' || trimmed === '#') {
87    return [{ id: 'broken-image', snippet: `<img src="${src}">` }];
88  }
89  return [];
90}
91 
92const STATIC_ELEMENT_RULES = [
93  { id: 'border-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementBorders(tag, style, null, resolveBorderRadiusPx(el, style, parseFloat(style.width) || 0, window)) },
94  { id: 'color-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementColors(el, style, tag, window, customPropMap, false) },
95  { id: 'dark-glow', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementGlow(tag, style, resolveBackground(el.parentElement || el, window, customPropMap)) },
96  { id: 'motion-rules', selector: '*', run: (el, tag, style) => checkElementMotion(tag, style) },
97  { id: 'icon-tile-stack', selector: 'h1,h2,h3,h4,h5,h6', run: (el, tag, _style, window) => checkElementIconTile(el, tag, window) },
98  { id: 'italic-serif-display', selector: 'h1,h2', run: (el, tag, style) => checkElementItalicSerif(el, style, tag) },
99  { id: 'hero-eyebrow-chip', selector: 'h1', run: (el, tag, style, window, customPropMap) => checkElementHeroEyebrow(el, style, tag, window, customPropMap) },
100  { id: 'broken-image', selector: 'img', run: (el) => checkElementBrokenImage(el) },
101  { id: 'quality-rules', selector: '*', run: (el, tag, style, window) => checkElementQuality(el, style, tag, window) },
102  { id: 'oversized-h1', selector: 'h1', run: (el, tag, style, window) => checkElementOversizedH1(el, style, tag, window) },
103  { id: 'clipped-overflow-container', selector: '*', run: (el, tag, style, window) => checkElementClippedOverflow(el, style, tag, window) },
104  { id: 'gpt-thin-border-wide-shadow', selector: '*', run: (el, tag, style) => checkElementGptBorderShadow(el, style) },
105];
106 
107async function detectHtml(filePath, options = {}) {
108  const profile = options?.profile;
109  const html = profileStep(profile, {
110    engine: 'static-html',
111    phase: 'setup',
112    ruleId: 'read-html',
113    target: filePath,
114  }, () => fs.readFileSync(filePath, 'utf-8'));
115 
116  let modules;
117  try {
118    modules = await profileStepAsync(profile, {
119      engine: 'static-html',
120      phase: 'setup',
121      ruleId: 'import-static-parser',
122      target: filePath,
123    }, async () => {
124      const [htmlparser2, cssSelect, csstree, domutils] = await Promise.all([
125        import('htmlparser2'),
126        import('css-select'),
127        import('css-tree'),
128        import('domutils'),
129      ]);
130      return {
131        parseDocument: htmlparser2.parseDocument,
132        selectAll: cssSelect.selectAll,
133        selectOne: cssSelect.selectOne,
134        is: cssSelect.is,
135        csstree,
136        domutils,
137      };
138    });
139  } catch {
140    return detectText(html, filePath, options);
141  }
142 
143  const resolvedPath = path.resolve(filePath);
144  const fileDir = path.dirname(resolvedPath);
145  const root = profileStep(profile, {
146    engine: 'static-html',
147    phase: 'parse-html',
148    ruleId: 'parse-document',
149    target: filePath,
150  }, () => modules.parseDocument(html, { lowerCaseAttributeNames: false, lowerCaseTags: true }));
151 
152  const cssText = collectStaticCssText(root, fileDir, profile, filePath, modules);
153  const document = new StaticDocument(root, modules);
154  buildStaticStyleMap(root, document, cssText, modules, profile, filePath);
155  const window = buildStaticWindow(document);
156 
157  const customPropMap = null;
158 
159  const findings = [];
160  const runElementCheck = (ruleId, callback) => profile
161    ? profileFindings(profile, { engine: 'static-html', phase: 'element', ruleId, target: filePath }, callback)
162    : callback();
163 
164  const visitedByRule = new Map();
165  for (const rule of STATIC_ELEMENT_RULES) {
166    const elements = document.querySelectorAll(rule.selector);
167    visitedByRule.set(rule.id, elements.length);
168    for (const el of elements) {
169      const tag = el.tagName.toLowerCase();
170      const style = window.getComputedStyle(el);
171      for (const f of runElementCheck(rule.id, () => rule.run(el, tag, style, window, customPropMap))) {
172        findings.push(finding(f.id, filePath, f.snippet));
173      }
174    }
175  }
176 
177  if (options?.designSystem) {
178    const sourceDesignFindings = profileFindings(profile, {
179      engine: 'static-html',
180      phase: 'source',
181      ruleId: 'design-system',
182      target: filePath,
183    }, () => checkSourceDesignSystem(html, filePath, { designSystem: options.designSystem }));
184    const staticDesignFindings = profileFindings(profile, {
185      engine: 'static-html',
186      phase: 'page',
187      ruleId: 'design-system',
188      target: filePath,
189    }, () => collectStaticDesignSystemFindings(document, window, filePath, options.designSystem));
190    findings.push(...mergeDesignSystemFindings(staticDesignFindings, sourceDesignFindings));
191  }
192 
193  if (isFullPage(html)) {
194    const runPageCheck = (ruleId, callback) => profile
195      ? profileFindings(profile, { engine: 'static-html', phase: 'page', ruleId, target: filePath }, callback)
196      : callback();
197    for (const f of runPageCheck('typography-rules', () => checkStaticPageTypography(document, window))) {
198      findings.push(finding(f.id, filePath, f.snippet));
199    }
200    for (const f of runPageCheck('repeated-section-kickers', () => checkRepeatedSectionKickersFromDoc(document, window))) {
201      findings.push(finding(f.id, filePath, f.snippet));
202    }
203    for (const f of runPageCheck('layout-rules', () => checkPageLayout(document, window))) {
204      findings.push(finding(f.id, filePath, f.snippet));
205    }
206    for (const f of runPageCheck('cream-palette', () => checkCreamPalette(document, window))) {
207      findings.push(finding(f.id, filePath, f.snippet));
208    }
209    for (const f of runPageCheck('skipped-heading', () => checkPageQualityFromDoc(document))) {
210      findings.push(finding(f.id, filePath, f.snippet));
211    }
212    for (const f of runPageCheck('html-patterns', () => checkHtmlPatterns(html).filter(item =>
213      item.id !== 'bounce-easing' && item.id !== 'layout-transition'
214    ))) {
215      findings.push(finding(f.id, filePath, f.snippet));
216    }
217    // Text-content analyzers (em-dash overuse, marketing buzzwords,
218    // numbered section markers, aphoristic cadence) live in the regex
219    // engine. Call them from here so .html files get the same coverage
220    // as .css/.tsx files. These are scoped to text content only and
221    // don't overlap with static-html's element/page rules.
222    for (const f of runPageCheck('text-content', () => runTextContentAnalyzers(html, filePath, options))) {
223      findings.push(finding(f.antipattern, filePath, f.snippet));
224    }
225  }
226 
227  const byProvider = filterByProviders(findings, options.providers);
228  // Static-HTML findings carry no line number, so only whole-file
229  // `impeccable-disable` directives apply here — exactly the standalone-document
230  // waiver this primitive targets. Bypassed by `--no-config` / `--no-inline-ignores`.
231  return options?.inlineIgnores === false ? byProvider : applyInlineIgnores(byProvider, html);
232}
233 
234export { checkStaticPageTypography, STATIC_ELEMENT_RULES, detectHtml };
235