-
-
Notifications
You must be signed in to change notification settings - Fork 471
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lint): add
useGoogleFontDisplay rule (#4264)
Co-authored-by: togami <62130798+togami2864@users.noreply.github.com>
- Loading branch information
1 parent
7fffb27
commit 2a05cd4
Showing
13 changed files
with
476 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
crates/biome_js_analyze/src/lint/nursery/use_google_font_display.rs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| use biome_analyze::{ | ||
| context::RuleContext, declare_lint_rule, Ast, Rule, RuleDiagnostic, RuleSource, RuleSourceKind, | ||
| }; | ||
| use biome_console::markup; | ||
| use biome_js_syntax::jsx_ext::AnyJsxElement; | ||
| use biome_rowan::TextRange; | ||
|
|
||
| declare_lint_rule! { | ||
| /// Enforces the use of a recommended `display` strategy with Google Fonts. | ||
| /// | ||
| /// The `display` property controls how a font is displayed while it is loading. When using Google Fonts, | ||
| /// it's important to specify an appropriate value for this property to ensure good user experience and prevent layout shifts. | ||
| /// | ||
| /// This rule flags the absence of the `display` parameter, or the usage of less optimal values such as `auto`, `block`, or `fallback`. | ||
| /// Using `&display=optional` is generally recommended as it minimizes the risk of invisible text or layout shifts. | ||
| /// In cases where swapping to the custom font after it has loaded is important, consider using `&display=swap`. | ||
| /// | ||
| /// ## Examples | ||
| /// | ||
| /// ### Invalid | ||
| /// | ||
| /// ```jsx,expect_diagnostic | ||
| /// <link href="https://fonts.googleapis.com/css2?family=Krona+One" /> | ||
| /// ``` | ||
| /// | ||
| /// ```jsx,expect_diagnostic | ||
| /// <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=auto" /> | ||
| /// ``` | ||
| /// | ||
| /// ```jsx,expect_diagnostic | ||
| /// <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=block" /> | ||
| /// ``` | ||
| /// | ||
| /// ```jsx,expect_diagnostic | ||
| /// <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=fallback" /> | ||
| /// ``` | ||
| /// | ||
| /// ### Valid | ||
| /// | ||
| /// ```jsx | ||
| /// <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional" rel="stylesheet" /> | ||
| /// ``` | ||
| /// | ||
| /// ```jsx | ||
| /// <link href="https://fonts.googleapis.com/css2?display=unknown" rel="stylesheet" /> | ||
| /// ``` | ||
| /// | ||
| /// ```jsx | ||
| /// <link rel="stylesheet" /> | ||
| /// ``` | ||
| pub UseGoogleFontDisplay { | ||
| version: "next", | ||
| name: "useGoogleFontDisplay", | ||
| language: "jsx", | ||
| sources: &[RuleSource::EslintNext("google-font-display")], | ||
| source_kind: RuleSourceKind::SameLogic, | ||
| recommended: false, | ||
| } | ||
| } | ||
|
|
||
| const FORBIDDEN_VALUES: [&str; 3] = ["auto", "block", "fallback"]; | ||
|
|
||
| pub enum FontDisplayIssue { | ||
| MissingDisplayParam, | ||
| ForbiddenValue, | ||
| } | ||
|
|
||
| impl Rule for UseGoogleFontDisplay { | ||
| type Query = Ast<AnyJsxElement>; | ||
| type State = (FontDisplayIssue, TextRange); | ||
| type Signals = Option<Self::State>; | ||
| type Options = (); | ||
|
|
||
| fn run(ctx: &RuleContext<Self>) -> Self::Signals { | ||
| let element = ctx.query(); | ||
|
|
||
| if element.name().ok()?.name_value_token()?.text_trimmed() != "link" { | ||
| return None; | ||
| } | ||
|
|
||
| let href = element.find_attribute_by_name("href")?; | ||
| let initializer = href.initializer()?.value().ok()?.as_static_value()?; | ||
| let href_text = initializer.as_string_constant()?; | ||
|
|
||
| if !href_text.starts_with("https://fonts.googleapis.com/css") { | ||
| return None; | ||
| } | ||
|
|
||
| let display_param = href_text | ||
| .split('?') | ||
| .last()? | ||
| .split('&') | ||
| .find(|p| p.starts_with("display=")); | ||
| let range = initializer.range(); | ||
|
|
||
| if let Some(display_param) = display_param { | ||
| for forbidden_value in FORBIDDEN_VALUES { | ||
| if display_param.ends_with(forbidden_value) { | ||
| return Some((FontDisplayIssue::ForbiddenValue, range)); | ||
| } | ||
| } | ||
| } else { | ||
| return Some((FontDisplayIssue::MissingDisplayParam, range)); | ||
| } | ||
|
|
||
| None | ||
| } | ||
|
|
||
| fn diagnostic(_: &RuleContext<Self>, (issue, range): &Self::State) -> Option<RuleDiagnostic> { | ||
| let title = match issue { | ||
| FontDisplayIssue::MissingDisplayParam => markup! { | ||
| "The Google Font link is missing the "<Emphasis>"display"</Emphasis>" parameter." | ||
| }, | ||
| FontDisplayIssue::ForbiddenValue => markup! { | ||
| "The Google Font link has a non-recommended "<Emphasis>"display"</Emphasis>" value." | ||
| }, | ||
| }; | ||
|
|
||
| Some(RuleDiagnostic::new(rule_category!(), range, title).note( | ||
| markup! { | ||
| "Use "<Emphasis>"&display=optional"</Emphasis>" to prevent invisible text and layout shifts. If font swapping is important, use "<Emphasis>"&display=swap"</Emphasis>"." | ||
| } | ||
| )) | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
16 changes: 16 additions & 0 deletions
16
crates/biome_js_analyze/tests/specs/nursery/useGoogleFontDisplay/invalid.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <> | ||
| <link href="https://fonts.googleapis.com/css2?family=Krona+One" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=auto" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=block" /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=fallback" /> | ||
|
|
||
| <link href={"https://fonts.googleapis.com/css2?family=Krona+One"} /> | ||
| <link href={"https://fonts.googleapis.com/css2?family=Krona+One&display=auto"} /> | ||
| <link href={"https://fonts.googleapis.com/css2?family=Krona+One&display=block"} /> | ||
| <link href={"https://fonts.googleapis.com/css2?family=Krona+One&display=fallback"} /> | ||
|
|
||
| <link href={`https://fonts.googleapis.com/css2?family=Krona+One`} /> | ||
| <link href={`https://fonts.googleapis.com/css2?family=Krona+One&display=auto`} /> | ||
| <link href={`https://fonts.googleapis.com/css2?family=Krona+One&display=block`} /> | ||
| <link href={`https://fonts.googleapis.com/css2?family=Krona+One&display=fallback`} /> | ||
| </> |
Oops, something went wrong.