Fix false positives for variables and color functions in color-functi…

…on-notation (#5793)
stylelint · Dec 21, 2021 · 217e685 · 217e685
1 parent b9785cd
commit 217e685
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 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,9 +385,21 @@ testRule({
 		{
 			code: 'a { color: rgb($a $b $c / $d) }',
 		},
+		{
+			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) }',
 		},
+		{
+			code: 'a { color: rgba($a, $b, $c, $d) }',
+		},
 	],
 
 	reject: [
@@ -392,11 +411,11 @@ testRule({
 			column: 5,
 		},
 		{
-			code: 'a { color: rgba($a, $b, $c, $d) }',
-			fixed: 'a { color: rgb($a $b $c / $d) }',
+			code: '$a: rgb(0, 0, 0, 0);',
+			fixed: '$a: rgb(0 0 0 / 0);',
 			message: messages.expected('modern'),
 			line: 1,
-			column: 12,
+			column: 5,
 		},
 	],
 });
@@ -416,6 +435,9 @@ testRule({
 		{
 			code: 'a { color: rgba($a, $b, $c, $d) }',
 		},
+		{
+			code: 'a { color: rgb($a $b $c / $d) }',
+		},
 	],
 
 	reject: [
@@ -425,11 +447,5 @@ testRule({
 			line: 1,
 			column: 5,
 		},
-		{
-			code: 'a { color: rgb($a $b $c / $d) }',
-			message: messages.expected('legacy'),
-			line: 1,
-			column: 12,
-		},
 	],
 });
diff --git a/lib/utils/__tests__/isStandardSyntaxColorFunction.test.js b/lib/utils/__tests__/isStandardSyntaxColorFunction.test.js
@@ -52,6 +52,20 @@ describe('isStandardSyntaxColorFunction', () => {
 			false,
 		);
 	});
+
+	it('scss variable', () => {
+		expect(isStandardSyntaxColorFunction(func('a { color: rbga($var, 0.5) }'))).toBe(false);
+	});
+
+	it('scss variable in last param', () => {
+		expect(isStandardSyntaxColorFunction(func('a { color: rbg(0 0 0 / $var) }'))).toBe(false);
+	});
+
+	it('scss nested function', () => {
+		expect(
+			isStandardSyntaxColorFunction(func('a { color: rgba(color.mix(#000, #fff, 35%), 0.6); }')),
+		).toBe(false);
+	});
 });
 
 function func(css) {

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;