Highlighting doesn't work when wrapping the result of a function

This is an extremely obscure edge case, as I’m sure hardly anybody has had a need to do this. But I’m in the middle of writing a library and have a line which looks like this

const Bounds = styled(Stylable("div"))`
  box-sizing: border-box;
  display: flex;
`;

and the highlighting does not work. If I remove the ("div") it works.

I’m a bit busy atm (otherwise I’d fix it now), but tomorrow or sometime later this week I’ll try and fix this issue. Just wanted to open an issue so that there’s a documented record of it.

[patrikmolsson]

Don’t know if it’s related, but also it does not work when specifying the props type (Typescript)

const Button = styled.a<{ first?: boolean }>`
  padding: 15px 50px;
  margin-right: ${p => p.first ? '50px' : '0'};
`;

Although, it works correctly when defining them inline for the function parameter:

interface IButtonProps {
  first?: boolean;
}

const Button = styled.a`
  padding: 15px 50px;
  margin-right: ${(p: IButtonProps) => p.first ? '50px' : '0'};
`;

[pixelize]

I confirm the same thing here, example :

Do you this can be fixed ? Would be amazing 😃 thanks