diff --git a/packages/core/src/lint/rules/fonts.test.ts b/packages/core/src/lint/rules/fonts.test.ts index 395bdafcf..6e28c881a 100644 --- a/packages/core/src/lint/rules/fonts.test.ts +++ b/packages/core/src/lint/rules/fonts.test.ts @@ -215,5 +215,16 @@ describe("font rules", () => { const findings = await findByCode(html, "font_family_without_font_face"); expect(findings).toHaveLength(0); }); + + it("matches @font-face even when a CSS comment inside the block contains a brace (#1534)", async () => { + const html = `
+ +
`; + const findings = await findByCode(html, "font_family_without_font_face"); + expect(findings).toHaveLength(0); + }); }); }); diff --git a/packages/core/src/lint/rules/fonts.ts b/packages/core/src/lint/rules/fonts.ts index 9f84a3401..0f61d9ce3 100644 --- a/packages/core/src/lint/rules/fonts.ts +++ b/packages/core/src/lint/rules/fonts.ts @@ -22,13 +22,25 @@ const GENERIC_FAMILIES = new Set([ "revert", ]); +// A CSS comment can contain a `}` (e.g. `@font-face { /* 400 } regular */ +// font-family: 'X'; ... }`), which truncates the naive `@font-face\s*\{[^}]*\}` +// block match at the comment's brace — so the rule never sees the real +// `font-family` and reports a false-positive font_family_without_font_face. +// Large/"framework" stylesheets hit this far more often than minimal ones, +// which is why a simple