Skip to content

fix(lint): stop font_family_without_font_face flagging system-ui stacks and var()#1796

Draft
miguel-heygen wants to merge 1 commit into
mainfrom
worktree-fix+lint-font-system-stack-var-false-positive
Draft

fix(lint): stop font_family_without_font_face flagging system-ui stacks and var()#1796
miguel-heygen wants to merge 1 commit into
mainfrom
worktree-fix+lint-font-system-stack-var-false-positive

Conversation

@miguel-heygen

Copy link
Copy Markdown
Collaborator

Problem

The font_family_without_font_face lint rule raises a blocking error on two legitimate, extremely common patterns, forcing authors to mutilate ordinary CSS to get a clean lint:

  1. The -apple-system, BlinkMacSystemFont, ... system-ui stack. Those two tokens are the standard cross-browser incantation for the platform UI font (synonyms of system-ui). They name no font file, so demanding an @font-face for them is wrong. The stack appears in nearly every CSS reset, so any default-styled composition trips the rule.

  2. font-family: var(--x) indirection. The shared family extractor treated the literal string var(--heading) as a font name. The linter cannot statically resolve a custom property, so it must not flag it. (var(--x, 'Inter') fallbacks were also mis-parsed by the comma split.)

Both surface as error severity, which blocks the render gate.

Fix (root cause)

  • Add -apple-system and blinkmacsystemfont to GENERIC_FAMILIES (they are system-ui synonyms).
  • Skip any parenthesised (function) token in the shared extractUsedFontFamilies, so both font_family_without_font_face and system_font_will_alias stop misreading var().

A real undeclared font sitting in the same stack (e.g. 'Aeonik', -apple-system, sans-serif) is still flagged, exactly as before.

Tests

Added cases to fonts.test.ts covering the system-ui stack, var() indirection, var() with a quoted fallback, and the still-flagged mixed case. Reproduced the false positives first (both errored pre-fix), then confirmed the fix via the unit harness and the actual hyperframes lint CLI. Full lint package suite: 266 passing.

…ks and var()

The font_family_without_font_face rule raised a blocking error on two
legitimate, very common cases:

1. The `-apple-system, BlinkMacSystemFont` system-ui stack. These two
   tokens are the cross-browser incantation for the platform UI font
   (synonyms of `system-ui`); they name no font file, so demanding an
   @font-face for them is wrong. They appear in almost every CSS reset.

2. `font-family: var(--x)` indirection. The shared family extractor took
   the literal `var(--heading)` as a font name. The linter cannot
   statically resolve a custom property, so it must not flag it.

Fix at the root: add the two system-ui synonyms to GENERIC_FAMILIES, and
skip any parenthesised (function) token in the shared family extractor so
both this rule and system_font_will_alias stop misreading var(). A real
undeclared font sitting in the same stack is still flagged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant