compiled
compiled copied to clipboard
Shadowed variables can clash with destructured props
Given this scenario:
const isPrimary = true;
const Component = styled.div<TextProps>`
color: ${({ isPrimary }) => (isPrimary ? 'green' : 'red')};
font-weight: ${() => (isPrimary ? 'bold' : undefined)};
`;
The outer scope isPrimary is taking precedence over the one used in the color arrow function, which is incorrect behaviour.
It seemscolor is being statically evaluated, so it could be evaluate-expression is used the scope of the file to evaluate isPrimary.
The merged fix breaks conditional expressions containing binary expressions i.e.
width: ({ isOpen }) => isOpen ? `${spacing * 4}px` : 0,