search

zed-industries / zed

Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
https://zed.dev
Other
50.09k stars 3.07k forks source link

Syntax highlighting for styles broken in Svelte components using `lang="postcss"` #18033

Open corneliusio opened 1 month ago

corneliusio commented 1 month ago

Check for existing issues

Describe the bug / provide steps to reproduce it

A recent update to Svelte syntax highlighting seems to have broken highlighting for components that use <style lang="postcss">. I haven't been able to find a recent release noting any significant changes to Svelte syntax highlighting though.

Additionally, not actually a bug but the update also seems to have changed the colors used for Svelte's templating keywords to be the same as HTML tags. Just ends up making Svelte files a bit harder to quickly parse visually. That said, may not be anything to be done on Zed's end and just an effect of whatever grammar is being used.

Environment

Zed: v0.152.4 (Zed) OS: macOS 14.6.1 Memory: 32 GiB Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

Screenshot 2024-09-18 at 2 17 38 PM

If applicable, attach your Zed.log file to this issue.

No response

notpeter commented 1 month ago

There are some large changes to svelte that were merged recently into main:

This will be available in tomorrow's release of Zed Preview (usually around 1PM ET). Could you please try with that release when it becomes available and report back?

corneliusio commented 1 month ago

@notpeter For sure. I'll get the preview build setup on my system so I can take a look.

maxdeviant commented 1 month ago

There are some large changes to svelte that were merged recently into main:

This will be available in tomorrow's release of Zed Preview (usually around 1PM ET). Could you please try with that release when it becomes available and report back?

Those changes are already available in v0.2.0 of the Svelte extension, which seem to be what produced the issues described in the original issue description.

maxdeviant commented 1 month ago

cc @AlbertMarashi

AlbertMarashi commented 1 month ago

will write a fix within a day @maxdeviant

AlbertMarashi commented 1 month ago

@corneliusio Which templating are you referring to? could you describe any issues you are having (even unrelated to this issue)

Any screenshots would help too

corneliusio commented 1 month ago

@AlbertMarashi Absolutely. Here's a snippet of code from one of our projects that illustrate a couple things:

Screenshot 2024-09-18 at 3 51 35 PM
AlbertMarashi commented 1 month ago

Thanks. I will get this resolved by tomorrow

PS. The issue where the keyed each is being highlighted as a function is because the text after 'as' is being treated as javascript, so it thinks it is a function call

Fixing this is possible but won't be done by tomorrow

corneliusio commented 1 month ago

@AlbertMarashi Appreciate it! And yeah, def hear you on the function highlighting for each blocks. I wrote the Svelte syntax highlighting for Sublime Text way back when and getting every conceivable valid expression in those blocks to highlight correctly was an ongoing challenge.

AlbertMarashi commented 1 month ago

Yeah unfortunately tree sitter also makes things like this very difficult to handle too

See:

https://github.com/tree-sitter/tree-sitter/issues/3625

AlbertMarashi commented 1 month ago

@corneliusio @maxdeviant the issue here is actually that Zed does not have language support for postcss - I'll be proposing a PR that addresses some of these issues. Previously Svelte was deferring to css language when the lang was set to postcss

AlbertMarashi commented 4 weeks ago

@maxdeviant should this be closed due to https://github.com/zed-industries/zed/pull/19416

corneliusio commented 2 weeks ago

@AlbertMarashi @maxdeviant Wanted to follow up with something interesting I just discovered. This issue relates specifically to using lang="postcss" on <style> tags in single file components. I just discovered that if the attribute is changed to type="text/postcss" that everything works as expected. Now things should still be addressed for the lang attribute since this if often used in documentation for frameworks such as Svelte and Vue, but these libraries often also support the type attribute which is how I discovered this working on a different project.

All that to say, there appears to already be a mechanism in place that correctly applies syntax highlighting and LSP/linting source to these style blocks that simply needs to be applied to the lang attribute as well.