eslint / eslint/css

New Rule: `no-duplicate-font-family-names`

Open
#496 1 comment 0 reactions 1 assignee Claimed by @przemyslaw-zan View on GitHub
feature
Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Description

### Rule details

Disallow duplicate names within font families.

### What type of rule is this?

Warns about a potential problem

### Example code

```css
a {
/* Duplicate family name */
font-family: Arial, Arial, sans-serif;

/* Quoted and unquoted names refer to the same family */
font-family: "Arial", Arial, sans-serif;

/* Also checked in the `font` shorthand */
font: 16px Verdana, Verdana, sans-serif;
}
```

### Prior Art

- [font-family-no-duplicate-names](https://stylelint.io/user-guide/rules/font-family-no-duplicate-names/)

### Participation

- [x] I am willing to submit a pull request to implement this rule.

### AI acknowledgment

- [ ] I did not use AI to generate this issue report.
- [x] (If the above is not checked) I have reviewed the AI-generated content before submitting.

### Additional comments

- Comparison would be case-insensitive and quote-insensitive, since family names are matched that way per spec (`"Arial"` is equivalent to `arial`).
- `font-family: monospace, monospace` is a known intentional browser hack (https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966), so an `allowFontFamilies` array option should be included as an escape hatch. Stylelint covers the same need with `ignoreFontFamilies`.
- The stylelint rule warns that it stumbles on unquoted multi-word font names and names containing escape sequences. This implementation can avoid that limitation: within each comma-separated segment, all consecutive identifiers form a single family name per the grammar (joined with single spaces), and escape sequences can be normalized before comparison, so `Times New Roman` and `"Times New Roman"` compare as equal.
- Complements the existing `font-family-fallbacks` rule. Its helpers (generic font list, CSS-wide keyword checks, `font`/`font-family` handling) are currently private to that rule's module - if extracting them to the shared `util.js` is acceptable, both rules could reuse them.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.