Fix function-url-quotes false positives for SCSS variable and @ c…

…haracter (#7416)
stylelint · Dec 24, 2023 · cb509a0 · cb509a0
1 parent e222352
commit cb509a0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/spotty-crabs-appear.md b/.changeset/spotty-crabs-appear.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `function-url-quotes` false positives for SCSS variable and `@` character
diff --git a/lib/rules/function-url-quotes/__tests__/index.mjs b/lib/rules/function-url-quotes/__tests__/index.mjs
@@ -764,5 +764,9 @@ testRule({
 				)`,
 			description: 'SCSS with',
 		},
+		{
+			code: "a { background: url($asset-prefix + 'assets/images/fa_calculator_blue@2x.png') }",
+			description: '@ character within URL and string concatenation (#7404)',
+		},
 	],
 });
diff --git a/lib/utils/__tests__/isStandardSyntaxUrl.test.mjs b/lib/utils/__tests__/isStandardSyntaxUrl.test.mjs
@@ -81,13 +81,13 @@ describe('isStandardSyntaxUrl', () => {
 	it('url with ampersand at the end and double quotes', () => {
 		expect(isStandardSyntaxUrl('"some/@url"')).toBeTruthy();
 	});
-	it('url with ampersand at the start', () => {
+	it('url with at sign at the start', () => {
 		expect(isStandardSyntaxUrl('@url/path')).toBeTruthy();
 	});
-	it('url with ampersand in the middle', () => {
+	it('url with at sign in the middle', () => {
 		expect(isStandardSyntaxUrl('some/@url/path')).toBeTruthy();
 	});
-	it('url with ampersand at the end', () => {
+	it('url with at sign at the end', () => {
 		expect(isStandardSyntaxUrl('some/@url')).toBeTruthy();
 	});
 	it('url with less interpolation without quotes', () => {
@@ -137,18 +137,18 @@ describe('isStandardSyntaxUrl', () => {
 	it('sass variable concat with single quotes string', () => {
 		expect(isStandardSyntaxUrl("$sass-variable + 'foo'")).toBeFalsy();
 	});
-	it('sass variable concat with escaped single quotes string', () => {
-		expect(isStandardSyntaxUrl("$sass-variable + 'foo'")).toBeFalsy();
-	});
 	it('sass variable concat with double quotes string', () => {
-		expect(isStandardSyntaxUrl("$sass-variable + 'foo'")).toBeFalsy();
+		expect(isStandardSyntaxUrl('$sass-variable + "foo"')).toBeFalsy();
 	});
 	it('sass variable concat with single quotes string without spaces', () => {
 		expect(isStandardSyntaxUrl("$sass-variable+'foo'")).toBeFalsy();
 	});
 	it('sass variable and concatenation', () => {
 		expect(isStandardSyntaxUrl('$sass-variable + foo')).toBeFalsy();
 	});
+	it('sass variable, concatenation, and a quoted at sign', () => {
+		expect(isStandardSyntaxUrl("$sass-variable + 'foo@bar'")).toBeFalsy();
+	});
 	it('sass variable and double concatenation', () => {
 		expect(isStandardSyntaxUrl('test + $sass-variable + foo')).toBeFalsy();
 	});

diff --git a/lib/utils/isStandardSyntaxUrl.cjs b/lib/utils/isStandardSyntaxUrl.cjs
@@ -8,7 +8,7 @@ const hasScssInterpolation = require('./hasScssInterpolation.cjs');
 const hasTplInterpolation = require('./hasTplInterpolation.cjs');
 
 const IS_LESS_VARIABLE_IN_URL = /^@@?[\w-]+$/;
-const IS_SCSS_VARIABLE_IN_URL = /^[$\s\w+\-,./*'"]+$/;
+const IS_SCSS_VARIABLE_IN_URL = /^[$\s\w+\-,./*'"@]+$/;
 
 /**
  * Check whether a URL is standard

diff --git a/lib/utils/isStandardSyntaxUrl.mjs b/lib/utils/isStandardSyntaxUrl.mjs
@@ -4,7 +4,7 @@ import hasScssInterpolation from './hasScssInterpolation.mjs';
 import hasTplInterpolation from './hasTplInterpolation.mjs';
 
 const IS_LESS_VARIABLE_IN_URL = /^@@?[\w-]+$/;
-const IS_SCSS_VARIABLE_IN_URL = /^[$\s\w+\-,./*'"]+$/;
+const IS_SCSS_VARIABLE_IN_URL = /^[$\s\w+\-,./*'"@]+$/;
 
 /**
  * Check whether a URL is standard