Skip to content

Support template string inline CSS in JavaScript and TypeScript #32478

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.

Sign up for GitHub

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

Closed
wants to merge 2 commits into from
Closed

Support template string inline CSS in JavaScript and TypeScript #32478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ac7e18
Support template string inline css
mantou132 Jun 10, 2025
0199ce5
Support template string inline html
mantou132 Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,7 +582,7 @@ tree-sitter = { version = "0.25.6", features = ["wasm"] }
tree-sitter-bash = "0.25.0"
tree-sitter-c = "0.23"
tree-sitter-cpp = "0.23"
tree-sitter-css = "0.23"
tree-sitter-css = { git = "https://github.com/mantou132/tree-sitter-css", rev = "62bb39a376ee8aa0ceb6cab27474b7c7136913b9" }
Copy link
Contributor

@d1y d1y Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Little question, don't you intend to contribute this change to the upstream? 🤔
tree-sitter/tree-sitter-css@master...mantou132:tree-sitter-css:master

Copy link
Author

@mantou132 mantou132 Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes:

  • Supports ``` at the beginning and end of the document
  • Recognize ${} content as comments and avoid recognizing it as a pseudo-class

These are not part of the CSS spec, so I don't think they should be merged upstream.

Copy link
Contributor

@SomeoneToIgnore SomeoneToIgnore Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And due to that, Zed is supposed to rely on someone's upstream forever and maintain it?
Does not sound exciting.

Copy link
Author

@mantou132 mantou132 Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any better solution besides modifying tree-sitter-css? Although I've tried creating a PR for tree-sitter-css

Copy link
Contributor

@SomeoneToIgnore SomeoneToIgnore Jun 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I have thought of it more and more and could not find anything clever than "move it to zed-industries org".

I do no think it's a good solution either, maybe @notpeter have ideas?

Copy link
Contributor

@notpeter notpeter Jun 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, not a tree-sitter or CSS/JS/CSS-in-JS expert and haven't looked at the tree-sitter changes, so don't have any immediate suggestion. I do recall that tree-sitter-markdown has wonky two pass approach where they first parse it with the block grammar, then they specify all the inline injections (think ```json and similar). dunno if that's helpful here, please ignore if not.

I just pruned the zed-industries/tree-sitter-* forks and we're down to 6 (was 11). I'd obviously much rather not fork, especially for something as complex as css/js, but it is always a potential option.

Copy link
Collaborator

@probably-neb probably-neb Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a more robust solution would be to make a PR to the js/ts tree sitter to separate the quotes ` from the contents like so (element names made up):

(template-string
  "`"
  (template-string-contents ... )
  "`"
  )

That way you can have a more precise injection (this is probably generally useful). Then separately make a PR against the css grammar to play nice with ${} or see if you can make it work with tree-sitter predicates instead

tree-sitter-diff = "0.1.0"
tree-sitter-elixir = "0.3"
tree-sitter-embedded-template = "0.23.0"
Expand All @@ -591,7 +591,7 @@ tree-sitter-go = "0.23"
tree-sitter-go-mod = { git = "https://github.com/camdencheek/tree-sitter-go-mod", rev = "6efb59652d30e0e9cd5f3b3a669afd6f1a926d3c", package = "tree-sitter-gomod" }
tree-sitter-gowork = { git = "https://github.com/zed-industries/tree-sitter-go-work", rev = "acb0617bf7f4fda02c6217676cc64acb89536dc7" }
tree-sitter-heex = { git = "https://github.com/zed-industries/tree-sitter-heex", rev = "1dd45142fbb05562e35b2040c6129c9bca346592" }
tree-sitter-html = "0.23"
tree-sitter-html = { git = "https://github.com/mantou132/tree-sitter-html", rev = "755c2e2d664ecf6f663106544517bb578beba6a8" }
tree-sitter-jsdoc = "0.23"
tree-sitter-json = "0.24"
tree-sitter-md = { git = "https://github.com/tree-sitter-grammars/tree-sitter-markdown", rev = "9a23c1a96c0513d8fc6520972beedd419a973539" }
Expand Down
4 changes: 2 additions & 2 deletions crates/languages/src/javascript/injections.scm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

(call_expression
function: (identifier) @_name (#eq? @_name "css")
arguments: (template_string (string_fragment) @injection.content
(#set! injection.language "css"))
arguments: (template_string) @injection.content
(#set! injection.language "css")
)

(call_expression
Expand Down
4 changes: 2 additions & 2 deletions crates/languages/src/typescript/injections.scm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@

(call_expression
function: (identifier) @_name (#eq? @_name "css")
arguments: (template_string (string_fragment) @injection.content
(#set! injection.language "css"))
arguments: (template_string) @injection.content
(#set! injection.language "css")
)

(call_expression
Expand Down
4 changes: 2 additions & 2 deletions extensions/html/extension.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ language = "HTML"
"CSS" = "css"

[grammars.html]
repository = "https://github.com/tree-sitter/tree-sitter-html"
commit = "bfa075d83c6b97cd48440b3829ab8d24a2319809"
repository = "https://github.com/mantou132/tree-sitter-html"
commit = "755c2e2d664ecf6f663106544517bb578beba6a8"