From 74e2cb0dba78dae88e4c5085abd8f3401edaa77c Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Sun, 28 Jul 2024 12:19:00 +0200
Subject: [PATCH 1/5] [JavaScript] Syntax highlighting in tagged templates

This commit adds support for syntax highlighting of CSS/JS/JSON/HTML
within tagged template strings.
---
 .../CSS (for JS template).sublime-syntax      |  23 +++
 .../HTML (for JS template).sublime-syntax     | 122 ++++++++++++
 .../JSON (JS template).sublime-syntax         |  18 ++
 .../JavaScript (JS template).sublime-syntax   |  19 ++
 JavaScript/JavaScript.sublime-syntax          |  57 +++++-
 JavaScript/tests/syntax_test_js_template.js   | 182 ++++++++++++++++++
 6 files changed, 419 insertions(+), 2 deletions(-)
 create mode 100644 JavaScript/Embeddings/CSS (for JS template).sublime-syntax
 create mode 100644 JavaScript/Embeddings/HTML (for JS template).sublime-syntax
 create mode 100644 JavaScript/Embeddings/JSON (JS template).sublime-syntax
 create mode 100644 JavaScript/Embeddings/JavaScript (JS template).sublime-syntax
 create mode 100644 JavaScript/tests/syntax_test_js_template.js

