Merge branch 'main' into fix-no-unknown-false-positives-for-latest-specs-by-integrating-csstools-css-syntax-patches-for-csstree--adaptable-jaguar-e2fb11b478

romainmenke · web-flow · commit b092024d91b5 · 2025-11-27T18:12:38.000+01:00
diff --git a/.changeset/rich-ties-lay.md b/.changeset/rich-ties-lay.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `function-url-quotes` false positives when URLs require quoting
diff --git a/lib/rules/function-url-quotes/__tests__/index.mjs b/lib/rules/function-url-quotes/__tests__/index.mjs
@@ -433,6 +433,46 @@ testRule({
 		{
 			code: '@font-face { font-family: \'foo\'; src: url($variable + "foo.ttf" + $variable); }',
 		},
+		{
+			code: 'a { background: url("data:image/svg+xml;utf8,<svg height=\\"100\\" width=\\"100\\"></svg>"); }',
+			description: 'data URI with embedded quotes requires quotes (#8544)',
+		},
+		{
+			code: 'a { background: url(\'data:image/svg+xml;utf8,<svg height="100" width="100"></svg>\'); }',
+			description: 'data URI with embedded quotes requires quotes (#8544)',
+		},
+		{
+			code: 'a { background-image: url(\'data:image/svg+xml;utf8,<svg height="100" width="100"><style>.cls-1{}</style></svg>\'); }',
+			description: 'data URI with embedded quotes requires quotes (#8544)',
+		},
+		{
+			code: 'a { background-image: url(\'data:image/svg+xml,<svg height="100" width="100"><style>.cls-1{fill-rule:evenodd;}</style></svg>\'); }',
+			description: 'data URI with embedded quotes requires quotes (#8544)',
+		},
+		{
+			code: 'a { background: url("image file.png"); }',
+			description: 'URL with spaces requires quotes (#8544)',
+		},
+		{
+			code: "a { background: url('image file.png'); }",
+			description: 'URL with spaces requires quotes (#8544)',
+		},
+		{
+			code: 'a { background: url("foo(bar).png"); }',
+			description: 'URL with parentheses requires quotes (#8544)',
+		},
+		{
+			code: "a { background: url('foo(bar).png'); }",
+			description: 'URL with parentheses requires quotes (#8544)',
+		},
+		{
+			code: 'a { background: url("foo)bogus"); }',
+			description: 'URL with mismatched parentheses requires quotes (#8544)',
+		},
+		{
+			code: 'a { background: url("\'foo\'"); }',
+			description: 'URL with parentheses requires quotes (#8544)',
+		},
 	],
 
 	reject: [
@@ -763,6 +803,20 @@ testRule({
 				},
 			],
 		},
+		{
+			code: `a { background-image: url( "data:image/svg+xml,<svg\\ viewBox=\\"0\\ 0\\ 10\\ 10\\"></svg>" ); }`,
+			fixed:
+				'a { background-image: url( data:image/svg+xml,<svg\\ viewBox=\\"0\\ 0\\ 10\\ 10\\"></svg> ); }',
+			fix: {
+				range: [27, 85],
+				text: 'data:image/svg+xml,<svg\\ viewBox=\\"0\\ 0\\ 10\\ 10\\"></svg>',
+			},
+			message: messages.rejected('url'),
+			line: 1,
+			column: 28,
+			endLine: 1,
+			endColumn: 87,
+		},
 	],
 });
 
diff --git a/lib/rules/function-url-quotes/index.cjs b/lib/rules/function-url-quotes/index.cjs
diff --git a/lib/rules/function-url-quotes/index.mjs b/lib/rules/function-url-quotes/index.mjs
@@ -1,3 +1,5 @@
+import { isTokenURL, tokenize } from '@csstools/css-tokenizer';
+
 import { atRuleParamIndex, declarationValueIndex } from '../../utils/nodeFieldIndices.mjs';
 import functionArgumentsSearch from '../../utils/functionArgumentsSearch.mjs';
 import getAtRuleParams from '../../utils/getAtRuleParams.mjs';
@@ -152,6 +154,39 @@ const rule = (primary, secondaryOptions) => {
 			}
 		}
 
+		/**
+		 * Check if a URL requires quotes for valid CSS
+		 *
+		 * This function determines if a URL needs to be quoted when used in a CSS url() function.
+		 * It tokenizes the URL and checks if it would be parsed as a bad-url token, which indicates
+		 * that quotes are necessary for valid CSS.
+		 *
+		 * @param {string} url - The URL value, either quoted or unquoted
+		 * @returns {boolean} True if the URL requires quotes to be valid CSS, false otherwise
+		 */
+		function requiresQuotes(url) {
+			// Extract the URL content (remove quotes if present)
+			let urlContent = url;
+
+			const quote = url[0] ?? '';
+			const endQuoteIndex = url.lastIndexOf(quote);
+
+			if (endQuoteIndex > 0) {
+				urlContent = url.slice(1, endQuoteIndex);
+			}
+
+			const tokens = tokenize({ css: `url(${urlContent})` });
+
+			// there is always an EOF token, so we expect 2 tokens for a valid URL
+			if (tokens.length !== 2) return true;
+
+			const urlToken = tokens[0];
+
+			if (!isTokenURL(urlToken)) return true;
+
+			return false;
+		}
+
 		/**
 		 * @param {string} args
 		 * @param {number} index
@@ -170,6 +205,9 @@ const rule = (primary, secondaryOptions) => {
 
 			const hasQuotes = leftTrimmedArgs.startsWith("'") || leftTrimmedArgs.startsWith('"');
 
+			// If quotes are required, don't complain about them being present
+			if (hasQuotes && requiresQuotes(leftTrimmedArgs)) return;
+
 			if (expectQuotes && hasQuotes) return;
 
 			if (!expectQuotes && !hasQuotes) return;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"stylelint": patch
 +---
++
 +Fixed: `function-url-quotes` false positives when URLs require quoting