From 2fafda6d4b748cc13e68a6b3d773f7f3263d8423 Mon Sep 17 00:00:00 2001
From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>
Date: Mon, 12 Apr 2021 10:43:24 +0900
Subject: [PATCH] `font-family-no-missing-generic-family-keyword` ignore any
 variables

This change aims to ignore any variables (e.g. `var()`, `$var`, `@var` etc.)
for the `font-family-no-missing-generic-family-keyword` rule.

Fix #4765 (retry of #4806)
---
 .../README.md                                     | 10 ++++++++++
 .../__tests__/index.js                            | 12 ++++++++++++
 .../index.js                                      | 15 +++++++++++----
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/lib/rules/font-family-no-missing-generic-family-keyword/README.md b/lib/rules/font-family-no-missing-generic-family-keyword/README.md
index bd05c09185..a7ba77f294 100644
--- a/lib/rules/font-family-no-missing-generic-family-keyword/README.md
+++ b/lib/rules/font-family-no-missing-generic-family-keyword/README.md
@@ -54,6 +54,16 @@ a { font: inherit; }
 a { font: caption; }
 ```
 
+<!-- prettier-ignore -->
+```css
+a { font-family: var(--font-family-common); }
+```
+
+<!-- prettier-ignore -->
+```css
+a { font-family: Helvetica, var(--font-family-common); }
+```
+
 ## Optional secondary options
 
 ### `ignoreFontFamilies: ["/regex/", /regex/, "string"]`
diff --git a/lib/rules/font-family-no-missing-generic-family-keyword/__tests__/index.js b/lib/rules/font-family-no-missing-generic-family-keyword/__tests__/index.js
index 90ce64a7dd..84dea38ec7 100644
--- a/lib/rules/font-family-no-missing-generic-family-keyword/__tests__/index.js
+++ b/lib/rules/font-family-no-missing-generic-family-keyword/__tests__/index.js
@@ -75,12 +75,24 @@ testRule({
 		{
 			code: 'a { font: @font-family; }',
 		},
+		{
+			code: 'a { font: "font", @font-family; }',
+		},
 		{
 			code: 'a { font: $font-family; }',
 		},
+		{
+			code: 'a { font: "font", $font-family; }',
+		},
 		{
 			code: 'a { font: namespace.$font-family; }',
 		},
+		{
+			code: 'a { font: "font", namespace.$font-family; }',
+		},
+		{
+			code: 'a { font-family: var(--font); }',
+		},
 		{
 			code: 'a { font-family: "font", var(--font); }',
 		},
diff --git a/lib/rules/font-family-no-missing-generic-family-keyword/index.js b/lib/rules/font-family-no-missing-generic-family-keyword/index.js
index 5ee7dd6617..c1abda31be 100644
--- a/lib/rules/font-family-no-missing-generic-family-keyword/index.js
+++ b/lib/rules/font-family-no-missing-generic-family-keyword/index.js
@@ -4,6 +4,7 @@
 
 const declarationValueIndex = require('../../utils/declarationValueIndex');
 const findFontFamily = require('../../utils/findFontFamily');
+const isStandardSyntaxValue = require('../../utils/isStandardSyntaxValue');
 const isVariable = require('../../utils/isVariable');
 const keywordSets = require('../../reference/keywordSets');
 const optionsMatches = require('../../utils/optionsMatches');
@@ -23,6 +24,12 @@ const messages = ruleMessages(ruleName, {
 const isFamilyNameKeyword = (node) =>
 	!node.quote && keywordSets.fontFamilyKeywords.has(node.value.toLowerCase());
 
+const isLastFontFamilyVariable = (value) => {
+	const lastValue = postcss.list.comma(value).pop();
+
+	return isVariable(lastValue) || !isStandardSyntaxValue(lastValue);
+};
+
 function rule(actual, options) {
 	return (root, result) => {
 		const validOptions = validateOptions(
@@ -56,6 +63,10 @@ function rule(actual, options) {
 				return;
 			}
 
+			if (isLastFontFamilyVariable(decl.value)) {
+				return;
+			}
+
 			const fontFamilies = findFontFamily(decl.value);
 
 			if (fontFamilies.length === 0) {
@@ -66,10 +77,6 @@ function rule(actual, options) {
 				return;
 			}
 
-			if (postcss.list.space(decl.value).some(isVariable)) {
-				return;
-			}
-
 			if (fontFamilies.some((node) => optionsMatches(options, 'ignoreFontFamilies', node.value))) {
 				return;
 			}