Fix isStandardSyntaxFunction false positives for interpolation and backticks in CSS-in-JS

lib/rules/function-no-unknown/__tests__/index.js

@@ -70,6 +70,22 @@ testRule({
 	],
 });
 
+testRule({
+	skip: true,
+	ruleName,
+	config: true,
+	customSyntax: 'postcss-styled-syntax',
+
+	accept: [
+		{
+			code: 'const buttonFontSize = css`font-size: ${({ size }) => (size === "small") ? "0.8em" : "1em"};`;',
+		},
+		{
+			code: 'const buttonFontSize = css`border-radius: ${`calc(${token.radiusBase} + 2px)`};`;',
+		},
+	],
+});
+
 testRule({
 	ruleName,
 	config: [true, { ignoreFunctions: ['theme', '/^foo-/', /^bar$/i] }],

lib/utils/__tests__/isStandardSyntaxFunction.test.js

@@ -26,6 +26,30 @@ describe('isStandardSyntaxFunction', () => {
 			false,
 		);
 	});
+
+	it('CSS-in-JS interpolation', () => {
+		const functions = [];
+
+		valueParser('${({ size }) => (size === "small") ? "0.8em" : "1em"}').walk((valueNode) => {
+			if (valueNode.type === 'function') {
+				functions.push(valueNode);
+			}
+		});
+
+		expect(isStandardSyntaxFunction(functions[0])).toBe(false);
+	});
+
+	it('CSS-in-JS syntax', () => {
+		const functions = [];
+
+		valueParser('`calc(${token.radiusBase} + 2px)`').walk((valueNode) => {
+			if (valueNode.type === 'function') {
+				functions.push(valueNode);
+			}
+		});
+
+		expect(isStandardSyntaxFunction(functions[0])).toBe(false);
+	});
 });
 
 function func(css) {

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;
 };