fix(css): ignore @supports queries in useGenericFontNames rule

.changeset/quiet-ads-fix2.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8845](https://github.com/biomejs/biome/issues/8845). Now `useGenericFontNames` doesn't trigger when `font` is declared inside the `@supports` at-rule.

crates/biome_css_analyze/src/lint/a11y/use_generic_font_names.rs

@@ -88,6 +88,12 @@ impl Rule for UseGenericFontNames {
             return None;
         }
 
+        // Ignore `@supports` feature declarations (the condition part).
+        // See issue: https://github.com/biomejs/biome/issues/8845
+        if is_in_supports_feature_declaration(node) {
+            return None;
+        }
+
         let is_font_family = property_name == "font-family";
         let is_font = property_name == "font";
 
@@ -158,6 +164,24 @@ fn is_in_font_face_at_rule(node: &CssGenericProperty) -> bool {
         .is_some_and(|n| matches!(n, AnyCssAtRule::CssFontFaceAtRule(_)))
 }
 
+/// Check if the node is inside a `@supports` feature declaration (the condition),
+/// not inside the declaration block of `@supports`.
+///
+/// ```css
+/// @supports (font: -apple-system-body) {
+///     a { font-family: Arial; }
+/// }
+/// ```
+///
+/// The `font: -apple-system-body` is inside the condition and should be ignored, but styles
+/// inside the `@supports { ... }` block should not.
+fn is_in_supports_feature_declaration(node: &CssGenericProperty) -> bool {
+    node.syntax()
+        .ancestors()
+        .skip(1)
+        .any(|n| n.kind() == CssSyntaxKind::CSS_SUPPORTS_FEATURE_DECLARATION)
+}
+
 fn is_shorthand_font_property_with_keyword(properties: &CssGenericComponentValueList) -> bool {
     properties.into_iter().len() == 1
         && properties

crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css

@@ -4,4 +4,9 @@ a { fOnT-fAmIlY: '  Lucida Grande '; }
 a { font-family: Times; }
 a { FONT: italic 300 16px/30px Arial, " Arial"; }
 a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
-a { font: 1em Lucida Grande, Arial, "sans-serif" }
+a { font: 1em Lucida Grande, Arial, "sans-serif" }
+
+/* styles inside @supports blocks should still be checked */
+@supports (font: -apple-system-body) {
+  a { font-family: Arial; }
+}

crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css.snap

@@ -1,7 +1,6 @@
 ---
 source: crates/biome_css_analyze/tests/spec_tests.rs
 expression: invalid.css
-snapshot_kind: text
 ---
 # Input
 ```css
@@ -12,6 +11,12 @@ a { font-family: Times; }
 a { FONT: italic 300 16px/30px Arial, " Arial"; }
 a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
 a { font: 1em Lucida Grande, Arial, "sans-serif" }
+
+/* styles inside @supports blocks should still be checked */
+@supports (font: -apple-system-body) {
+  a { font-family: Arial; }
+}
+
 ```
 
 # Diagnostics
@@ -142,6 +147,7 @@ invalid.css:6:43 lint/a11y/useGenericFontNames ━━━━━━━━━━━
   > 6 │ a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
       │                                           ^^^^^^^^^^^^^^^^^^
     7 │ a { font: 1em Lucida Grande, Arial, "sans-serif" }
+    8 │ 
 
   i Consider adding a generic font family as a fallback.
 
@@ -164,6 +170,32 @@ invalid.css:7:37 lint/a11y/useGenericFontNames ━━━━━━━━━━━
     6 │ a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
   > 7 │ a { font: 1em Lucida Grande, Arial, "sans-serif" }
       │                                     ^^^^^^^^^^^^
+    8 │ 
+    9 │ /* styles inside @supports blocks should still be checked */
+
+  i Consider adding a generic font family as a fallback.
+
+  i For examples and more information, see the MDN Web Docs
+
+  - serif
+  - sans-serif
+  - monospace
+  - etc.
+
+
+```
+
+```
+invalid.css:11:20 lint/a11y/useGenericFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Generic font family missing.
+
+     9 │ /* styles inside @supports blocks should still be checked */
+    10 │ @supports (font: -apple-system-body) {
+  > 11 │   a { font-family: Arial; }
+       │                    ^^^^^
+    12 │ }
+    13 │ 
 
   i Consider adding a generic font family as a fallback.
 

crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css

@@ -27,4 +27,9 @@ a { font-family: Arial, var(--fallback); }
 a { font: 1em "Noto Serif", var(--serif); }
 a { font: 14px/1.5 Arial, var(--fallback); }
 a { font-family: revert }
-a { font-family: revert-layer }
+a { font-family: revert-layer }
+
+/* @supports feature declarations (the condition part) should not trigger the rule */
+@supports (font: -apple-system-body) {
+  /* styles inside @supports block will be checked separately */
+}

crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css.snap

@@ -34,4 +34,9 @@ a { font: 1em "Noto Serif", var(--serif); }
 a { font: 14px/1.5 Arial, var(--fallback); }
 a { font-family: revert }
 a { font-family: revert-layer }
+
+/* @supports feature declarations (the condition part) should not trigger the rule */
+@supports (font: -apple-system-body) {
+  /* styles inside @supports block will be checked separately */
+}
 ```