CSS @import and url() references resolve to existing files
Why it matters
An @import './variables.css' or url('/fonts/Inter.woff2') pointing at a file that does not exist produces no build error in most setups — the bundler emits a warning, the missing font falls back to the system default, and the broken background shows as a color block. The regression is invisible in code review and invisible in the build log, but the rendered page loses the typography and visuals the design system intended. AI-generated CSS especially drifts this way when the model hallucinates font filenames.
Severity rationale
Medium because broken CSS references silently degrade fonts and layouts without a build-time error.
Remediation
Open the flagged CSS file and for each unresolved reference either create the file at the path or correct the path to an existing one. A typical Next.js src/app/globals.css layout:
@import "tailwindcss";
@import './design-tokens.css';
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-Regular.woff2') format('woff2');
}
Confirm the font file sits at public/fonts/Inter-Regular.woff2.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Hallucinated References Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from ai-slop-hallucinations·automated