Format styled.div(({theme}) => `...`

People often write this kind of code:

const StyledDiv = styled.div`
    color: ${props => props.theme.primary.main};
    background-color: ${props => props.theme.backgroundColor};
    border: 1px solid ${props => props.theme.borderColor};
    ...
`

But, there is an underrated way of writing this code, that makes it much clearer:

const StyledDiv = styled.div(({theme}) => `
    color: ${theme.primary.main};
    background-color: ${theme.backgroundColor};
    border: 1px solid ${theme.borderColor};
    ...
`)

However, the VSCode plugin doesn’t style the latter. Would it be possible to style it?

[nhagen]

Not ideal, but you can do this as a workaround:

const StyledDiv = styled.div(({ backgroundColor }) => css`
    backgroundColor: ${ backgroundColor }
    ...
  `);

[jasonwilliams]

There’s links to websites in the contributing guide @a7madgamal