fix: skip CSS variables in function-linear-gradient-no-nonstandard-direction rule

Solomon-mithra · Mouvedia · Solomon-mithra · commit 559795ed2233 · 2025-06-30T00:37:21.000-07:00
- Add test cases for CSS variables containing 'stop'
- Skip direction validation for CSS variables to prevent false positives
- Fixes issue with var(--tw-gradient-stops) and similar variable names

Co-authored-by: Gary Gozlan &lt;Mouvedia@users.noreply.github.com&gt;
diff --git a/.changeset/fluffy-waves-float.md b/.changeset/fluffy-waves-float.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `function-linear-gradient-no-nonstandard-direction` false positives for CSS variables' names containing a direction substring
diff --git a/lib/rules/function-linear-gradient-no-nonstandard-direction/__tests__/index.mjs b/lib/rules/function-linear-gradient-no-nonstandard-direction/__tests__/index.mjs
@@ -102,6 +102,19 @@ testRule({
 		{
 			code: '.foo { background: url(foo.png), -ms-linear-gradient(bottom, #fff, #000 ), url(bar.png); }',
 		},
+		// Test cases for CSS variables containing "stop" - should not trigger warnings
+		{
+			code: '.foo { background: linear-gradient(var(--stop)); }',
+		},
+		{
+			code: '.foo { background: linear-gradient(var(--tw-gradient-stops)); }',
+		},
+		{
+			code: '.foo { background: linear-gradient(var(--gradient-stop-1), var(--gradient-stop-2)); }',
+		},
+		{
+			code: '.foo { background: linear-gradient(var(--stop-color)); }',
+		},
 	],
 
 	reject: [
diff --git a/lib/rules/function-linear-gradient-no-nonstandard-direction/index.cjs b/lib/rules/function-linear-gradient-no-nonstandard-direction/index.cjs
diff --git a/lib/rules/function-linear-gradient-no-nonstandard-direction/index.mjs b/lib/rules/function-linear-gradient-no-nonstandard-direction/index.mjs
@@ -84,6 +84,11 @@ const rule = (primary) => {
 							return;
 						}
 
+						// Skip direction validation for CSS variables
+						if (firstArg.startsWith('var(')) {
+							return;
+						}
+
 						// Ignore gradients with modern syntax that have color space interpolation arguments
 						if (IN_KEYWORD.test(firstArg)) {
 							return;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"stylelint": patch
 +---
++
 +Fixed: `function-linear-gradient-no-nonstandard-direction` false positives for CSS variables' names containing a direction substring