function-no-unknown false positives for interpolation and backticks in CSS-in-JS

[hudochenkov]

What steps are needed to reproduce the bug?

CSS-in-JS code with interpolation ${} or with backticks `:

const Component = styled.div`
	border-radius: ${(props) => props.shape === 'pill' ? token.radiusPill : token.radiusBase};
	border-radius: ${(props) => props.shape === 'pill' ? `calc(${token.radiusPill} + 5px)` : token.radiusBase};
`;

Issues reproduced with postcss-styled-syntax and with @stylelint/postcss-css-in-js.

What Stylelint configuration is needed to reproduce the bug?

{
	"rules": {
		"function-no-unknown": true
	}
}

How did you run Stylelint?

stylelint "**/*.js"

Which version of Stylelint are you using?

14.16.1

What did you expect to happen?

No violations.

What actually happened?

test.ts
 2:17  ✖  Unexpected unknown function "${"     function-no-unknown
 3:17  ✖  Unexpected unknown function "${"     function-no-unknown
 3:55  ✖  Unexpected unknown function "`calc"  function-no-unknown

Does the bug relate to non-standard syntax?

CSS-in-JS

Proposal to fix the bug

Update isStandardSyntaxFunction to ignore such syntax.

[ybiquitous]

Fixed by #6565