try doing the reverse order, fix ?:

The colon is used for a lot of different things. I'm using what the non-tree sitter labels them. Although there's probably better names.

Author: icecream17

grammars/tree-sitter-javascript.cson

@@ -178,54 +178,58 @@ scopes:
   '"function"': 'storage.type.function'
   '"=>"': 'storage.type.function.arrow'
 
-  '"?."': 'meta.delimiter.optional'
+  '
+    switch_case > ":",
+    switch_default > ":"
+  ': 'punctuation.definition.section.case-statement.js'
 
-  '">>>="': 'keyword.operator.js'
-  '">>="': 'keyword.operator.js'
-  '"<<="': 'keyword.operator.js'
-  '">="': 'keyword.operator.js'
-  '"<="': 'keyword.operator.js'
-  '"**="': 'keyword.operator.js'
-  '"*="': 'keyword.operator.js'
-  '"/="': 'keyword.operator.js'
-  '"%="': 'keyword.operator.js'
-  '"+="': 'keyword.operator.js'
-  '"-="': 'keyword.operator.js'
-  '"&&="': 'keyword.operator.js'
-  '"||="': 'keyword.operator.js'
-  '"??="': 'keyword.operator.js'
-  '"&="': 'keyword.operator.js'
-  '"^="': 'keyword.operator.js'
-  '"|="': 'keyword.operator.js'
-  '"==="': 'keyword.operator.js'
-  '"=="': 'keyword.operator.js'
-  '"!=="': 'keyword.operator.js'
-  '"!="': 'keyword.operator.js'
-  '"="': 'keyword.operator.js'
-  '">>>"': 'keyword.operator.js'
-  '">>"': 'keyword.operator.js'
-  '"<<"': 'keyword.operator.js'
-  '">"': 'keyword.operator.js'
-  '"<"': 'keyword.operator.js'
-  '"**"': 'keyword.operator.js'
-  '"*"': 'keyword.operator.js'
-  '"/"': 'keyword.operator.js'
-  '"%"': 'keyword.operator.js'
-  '"++"': 'keyword.operator.js'
-  '"--"': 'keyword.operator.js'
-  '"+"': 'keyword.operator.js'
-  '"-"': 'keyword.operator.js'
-  '"&&"': 'keyword.operator.js'
-  '"||"': 'keyword.operator.js'
-  '"??"': 'keyword.operator.js'
-  '"&"': 'keyword.operator.js'
-  '"^"': 'keyword.operator.js'
-  '"|"': 'keyword.operator.js'
-  '"~"': 'keyword.operator.js'
-  '"!"': 'keyword.operator.js'
-  '"?"': 'keyword.operator.js'
-  '":"': 'keyword.operator.js'
+  'ternary_expression > "?"': 'keyword.operator.ternary.js'
+  'ternary_expression > ":"': 'keyword.operator.ternary.js'
+  '":"': 'keyword.operator.assignment.js'
   '"..."': 'keyword.operator.spread.js'
+  '"!"': 'keyword.operator.js'
+  '"~"': 'keyword.operator.js'
+  '"|"': 'keyword.operator.js'
+  '"^"': 'keyword.operator.js'
+  '"&"': 'keyword.operator.js'
+  '"??"': 'keyword.operator.js'
+  '"||"': 'keyword.operator.js'
+  '"&&"': 'keyword.operator.js'
+  '"-"': 'keyword.operator.js'
+  '"+"': 'keyword.operator.js'
+  '"--"': 'keyword.operator.js'
+  '"++"': 'keyword.operator.js'
+  '"%"': 'keyword.operator.js'
+  '"/"': 'keyword.operator.js'
+  '"*"': 'keyword.operator.js'
+  '"**"': 'keyword.operator.js'
+  '"<"': 'keyword.operator.js'
+  '">"': 'keyword.operator.js'
+  '"<<"': 'keyword.operator.js'
+  '">>"': 'keyword.operator.js'
+  '">>>"': 'keyword.operator.js'
+  '"="': 'keyword.operator.js'
+  '"!="': 'keyword.operator.js'
+  '"!=="': 'keyword.operator.js'
+  '"=="': 'keyword.operator.js'
+  '"==="': 'keyword.operator.js'
+  '"|="': 'keyword.operator.js'
+  '"^="': 'keyword.operator.js'
+  '"&="': 'keyword.operator.js'
+  '"??="': 'keyword.operator.js'
+  '"||="': 'keyword.operator.js'
+  '"&&="': 'keyword.operator.js'
+  '"-="': 'keyword.operator.js'
+  '"+="': 'keyword.operator.js'
+  '"%="': 'keyword.operator.js'
+  '"/="': 'keyword.operator.js'
+  '"*="': 'keyword.operator.js'
+  '"**="': 'keyword.operator.js'
+  '"<="': 'keyword.operator.js'
+  '">="': 'keyword.operator.js'
+  '"<<="': 'keyword.operator.js'
+  '">>="': 'keyword.operator.js'
+  '">>>="': 'keyword.operator.js'
 
   '"in"': 'keyword.operator.in'
   '"instanceof"': 'keyword.operator.instanceof'
@@ -238,6 +242,7 @@ scopes:
   '"set"': 'keyword.operator.setter'
 
   '"."': 'meta.delimiter.period'
+  '"?."': 'meta.delimiter.optional'
   '","': 'meta.delimiter.comma'
 
   '"if"': 'keyword.control'