Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for styled-jsx / CSS in JS syntax #860

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

lsegal
Copy link

@lsegal lsegal commented Sep 28, 2023

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

image

After

image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants