Merge pull request #6844 from stylelint/fix-alpha-value-notation-fals…

…e-negatives-for-oklab-oklch-and-color--generous-king-crab-a907137417 Fix `alpha-value-notation` false negatives for `oklab()`, `oklch()`, and `color()`
stylelint · May 14, 2023 · f5617ea · f5617ea
2 parents 8c75700 + d9b1348
commit f5617ea
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/.changeset/healthy-planets-hide.md b/.changeset/healthy-planets-hide.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `alpha-value-notation` false negatives for `oklab()`, `oklch()`, and `color()`
diff --git a/lib/rules/alpha-value-notation/__tests__/index.js b/lib/rules/alpha-value-notation/__tests__/index.js
@@ -52,12 +52,44 @@ testRule({
 		{
 			code: 'a { color: lch(56.29% 19.86 10 / var(--alpha)) }',
 		},
+		{
+			code: 'a { color: oklch(56.29% 19.86 10 / var(--alpha)) }',
+		},
 		{
 			code: 'a { color: rgba(0, 0, 0, 0.5/*comment*/) }',
 		},
 		{
 			code: 'a { color: rgb(0 0 0 / /*comment*/0.5) }',
 		},
+		{
+			code: 'a { color: color(display-p3 0 0 0 / 0.5) }',
+		},
+
+		// Relative color syntax
+		{
+			code: 'a { color: rgb(from blue 0 0 0 / 0.5) }',
+		},
+		{
+			code: 'a { color: hsl(from blue 198deg 28% 50% / .50) }',
+		},
+		{
+			code: 'a { color: RGB(from blue 0 0 0 / 0.5) }',
+		},
+		{
+			code: 'a { color: hsl(from blue var(--hsl) / 0.5) }',
+		},
+		{
+			code: 'a { color: lch(from rgb(0 0 0) 56.29% 19.86 10 / var(--alpha)) }',
+		},
+		{
+			code: 'a { color: oklch(from #fff 56.29% 19.86 10 / var(--alpha)) }',
+		},
+		{
+			code: 'a { color: rgb(from blue 0 0 0 / /*comment*/0.5) }',
+		},
+		{
+			code: 'a { color: color(from blue display-p3 0 0 0 / 0.5) }',
+		},
 	],
 
 	reject: [
@@ -198,6 +230,35 @@ testRule({
 			endColumn: 18,
 			description: 'properly deals with floating-point conversions',
 		},
+		{
+			code: 'a { color: rgb(from rgb(127 127 127 / 25%) 0 0 0 / 50%) }',
+			fixed: 'a { color: rgb(from rgb(127 127 127 / 0.25) 0 0 0 / 0.5) }',
+			warnings: [
+				{
+					message: messages.expected('50%', '0.5'),
+					line: 1,
+					column: 52,
+					endLine: 1,
+					endColumn: 55,
+				},
+				{
+					message: messages.expected('25%', '0.25'),
+					line: 1,
+					column: 39,
+					endLine: 1,
+					endColumn: 42,
+				},
+			],
+		},
+		{
+			code: 'a { color: color(display-p3 0 0 0 / 50%) }',
+			fixed: 'a { color: color(display-p3 0 0 0 / 0.5) }',
+			message: messages.expected('50%', '0.5'),
+			line: 1,
+			column: 37,
+			endLine: 1,
+			endColumn: 40,
+		},
 	],
 });
 

diff --git a/lib/rules/alpha-value-notation/index.js b/lib/rules/alpha-value-notation/index.js
@@ -32,7 +32,18 @@ const ALPHA_PROPS = new Set([
 	'stop-opacity',
 	'stroke-opacity',
 ]);
-const ALPHA_FUNCS = new Set(['hsl', 'hsla', 'hwb', 'lab', 'lch', 'rgb', 'rgba']);
+const ALPHA_FUNCS = new Set([
+	'color',
+	'hsl',
+	'hsla',
+	'hwb',
+	'lab',
+	'lch',
+	'oklab',
+	'oklch',
+	'rgb',
+	'rgba',
+]);
 
 /** @type {import('stylelint').Rule} */
 const rule = (primary, secondaryOptions, context) => {