Fix function-linear-gradient-no-nonstandard-direction false positiv…

…es for `<color-interpolation-method>` (#6987) * Fix `function-linear-gradient-no-nonstandard-direction` false positives for `<color-interpolation-method>` * Create strong-cycles-raise.md
stylelint · Jun 27, 2023 · ff07511 · ff07511
1 parent bdec351
commit ff07511
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/strong-cycles-raise.md b/.changeset/strong-cycles-raise.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `function-linear-gradient-no-nonstandard-direction` false positives for `<color-interpolation-method>`
diff --git a/lib/rules/function-linear-gradient-no-nonstandard-direction/__tests__/index.js b/lib/rules/function-linear-gradient-no-nonstandard-direction/__tests__/index.js
@@ -55,6 +55,12 @@ testRule({
 		{
 			code: '.foo { background: linear-gradient(black, white); }',
 		},
+		{
+			code: '.foo { background: linear-gradient(in srgb to top, #fff, #000); }',
+		},
+		{
+			code: '.foo { background: linear-gradient(to top in srgb, #fff, #000); }',
+		},
 		{
 			code: '.foo { background: linear-gradient(rgba(255, 255, 255, 0.5) 0%, #000); }',
 		},
@@ -196,6 +202,16 @@ testRule({
 			endLine: 1,
 			endColumn: 41,
 		},
+		{
+			code: '.foo { background: linear-gradient(topin, #fff, #000); }',
+			description:
+				'An incorrect direction that contains the word "in", only "in" as a word on its own is ignored by this rule.',
+			message: messages.rejected,
+			line: 1,
+			column: 36,
+			endLine: 1,
+			endColumn: 41,
+		},
 		{
 			code: '.foo { background: -webkit-linear-gradient(to bottom, #fff, #000 ); }',
 			message: messages.rejected,

diff --git a/lib/rules/function-linear-gradient-no-nonstandard-direction/index.js b/lib/rules/function-linear-gradient-no-nonstandard-direction/index.js
@@ -29,6 +29,7 @@ const DIRECTION_WITHOUT_TO = new RegExp(`^(${DIRECTION.source})(?: (${DIRECTION.
 
 const DIGIT = /[\d.]/;
 const ANGLE = /^[\d.]+(?:deg|grad|rad|turn)$/;
+const IN_KEYWORD = /\bin\b/i;
 
 /**
  * @param {string} source
@@ -84,6 +85,11 @@ const rule = (primary) => {
 							return;
 						}
 
+						// Ignore gradients with modern syntax that have color space interpolation arguments
+						if (IN_KEYWORD.test(firstArg)) {
+							return;
+						}
+
 						// If the first character is a number, we can assume the user intends an angle
 						if (DIGIT.test(firstArg.charAt(0))) {
 							if (ANGLE.test(firstArg)) {