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

[lcswillems]

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 }
    ...
  `);

[lcswillems]

Thanks! But that's not great...

[wyqydsyq]

I also noticed this when trying to set some props on a styled component on the fly for integration with Material-UI:

It seems the plugin only recognises it should highlight when given functions provided by reference and not anonymous callback functions

[kylepeeler]

Bump, this would be nice to work w/out importing the css function, however that workaround did work for us as well for a short term solution.

+1 to making it supported w/out it though!

[a7madgamal]

I'm willing to look into this but I need some help as I never contributed here before.
What needs to be fixed here? Is this also related to prettier?

[jasonwilliams]

Thanks @a7madgamal there’s a contribution guide here https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md (just focus on the adding syntax bit)

For this issue maybe try the syntax in the second block from the op and see if the syntax highlighting looks right

[a7madgamal]

I gave it a try now, my head hurt but I kinda get whats happening here :D
I'm just not sure how to modify something like (?:([\\s\\S][sS][tT][yY][lL][eE][dD](?:<.+>(?=\\())?(?:\\.[_$[:alpha:]][_$[:alnum:]]*|\\s*\\(['\"][_$[:alpha:]][_$[:alnum:]]*['\"]\\)|\\s*\\((.+)\\))(?:\\s*<.+>)?)|(css|keyframes|injectGlobal|createGlobalStyle)(<.+>)?)\\s*(`)
I tried a couple of regex websites but nothing worked for me, any suggestions?

[jasonwilliams]

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