SCSS support

[JosephTLyons]

[jamesdbruner]

I'd love some scss syntax highlighting, I'm assuming that's what's meant by support but wanted to clarify incase that wasn't clear.

[Atelier-Mirai]

We hope that CSS and SCSS will be supported.

[maxbrunsfeld]

CSS support will land in Zed v0.59. I'm just going to change the title of this issue to focus on SCSS, so folks who are waiting on SCSS can continue to subscribe here.

[guttenbergovitz]

I am using 0.8.x v and css seems to be available on the level of treesitter not langserver what is sort of show stopper.

[iamnbutler]

I implemented most of this, but killed the PR since the tree-sitter grammar is filled with errors. Either we or someone else will need to work through updating the grammar before we can ship this.

https://github.com/serenadeai/tree-sitter-scss

I only got about 1/8th of the way through testing the examples in the SCSS docs before it was obvious upstream changes to the grammar will be needed.

If anyone wants to pick that up here were my notes so far.

Fix:
- The sibling selector `~` causes an ERROR
- Can't interpolate property names with `-`/`-#{$prefix}` (ERROR)
- Custom property names aren't marked with `function_name` or similar to allow correct styling.

Nice to have:
- support doc comments (///) (should be `doc_comment`

Otherwise I'll pick this back up after a few of the ones with accurate grammars are finished.

[Orange4Broom]

Hi, i would like to as if the SCSS support was added, i am on version 0.120.6.

[gianpaj]

Is there no way to use CSS language for .scss files?

I can't find how to do that on the config docs or Github search

• https://zed.dev/docs/configuring-zed
• https://github.com/search?q=repo%3Azed-industries%2Fzed+extension+overwrite&type=issues

[WMcKibbin]

Throwing my voice here as well. I really want to switch to zed but this lack of scss syntax highlighting is stopping me. Almost all the projects I touch have it at work. Checking last years surveys it does appear to me the most popular preprocessor

https://2023.stateofcss.com/en-US/other-tools/#pre_post_processors

Might be worth making this a thing to grab folks like me as users. Granted, im sure there are lots of examples blocking people from trying zed out as a daily driver.

If I find time I will start attacking some issues. @iamnbutler Would you be willing to file github issues for what you found in your notes on the upstream with the specific examples you produced the errors with? Or even just a link to the docs.

[samlogan]

SCSS syntax highlighting is the last thing preventing me from switching to Zed too @WMcKibbin. I have put together the following PR to default SCSS to CSS whilst full support is pending, which is being reviewed by the Zed team.

https://github.com/zed-industries/zed/pull/7789

Hopefully, this or full support will be added soon 🙏

[xfer]

I have a branch with SCSS support (https://github.com/xfer/zed/tree/feature/scss), but some code is based on nvim-treesitter and I'm not sure about licensing (nvim-treesiter is Apache 2 and Zed is triple licensed).

[scr2em]

this and the icons

[gianpaj]

EDIT: there is a SCSS extension you can download now:

https://github.com/bajrangCoder/zed-scss

---

Thanks to this PR https://github.com/zed-industries/zed/pull/9290, you can add this to your settings.json file 🎉

"file_types": {
  "CSS": ["scss"]
}

From Zed version 0.128.3 https://zed.dev/releases/stable

At least we have a workaround until full SCSS support 🙂

[bryanbuchanan]

I don't know anything about tree sitter, but I did stumble across this, is it better than the other grammar? https://github.com/tree-sitter-grammars/tree-sitter-scss

[ollietreend]

I don't know anything about tree sitter, but I did stumble across this, is it better than the other grammar? https://github.com/tree-sitter-grammars/tree-sitter-scss

This looks promising, but I wonder how stable/mature it is as a project given that the repo is only 3 weeks old and has just 3 commits.

[abejfehr]

I don't know anything about tree sitter, but I did stumble across this, is it better than the other grammar? https://github.com/tree-sitter-grammars/tree-sitter-scss

This looks promising, but I wonder how stable/mature it is as a project given that the repo is only 3 weeks old and has just 3 commits.

The author's hobby seems to be contributing to tree sitter grammers, so I think that's pretty telling

[JosephTLyons]

Since we now have the SCSS extension in our store, I think we can close this issue out.

[marcolaux]

Since we now have the SCSS extension in our store, I think we can close this issue out.

Sadly though, auto complete / suggestions don't work with it.

[jk-propeller]

Since we now have the SCSS extension in our store, I think we can close this issue out.

Sadly though, auto complete / suggestions don't work with it.

@marcolaux FYI: This problem ist now fixed. The SCSS extension now provides an language server for completion and suggestions.

[marcolaux]

Since we now have the SCSS extension in our store, I think we can close this issue out.

Sadly though, auto complete / suggestions don't work with it.

@marcolaux FYI: This problem ist now fixed. The SCSS extension now provides an language server for completion and suggestions.

It doesn't support things like @include or SASS / SCSS specific things it seems.

Also no suggestions from previously imported scss files.