diff --git a/JavaScript/Embeddings/CSS (for JS template).sublime-syntax b/JavaScript/Embeddings/CSS (for JS template).sublime-syntax
new file mode 100644
index 0000000000..3491f2d7e9
--- /dev/null
+++ b/JavaScript/Embeddings/CSS (for JS template).sublime-syntax	
@@ -0,0 +1,23 @@
+%YAML 1.2
+---
+# http://www.sublimetext.com/docs/syntax.html
+# highlight tagged template strings
+scope: source.css.js-template
+version: 2
+hidden: true
+
+extends: Packages/CSS/CSS.sublime-syntax
+
+variables:
+
+    ident_start: (?:{{nmstart}}|\${)
+
+contexts:
+
+  prototype:
+    - meta_prepend: true
+    - include: scope:source.js#text-interpolations
+
+  strings-content:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
diff --git a/JavaScript/Embeddings/HTML (for JS template).sublime-syntax b/JavaScript/Embeddings/HTML (for JS template).sublime-syntax
new file mode 100644
index 0000000000..2d81737e03
--- /dev/null
+++ b/JavaScript/Embeddings/HTML (for JS template).sublime-syntax	
@@ -0,0 +1,122 @@
+%YAML 1.2
+---
+# http://www.sublimetext.com/docs/syntax.html
+# highlight tagged template strings
+scope: text.html.js-template
+version: 2
+hidden: true
+
+extends: Packages/HTML/HTML.sublime-syntax
+
+variables:
+
+  tag_name_start: (?:[A-Za-z]|\${)
+
+contexts:
+
+  prototype:
+    - meta_prepend: true
+    - include: scope:source.js#text-interpolations
+
+  cdata-content:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
+
+  script-javascript-content:
+    - meta_include_prototype: false
+    - match: '{{script_content_begin}}'
+      captures:
+        1: comment.block.html punctuation.definition.comment.begin.html
+      pop: 1  # make sure to match only once
+      embed: scope:source.js.js-template
+      embed_scope: source.js.embedded.html
+      escape: '{{script_content_end}}'
+      escape_captures:
+        1: source.js.embedded.html
+        2: comment.block.html punctuation.definition.comment.end.html
+        3: source.js.embedded.html
+        4: comment.block.html punctuation.definition.comment.end.html
+
+  script-json-content:
+    - meta_include_prototype: false
+    - match: '{{script_content_begin}}'
+      captures:
+        1: comment.block.html punctuation.definition.comment.begin.html
+      pop: 1  # make sure to match only once
+      embed: scope:source.json.js-template
+      embed_scope: source.json.embedded.html
+      escape: '{{script_content_end}}'
+      escape_captures:
+        1: source.json.embedded.html
+        2: comment.block.html punctuation.definition.comment.end.html
+        3: source.json.embedded.html
+        4: comment.block.html punctuation.definition.comment.end.html
+
+  style-css-content:
+    - meta_include_prototype: false
+    - match: '{{style_content_begin}}'
+      captures:
+        1: comment.block.html punctuation.definition.comment.begin.html
+      pop: 1  # make sure to match only once
+      embed: scope:source.css.js-template
+      embed_scope: source.css.embedded.html
+      escape: '{{style_content_end}}'
+      escape_captures:
+        1: source.css.embedded.html
+        2: comment.block.html punctuation.definition.comment.end.html
+        3: source.css.embedded.html
+        4: comment.block.html punctuation.definition.comment.end.html
+
+  tag-event-attribute-value:
+    - match: \"
+      scope:
+        meta.string.html string.quoted.double.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.js.js-template
+      embed_scope: meta.string.html meta.embedded.html source.js.embedded.html
+      escape: \"
+      escape_captures:
+        0: meta.string.html string.quoted.double.html
+           punctuation.definition.string.end.html
+    - match: \'
+      scope:
+        meta.string.html string.quoted.single.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.js.js-template
+      embed_scope: meta.string.html meta.embedded.html source.js.embedded.html
+      escape: \'
+      escape_captures:
+        0: meta.string.html string.quoted.single.html
+           punctuation.definition.string.end.html
+    - include: else-pop
+
+  tag-style-attribute-value:
+    - match: \"
+      scope:
+        meta.string.html string.quoted.double.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.css.js-template#rule-list-body
+      embed_scope: meta.string.html meta.embedded.html source.css.embedded.html
+      escape: \"
+      escape_captures:
+        0: meta.string.html string.quoted.double.html
+           punctuation.definition.string.end.html
+    - match: \'
+      scope:
+        meta.string.html string.quoted.single.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.css.js-template#rule-list-body
+      embed_scope: meta.string.html meta.embedded.html source.css.embedded.html
+      escape: \'
+      escape_captures:
+        0: meta.string.html string.quoted.single.html
+           punctuation.definition.string.end.html
+    - include: else-pop
+
+  tag-attribute-value-content:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
+
+  strings-common-content:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
diff --git a/JavaScript/Embeddings/JSON (JS template).sublime-syntax b/JavaScript/Embeddings/JSON (JS template).sublime-syntax
new file mode 100644
index 0000000000..21f36a5a39
--- /dev/null
+++ b/JavaScript/Embeddings/JSON (JS template).sublime-syntax	
@@ -0,0 +1,18 @@
+%YAML 1.2
+---
+# http://www.sublimetext.com/docs/syntax.html
+# highlight tagged template strings
+scope: source.json.js-template
+version: 2
+hidden: true
+
+extends: Packages/JSON/JSON.sublime-syntax
+
+contexts:
+  prototype:
+    - meta_prepend: true
+    - include: scope:source.js#text-interpolations
+
+  string-prototype:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
diff --git a/JavaScript/Embeddings/JavaScript (JS template).sublime-syntax b/JavaScript/Embeddings/JavaScript (JS template).sublime-syntax
new file mode 100644
index 0000000000..991a417aff
--- /dev/null
+++ b/JavaScript/Embeddings/JavaScript (JS template).sublime-syntax	
@@ -0,0 +1,19 @@
+%YAML 1.2
+---
+# http://www.sublimetext.com/docs/syntax.html
+# highlight tagged template strings
+scope: source.js.js-template
+version: 2
+hidden: true
+
+extends: Packages/JavaScript/JavaScript.sublime-syntax
+
+contexts:
+
+  prototype:
+    - meta_prepend: true
+    - include: scope:source.js#text-interpolations
+
+  string-content:
+    - meta_prepend: true
+    - include: scope:source.js#string-interpolations
diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
index 2452d6b7cf..2bbab238a5 100644
--- a/JavaScript/JavaScript.sublime-syntax
+++ b/JavaScript/JavaScript.sublime-syntax
@@ -1224,6 +1224,50 @@ contexts:
     - include: string-content
 
   literal-string-template:
+    - match: (css)(\`)
+      scope: meta.string.js
+      captures:
+        1: constant.other.language-name.js
+        2: 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
+      captures:
+        1: constant.other.language-name.js
+        2: 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
+      captures:
+        1: constant.other.language-name.js
+        2: 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
+      captures:
+        1: constant.other.language-name.js
+        2: 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: \`
       scope: punctuation.definition.string.begin.js
       set: literal-string-template-content
@@ -1250,13 +1294,22 @@ contexts:
 
   string-interpolation-content:
     - clear_scopes: 1
+    - meta_scope: meta.interpolation.js
+    - meta_content_scope: source.js.embedded
+    - include: text-interpolation-content
+
+  text-interpolations:
+    - match: \$\{
+      scope: punctuation.section.interpolation.begin.js
+      push: text-interpolation-content
+
+  text-interpolation-content:
     - meta_scope: meta.interpolation.js
     - meta_content_scope: source.js.embedded
     - match: \}
       scope: punctuation.section.interpolation.end.js
       pop: 1
-    - match: (?=\S)
-      push: expression
+    - include: expressions
 
   regexp-complete:
     - match: '/'
diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js
new file mode 100644
index 0000000000..bb79f2860a
--- /dev/null
+++ b/JavaScript/tests/syntax_test_js_template.js
@@ -0,0 +1,182 @@
+/* SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" */
+
+/*
+ * HTML Templates
+ */
+
+var html = html`
+/*         ^^^^^^ meta.string.js */
+/*         ^^^^ constant.other.language-name.js */
+/*             ^ punctuation.definition.string.begin.js */
+
+    <script type="text/javascript">
+        var ${name} = "Value ${interpol}"
+    /*      ^^^^^^^ meta.interpolation.js */
+    /*                ^^^^^^^ source.js.embedded.html meta.string.js string.quoted.double.js */
+    /*                       ^^^^^^^^^^^ source.js.embedded.html meta.string.js meta.interpolation.js */
+    /*                                  ^ source.js.embedded.html meta.string.js string.quoted.double.js */
+    </script>
+
+    <script type="text/json">
+        {
+    /*  ^ source.json.embedded.html meta.mapping.json punctuation.section.mapping.begin.json */
+
+            "key1": "val${ue}",
+    /*      ^^^^^^ source.json.embedded.html meta.mapping.key.json string.quoted.double.json */
+    /*            ^ source.json.embedded.html meta.mapping.json punctuation.separator.key-value.json */
+    /*              ^^^^ source.json.embedded.html meta.mapping.value.json meta.string.json string.quoted.double.json */
+    /*                  ^^^^^ source.json.embedded.html meta.mapping.value.json meta.string.json meta.interpolation.js */
+    /*                       ^ source.json.embedded.html meta.mapping.value.json meta.string.json string.quoted.double.json */
+    /*                        ^ source.json.embedded.html meta.mapping.json punctuation.separator.sequence.json */
+
+            ${key}: ${value},
+    /*      ^^^^^^ source.json.embedded.html meta.mapping.json meta.interpolation.js */
+    /*            ^ source.json.embedded.html meta.mapping.json punctuation.separator.key-value.json */
+    /*              ^^^^^^^^ source.json.embedded.html meta.mapping.value.json meta.interpolation.js */
+    /*                      ^ source.json.embedded.html meta.mapping.json punctuation.separator.sequence.json */
+
+            "key2": [${val1}, "val${no}"],
+    /*      ^^^^^^ source.json.embedded.html meta.mapping.key.json string.quoted.double.json */
+    /*            ^ source.json.embedded.html meta.mapping.json punctuation.separator.key-value.json */
+    /*              ^^^^^^^^^^^^^^^^^^^^^ source.json.embedded.html meta.mapping.value.json meta.sequence.json */
+    /*              ^ punctuation.section.sequence.begin.json */
+    /*               ^^^^^^^ meta.interpolation.js */
+    /*                      ^ punctuation.separator.sequence.json */
+    /*                        ^^^^ meta.string.json string.quoted.double.json */
+    /*                            ^^^^^ meta.string.json meta.interpolation.js */
+    /*                                 ^ meta.string.json string.quoted.double.json */
+    /*                                  ^ punctuation.section.sequence.end.json */
+    /*                                   ^ punctuation.separator.sequence.json */
+        }
+    /*  ^ source.json.embedded.html meta.mapping.json punctuation.section.mapping.end.json */
+    </script>
+
+    <style type="text/css">
+        tr, .${sel} {
+    /*  ^^^^^^^^^^^^ source.css.embedded.html meta.selector.css */
+    /*  ^^ source.css.embedded.html entity.name.tag.html.css */
+    /*    ^ source.css.embedded.html punctuation.separator.sequence.css */
+    /*      ^ source.css.embedded.html entity.other.attribute-name.class.css punctuation.definition.entity.css */
+    /*       ^^^^^^ source.css.embedded.html entity.other.attribute-name.class.css meta.interpolation.js */
+    /*              ^ source.css.embedded.html meta.block.css punctuation.section.block.begin.css */
+
+            background-${attr}: ${value};
+    /*      ^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-name.css support.type.property-name.css */
+    /*                 ^^^^^^^ source.css.embedded.html meta.interpolation.js */
+    /*                        ^ source.css.embedded.html punctuation.separator.key-value.css */
+    /*                          ^^^^^^^^ source.css.embedded.html meta.property-value.css meta.interpolation.js */
+        }
+    /*  ^ source.css.embedded.html meta.block.css punctuation.section.block.end.css */
+    </style>
+
+    <p style="width: ${width}%" class="${class_name}" onclick="${click}">${content}</p>
+/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.js text.html.embedded.js meta.tag.block.any.html */
+/*     ^^^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.style.html */
+/*                   ^^^^^^^^ source.css.embedded.html meta.property-value.css meta.interpolation.js */
+/*                              ^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.class.html */
+/*                                     ^^^^^^^^^^^^^ meta.class-name.html meta.string.html meta.interpolation.js */
+/*                                                    ^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.event.html */
+/*                                                             ^^^^^^^^ source.js.embedded.html meta.interpolation.js */
+/*                                                                       ^^^^^^^^^^ meta.string.js text.html.embedded.js meta.interpolation.js */
+/*                                                                                 ^^^^ meta.string.js text.html.embedded.js meta.tag.block.any.html */
+    `
+/* <- meta.string.js text.html.embedded.js */
+/*^^ meta.string.js text.html.embedded.js */
+/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - text.html.embedded */
+/*   ^ - meta.string */
+
+/*
+ * JSON Templates
+ */
+
+var json = json`
+/*         ^^^^^^ meta.string.js */
+/*         ^^^^ constant.other.language-name.js */
+/*             ^ punctuation.definition.string.begin.js */
+    {
+/*  ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.section.mapping.begin.json */
+
+        "key1": "val${ue}",
+/*      ^^^^^^ meta.string.js source.json.embedded.js meta.mapping.key.json string.quoted.double.json */
+/*            ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.separator.key-value.json */
+/*              ^^^^ meta.string.js source.json.embedded.js meta.mapping.value.json meta.string.json string.quoted.double.json */
+/*                  ^^^^^ meta.string.js source.json.embedded.js meta.mapping.value.json meta.string.json meta.interpolation.js */
+/*                       ^ meta.string.js source.json.embedded.js meta.mapping.value.json meta.string.json string.quoted.double.json */
+/*                        ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.separator.sequence.json */
+
+        ${key}: ${value},
+/*      ^^^^^^ meta.string.js source.json.embedded.js meta.mapping.json meta.interpolation.js */
+/*            ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.separator.key-value.json */
+/*              ^^^^^^^^ meta.string.js source.json.embedded.js meta.mapping.value.json meta.interpolation.js */
+/*                      ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.separator.sequence.json */
+
+        "key2": [${val1}, "val${no}"],
+/*      ^^^^^^ meta.string.js source.json.embedded.js meta.mapping.key.json string.quoted.double.json */
+/*            ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.separator.key-value.json */
+/*              ^^^^^^^^^^^^^^^^^^^^^ meta.string.js source.json.embedded.js meta.mapping.value.json meta.sequence.json */
+/*              ^ punctuation.section.sequence.begin.json */
+/*               ^^^^^^^ meta.interpolation.js */
+/*                      ^ punctuation.separator.sequence.json */
+/*                        ^^^^ meta.string.json string.quoted.double.json */
+/*                            ^^^^^ meta.string.json meta.interpolation.js */
+/*                                 ^ meta.string.json string.quoted.double.json */
+/*                                  ^ punctuation.section.sequence.end.json */
+/*                                   ^ punctuation.separator.sequence.json */
+    }
+/*  ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.section.mapping.end.json */
+    `
+/* <- meta.string.js source.json.embedded.js */
+/*^^ meta.string.js source.json.embedded.js */
+/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.json.embedded */
+/*   ^ - meta.string */
+
+/*
+ * JavaScript Templates
+ */
+
+var script = js`
+/*           ^^^^ meta.string.js */
+/*           ^^ constant.other.language-name.js */
+/*             ^ punctuation.definition.string.begin.js */
+
+    var ${name} = "Value ${interpol}"
+/*      ^^^^^^^ meta.interpolation.js */
+/*                ^^^^^^^ meta.string.js source.js.embedded.js meta.string.js string.quoted.double.js */
+/*                       ^^^^^^^^^^^ meta.string.js source.js.embedded.js meta.string.js meta.interpolation.js */
+/*                                  ^ meta.string.js source.js.embedded.js meta.string.js string.quoted.double.js */
+    `
+/* <- meta.string.js source.js.embedded.js */
+/*^^ meta.string.js source.js.embedded.js */
+/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.js.embedded */
+/*   ^ - meta.string */
+
+/*
+ * CSS Templates
+ */
+
+var style = css`
+/*          ^^^^^ meta.string.js */
+/*          ^^^ constant.other.language-name.js */
+/*             ^ punctuation.definition.string.begin.js */
+/*              ^ source.css.embedded.js */
+
+    tr, .${sel} {
+/*  ^^^^^^^^^^^^ meta.selector.css */
+/*  ^^ entity.name.tag.html.css */
+/*    ^ punctuation.separator.sequence.css */
+/*      ^ entity.other.attribute-name.class.css punctuation.definition.entity.css */
+/*       ^^^^^^ entity.other.attribute-name.class.css meta.interpolation.js */
+/*              ^ meta.block.css punctuation.section.block.begin.css */
+
+        background-${attr}: ${value};
+/*      ^^^^^^^^^^^^^^^^^^ meta.property-name.css support.type.property-name.css */
+/*                 ^^^^^^^ meta.interpolation.js */
+/*                        ^ punctuation.separator.key-value.css */
+/*                          ^^^^^^^^ meta.property-value.css meta.interpolation.js */
+    }
+/*  ^ meta.block.css punctuation.section.block.end.css */
+    `
+/* <- meta.string.js source.css.embedded.js */
+/*^^ meta.string.js source.css.embedded.js */
+/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.css */
+/*   ^ - meta.string */

From dd1e3a519b1ee9bd3dd3bb614a24bde37ab467a9 Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Sun, 28 Jul 2024 12:56:35 +0200
Subject: [PATCH 2/5] [JavaScript] Add fallback for unknown tags

---
 JavaScript/JavaScript.sublime-syntax        |  6 ++--
 JavaScript/tests/syntax_test_js_template.js | 33 +++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
index 2bbab238a5..08b5549db1 100644
--- a/JavaScript/JavaScript.sublime-syntax
+++ b/JavaScript/JavaScript.sublime-syntax
@@ -1268,8 +1268,10 @@ contexts:
       escape_captures:
         0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
       pop: 1
-    - match: \`
-      scope: punctuation.definition.string.begin.js
+    - match: ({{identifier_name}})?(\`)
+      captures:
+        1: constant.other.language-name.js
+        2: punctuation.definition.string.begin.js
       set: literal-string-template-content
 
   literal-string-template-content:
diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js
index bb79f2860a..d1af1cc04e 100644
--- a/JavaScript/tests/syntax_test_js_template.js
+++ b/JavaScript/tests/syntax_test_js_template.js
@@ -180,3 +180,36 @@ var style = css`
 /*^^ meta.string.js source.css.embedded.js */
 /*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.css */
 /*   ^ - meta.string */
+
+/*
+ * Unknown Template
+ */
+
+var other = other`
+/*          ^^^^^^^ meta.string.js */
+/*          ^^^^^ constant.other.language-name.js */
+/*               ^ punctuation.definition.string.begin.js */
+/*                ^ string.quoted.other.js */
+    Any content ${type}.
+/* ^^^^^^^^^^^^^ meta.string.js string.quoted.other.js */
+/*              ^^^^^^^ meta.string.js meta.interpolation.js - string */
+/*                     ^^ meta.string.js string.quoted.other.js */
+    `
+/* <- meta.string.js string.quoted.other.js */
+/*^^^ meta.string.js string.quoted.other.js */
+/*  ^ punctuation.definition.string.end.js */
+/*   ^ - meta.string */
+
+var other = `
+/*          ^^ meta.string.js */
+/*          ^ punctuation.definition.string.begin.js */
+/*           ^ string.quoted.other.js */
+    Any content ${type}.
+/* ^^^^^^^^^^^^^ meta.string.js string.quoted.other.js */
+/*              ^^^^^^^ meta.string.js meta.interpolation.js - string */
+/*                     ^^ meta.string.js string.quoted.other.js */
+    `
+/* <- meta.string.js string.quoted.other.js */
+/*^^^ meta.string.js string.quoted.other.js */
+/*  ^ punctuation.definition.string.end.js */
+/*   ^ - meta.string */

From 5a7f75966b0034d67ec5c31c6f27ad15e8d48f53 Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Sun, 28 Jul 2024 13:49:05 +0200
Subject: [PATCH 3/5] [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.
---
 JavaScript/JavaScript.sublime-syntax        | 56 +++++++++------------
 JavaScript/tests/syntax_test_js.js          |  5 +-
 JavaScript/tests/syntax_test_js_template.js | 26 ++++------
 3 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
index 08b5549db1..ff0a7f6f09 100644
--- 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
index f0c27e7280..d44f0c6da3 100644
--- 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
index d1af1cc04e..b9f051a7dc 100644
--- 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 */

From 69c1576ddd7cd7ca88cd83bba76c140deeceff9e Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Sun, 28 Jul 2024 15:00:42 +0200
Subject: [PATCH 4/5] [JavaScript] Auto-indent tagged template string content

This commit adjusts syntax definition and indentation rules to ensure
content of tagged templates is indented, automatically.

It includes consuming all trailing/leading whitespace after opening and
in front of closing string punctuation, to ensure JavaScript indentation
rules being applied, when hitting enter after an opening template punctuation.
---
 JavaScript/Indentation Rules.tmPreferences    |  4 +
 JavaScript/JavaScript.sublime-syntax          | 46 +++++++----
 .../tests/syntax_test_js_indent_common.js     | 77 +++++++++++++++++++
 JavaScript/tests/syntax_test_js_template.js   | 41 ++++++----
 4 files changed, 135 insertions(+), 33 deletions(-)

diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences
index becd1c00e0..90c4f24bde 100644
--- a/JavaScript/Indentation Rules.tmPreferences	
+++ b/JavaScript/Indentation Rules.tmPreferences	
@@ -12,6 +12,8 @@
 			(?:
 			# dedent closing braces
 			  \}
+			# dedent closing tagged templates
+			| `
 			# detent `case ... :`
 			| case\b
 			# detent `default:`
@@ -27,6 +29,8 @@
 			# indent after opening braces (may be followed by whitespace or comments)
 			# but exclude lines such as `extern "C" {`
 			  .* \{ (?: \s* /\*.*\*/ )* \s* (?: //.* )? $
+			# indent after opening tagged template: e.g.: "css`"
+			| .* \w+ \s* `
 			# indent after `case ... :`
 			| case\b
 			# indent after `default:`
diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
index ff0a7f6f09..6e09e36f31 100644
--- a/JavaScript/JavaScript.sublime-syntax
+++ b/JavaScript/JavaScript.sublime-syntax
@@ -1226,45 +1226,59 @@ contexts:
       push: literal-string-template
 
   literal-string-template:
-    - match: (css)\s*(\`)
+    # Notes:
+    #  Consume trailing whitespace after opening punctuation
+    #  and leading whitespace in front of closing punctuation
+    #  to maintain JavaScript indentation rules until embedded
+    #  code really begins/ends. It's required for embedded code
+    #  to be indented using global JavaScript indentation rules.
+    - match: (css)\s*((\`)\s*)
       captures:
         1: variable.function.tagged-template.js
-        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
+        2: meta.string.js string.quoted.other.js
+        3: punctuation.definition.string.begin.js
       embed: scope:source.css.js-template
       embed_scope: meta.string.js source.css.embedded.js
-      escape: \`
+      escape: \s*(\`)
       escape_captures:
-        0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
+        0: meta.string.js string.quoted.other.js
+        1: punctuation.definition.string.end.js
       pop: 1
-    - match: (html)\s*(\`)
+    - match: (html)\s*((\`)\s*)
       captures:
         1: variable.function.tagged-template.js
-        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
+        2: meta.string.js string.quoted.other.js
+        3: punctuation.definition.string.begin.js
       embed: scope:text.html.js-template
       embed_scope: meta.string.js text.html.embedded.js
-      escape: \`
+      escape: \s*(\`)
       escape_captures:
-        0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
+        0: meta.string.js string.quoted.other.js
+        1: punctuation.definition.string.end.js
       pop: 1
-    - match: (js)\s*(\`)
+    - match: (js)\s*((\`)\s*)
       captures:
         1: variable.function.tagged-template.js
-        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
+        2: meta.string.js string.quoted.other.js
+        3: punctuation.definition.string.begin.js
       embed: scope:source.js.js-template
       embed_scope: meta.string.js source.js.embedded.js
-      escape: \`
+      escape: \s*(\`)
       escape_captures:
-        0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
+        0: meta.string.js string.quoted.other.js
+        1: punctuation.definition.string.end.js
       pop: 1
-    - match: (json)\s*(\`)
+    - match: (json)\s*((\`)\s*)
       captures:
         1: variable.function.tagged-template.js
-        2: meta.string.js string.quoted.other.js punctuation.definition.string.begin.js
+        2: meta.string.js string.quoted.other.js
+        3: punctuation.definition.string.begin.js
       embed: scope:source.json.js-template
       embed_scope: meta.string.js source.json.embedded.js
-      escape: \`
+      escape: \s*(\`)
       escape_captures:
-        0: meta.string.js string.quoted.other.js punctuation.definition.string.end.js
+        0: meta.string.js string.quoted.other.js
+        1: punctuation.definition.string.end.js
       pop: 1
     - match: (?:({{identifier_name}})\s*)?(\`)
       captures:
diff --git a/JavaScript/tests/syntax_test_js_indent_common.js b/JavaScript/tests/syntax_test_js_indent_common.js
index 6db0db4fa1..132c8fcf0d 100644
--- a/JavaScript/tests/syntax_test_js_indent_common.js
+++ b/JavaScript/tests/syntax_test_js_indent_common.js
@@ -977,3 +977,80 @@ function testWhileIndentationWithBracesAndComments(v)  {
         v++                             // ;  "comments" ()
     }                                   // ;  "comments" ()
 }
+
+/*
+ * CSS Templates
+ */
+
+var style = css`
+    tr, p {
+        background: red solid;
+    }
+`;
+
+/*
+ * HTML Templates
+ */
+
+var html = html`
+    <head>
+        <script type="text/javascript">
+            var ${name} = "Value ${interpol}"
+        </script>
+
+        <script type="text/json">
+            {
+                "simple": "val${ue}",
+                "list": [
+                    "value1",
+                    "value2"
+                ],
+                "object": {
+                    "simple": "val${ue}",
+                    "list": [
+                        "value1",
+                        "value2"
+                    ]
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div style="width: ${width}%" class="${class_name}" onclick="${click}">
+            <p>${content}</p>
+        </div>
+    </body>
+`;
+
+/*
+ * JavaScript Templates
+ */
+
+var script = js`
+    var ${name} = "Value ${interpol}"
+
+    function foo (arg1, arg2) {
+        return 0;
+    }
+`
+
+/*
+ * JSON Templates
+ */
+
+var json = json`
+    {
+        "simple": "val${ue}",
+        "list": [
+            "value1",
+            "value2"
+        ],
+        "object": {
+            "simple": "val${ue}",
+            "list": [
+                "value1",
+                "value2"
+            ]
+        }
+    }
+`
\ No newline at end of file
diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js
index b9f051a7dc..7a68dd8d8d 100644
--- a/JavaScript/tests/syntax_test_js_template.js
+++ b/JavaScript/tests/syntax_test_js_template.js
@@ -6,7 +6,9 @@
 
 var html = html`
 /*         ^^^^ variable.function.tagged-template */
-/*             ^ meta.string.js punctuation.definition.string.begin.js */
+/*             ^^ meta.string.js string.quoted.other.js */
+/*             ^ punctuation.definition.string.begin.js */
+/*              ^ - text.html.embedded */
 
     <script type="text/javascript">
         var ${name} = "Value ${interpol}"
@@ -79,9 +81,9 @@ var html = html`
 /*                                                                       ^^^^^^^^^^ meta.string.js text.html.embedded.js meta.interpolation.js */
 /*                                                                                 ^^^^ meta.string.js text.html.embedded.js meta.tag.block.any.html */
     `
-/* <- meta.string.js text.html.embedded.js */
-/*^^ meta.string.js text.html.embedded.js */
-/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - text.html.embedded */
+/* <- meta.string.js string.quoted.other.js - text.html.embedded */
+/*^^^ meta.string.js string.quoted.other.js - text.html.embedded */
+/*  ^ punctuation.definition.string.end.js */
 /*   ^ - meta.string */
 
 /*
@@ -90,7 +92,9 @@ var html = html`
 
 var json = json`
 /*         ^^^^ variable.function.tagged-template */
-/*             ^ meta.string.js punctuation.definition.string.begin.js */
+/*             ^^ meta.string.js string.quoted.other.js */
+/*             ^ punctuation.definition.string.begin.js */
+/*              ^ - source.json.embedded */
     {
 /*  ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.section.mapping.begin.json */
 
@@ -123,9 +127,9 @@ var json = json`
     }
 /*  ^ meta.string.js source.json.embedded.js meta.mapping.json punctuation.section.mapping.end.json */
     `
-/* <- meta.string.js source.json.embedded.js */
-/*^^ meta.string.js source.json.embedded.js */
-/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.json.embedded */
+/* <- meta.string.js string.quoted.other.js - source.json.embedded */
+/*^^^ meta.string.js string.quoted.other.js - source.json.embedded */
+/*  ^ punctuation.definition.string.end.js */
 /*   ^ - meta.string */
 
 /*
@@ -134,7 +138,9 @@ var json = json`
 
 var script = js`
 /*           ^^ variable.function.tagged-template */
-/*             ^ meta.string.js punctuation.definition.string.begin.js */
+/*             ^^ meta.string.js string.quoted.other.js */
+/*             ^ punctuation.definition.string.begin.js */
+/*              ^ - source.js.embedded */
 
     var ${name} = "Value ${interpol}"
 /*      ^^^^^^^ meta.interpolation.js */
@@ -142,9 +148,9 @@ var script = js`
 /*                       ^^^^^^^^^^^ meta.string.js source.js.embedded.js meta.string.js meta.interpolation.js */
 /*                                  ^ meta.string.js source.js.embedded.js meta.string.js string.quoted.double.js */
     `
-/* <- meta.string.js source.js.embedded.js */
-/*^^ meta.string.js source.js.embedded.js */
-/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.js.embedded */
+/* <- meta.string.js string.quoted.other.js - source.js.embedded */
+/*^^^ meta.string.js string.quoted.other.js - source.js.embedded */
+/*  ^ punctuation.definition.string.end.js */
 /*   ^ - meta.string */
 
 /*
@@ -153,8 +159,9 @@ var script = js`
 
 var style = css`
 /*          ^^^ variable.function.tagged-template */
-/*             ^ meta.string.js punctuation.definition.string.begin.js */
-/*              ^ source.css.embedded.js */
+/*             ^^ meta.string.js string.quoted.other.js */
+/*             ^ punctuation.definition.string.begin.js */
+/*              ^ - source.css.embedded */
 
     tr, .${sel} {
 /*  ^^^^^^^^^^^^ meta.selector.css */
@@ -172,9 +179,9 @@ var style = css`
     }
 /*  ^ meta.block.css punctuation.section.block.end.css */
     `
-/* <- meta.string.js source.css.embedded.js */
-/*^^ meta.string.js source.css.embedded.js */
-/*  ^ meta.string.js string.quoted.other.js punctuation.definition.string.end.js - source.css */
+/* <- meta.string.js string.quoted.other.js - source.css.embedded */
+/*^^^ meta.string.js string.quoted.other.js - source.css.embedded */
+/*  ^ punctuation.definition.string.end.js */
 /*   ^ - meta.string */
 
 /*

From 5c3c4c1e08e19123eabec8fa618cac34dec735c1 Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Sun, 28 Jul 2024 19:34:32 +0200
Subject: [PATCH 5/5] [JavaScript] Improve embedded scope source boundaries.

This commit strips embedded source scope after opening and before closing
string punctuation only, if those are located on a separate line.

In single line tagged template strings, embedded scope is applied to leading
and trailing whitespace as well.
---
 JavaScript/JavaScript.sublime-syntax        | 19 +++++++++-------
 JavaScript/tests/syntax_test_js_template.js | 25 +++++++++++++++++++++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/JavaScript/JavaScript.sublime-syntax b/JavaScript/JavaScript.sublime-syntax
index 6e09e36f31..abd8f4385c 100644
--- a/JavaScript/JavaScript.sublime-syntax
+++ b/JavaScript/JavaScript.sublime-syntax
@@ -107,6 +107,9 @@ variables:
   # '@' followed by a pattern like \S but excluding literal '*' and '@'.
   jsdoc_block_tag: \@[^\n\t\f\v *@]+
 
+  leading_wspace: (?:^\s*)
+  trailing_wspace: (?:\s*$\n?)
+
 contexts:
   main:
     - meta_include_prototype: false # don't match comments before shebang
@@ -1232,50 +1235,50 @@ contexts:
     #  to maintain JavaScript indentation rules until embedded
     #  code really begins/ends. It's required for embedded code
     #  to be indented using global JavaScript indentation rules.
-    - match: (css)\s*((\`)\s*)
+    - match: (css)\s*((\`){{trailing_wspace}}?)
       captures:
         1: variable.function.tagged-template.js
         2: meta.string.js string.quoted.other.js
         3: punctuation.definition.string.begin.js
       embed: scope:source.css.js-template
       embed_scope: meta.string.js source.css.embedded.js
-      escape: \s*(\`)
+      escape: '{{leading_wspace}}?(\`)'
       escape_captures:
         0: meta.string.js string.quoted.other.js
         1: punctuation.definition.string.end.js
       pop: 1
-    - match: (html)\s*((\`)\s*)
+    - match: (html)\s*((\`){{trailing_wspace}}?)
       captures:
         1: variable.function.tagged-template.js
         2: meta.string.js string.quoted.other.js
         3: punctuation.definition.string.begin.js
       embed: scope:text.html.js-template
       embed_scope: meta.string.js text.html.embedded.js
-      escape: \s*(\`)
+      escape: '{{leading_wspace}}?(\`)'
       escape_captures:
         0: meta.string.js string.quoted.other.js
         1: punctuation.definition.string.end.js
       pop: 1
-    - match: (js)\s*((\`)\s*)
+    - match: (js)\s*((\`){{trailing_wspace}}?)
       captures:
         1: variable.function.tagged-template.js
         2: meta.string.js string.quoted.other.js
         3: punctuation.definition.string.begin.js
       embed: scope:source.js.js-template
       embed_scope: meta.string.js source.js.embedded.js
-      escape: \s*(\`)
+      escape: '{{leading_wspace}}?(\`)'
       escape_captures:
         0: meta.string.js string.quoted.other.js
         1: punctuation.definition.string.end.js
       pop: 1
-    - match: (json)\s*((\`)\s*)
+    - match: (json)\s*((\`){{trailing_wspace}}?)
       captures:
         1: variable.function.tagged-template.js
         2: meta.string.js string.quoted.other.js
         3: punctuation.definition.string.begin.js
       embed: scope:source.json.js-template
       embed_scope: meta.string.js source.json.embedded.js
-      escape: \s*(\`)
+      escape: '{{leading_wspace}}?(\`)'
       escape_captures:
         0: meta.string.js string.quoted.other.js
         1: punctuation.definition.string.end.js
diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js
index 7a68dd8d8d..2ea3da789e 100644
--- a/JavaScript/tests/syntax_test_js_template.js
+++ b/JavaScript/tests/syntax_test_js_template.js
@@ -4,6 +4,12 @@
  * HTML Templates
  */
 
+var html = html` <p>${content}</p> `
+/*             ^^^^^^^^^^^^^^^^^^^^^ meta.string.js */
+/*             ^ string.quoted.other.js punctuation.definition.string.begin.js - text.html.embedded */
+/*              ^^^^^^^^^^^^^^^^^^^ text.html.embedded.js - string */
+/*                                 ^ string.quoted.other.js punctuation.definition.string.end.js - text.html.embedded */
+
 var html = html`
 /*         ^^^^ variable.function.tagged-template */
 /*             ^^ meta.string.js string.quoted.other.js */
@@ -90,6 +96,12 @@ var html = html`
  * JSON Templates
  */
 
+var json = json` { "key": "value" } `
+/*             ^^^^^^^^^^^^^^^^^^^^^^ meta.string.js */
+/*             ^ string.quoted.other.js punctuation.definition.string.begin.js - source.json.embedded */
+/*              ^^^^^^^^^^^^^^^^^^^^ source.json.embedded.js */
+/*                                  ^ string.quoted.other.js punctuation.definition.string.end.js - source.json.embedded */
+
 var json = json`
 /*         ^^^^ variable.function.tagged-template */
 /*             ^^ meta.string.js string.quoted.other.js */
@@ -136,6 +148,12 @@ var json = json`
  * JavaScript Templates
  */
 
+var script = js` var = 0 `
+/*             ^^^^^^^^^^^ meta.string.js */
+/*             ^ string.quoted.other.js punctuation.definition.string.begin.js - source.js.embedded */
+/*              ^^^^^^^^^ source.js.embedded.js */
+/*                       ^ string.quoted.other.js punctuation.definition.string.end.js - source.js.embedded */
+
 var script = js`
 /*           ^^ variable.function.tagged-template */
 /*             ^^ meta.string.js string.quoted.other.js */
@@ -157,6 +175,13 @@ var script = js`
  * CSS Templates
  */
 
+
+var style = css` tr {  } `
+/*             ^^^^^^^^^^^ meta.string.js */
+/*             ^ string.quoted.other.js punctuation.definition.string.begin.js - source.css.embedded */
+/*              ^^^^^^^^^ source.css.embedded.js */
+/*                       ^ string.quoted.other.js punctuation.definition.string.end.js - source.css.embedded */
+
 var style = css`
 /*          ^^^ variable.function.tagged-template */
 /*             ^^ meta.string.js string.quoted.other.js */