Syntax highlighting not working when using inline function as an argument(`styled(() => <Foo />)`)

To avoid warning “Received true for non-boolean attribute XXX”, I’m passing inline function as an argument to styled function.

const StyledLink = styled(({ primary, ...otherProps }) => <Link {...otherProps} />)`
  /* styles */
` 

This pattern is useful for avoiding some warnings. (see styled-components #1198 and discussion.) However, when applying this pattern, syntax highlighting is not supported.

Also, I could assign inline function to variable for syntax highlighting.

const StylableLink = ({ primary, ...otherProps }) => <Link {...otherProps} />
const StyledLink = styled(StylableLink)`
  /* styles */
`

But, doing so is both costly and cumbersome. It would be great if you’ll support syntax highlighting for this.

[joeytwiddle]

I created a small bounty for this issue (~21 USD). Thanks for the plugin!

Edit: 2020/11/19 the bounty is now showing as 15 USD. Sorry, I’m not sure why it dropped! (If anything, USD has dropped…)

[adamcbrewer]

Have a little workaround:

export const Component = styled((props) => (
  <div {...props} /
))(css`
  color: red;
`)