Skip to content

fix: allow CSS-wide keywords in font-family-fallbacks #391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sethamus wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: allow CSS-wide keywords in font-family-fallbacks #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51411b6
fix: allow CSS-wide keywords in font-family-fallbacks
sethamus Mar 4, 2026
fe1d6b2
add CSS-wide keyword examples
sethamus Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions docs/rules/font-family-fallbacks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ It is a best practice to use a fallback font and a generic font last in the `fon

## Rule Details

This rule enforces the use of fallback fonts and a generic font last in `font-family` and `font` property.
This rule enforces the use of fallback fonts and a generic font last in `font-family` and `font` property. Global values (`inherit`, `initial`, `revert`, `revert-layer`, `unset`) are always allowed.

Example of **incorrect** code:

Expand Down Expand Up @@ -56,9 +56,13 @@ b {
.foo {
font-family: var(--my-font);
}

.bar {
font-family: inherit;
}
```

Fonts can also be specified using the `font` property, which acts as a shorthand for several font-related properties, including `font-family`. You must specify both the `font-size` and `font-family` when using `font` property.
Fonts can also be specified using the `font` property, which acts as a shorthand for several font-related properties, including `font-family`. You must specify both the `font-size` and `font-family` when using `font` property, unless you are using a CSS-wide keyword.

Example of **incorrect** code:

Expand Down Expand Up @@ -116,6 +120,10 @@ b {
1em var(--font),
monospace;
}

.baz {
font: unset;
}
```

## When Not to Use It
Expand Down
38 changes: 38 additions & 0 deletions src/rules/font-family-fallbacks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,32 @@ const genericFonts = new Set([
"fangsong",
]);

const cssWideKeywords = new Set([
Copy link

@DMartens DMartens Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use sourceCode.lexer.cssWideKeywordsSyntax.map instead of this set?
This would allow users to fork the syntax and add css-wide keyword.

Copy link
Contributor Author

@sethamus sethamus Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What’s the motivating use case for extending cssWideKeywords?

Copy link
Member

@nzakas nzakas Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good idea for maintenance purposes. It gives us one less spot to update should things change.

"inherit",
"initial",
"unset",
"revert",
"revert-layer",
]);

/**
* Check if the value is a CSS-wide keyword.
* @param {string} value The value to check.
* @returns {boolean} True if the value is a CSS-wide keyword, false otherwise.
*/
function isCSSWideKeyword(value) {
return cssWideKeywords.has(value.trim().toLowerCase());
}

/**
* Check if the node is an identifier with a CSS-wide keyword.
* @param {Object} node The node to check.
* @returns {boolean} True if the node is a CSS-wide keyword identifier, false otherwise.
*/
function isCSSWideKeywordIdentifier(node) {
return node.type === "Identifier" && isCSSWideKeyword(node.name);
}

/**
* Check if the node is a CSS variable function.
* @param {Object} node The node to check.
Expand All @@ -55,6 +81,10 @@ function reportFontWithoutFallbacksInFontProperty(
context,
node,
) {
if (isCSSWideKeyword(fontPropertyValues)) {
return;
}

const valueList = fontPropertyValues.split(",").map(v => v.trim());

if (valueList.length === 1) {
Expand Down Expand Up @@ -120,6 +150,10 @@ export default {
const valueArr = node.children;

if (valueArr.length === 1) {
if (isCSSWideKeywordIdentifier(valueArr[0])) {
return;
}

if (
valueArr[0].type === "Function" &&
valueArr[0].name === "var"
Expand All @@ -133,6 +167,10 @@ export default {
return;
}

if (isCSSWideKeyword(variableValue)) {
return;
}

const variableList = variableValue
.split(",")
.map(v => v.trim());
Expand Down
12 changes: 12 additions & 0 deletions tests/rules/font-family-fallbacks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,20 @@ const ruleTester = new RuleTester({ plugins: { css }, language: "css/css" });

ruleTester.run("font-family-fallbacks", rule, {
valid: [
"a { font-family: inherit; }",
"a { font-family: initial; }",
"a { font-family: revert; }",
"a { font-family: revert-layer; }",
"a { font-family: unset; }",
"a { font: inherit; }",
"a { font: initial; }",
"a { font: revert; }",
"a { font: revert-layer; }",
"a { font: unset; }",
":root { --my-font: sans-serif; } a { font-family: var(--my-font); }",
":root { --foo: 3rem; } a { font-family: var(--my-font); }",
":root { --my-font: inherit; } a { font-family: var(--my-font); }",
":root { --my-font-value: inherit; } a { font: var(--my-font-value); }",
":root { --my-font: 'Arial', sans-serif; } a { font-family: var(--my-font); }",
":root { --my-font: 'Arial', 'Segoe UI Emoji', serif; } a { font-family: var(--my-font); }",
"a { font-family: serif; }",
Expand Down