Fix false negatives for CSS variables in alpha-value-notation (#5130)

stylelint · Feb 11, 2021 · 57940b6 · 57940b6
1 parent d01c033
commit 57940b6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/lib/rules/alpha-value-notation/__tests__/index.js b/lib/rules/alpha-value-notation/__tests__/index.js
@@ -46,6 +46,9 @@ testRule({
 		{
 			code: 'a { color: hsla(var(--hue), var(--sat), var(--sat), var(--alpha)) }',
 		},
+		{
+			code: 'a { color: hsl(var(--hsl) / 0.5) }',
+		},
 		{
 			code: 'a { color: lch(56.29% 19.86 10 / var(--alpha)) }',
 		},
@@ -100,6 +103,20 @@ testRule({
 			line: 1,
 			column: 26,
 		},
+		{
+			code: 'a { color: hsl(var(--hsl) / 50%) }',
+			fixed: 'a { color: hsl(var(--hsl) / 0.5) }',
+			message: messages.expected('50%', '0.5'),
+			line: 1,
+			column: 29,
+		},
+		{
+			code: 'a { color: hsl(var(--hsl) / /* comment*/ 50%) }',
+			fixed: 'a { color: hsl(var(--hsl) / /* comment*/ 0.5) }',
+			message: messages.expected('50%', '0.5'),
+			line: 1,
+			column: 42,
+		},
 		{
 			code: stripIndent`
 				a {

diff --git a/lib/rules/alpha-value-notation/index.js b/lib/rules/alpha-value-notation/index.js
@@ -130,6 +130,14 @@ function findAlphaInFunction(node) {
 
 	if (args.length === 4) return args[3];
 
+	const slashNodeIndex = node.nodes.findIndex(({ type, value }) => type === 'div' && value === '/');
+
+	if (slashNodeIndex !== -1) {
+		const nodesAfterSlash = node.nodes.slice(slashNodeIndex + 1, node.nodes.length);
+
+		return nodesAfterSlash.find(({ type }) => type === 'word');
+	}
+
 	return false;
 }