Add basic syntax highlighting for CSS

Max Brunsfeld created

Change summary

Cargo.lock                                   | 10 ++
crates/zed/Cargo.toml                        |  1 
crates/zed/src/languages.rs                  |  5 +
crates/zed/src/languages/css/brackets.scm    |  3 
crates/zed/src/languages/css/config.toml     |  9 ++
crates/zed/src/languages/css/highlights.scm  | 76 ++++++++++++++++++++++
crates/zed/src/languages/css/indents.scm     |  1 
crates/zed/src/languages/html/injections.scm |  8 +
8 files changed, 111 insertions(+), 2 deletions(-)

Detailed changes

Cargo.lock 🔗 

@@ -6025,6 +6025,15 @@ dependencies = [
  "tree-sitter",
 ]
 
+[[package]]
+name = "tree-sitter-css"
+version = "0.19.0"
+source = "git+https://github.com/tree-sitter/tree-sitter-css?rev=769203d0f9abe1a9a691ac2b9fe4bb4397a73c51#769203d0f9abe1a9a691ac2b9fe4bb4397a73c51"
+dependencies = [
+ "cc",
+ "tree-sitter",
+]
+
 [[package]]
 name = "tree-sitter-elixir"
 version = "0.19.0"
@@ -7237,6 +7246,7 @@ dependencies = [
  "tree-sitter",
  "tree-sitter-c",
  "tree-sitter-cpp",
+ "tree-sitter-css",
  "tree-sitter-elixir",
  "tree-sitter-go",
  "tree-sitter-html",

crates/zed/Cargo.toml 🔗 

@@ -92,6 +92,7 @@ toml = "0.5"
 tree-sitter = "0.20"
 tree-sitter-c = "0.20.1"
 tree-sitter-cpp = "0.20.0"
+tree-sitter-css = { git = "https://github.com/tree-sitter/tree-sitter-css", rev = "769203d0f9abe1a9a691ac2b9fe4bb4397a73c51" }
 tree-sitter-elixir = { git = "https://github.com/elixir-lang/tree-sitter-elixir", rev = "05e3631c6a0701c1fa518b0fee7be95a2ceef5e2" }
 tree-sitter-go = { git = "https://github.com/tree-sitter/tree-sitter-go", rev = "aeb2f33b366fd78d5789ff104956ce23508b85db" }
 tree-sitter-json = { git = "https://github.com/tree-sitter/tree-sitter-json", rev = "137e1ce6a02698fc246cdb9c6b886ed1de9a1ed8" }

crates/zed/src/languages.rs 🔗 

@@ -47,6 +47,11 @@ pub async fn init(languages: Arc<LanguageRegistry>, _executor: Arc<Background>)
             tree_sitter_cpp::language(),
             Some(CachedLspAdapter::new(c::CLspAdapter).await),
         ),
+        (
+            "css",
+            tree_sitter_css::language(),
+            None, //
+        ),
         (
             "elixir",
             tree_sitter_elixir::language(),

crates/zed/src/languages/css/config.toml 🔗 

@@ -0,0 +1,9 @@
+name = "CSS"
+path_suffixes = ["css"]
+autoclose_before = ";:.,=}])>"
+brackets = [
+    { start = "{", end = "}", close = true, newline = true },
+    { start = "[", end = "]", close = true, newline = true },
+    { start = "(", end = ")", close = true, newline = true },
+    { start = "\"", end = "\"", close = true, newline = false }
+]

crates/zed/src/languages/css/highlights.scm 🔗 

@@ -0,0 +1,76 @@
+(comment) @comment
+
+[
+  (tag_name)
+  (nesting_selector)
+  (universal_selector)
+] @tag
+
+[
+  "~"
+  ">"
+  "+"
+  "-"
+  "*"
+  "/"
+  "="
+  "^="
+  "|="
+  "~="
+  "$="
+  "*="
+  "and"
+  "or"
+  "not"
+  "only"
+] @operator
+
+(attribute_selector (plain_value) @string)
+
+(attribute_name) @attribute
+(pseudo_element_selector (tag_name) @attribute)
+(pseudo_class_selector (class_name) @attribute)
+
+[
+  (class_name)
+  (id_name)
+  (namespace_name)
+  (property_name)
+  (feature_name)
+] @property
+
+(function_name) @function
+
+((property_name) @variable
+ (#match? @variable "^--"))
+((plain_value) @variable
+ (#match? @variable "^--"))
+
+[
+  "@media"
+  "@import"
+  "@charset"
+  "@namespace"
+  "@supports"
+  "@keyframes"
+  (at_keyword)
+  (to)
+  (from)
+  (important)
+]  @keyword
+
+(string_value) @string
+(color_value) @string.special
+
+[
+  (integer_value)
+  (float_value)
+] @number
+
+(unit) @type
+
+[
+  "#"
+  ","
+  ":"
+] @punctuation.delimiter

crates/zed/src/languages/html/injections.scm 🔗 

@@ -1,3 +1,7 @@
 (script_element
-    (raw_text) @content
-    (#set! "language" "javascript"))
+  (raw_text) @content
+  (#set! "language" "javascript"))
+
+(style_element
+  (raw_text) @content
+  (#set! "language" "css"))