Fix isStandardSyntaxFunction false positives for interpolation and …

…backticks in CSS-in-JS (#6565)

.changeset/quiet-adults-leave.md

@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `function-no-unknown` false positives for interpolation and backticks in CSS-in-JS

lib/utils/__tests__/isStandardSyntaxFunction.test.js

@@ -1,42 +1,51 @@
 'use strict';
 
 const isStandardSyntaxFunction = require('../isStandardSyntaxFunction');
-const postcss = require('postcss');
 const valueParser = require('postcss-value-parser');
 
 describe('isStandardSyntaxFunction', () => {
 	it('calc', () => {
-		expect(isStandardSyntaxFunction(func('a { prop: calc(a + b) }'))).toBe(true);
+		expect(isStandardSyntaxFunction(getFunction('calc(a + b)'))).toBe(true);
 	});
 
 	it('url', () => {
-		expect(isStandardSyntaxFunction(func("a { prop: url('x.css') }"))).toBe(true);
+		expect(isStandardSyntaxFunction(getFunction("url('x.css')"))).toBe(true);
 	});
 
 	it('scss list', () => {
-		expect(isStandardSyntaxFunction(func('a { $list: (list) }'))).toBe(false);
+		// as in $list: (list)
+		expect(isStandardSyntaxFunction(getFunction('(list)'))).toBe(false);
 	});
 
 	it('scss map', () => {
-		expect(isStandardSyntaxFunction(func('a { $map: (key: value) }'))).toBe(false);
+		// as in $map: (key: value)
+		expect(isStandardSyntaxFunction(getFunction('(key: value)'))).toBe(false);
 	});
 
-	it('scss function in custom prop', () => {
-		expect(isStandardSyntaxFunction(func('a { --primary-color: #{darken(#fff, 0.2)} }'))).toBe(
-			false,
-		);
+	it('scss function in scss interpolation', () => {
+		expect(isStandardSyntaxFunction(getFunction('#{darken(#fff, 0.2)}'))).toBe(false);
+	});
+
+	it('CSS-in-JS interpolation', () => {
+		expect(
+			isStandardSyntaxFunction(
+				getFunction('${({ size }) => (size === "small") ? "0.8em" : "1em"}'),
+			),
+		).toBe(false);
+	});
+
+	it('CSS-in-JS syntax', () => {
+		expect(isStandardSyntaxFunction(getFunction('`calc(${token.radiusBase} + 2px)`'))).toBe(false);
 	});
 });
 
-function func(css) {
+function getFunction(declValue) {
 	const functions = [];
 
-	postcss.parse(css).walkDecls((decl) => {
-		valueParser(decl.value).walk((valueNode) => {
-			if (valueNode.type === 'function') {
-				functions.push(valueNode);
-			}
-		});
+	valueParser(declValue).walk((valueNode) => {
+		if (valueNode.type === 'function') {
+			functions.push(valueNode);
+		}
 	});
 
 	return functions[0];

lib/utils/isStandardSyntaxFunction.js

@@ -16,5 +16,15 @@ module.exports = function isStandardSyntaxFunction(node) {
 		return false;
 	}
 
+	// CSS-in-JS interpolation
+	if (node.value.startsWith('${')) {
+		return false;
+	}
+
+	// CSS-in-JS syntax
+	if (node.value.startsWith('`')) {
+		return false;
+	}
+
 	return true;
 };