diff --git a/.changeset/skip-supports-feature.md b/.changeset/skip-supports-feature.md new file mode 100644 index 000000000000..b5dc0bbe4e57 --- /dev/null +++ b/.changeset/skip-supports-feature.md @@ -0,0 +1,5 @@ +--- +"@biomejs/biome": patch +--- + +fix(css): skip `useGenericFontNames` rule in `@supports` feature declarations 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..c8dccabf96ca 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 @@ -27,6 +27,7 @@ declare_lint_rule! { /// - Property with a keyword value such as `inherit`, `initial`. /// - The last value being a CSS variable. /// - `font-family` property in an `@font-face` rule. + /// - Properties inside an `@supports` feature declaration (used for feature testing). /// /// ## Examples /// @@ -88,6 +89,12 @@ impl Rule for UseGenericFontNames { return None; } + // Ignore `@supports` feature declarations since they test for browser support, + // not actual font usage. e.g: @supports (font: -apple-system-body) { ... } + 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 +165,14 @@ fn is_in_font_face_at_rule(node: &CssGenericProperty) -> bool { .is_some_and(|n| matches!(n, AnyCssAtRule::CssFontFaceAtRule(_))) } +/// Check if the property is inside an `@supports` feature declaration. +/// Properties in @supports conditions test for browser support, not actual font usage. +fn is_in_supports_feature_declaration(node: &CssGenericProperty) -> bool { + node.syntax() + .ancestors() + .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/valid.css b/crates/biome_css_analyze/tests/specs/a11y/useGenericFontNames/valid.css index 697ad9499b43..a6881a58c86e 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,6 @@ 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 (font: -apple-system-body) { } +@supports (font-family: -apple-system) { } \ 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..da0bd2f23108 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,6 @@ 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 (font: -apple-system-body) { } +@supports (font-family: -apple-system) { } ```