Merge pull request #2250 from zed-industries/syntax-highlighting-tweaks

Max Brunsfeld created 2 years ago

Syntax highlighting tweaks

Change summary

crates/zed/src/languages/javascript/highlights.scm | 14 +--
crates/zed/src/languages/lua/highlights.scm        | 16 ++-
crates/zed/src/languages/racket/highlights.scm     |  2 
crates/zed/src/languages/typescript/highlights.scm | 13 +--
styles/src/themes/common/syntax.ts                 | 59 ++-------------
styles/src/themes/one-dark.ts                      |  1 
6 files changed, 33 insertions(+), 72 deletions(-)

Detailed changes

crates/zed/src/languages/javascript/highlights.scm

@@ -43,8 +43,10 @@
 
 ; Special identifiers
 
-((identifier) @constructor
- (#match? @constructor "^[A-Z]"))
+((identifier) @type
+ (#match? @type "^[A-Z]"))
+(type_identifier) @type
+(predefined_type) @type.builtin
 
 ([
   (identifier)
@@ -192,14 +194,6 @@
   "${" @punctuation.special
   "}" @punctuation.special) @embedded
 
-; Types
-
-(type_identifier) @type
-(predefined_type) @type.builtin
-
-((identifier) @type
- (#match? @type "^[A-Z]"))
-
 (type_arguments
   "<" @punctuation.bracket
   ">" @punctuation.bracket)

crates/zed/src/languages/lua/highlights.scm

@@ -137,7 +137,7 @@
 ;; Constants
 
 ((identifier) @constant
- (#lua-match? @constant "^[A-Z][A-Z_0-9]*$"))
+ (#match? @constant "^[A-Z][A-Z_0-9]*$"))
 
 (vararg_expression) @constant
 
@@ -164,11 +164,17 @@
 
 (parameters (identifier) @parameter)
 
-(function_call name: (identifier) @function.call)
-(function_declaration name: (identifier) @function)
+(function_call
+  name: [
+    (identifier) @function
+    (dot_index_expression field: (identifier) @function)
+  ])
 
-(function_call name: (dot_index_expression field: (identifier) @function.call))
-(function_declaration name: (dot_index_expression field: (identifier) @function))
+(function_declaration
+  name: [
+    (identifier) @function.definition
+    (dot_index_expression field: (identifier) @function.definition)
+  ])
 
 (method_index_expression method: (identifier) @method)
 

crates/zed/src/languages/racket/highlights.scm

@@ -19,7 +19,7 @@
 (quote . (symbol)) @constant
 
 (extension) @keyword
-(lang_name) @variable.builtin
+(lang_name) @variable.special
 
 ((symbol) @operator
  (#match? @operator "^(\\+|-|\\*|/|=|>|<|>=|<=)$"))

crates/zed/src/languages/typescript/highlights.scm

@@ -46,6 +46,11 @@
 ((identifier) @constructor
  (#match? @constructor "^[A-Z]"))
 
+((identifier) @type
+ (#match? @type "^[A-Z]"))
+(type_identifier) @type
+(predefined_type) @type.builtin
+
 ([
   (identifier)
   (shorthand_property_identifier)
@@ -193,14 +198,6 @@
   "${" @punctuation.special
   "}" @punctuation.special) @embedded
 
-; Types
-
-(type_identifier) @type
-(predefined_type) @type.builtin
-
-((identifier) @type
- (#match? @type "^[A-Z]"))
-
 (type_arguments
   "<" @punctuation.bracket
   ">" @punctuation.bracket)

styles/src/themes/common/syntax.ts

@@ -47,11 +47,11 @@ export interface Syntax {
     "string.special": SyntaxHighlightStyle
     // elixir: atom, quoted_atom, keyword, quoted_keyword
     // ruby: simple_symbol, delimited_symbol...
-    "string.special.symbol": SyntaxHighlightStyle
+    "string.special.symbol"?: SyntaxHighlightStyle
     // elixir, python, yaml...: escape_sequence
-    "string.escape": SyntaxHighlightStyle
+    "string.escape"?: SyntaxHighlightStyle
     // Regular expressions
-    "string.regex": SyntaxHighlightStyle
+    "string.regex"?: SyntaxHighlightStyle
 
     // == Types ====== /
     // We allow Function here because all JS objects literals have this property
@@ -59,16 +59,14 @@ export interface Syntax {
     variant: SyntaxHighlightStyle
     type: SyntaxHighlightStyle
     // js: predefined_type
-    "type.builtin": SyntaxHighlightStyle
+    "type.builtin"?: SyntaxHighlightStyle
 
     // == Values
     variable: SyntaxHighlightStyle
-    // racket: lang_name
-    "variable.builtin": SyntaxHighlightStyle
     // this, ...
     // css: -- (var(--foo))
     // lua: self
-    "variable.special": SyntaxHighlightStyle
+    "variable.special"?: SyntaxHighlightStyle
     // c: statement_identifier,
     label: SyntaxHighlightStyle
     // css: tag_name, nesting_selector, universal_selector...
@@ -90,24 +88,22 @@ export interface Syntax {
     boolean: SyntaxHighlightStyle
     // elixir: __MODULE__, __DIR__, __ENV__, etc
     // go: nil, iota
-    "constant.builtin": SyntaxHighlightStyle
+    "constant.builtin"?: SyntaxHighlightStyle
 
     // == Functions ====== /
 
     function: SyntaxHighlightStyle
     // lua: assert, error, loadfile, tostring, unpack...
-    "function.builtin": SyntaxHighlightStyle
-    // lua: function_call
-    "function.call": SyntaxHighlightStyle
+    "function.builtin"?: SyntaxHighlightStyle
     // go: call_expression, method_declaration
     // js: call_expression, method_definition, pair (key, arrow function)
     // rust: function_item name: (identifier)
-    "function.definition": SyntaxHighlightStyle
+    "function.definition"?: SyntaxHighlightStyle
     // rust: macro_definition name: (identifier)
-    "function.special.definition": SyntaxHighlightStyle
-    "function.method": SyntaxHighlightStyle
+    "function.special.definition"?: SyntaxHighlightStyle
+    "function.method"?: SyntaxHighlightStyle
     // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
-    "function.method.builtin": SyntaxHighlightStyle
+    "function.method.builtin"?: SyntaxHighlightStyle
 
     // == Unsorted ====== /
     // lua: hash_bang_line
@@ -117,9 +113,6 @@ export interface Syntax {
     embedded: SyntaxHighlightStyle
 }
 
-// HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.
-// For now hack around it by omiting constructor as a valid key for overrides.
-// export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>
 export type ThemeSyntax = Partial<Syntax>
 
 const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
@@ -238,18 +231,9 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         type: {
             color: color.type,
         },
-        "type.builtin": {
-            color: color.type,
-        },
         variable: {
             color: color.primary,
         },
-        "variable.builtin": {
-            color: colorScheme.ramps.blue(0.5).hex(),
-        },
-        "variable.special": {
-            color: colorScheme.ramps.blue(0.7).hex(),
-        },
         label: {
             color: colorScheme.ramps.blue(0.5).hex(),
         },
@@ -280,30 +264,9 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         boolean: {
             color: color.boolean,
         },
-        "constant.builtin": {
-            color: color.constant,
-        },
         function: {
             color: color.function,
         },
-        "function.builtin": {
-            color: color.function,
-        },
-        "function.call": {
-            color: color.function,
-        },
-        "function.definition": {
-            color: color.function,
-        },
-        "function.special.definition": {
-            color: color.function,
-        },
-        "function.method": {
-            color: color.function,
-        },
-        "function.method.builtin": {
-            color: color.function,
-        },
         preproc: {
             color: color.primary,
         },

styles/src/themes/one-dark.ts

@@ -51,6 +51,7 @@ const syntax: ThemeSyntax = {
     linkText: { color: color.blue, italic: false },
     linkUri: { color: color.teal },
     number: { color: color.orange },
+    constant: { color: color.yellow },
     operator: { color: color.teal },
     primary: { color: color.white },
     property: { color: color.red },