diff --git a/.changeset/quiet-ads-fix2.md b/.changeset/quiet-ads-fix2.md new file mode 100644 index 000000000000..9ca838616fd4 --- /dev/null +++ b/.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. diff --git a/crates/biome_css_analyze/src/lint/a11y/use_generic_font_names.rs b/crates/biome_css_analyze/src/lint/a11y/use_generic_font_names.rs index 45b270864de8..59502bb81616 100644 --- a/crates/biome_css_analyze/src/lint/a11y/use_generic_font_names.rs +++ b/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 diff --git a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css b/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css index 07c2c7683a2a..f3417fb1a5ac 100644 --- a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css +++ b/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" } \ No newline at end of file +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; } +} diff --git a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css.snap b/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css.snap index d69b8d5e7611..6fb9302ded0b 100644 --- a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/invalid.css.snap +++ b/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. diff --git a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css b/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css index 697ad9499b43..a61dfd3fc2a3 100644 --- a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css +++ b/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 } \ No newline at end of file +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 */ +} \ No newline at end of file diff --git a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css.snap b/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css.snap index 28ef235ae5ce..75560b3a4c59 100644 --- a/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css.snap +++ b/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 */ +} ```