[JavaScript] Basic support for syntax highlighting in tagged templates

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

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

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

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

JavaScript/JavaScript.sublime-syntax

@@ -1224,8 +1224,54 @@ contexts:
     - include: string-content
 
   literal-string-template:
-    - match: \`
-      scope: punctuation.definition.string.begin.js
+    - 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: ({{identifier_name}})?(\`)
+      captures:
+        1: constant.other.language-name.js
+        2: punctuation.definition.string.begin.js
       set: literal-string-template-content
 
   literal-string-template-content:
@@ -1250,13 +1296,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: '/'