Fix alpha-value-notation false positives for color() (#6885)

* Fix `alpha-value-notation` false positives for `color()` * cleanup * Create neat-owls-knock.md
stylelint · Jun 2, 2023 · 165c827 · 165c827
1 parent 7206cfc
commit 165c827
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/.changeset/neat-owls-knock.md b/.changeset/neat-owls-knock.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `alpha-value-notation` false positives for `color()`
diff --git a/lib/rules/alpha-value-notation/__tests__/index.js b/lib/rules/alpha-value-notation/__tests__/index.js
@@ -64,6 +64,9 @@ testRule({
 		{
 			code: 'a { color: color(display-p3 0 0 0 / 0.5) }',
 		},
+		{
+			code: 'a { color: color(display-p3 0 0 0) }',
+		},
 
 		// Relative color syntax
 		{
@@ -286,6 +289,12 @@ testRule({
 		{
 			code: 'a { color: lch(56.29% 19.86 10 / var(--alpha)) }',
 		},
+		{
+			code: 'a { color: color(display-p3 0 0 0) }',
+		},
+		{
+			code: 'a { color: color(display-p3 0 0 0 / 50%) }',
+		},
 	],
 
 	reject: [

diff --git a/lib/rules/alpha-value-notation/index.js b/lib/rules/alpha-value-notation/index.js
@@ -180,9 +180,15 @@ function findAlphaInValue(node) {
  * @returns {import('postcss-value-parser').Node | undefined}
  */
 function findAlphaInFunction(node) {
-	const args = node.nodes.filter(({ type }) => type === 'word' || type === 'function');
+	const legacySyntax = node.nodes.some(({ type, value }) => type === 'div' && value === ',');
 
-	if (args.length === 4) return args[3];
+	if (legacySyntax) {
+		const args = node.nodes.filter(({ type }) => type === 'word' || type === 'function');
+
+		if (args.length === 4) return args[3];
+
+		return undefined;
+	}
 
 	const slashNodeIndex = node.nodes.findIndex(({ type, value }) => type === 'div' && value === '/');