Skip to content

fix(css): ignore font properties inside @supports rules in useGenericFontNames#8914

Closed
ddmoney420 wants to merge 2 commits intobiomejs:mainfrom
ddmoney420:fix/use-generic-font-names-supports-false-positive
Closed

fix(css): ignore font properties inside @supports rules in useGenericFontNames#8914
ddmoney420 wants to merge 2 commits intobiomejs:mainfrom
ddmoney420:fix/use-generic-font-names-supports-false-positive

Conversation

@ddmoney420
Copy link

Summary

  • Fixed false positive in useGenericFontNames rule when font or font-family properties are used inside @supports rules
  • The @supports at-rule is used for feature detection (e.g., @supports (font: -apple-system-body) {}) and should not be treated as an actual font-family declaration

Fixes #8845

Test plan

  • Added test cases for @supports (font: -apple-system-body) {} and @supports (font-family: -apple-system) {} to valid.css
  • Tests pass locally with cargo test -p biome_css_analyze use_generic_font_names

AI Disclosure

This PR was written primarily by Claude Code.

🤖 Generated with Claude Code

…FontNames

The useGenericFontNames rule now ignores font and font-family properties
inside @supports rules, as these are used for feature detection rather than
actual font-family declarations.

Fixes biomejs#8845

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@changeset-bot
Copy link

changeset-bot bot commented Jan 29, 2026

🦋 Changeset detected

Latest commit: f665652

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@biomejs/biome Patch
@biomejs/cli-win32-x64 Patch
@biomejs/cli-win32-arm64 Patch
@biomejs/cli-darwin-x64 Patch
@biomejs/cli-darwin-arm64 Patch
@biomejs/cli-linux-x64 Patch
@biomejs/cli-linux-arm64 Patch
@biomejs/cli-linux-x64-musl Patch
@biomejs/cli-linux-arm64-musl Patch
@biomejs/wasm-web Patch
@biomejs/wasm-bundler Patch
@biomejs/wasm-nodejs Patch
@biomejs/backend-jsonrpc Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added A-Linter Area: linter L-CSS Language: CSS labels Jan 29, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 29, 2026

Walkthrough

Adds logic to the useGenericFontNames CSS a11y rule to skip linting when a declaration is inside a CSS @supports feature-detection at-rule. Introduces an internal helper that walks the AST to detect CssSupportsAtRule ancestry and early-returns to avoid analysing font / font-family tokens in @supports. Updates tests to include @supports and nested-at-rule scenarios. No public API changes.

Possibly related PRs

Suggested reviewers

  • siketyan
  • ematipico
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: fixing the useGenericFontNames rule to ignore font properties inside @supports rules.
Description check ✅ Passed The description clearly explains the fix, references issue #8845, includes test details, and discloses AI assistance appropriately.
Linked Issues check ✅ Passed The PR addresses issue #8845 by implementing the desired outcome: suppressing useGenericFontNames errors for tokens inside @supports at-rules through a helper function.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing the useGenericFontNames rule for @supports blocks, with appropriate test additions and changelog entry.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@crates/biome_css_analyze/src/lint/a11y/use_generic_font_names.rs`:
- Around line 172-178: The current is_in_supports_at_rule uses
ancestors().find(...) which only checks the first matching at-rule ancestor and
misses cases where `@supports` is higher up (e.g. `@supports` wrapping `@media`);
change the ancestor scan to test all ancestors instead of using find: call
ancestors().any(...) and inside the closure check n.kind() ==
CssSyntaxKind::CSS_AT_RULE, cast to CssAtRule, call rule().ok() and return true
when matches!(rule, AnyCssAtRule::CssSupportsAtRule(_)); update the logic in
is_in_supports_at_rule accordingly so any ancestor `@supports` is detected
(referencing is_in_supports_at_rule, CssSyntaxKind::CSS_AT_RULE, CssAtRule,
rule().ok(), AnyCssAtRule::CssSupportsAtRule).

@codspeed-hq
Copy link

codspeed-hq bot commented Jan 30, 2026

CodSpeed Performance Report

Merging this PR will not alter performance

Comparing ddmoney420:fix/use-generic-font-names-supports-false-positive (f665652) with main (2fb63a4)

Summary

✅ 29 untouched benchmarks
⏩ 126 skipped benchmarks1

Footnotes

  1. 126 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

The previous implementation using ancestors().find() only checked the
first matching at-rule ancestor. This missed cases where @supports
wraps other at-rules like @media:

  @supports (font: -apple-system-body) {
    @media screen {
      a { font-family: -apple-system; }
    }
  }

Changed to use ancestors().any() to check all ancestors for @supports.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@ddmoney420
Copy link
Author

Closing this PR — I opened too many contributions across projects and need to focus. Apologies for the noise.

@ddmoney420 ddmoney420 closed this Feb 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-Linter Area: linter L-CSS Language: CSS

Projects

None yet

Development

Successfully merging this pull request may close these issues.

💅 useGenericFontNames triggers in the @supports query

2 participants