font-family-no-missing-generic-family-keyword: allow variables

This introduces a second parse loop through a font-family.

To avoid this, we could add an parameter to findFontFamily which
dictates whether to include variables in the result, but the function
would need to blindly include variables, without sanity checking them
(like whether a variable represents a number or something).

Fixes stylelint#4765

lib/rules/font-family-no-missing-generic-family-keyword/__tests__/index.js

@@ -81,6 +81,9 @@ testRule({
 		{
 			code: 'a { font: namespace.$font-family; }',
 		},
+		{
+			code: 'a { font-family: "font", var(--font); }',
+		},
 	],
 
 	reject: [

lib/rules/font-family-no-missing-generic-family-keyword/index.js

@@ -4,8 +4,10 @@
 
 const declarationValueIndex = require('../../utils/declarationValueIndex');
 const findFontFamily = require('../../utils/findFontFamily');
+const isVariable = require('../../utils/isVariable');
 const keywordSets = require('../../reference/keywordSets');
 const optionsMatches = require('../../utils/optionsMatches');
+const postcss = require('postcss');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
@@ -64,6 +66,10 @@ function rule(actual, options) {
 				return;
 			}
 
+			if (postcss.list.space(decl.value).some(isVariable)) {
+				return;
+			}
+
 			if (fontFamilies.some((node) => optionsMatches(options, 'ignoreFontFamilies', node.value))) {
 				return;
 			}