Fix false positives for variables in font-family-no-missing-generic-f…

…amily-keyword (#5240)
stylelint · Apr 20, 2021 · 4b7f669 · 4b7f669
1 parent 918a31a
commit 4b7f669
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 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
@@ -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
@@ -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
@@ -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;
 			}