compiled icon indicating copy to clipboard operation
compiled copied to clipboard

Shadowed variables can clash with destructured props

Open pancaspe87 opened this issue 3 years ago • 1 comments

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.

pancaspe87 avatar Feb 14 '22 09:02 pancaspe87

The merged fix breaks conditional expressions containing binary expressions i.e.

width: ({ isOpen }) => isOpen ? `${spacing * 4}px` :  0,

at-nathan avatar Jul 13 '22 00:07 at-nathan