Add CSS/HTML syntax highlighting in tagged template strings

.github/workflows/test.yaml

@@ -11,6 +11,6 @@ jobs:
 
       - uses: SublimeText/syntax-test-action@v2
         with:
-          build: 4152
-          default_packages: v4152
+          build: 4180
+          default_packages: binary
           package_name: Ngx HTML

Embeddings/CSS (for Ngx Template Strings Double Quoted).sublime-syntax

@@ -0,0 +1,29 @@
+%YAML 1.2
+---
+# A special syntax definition for syntax highlighted tagged template strings
+# with ${...} interpolation support
+scope: source.css.embedded.template-string.quoted.double.ngx
+version: 2
+hidden: true
+
+extends: CSS (for Ngx Template Strings).sublime-syntax
+
+contexts:
+
+  main:
+    - include: rule-list-body
+
+  quoted-strings:
+    - meta_prepend: true
+    - match: (?=")
+      pop: 1
+
+  quoted-string:
+    - meta_prepend: true
+    - match: (?=")
+      pop: 1
+
+  quoted-urls:
+    - meta_prepend: true
+    - match: (?=")
+      pop: 1

Embeddings/CSS (for Ngx Template Strings Single Quoted).sublime-syntax

@@ -0,0 +1,29 @@
+%YAML 1.2
+---
+# A special syntax definition for syntax highlighted tagged template strings
+# with ${...} interpolation support
+scope: source.css.embedded.template-string.quoted.single.ngx
+version: 2
+hidden: true
+
+extends: CSS (for Ngx Template Strings).sublime-syntax
+
+contexts:
+
+  main:
+    - include: rule-list-body
+
+  quoted-strings:
+    - meta_prepend: true
+    - match: (?=')
+      pop: 1
+
+  quoted-string:
+    - meta_prepend: true
+    - match: (?=')
+      pop: 1
+
+  quoted-urls:
+    - meta_prepend: true
+    - match: (?=')
+      pop: 1

Embeddings/CSS (for Ngx Template Strings).sublime-syntax

@@ -0,0 +1,43 @@
+%YAML 1.2
+---
+# A special syntax definition for syntax highlighted tagged template strings
+# with ${...} interpolation support
+scope: source.css.embedded.template-string.ngx
+version: 2
+hidden: true
+
+extends: Packages/CSS/CSS.sublime-syntax
+
+contexts:
+
+  main:
+    - include: comments
+    - include: properties-or-selectors
+    - include: at-rules
+    - include: property-lists
+    - include: rule-terminators
+    - include: illegal-commas
+    - include: illegal-groups
+
+  prototype:
+    - meta_prepend: true
+    - match: (?=\`)
+      pop: 1
+    - include: NgxHTML.sublime-syntax#ng-template-interpolations
+    - include: NgxHTML.sublime-syntax#ng-string-content
+
+  property-end:
+    - meta_prepend: true
+    - match: (?=\`)
+      pop: 1
+
+  string-content:
+    - meta_prepend: true
+    - match: (?=\`)
+      pop: 1
+    - include: NgxHTML.sublime-syntax#ng-template-string-interpolations
+    - include: NgxHTML.sublime-syntax#ng-string-content
+
+variables:
+  # allow identifiers to start with ${...} interpolation
+  ident_start: (?:{{nmstart}}|\$\{)

Embeddings/CSS (for Ngx).sublime-syntax

@@ -8,9 +8,6 @@ hidden: true
 
 extends: Packages/CSS/CSS.sublime-syntax
 
-variables:
-  ident_start: (?:{{nmstart}}|{{)
-
 contexts:
 
   prototype:
@@ -21,22 +18,39 @@ contexts:
     - meta_prepend: true
     - include: NgxHTML.sublime-syntax#ng-string-interpolations
 
-  at-keyframe-block-body:
-    # required until ST4174 (PR #3820)
+  at-counter-style-declaration-list:
+    # required until ST4193 (PR #4055)
     - meta_prepend: true
-    - meta_include_prototype: false
+    - match: (?={{)
+      pop: 1
 
-  at-layer-name-list:
-    # required until ST4174 (PR #3820)
-    - meta_prepend: true
+  at-keyframe-block:
+    # required until ST4193 (PR #4055)
     - meta_include_prototype: false
+    - meta_prepend: true
+    - match: (?={{)
+      pop: 1
 
-  property-list-body:
-    # required until ST4174 (PR #3820)
+  at-other-body:
+    # required until ST4193 (PR #4055)
     - meta_prepend: true
-    - meta_include_prototype: false
+    - match: (?={{)
+      pop: 1
 
-  stylesheet-block-body:
-    # required until ST4174 (PR #3831)
+  maybe-property-list:
+    # required until ST4193 (PR #4055)
     - meta_prepend: true
-    - meta_include_prototype: false
+    - match: (?={{)
+      pop: 1
+
+  property-lists:
+    # required until ST4193 (PR #4055)
+    - match: '{{block_start}}'
+      scope: punctuation.section.block.begin.css
+      push: property-list-body
+
+variables:
+  # `{{` starts interpolation, but not two nested CSS blocks
+  block_start: \{(?!{)
+  # allow identifiers to start with {{...}} tags
+  ident_start: (?:{{nmstart}}|{{)

Embeddings/HTML (for Ngx Template Strings).sublime-syntax

@@ -0,0 +1,99 @@
+%YAML 1.2
+---
+# A special syntax definition for syntax highlighted tagged template strings
+# with ${...} interpolation support
+scope: text.html.embedded.template-string.ngx
+version: 2
+hidden: true
+
+extends: Packages/HTML/HTML.sublime-syntax
+
+contexts:
+
+###[ HTML CUSTOMIZATIONS ]#####################################################
+
+  main:
+    - include: html
+
+  prototype:
+    - meta_prepend: true
+    - match: (?=\`)
+      pop: 1
+    - include: NgxHTML.sublime-syntax#ng-template-interpolations
+    - include: NgxHTML.sublime-syntax#ng-string-content
+
+  cdata-content:
+    - meta_prepend: true
+    - include: ng-string-prototype
+
+  strings-common-content:
+    - meta_prepend: true
+    - include: ng-string-prototype
+
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    - include: ng-string-prototype
+
+  tag-attribute-value-content:
+    - meta_prepend: true
+    - include: ng-string-prototype
+
+###[ HTML STYLE TAG ]##########################################################
+
+  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.embedded.template-string.ngx
+      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
+
+###[ HTML STYLE ATTRIBUTES ]###################################################
+
+  tag-style-attribute-value:
+    - meta_include_prototype: false
+    - match: \"
+      scope: meta.string.html string.quoted.double.html punctuation.definition.string.begin.html
+      set: tag-style-attribute-double-quoted-value
+    - match: \'
+      scope: meta.string.html string.quoted.single.html punctuation.definition.string.begin.html
+      set: tag-style-attribute-single-quoted-value
+    - include: else-pop
+
+  tag-style-attribute-double-quoted-value:
+    - meta_include_prototype: false
+    - meta_content_scope: meta.string.html meta.interpolation.html source.css.embedded.html
+    - match: \"
+      scope: meta.string.html string.quoted.double.html punctuation.definition.string.end.html
+      pop: 1
+    - include: scope:source.css.embedded.template-string.quoted.double.ngx
+      apply_prototype: true
+
+  tag-style-attribute-single-quoted-value:
+    - meta_include_prototype: false
+    - meta_content_scope: meta.string.html meta.interpolation.html source.css.embedded.html
+    - match: \'
+      scope: meta.string.html string.quoted.single.html punctuation.definition.string.end.html
+      pop: 1
+    - include: scope:source.css.embedded.template-string.quoted.single.ngx
+      apply_prototype: true
+
+  ng-string-prototype:
+    - match: (?=\`)
+      pop: 1
+    - include: NgxHTML.sublime-syntax#ng-template-string-interpolations
+    - include: NgxHTML.sublime-syntax#ng-string-content
+
+###############################################################################
+
+variables:
+  # allow tags to start with ${...} interpolation
+  tag_name_start: (?:[A-Za-z]|\$\{)
+

Embeddings/RegExp (for Ngx Template Strings).sublime-syntax

@@ -1,6 +1,6 @@
 %YAML 1.2
 ---
-scope: source.regexp.embedded.ngx.template-string
+scope: source.regexp.embedded.template-string.ngx
 version: 2
 hidden: true
 
@@ -11,4 +11,4 @@ contexts:
   prototype:
     - match: (?=/?`)
       pop: 1
-    - include: NgxHTML.sublime-syntax#ng-template-text-interpolations
+    - include: NgxHTML.sublime-syntax#ng-template-interpolations

NgxHTML.sublime-syntax

@@ -672,6 +672,16 @@ contexts:
 
   ng-templates:
     # tagged template strings
+    - match: (css)(\`)
+      captures:
+        1: variable.function.tagged-template.ngx
+        2: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.begin.ngx
+      push: ng-tagged-template-css-body
+    - match: (html)(\`)
+      captures:
+        1: variable.function.tagged-template.ngx
+        2: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.begin.ngx
+      push: ng-tagged-template-html-body
     - match: ({{ident_name}})(\`)
       captures:
         1: variable.function.tagged-template.ngx
@@ -685,6 +695,18 @@ contexts:
         - ng-template-pattern-begin
         - ng-template-plain-body
 
+  ng-tagged-template-css-body:
+    - meta_content_scope: meta.string.template.ngx source.css.embedded.ngx
+    - include: ng-tagged-template-plain-end
+    - include: scope:source.css.embedded.template-string.ngx
+      apply_prototype: true
+
+  ng-tagged-template-html-body:
+    - meta_content_scope: meta.string.template.ngx text.html.embedded.ngx
+    - include: ng-tagged-template-plain-end
+    - include: scope:text.html.embedded.template-string.ngx
+      apply_prototype: true
+
   ng-tagged-template-plain-body:
     - meta_content_scope: meta.string.template.ngx string.quoted.other.ngx
     - include: ng-tagged-template-plain-end
@@ -718,7 +740,7 @@ contexts:
     - match: \n
       scope: invalid.illegal.newline.ngx
       pop: 2
-    - include: scope:source.regexp.embedded.ngx.template-string
+    - include: scope:source.regexp.embedded.template-string.ngx
       apply_prototype: true
 
   ng-template-plain-body:
@@ -741,15 +763,15 @@ contexts:
   ng-template-string-interpolation-body:
     - clear_scopes: 1
     - meta_scope: meta.interpolation.ngx
-    - include: ng-template-text-interpolation-body
+    - include: ng-template-interpolation-body
 
-  ng-template-text-interpolations:
+  ng-template-interpolations:
     # used by embedded syntaxes (e.g.: CSS or HTML)
     - match: \$\{
       scope: punctuation.section.interpolation.begin.ngx
-      push: ng-template-text-interpolation-body
+      push: ng-template-interpolation-body
 
-  ng-template-text-interpolation-body:
+  ng-template-interpolation-body:
     - meta_scope: meta.interpolation.ngx
     - match: \}
       scope: punctuation.section.interpolation.end.ngx