Add support for styled-jsx / CSS in JS syntax

[lsegal]

This branch adds support for CSS in JS libraries like styled-jsx with partial support for others like styled-components (in particular the "css backtick" syntax only).

This plugin had basic intellisense support for the <style jsx> syntax, but lacked support for the css / css.resolve / css.global backtick syntax that is used by styled-jsx. Furthermore, because of the way <style jsx> blocks function syntactically (they are actually JS strings, not CSS blocks), this plugin's package.json incorrectly specifies the grammar scopes necessary to trigger the syntax highlighting rules on the style blocks. This PR fixes both of these issues that affect compatibility with styled-jsx and the like.

Below is a before/after screenshot pair of how this feature works alongside embedded CSS using both the css backtick syntax as well as the <style jsx> tags with both highlighting and intellisense functioning as expected. Note that this feature still depends on the user installing blanu.vscode-styled-jsx (or the styled-components variant) to provide the actual base CSS syntax highlighting for those styled blocks. If you do test this, please make sure you've installed that plugin.

Before

After

Since I'm a first time contributor, I'm unsure what, if any, tests might be needed, but do let me know if I should add any.

[thecrypticace]

Hey! So I know this PR has been open quite a long time but I think we're going to pass on this one for now (sorry!)

Given that the Next docs recommend using other solutions outside of CSS-in-JS when React Server Components are involved and that RSCs are becoming more prevalent (and the default) it seems maybe less necessary to support something like this today. Though, I don't mind revisiting in the future if things change or demand to support this increases enough to warrant adding it to the extension.

[lsegal]

Can I ask why only "Next docs" are relevant here? This PR has no relationship to Next.js, and from what I know, neither does Tailwind. There are many other JavaScript libraries (we're not even talking about React let alone Next.js) that can use emotion/styled-components. Emotion is not specific to React, nor is there anything specific about RSC in this PR. For reference, we've used this fork on Next.js, but also to develop a vanilla React SPA.

I'm not sure I follow the logic of closing this PR. Are you saying that the tailwindcss-intellisense project is only intended to support Next.js?

[adamwathan]

@lsegal I think our assumption is that styled-jsx is most popular with Next.js projects because it was originally designed by Vercel as the recommended styling solution for Next (if I understand the history correctly). Since the authors of styled-jsx don't seem to encourage it anymore themselves, it doesn't feel like the right decision to invest in supporting it in our tools.

The reason for closing the PR is that it's been sitting for 1.5 years without us making a decision on it, and since there doesn't seem to be meaningful demand for this (only three thumbs ups, no other replies or conversation), we've decided to say no to this for now just to make a decision on it instead of having it just sit open forever. Anything we merge is something we're taking responsibility for, have to commit to maintaining, and can potentially make other features more difficult down the road, so we have to be pretty conservative about what gets added to the project.

Thanks for the PR either way, we do appreciate it even if we don't always decide to merge every contribution.