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,