What is the status of React styled components support?

[ddbrierton]

There have been a couple of posts on Reddit about this, and there are a couple of open tickets on GitHub too, but I'm not clear if this is possible with some manual configuration or not.

In styled components, CSS is written inside JS template literals. But Zed doesn't recognise this, there is no syntax highlighting or code completion. TBH I could never get this to work in Neovim either, so I'm not sure if this even is a Zed issue as opposed to a tree-sitter and/or language server issue.

This is how the same code looks in VS Code.

Can this be made to work with some manual configuration? If not, does anyone understand whether the blocking point actually is with Zed, or is it a tree-sitter and/or a language server problem?

I really love Zed and am kinda desperate to switch to it completely but all our projects at work use styled components so this is a bit of a deal breaker for me, sadly.

These are the issues on GitHub:

#17026

#11143

TIA

[ddbrierton]

Thanks to a user on Reddit I did manage to get this partially working in Neovim. nvim-treesitter has support for styled components:

https://github.com/nvim-treesitter/nvim-treesitter/blob/e5a05ba5e298cc1e1dad8eb8095b8d4d89a7f793/queries/ecma/injections.scm#L108-L116

The bit that I was missing was I also need to install an extra component: :TSInstall styled.

That gives me syntax highlighting in Neovim. So presumably something similar can be done in Zed too? However, there are still no language server completions, so this really is only a partial solution.