directly styling a functional components breaks highlighting

[tonypee]

Describe the bug (including copyable syntax) When directly styling a functional component, the styling breaks when the function definition wraps to multiple lines.

Screenshot It the props are a single argument it works:

But when i use destructuring and it wraps to multiple lines, the coloring breaks:

To Reproduce create a multiline functional component

Expected behavior highlighting works

Build environment (please complete the following information):

• vscode, 1.56.2,
• plugin - 1.6.4

[tonypee]

I want to directly style the components, so that i can use them as references in other css eg:

const Page = styled.div`
  ${MyComponent} {
     width: 3rem;
  }
`

My current workaround is to define the component first, then export it styled:

function ExampleComponent(props) { return <div {...props} /> };

export const Example = styled(ExampleComponent)`
  background: red
`

[tonypee]

?

[jasonwilliams]

@tonypee sorry there aren’t many contributors on this project right now, if you wanted to look into it (which would help progress this issue) please see https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#a-line-break-seems-to-break-the-syntax-highlighting that should help you diagnose what he issue is

[ryanolson-aumni]

This is still broken. I'm going to see if I can look into it (don't have much time though).