Matching Curly braces inside function in JavaScript template literals

[jcubic]

I have this case:

I work with styled-components in ReactJS and I have this code:

const Components = styled.li`

  ${(props) => props.hoverEffect && `
    &:hover {
      background: #f4f4f4;
      color: #333333;
      &:after {
        background: #f4f4f4 !important;
      }
    }`
  }
`;

This works fine, but when I use destructure of props in a function:

const Components = styled.li`

  ${({hoverEffect}) => hoverEffect && `
    &:hover {
      background: #f4f4f4;
      color: #333333;
      &:after {
        background: #f4f4f4 !important;
      }
    }`
  }
`;

The coloring is broken because closing brace after hoverEffect is closing embedded value in the template literal. It needs to handle matching parenthesis inside JavaScript code inside the escape value of template literals.

EDIT: it seems that both examples are broken but in a different ways. Backtick inside ${ } closes backtick from the beginning.

[fxbois]

sorry but too difficult to deal with