add recursive check and add $ check

stylelint · Dec 20, 2021 · d630d96 · d630d96
1 parent f351639
commit d630d96
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/lib/rules/color-function-notation/__tests__/index.js b/lib/rules/color-function-notation/__tests__/index.js
@@ -108,6 +108,13 @@ testRule({
 			line: 1,
 			column: 12,
 		},
+		{
+			code: 'a { color: rgba(var(--r, 20), var(--g), var(--b), 0.6); }',
+			fixed: 'a { color: rgb(var(--r, 20) var(--g) var(--b) / 0.6); }',
+			message: messages.expected('modern'),
+			line: 1,
+			column: 12,
+		},
 		{
 			code: stripIndent`
 				a {
@@ -378,6 +385,12 @@ testRule({
 		{
 			code: 'a { color: rgb($a $b $c / $d) }',
 		},
+		{
+			code: 'a { color: rgb($color-var, 50%); }',
+		},
+		{
+			code: 'a { color: rgba(color.mix(#000, #fff, 35%), 0.6); }',
+		},
 		{
 			code: 'a { color: rgba(#fff, 0.85) }',
 		},

diff --git a/lib/utils/isStandardSyntaxColorFunction.js b/lib/utils/isStandardSyntaxColorFunction.js
@@ -11,9 +11,12 @@ const isStandardSyntaxFunction = require('./isStandardSyntaxFunction');
 module.exports = function isStandardSyntaxColorFunction(node) {
 	if (!isStandardSyntaxFunction(node)) return false;
 
-	// scss rgba() function can accept a hex as the first param
+	// scss can accept a #hex, or $var variables and we need to check all nested fn nodes
 	for (const fnNode of node.nodes) {
-		if (fnNode.type === 'word' && fnNode.value.startsWith('#')) return false;
+		if (fnNode.type === 'function') return isStandardSyntaxColorFunction(fnNode);
+
+		if (fnNode.type === 'word' && (fnNode.value.startsWith('#') || fnNode.value.startsWith('$')))
+			return false;
 	}
 
 	return true;