Using .attrs() without a template literal would break highlight

[lihanqi]

Without the empty template literal it would break the highlight.

[roffelsaurus]

Possibly related to highlighting breaking on a prettier formatting: Working:

Breaking hightlight after prettier format:

EDIT: trying out some combinations, it looks like styled() and .attrs needs to be on the same line to function with this extension.

[jasonwilliams]

its due to the way the regex parses, you can only parse one line at a time. so https://github.com/styled-components/vscode-styled-components/blob/master/syntaxes/styled-components.json#L7 will need adjusting

[jasonwilliams]

@roffelsaurus is this still broken in v1.5.1 ?

[roffelsaurus]

Yes, it still does not highlight in 1.5.1.

I am not particularly bothered though, because after discovering styled-components automatically injects dollar props I have switched almost exclusively to an alternate syntax instead of attrs() because it is more concise. The lines are shorter too so they end up on the same line.

`export const CloseIcon = styled(FontIcon)<{ $color: string }> color: ${props => props.$color};

`

[andrefangeloni]

Same here. I was observing, this bug only happens when props is used inside attrs( ), otherwise everything is fine. VSCode 1.57.1