Add support for multi-argument functions to `function-calc-no-unspace…

…d-operator` (#7670)
stylelint · May 1, 2024 · 5dc44b2 · 5dc44b2
1 parent ab9ae27
commit 5dc44b2
Show file tree

Hide file tree

Showing 3 changed files with 955 additions and 375 deletions.
diff --git a/lib/rules/function-calc-no-unspaced-operator/__tests__/index.mjs b/lib/rules/function-calc-no-unspaced-operator/__tests__/index.mjs
@@ -227,16 +227,6 @@ testRule({
 		{
 			code: 'a { padding: calc(); }',
 		},
-		{
-			code: 'a { font-size: clamp(1rem, 2.5vw, 1rem+1rem); }',
-			description:
-				'multiple argument: functions that accept more than one argument are not supported yet',
-		},
-		{
-			code: 'a { width: min(25vw+25vw); }',
-			description:
-				'single argument: functions that accept more than one argument are not supported yet',
-		},
 		{
 			code: 'a { padding: calc(1px --2px); }',
 			description: '"--" prefixed token is considered as <ident-token>',
@@ -247,6 +237,24 @@ testRule({
 		{
 			code: 'a { padding: calc(1px + 2- ); }',
 		},
+		{
+			code: 'a { padding: 10px calc([10px+5px]); }',
+			description: 'simple blocks with square brackets are ignored',
+		},
+		{
+			code: 'a { padding: 10px calc({10px+5px}); }',
+			description: 'simple blocks with curly braces are ignored',
+		},
+		{
+			code: 'a { top: calc(5--6px-7px); }',
+			description: 'custom units',
+		},
+		{
+			code: 'a { top: calc(10px*var(--foo, 10px 20px)); }',
+		},
+		{
+			code: 'a { top: calc(10px*var(--foo, 10px+20px)); }',
+		},
 	],
 
 	reject: [
@@ -576,6 +584,16 @@ testRule({
 			endLine: 1,
 			endColumn: 24,
 		},
+		{
+			code: 'a { padding: calc(1px+2px+3px); }',
+			fixed: 'a { padding: calc(1px + 2px + 3px); }',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 26, endColumn: 27 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 26, endColumn: 27 },
+			],
+		},
 		{
 			code: 'a { padding: calc(1px+2px-3px); }',
 			fixed: 'a { padding: calc(1px + 2px - 3px); }',
@@ -586,6 +604,101 @@ testRule({
 				{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
 			],
 		},
+		{
+			code: 'a { padding: calc(1px+2px-3px-4px); }',
+			fixed: 'a { padding: calc(1px + 2px - 3px - 4px); }',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
+				{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
+				{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
+				{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 30, endColumn: 31 },
+				{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 30, endColumn: 31 },
+			],
+		},
+		{
+			code: 'a { top: calc((1px+ 1px)); }',
+			fixed: 'a { top: calc((1px + 1px)); }',
+			description: 'nested math expression',
+			message: messages.expectedBefore('+'),
+			line: 1,
+			column: 19,
+			endLine: 1,
+			endColumn: 20,
+		},
+		{
+			code: 'a { top: calc(calc(1px+ 1px)); }',
+			fixed: 'a { top: calc(calc(1px + 1px)); }',
+			description: 'nested math expression',
+			message: messages.expectedBefore('+'),
+			line: 1,
+			column: 23,
+			endLine: 1,
+			endColumn: 24,
+		},
+		{
+			code: 'a { top: calc(((1px+ 1px))); }',
+			fixed: 'a { top: calc(((1px + 1px))); }',
+			description: 'nested math expression',
+			message: messages.expectedBefore('+'),
+			line: 1,
+			column: 20,
+			endLine: 1,
+			endColumn: 21,
+		},
+		{
+			code: 'a { font-size: clamp(1rem, 2.5vw, 1rem+1rem); }',
+			fixed: 'a { font-size: clamp(1rem, 2.5vw, 1rem + 1rem); }',
+			description: 'multiple argument functions',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 39, endColumn: 40 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 39, endColumn: 40 },
+			],
+		},
+		{
+			code: 'a { top: clamp(1px +2px, 3px-4px, none); }',
+			fixed: 'a { top: clamp(1px + 2px, 3px - 4px, none); }',
+			description: 'multiple argument functions',
+			warnings: [
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
+				{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 29, endColumn: 30 },
+				{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 29, endColumn: 30 },
+			],
+		},
+		{
+			code: 'a { width: min(25vw+25vw); }',
+			fixed: 'a { width: min(25vw + 25vw); }',
+			description: 'multiple argument functions',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
+			],
+		},
+		{
+			code: 'a { padding: calc(1px+ 2px) calc(3px+ 4px); }',
+			fixed: 'a { padding: calc(1px + 2px) calc(3px + 4px); }',
+			description: 'nested math expression',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 37, endColumn: 38 },
+			],
+		},
+		{
+			code: 'a { top: rgb(from red calc(r+1) calc(g-+2) calc(clamp(10px+2px, g+2, none))); }',
+			fixed:
+				'a { top: rgb(from red calc(r + 1) calc(g- + 2) calc(clamp(10px + 2px, g + 2, none))); }',
+			description: 'nested math expression',
+			warnings: [
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 29, endColumn: 30 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 29, endColumn: 30 },
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 40, endColumn: 41 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 40, endColumn: 41 },
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 59, endColumn: 60 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 59, endColumn: 60 },
+				{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 66, endColumn: 67 },
+				{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 66, endColumn: 67 },
+			],
+		},
 	],
 });