[JavaScript] Fix unknown tagged templates

This commit... 1. adds a `literal-string-templates` context to include templates into contexts without popping it off stack. 2. adjusts tag scopes to already existing `variable.function.tagged-template`. 3. adds support for whitespace between template tag and punctuation 4. drops supportt for block quotes between template tag and punctuation for simplicity reasons. It's jugdged unlikely enough to appear in real world code.
sublimehq · Jul 28, 2024 · 5a7f759 · 5a7f759
1 parent dd1e3a5
commit 5a7f759
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 51 deletions.
diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
@@ -1011,8 +1011,7 @@ contexts:
         - include: decorator-name
         - include: object-property
 
-    - match: (?=`)
-      push: literal-string-template
+    - include: literal-string-templates
 
     - match: (?={{function_call_after_lookahead}})
       push: function-call-arguments
@@ -1078,8 +1077,7 @@ contexts:
   left-expression-end:
     - include: expression-break
 
-    - match: (?=`)
-      push: literal-string-template
+    - include: literal-string-templates
 
     - match: '{{function_call_after_lookahead}}'
       push: function-call-arguments
@@ -1223,62 +1221,62 @@ contexts:
       pop: 1
     - include: string-content
 
+  literal-string-templates:
+    - match: (?=(?:{{identifier_name}}\s*)?`)
+      push: literal-string-template
+
   literal-string-template:
-    - match: (css)(\`)
-      scope: meta.string.js
+    - match: (css)\s*(\`)
       captures:
-        1: constant.other.language-name.js
-        2: string.quoted.other.js punctuation.definition.string.begin.js
+        1: variable.function.tagged-template.js
+        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
       embed: scope:source.css.js-template
       embed_scope: meta.string.js source.css.embedded.js
       escape: \`
       escape_captures:
         0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
-    - match: (html)(\`)
-      scope: meta.string.js
+    - match: (html)\s*(\`)
       captures:
-        1: constant.other.language-name.js
-        2: string.quoted.other.js punctuation.definition.string.begin.js
+        1: variable.function.tagged-template.js
+        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
       embed: scope:text.html.js-template
       embed_scope: meta.string.js text.html.embedded.js
       escape: \`
       escape_captures:
         0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
-    - match: (js)(\`)
-      scope: meta.string.js
+    - match: (js)\s*(\`)
       captures:
-        1: constant.other.language-name.js
-        2: string.quoted.other.js punctuation.definition.string.begin.js
+        1: variable.function.tagged-template.js
+        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
       embed: scope:source.js.js-template
       embed_scope: meta.string.js source.js.embedded.js
       escape: \`
       escape_captures:
         0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
-    - match: (json)(\`)
-      scope: meta.string.js
+    - match: (json)\s*(\`)
       captures:
-        1: constant.other.language-name.js
-        2: string.quoted.other.js punctuation.definition.string.begin.js
+        1: variable.function.tagged-template.js
+        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
       embed: scope:source.json.js-template
       embed_scope: meta.string.js source.json.embedded.js
       escape: \`
       escape_captures:
         0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
-    - match: ({{identifier_name}})?(\`)
+    - match: (?:({{identifier_name}})\s*)?(\`)
       captures:
-        1: constant.other.language-name.js
-        2: punctuation.definition.string.begin.js
+        1: variable.function.tagged-template.js
+        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
       set: literal-string-template-content
 
   literal-string-template-content:
     - meta_include_prototype: false
-    - meta_scope: meta.string.js string.quoted.other.js
+    - meta_content_scope: meta.string.js string.quoted.other.js
     - match: \`
-      scope: punctuation.definition.string.end.js
+      scope: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
     - include: string-interpolations
     - include: string-content
@@ -2143,9 +2141,7 @@ contexts:
         - function-name-meta
         - literal-variable-base
 
-    - match: '{{identifier_name}}(?={{nothing}}`)'
-      scope: variable.function.tagged-template.js
-      pop: 1
+    - include: literal-string-template
 
     - match: '{{constant_identifier}}(?=\s*(?:{{dot_accessor}}|\[))'
       scope: support.class.js
@@ -2578,9 +2574,7 @@ contexts:
     - match: '(?=#?{{identifier_name}}{{function_call_after_lookahead}})'
       set: call-method-name
 
-    - match: '{{identifier_name}}(?={{nothing}}`)'
-      scope: variable.function.tagged-template.js
-      pop: 1
+    - include: literal-string-template
 
     - include: object-property-base
     - include: else-pop

diff --git a/JavaScript/tests/syntax_test_js.js b/JavaScript/tests/syntax_test_js.js
@@ -273,9 +273,6 @@ tag `template`;
 // <- variable.function.tagged-template
 //  ^^^^^^^^^^ meta.string string.quoted.other
 
-tag/**/`template`;
-// <- variable.function.tagged-template
-
 x ? y // y is a template tag!
 `template` : z;
 //         ^ keyword.operator.ternary
@@ -1051,7 +1048,7 @@ foo
 //   ^^^ variable.function.tagged-template
 //      ^^ meta.string string.quoted.other punctuation.definition.string
 
-foo.tag/**/``;
+foo.tag ``;
 //  ^^^ variable.function.tagged-template
 
 return new Promise(resolve => preferenceObject.set({value}, resolve));

diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js
@@ -5,9 +5,8 @@
  */
 
 var html = html`
-/*         ^^^^^^ meta.string.js */
-/*         ^^^^ constant.other.language-name.js */
-/*             ^ punctuation.definition.string.begin.js */
+/*         ^^^^ variable.function.tagged-template */
+/*             ^ meta.string.js punctuation.definition.string.begin.js */
 
     <script type="text/javascript">
         var ${name} = "Value ${interpol}"
@@ -90,9 +89,8 @@ var html = html`
  */
 
 var json = json`
-/*         ^^^^^^ meta.string.js */
-/*         ^^^^ constant.other.language-name.js */
-/*             ^ punctuation.definition.string.begin.js */
+/*         ^^^^ variable.function.tagged-template */
+/*             ^ meta.string.js punctuation.definition.string.begin.js */
     {
 /*  ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.section.mapping.begin.json */
 
@@ -135,9 +133,8 @@ var json = json`
  */
 
 var script = js`
-/*           ^^^^ meta.string.js */
-/*           ^^ constant.other.language-name.js */
-/*             ^ punctuation.definition.string.begin.js */
+/*           ^^ variable.function.tagged-template */
+/*             ^ meta.string.js punctuation.definition.string.begin.js */
 
     var ${name} = "Value ${interpol}"
 /*      ^^^^^^^ meta.interpolation.js */
@@ -155,9 +152,8 @@ var script = js`
  */
 
 var style = css`
-/*          ^^^^^ meta.string.js */
-/*          ^^^ constant.other.language-name.js */
-/*             ^ punctuation.definition.string.begin.js */
+/*          ^^^ variable.function.tagged-template */
+/*             ^ meta.string.js punctuation.definition.string.begin.js */
 /*              ^ source.css.embedded.js */
 
     tr, .${sel} {
@@ -186,10 +182,8 @@ var style = css`
  */
 
 var other = other`
-/*          ^^^^^^^ meta.string.js */
-/*          ^^^^^ constant.other.language-name.js */
-/*               ^ punctuation.definition.string.begin.js */
-/*                ^ string.quoted.other.js */
+/*          ^^^^^ variable.function.tagged-template */
+/*               ^ meta.string.js punctuation.definition.string.begin.js */
     Any content ${type}.
 /* ^^^^^^^^^^^^^ meta.string.js string.quoted.other.js */
 /*              ^^^^^^^ meta.string.js meta.interpolation.js - string */