From 8c436cffb24d029cd9371eef49738aa47f7aa55f Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Tue, 17 Dec 2024 12:24:35 +0100
Subject: [PATCH 1/5] Extend meta.expression scope

This commit adds `.expression` sub-scope name to distinguish embedded
interpolation expressions from control flow statements.
---
 NgxHTML.sublime-syntax                  |  10 +--
 tests/syntax_test_scopes.component.html | 100 ++++++++++++------------
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/NgxHTML.sublime-syntax b/NgxHTML.sublime-syntax
index 2fa7686..f1fea55 100644
--- a/NgxHTML.sublime-syntax
+++ b/NgxHTML.sublime-syntax
@@ -85,7 +85,7 @@ contexts:
     - match: \"
       scope: meta.string.ngx string.quoted.double.ngx punctuation.definition.string.begin.ngx
       embed: ng-directive-expressions
-      embed_scope: meta.directive.value.ngx meta.string.ngx meta.interpolation.ngx source.ngx.embedded.html
+      embed_scope: meta.directive.value.ngx meta.string.ngx meta.embedded.expression.ngx source.ngx.embedded.html
       escape: \"
       escape_captures:
         0: meta.string.ngx string.quoted.double.ngx punctuation.definition.string.end.ngx
@@ -93,7 +93,7 @@ contexts:
     - match: \'
       scope: meta.string.ngx string.quoted.single.ngx punctuation.definition.string.begin.ngx
       embed: ng-directive-expressions
-      embed_scope: meta.directive.value.ngx meta.string.ngx meta.interpolation.ngx source.ngx.embedded.html
+      embed_scope: meta.directive.value.ngx meta.string.ngx meta.embedded.expression.ngx source.ngx.embedded.html
       escape: \'
       escape_captures:
         0: meta.string.ngx string.quoted.single.ngx punctuation.definition.string.end.ngx
@@ -297,14 +297,14 @@ contexts:
 
   ng-interpolations:
     - match: '{{'
-      scope: meta.embedded.ngx.html punctuation.section.embedded.begin.ngx.html
+      scope: meta.embedded.expression.ngx.html punctuation.section.embedded.begin.ngx.html
       push: ng-interpolation-body
 
   ng-interpolation-body:
     - meta_include_prototype: false
-    - meta_content_scope: meta.embedded.ngx.html source.ngx.embedded.html
+    - meta_content_scope: meta.embedded.expression.ngx.html source.ngx.embedded.html
     - match: '}}'
-      scope: meta.embedded.ngx.html punctuation.section.embedded.end.ngx.html
+      scope: meta.embedded.expression.ngx.html punctuation.section.embedded.end.ngx.html
       pop: 1
     - include: ng-expressions
 
diff --git a/tests/syntax_test_scopes.component.html b/tests/syntax_test_scopes.component.html
index 0449ccb..ef3ebe1 100644
--- a/tests/syntax_test_scopes.component.html
+++ b/tests/syntax_test_scopes.component.html
@@ -160,9 +160,9 @@
 <!--      ^ punctuation.section.group.end.ngx -->
 <!--        ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     {{ a }} is greater than {{ b }}
-<!--^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
-<!--       ^^^^^^^^^^^^^^^^^ meta.block.ngx - meta.embedded -->
-<!--                        ^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
+<!--^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
+<!--       ^^^^^^^^^^^^^^^^^ meta.block.ngx - meta.embedded.expression -->
+<!--                        ^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
 <!--^^ punctuation.section.embedded.begin.ngx.html -->
 <!--  ^^^ source.ngx.embedded.html -->
 <!--   ^ variable.other.readwrite.ngx -->
@@ -184,9 +184,9 @@
 <!--               ^ punctuation.section.group.end.ngx -->
 <!--                 ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     {{ a() }} is less than {{ b.c() }}
-<!--^^^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
-<!--         ^^^^^^^^^^^^^^ meta.block.ngx - meta.embedded -->
-<!--                       ^^^^^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
+<!--^^^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
+<!--         ^^^^^^^^^^^^^^ meta.block.ngx - meta.embedded.expression -->
+<!--                       ^^^^^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
 <!--^^ punctuation.section.embedded.begin.ngx.html -->
 <!--  ^^^^^ source.ngx.embedded.html -->
 <!--   ^ meta.function-call.identifier.ngx variable.function.ngx -->
@@ -206,9 +206,9 @@
 <!--^^^ keyword.control.conditional.else.ngx -->
 <!--    ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     {{ a }} is equal to {{ b }}
-<!--^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
-<!--       ^^^^^^^^^^^^^ meta.block.ngx - meta.embedded -->
-<!--                    ^^^^^^^ meta.block.ngx meta.embedded.ngx.html -->
+<!--^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
+<!--       ^^^^^^^^^^^^^ meta.block.ngx - meta.embedded.expression -->
+<!--                    ^^^^^^^ meta.block.ngx meta.embedded.expression.ngx.html -->
 <!--  ^^^ source.ngx.embedded.html -->
 <!--   ^ variable.other.readwrite.ngx -->
 <!--     ^^ punctuation.section.embedded.end.ngx.html -->
@@ -235,7 +235,7 @@
 <!--                                              ^ punctuation.section.group.end.ngx -->
 <!--                                                ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     {{ startDate }}
-<!--^^^^^^^^^^^^^^^ text.html.ngx meta.block.ngx meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^ text.html.ngx meta.block.ngx meta.embedded.expression.ngx.html -->
 <!--^^ punctuation.section.embedded.begin.ngx.html -->
 <!--  ^^^^^^^^^^^ source.ngx.embedded.html -->
 <!--   ^^^^^^^^^ variable.other.readwrite.ngx -->
@@ -357,12 +357,12 @@
 <!--                                                             ^ meta.block.ngx punctuation.section.block.begin.ngx -->
   Item #{{ idx }}: {{ item.name }}
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.block.ngx -->
-<!--    ^^^^^^^^^ meta.embedded.ngx.html -->
+<!--    ^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--    ^^ punctuation.section.embedded.begin.ngx.html -->
 <!--      ^^^^^ source.ngx.embedded.html -->
 <!--       ^^^ variable.other.readwrite.ngx -->
 <!--           ^^ punctuation.section.embedded.end.ngx.html -->
-<!--               ^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--               ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--               ^^ punctuation.section.embedded.begin.ngx.html -->
 <!--                 ^^^^^^^^^^^ source.ngx.embedded.html -->
 <!--                  ^^^^ variable.other.object.ngx -->
@@ -390,7 +390,7 @@
 <!--^ punctuation.definition.tag.begin.html -->
 <!-- ^ entity.name.tag.block.any.html -->
 <!--  ^ punctuation.definition.tag.end.html -->
-<!--   ^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--   ^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--   ^^ punctuation.section.embedded.begin.ngx.html -->
 <!--     ^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!--      ^^^^^ variable.other.object.ngx -->
@@ -489,7 +489,7 @@
 
   <!-- escaped chars -->
   {{ "\xAF \u2AFF \n \"" }}
-<!--^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^^^^^^^^^^^^^^^^^^ meta.string.ngx string.quoted.double.ngx -->
 <!-- ^ punctuation.definition.string.begin.ngx -->
@@ -534,7 +534,7 @@
 
   <!-- objects -->
   {{ { name: 'Alice', 'object': { array + "name": [0, 2, 3] } } }}
-<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^ meta.mapping.ngx - meta.mapping meta.mapping -->
 <!--   ^^^^ meta.mapping.key.ngx - meta.mapping meta.mapping -->
@@ -607,7 +607,7 @@
 
   <!-- ternary -->
   {{ foo ? bar : baz }}
-<!--^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^^ variable.other.readwrite.ngx -->
 <!--     ^ keyword.operator.ternary.ngx -->
@@ -618,7 +618,7 @@
 
   <!-- null coalescing -->
   {{ foo = null ?? 'default' }}
-<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^^ variable.other.readwrite.ngx -->
 <!--     ^ keyword.operator.assignment.ngx -->
@@ -631,7 +631,7 @@
 
   <!-- property subscription -->
   {{ person['name'][0] = "Mirabel" }}
-<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html - meta.path -->
 <!-- ^^^^^^ variable.other.readwrite.ngx -->
 <!--       ^^^^^^^^^^^ meta.subscription.ngx -->
@@ -650,20 +650,20 @@
 <!--                               ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ obj?.member }}
-<!--^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!-- ^^^^^^^^^^^ meta.embedded.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
-<!--            ^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!--             ^^ meta.embedded.ngx.html - source.ngx -->
+<!--^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!-- ^^^^^^^^^^^ meta.embedded.expression.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
+<!--            ^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!--             ^^ meta.embedded.expression.ngx.html - source.ngx -->
 <!-- ^^^ variable.other.object.ngx -->
 <!--    ^^ punctuation.accessor.ngx -->
 <!--      ^^^^^^ variable.other.member.ngx -->
 <!--             ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ obj.member [5] }}
-<!--^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!-- ^^^^^^^^^^^^^^ meta.embedded.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
-<!--               ^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!--                ^^ meta.embedded.ngx.html - source.ngx -->
+<!--^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!-- ^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
+<!--               ^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!--                ^^ meta.embedded.expression.ngx.html - source.ngx -->
 <!-- ^^^ variable.other.object.ngx -->
 <!--    ^ punctuation.accessor.ngx -->
 <!--     ^^^^^^ variable.other.member.ngx -->
@@ -672,10 +672,10 @@
 <!--                ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ obj.method() }}
-<!--^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!-- ^^^^^^^^^^^^ meta.embedded.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
-<!--             ^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!--              ^^ meta.embedded.ngx.html - source.ngx -->
+<!--^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!-- ^^^^^^^^^^^^ meta.embedded.expression.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
+<!--             ^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!--              ^^ meta.embedded.expression.ngx.html - source.ngx -->
 <!-- ^^^ variable.other.object.ngx -->
 <!--    ^ punctuation.accessor.ngx -->
 <!--     ^^^^^^ meta.function-call.identifier.ngx variable.function.method.ngx -->
@@ -685,10 +685,10 @@
 <!--              ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ orders.value()?.[0]?.$extra?.#currency }}
-<!--^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
-<!--                                       ^ meta.embedded.ngx.html source.ngx.embedded.html - meta.path -->
-<!--                                        ^^ meta.embedded.ngx.html - source.ngx -->
+<!--^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html source.ngx.embedded.html meta.path.ngx - meta.path meta.path -->
+<!--                                       ^ meta.embedded.expression.ngx.html source.ngx.embedded.html - meta.path -->
+<!--                                        ^^ meta.embedded.expression.ngx.html - source.ngx -->
 <!-- ^^^^^^ variable.other.object.ngx -->
 <!--       ^ punctuation.accessor.ngx -->
 <!--        ^^^^^ meta.function-call.identifier.ngx variable.function.method.ngx -->
@@ -709,7 +709,7 @@
 <!--                                        ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ func(arg, "value") }}
-<!--^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^^^ meta.function-call.identifier.ngx variable.function.ngx -->
 <!--     ^^^^^^^^^^^^^^ meta.function-call.arguments.ngx -->
@@ -723,7 +723,7 @@
 <!--                    ^^ punctuation.section.embedded.end.ngx.html -->
 
   {{ var | filter | annimation ("forward") }}
-<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.ngx.html -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.ngx.embedded.html -->
 <!-- ^^^ variable.other.readwrite.ngx -->
 <!--     ^^^^^^^^ meta.filter.ngx -->
@@ -757,7 +757,7 @@
 <!--       ^ punctuation.definition.bind.end.ngx -->
 <!--        ^ punctuation.separator.key-value.ngx -->
 <!--         ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--          ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--          ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--          ^^^ variable.other.readwrite.ngx -->
 <!--              ^ keyword.operator.arithmetic.ngx -->
 <!--                ^^^ variable.other.readwrite.ngx -->
@@ -776,7 +776,7 @@
 <!--            ^ punctuation.definition.bind.end.ngx -->
 <!--             ^ punctuation.separator.key-value.ngx -->
 <!--              ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--               ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--               ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--               ^^^ variable.other.readwrite.ngx -->
 <!--                   ^ keyword.operator.arithmetic.ngx -->
 <!--                     ^^^ variable.other.readwrite.ngx -->
@@ -801,7 +801,7 @@
 <!--        ^ punctuation.definition.on.end.ngx -->
 <!--         ^ punctuation.separator.key-value.ngx -->
 <!--          ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--           ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--           ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--           ^^^ variable.other.readwrite.ngx -->
 <!--               ^ keyword.operator.arithmetic.ngx -->
 <!--                 ^^^ variable.other.readwrite.ngx -->
@@ -820,7 +820,7 @@
 <!--                  ^ punctuation.definition.on.end.ngx -->
 <!--                   ^ punctuation.separator.key-value.ngx -->
 <!--                    ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--                     ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--                     ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--                     ^^^ variable.other.readwrite.ngx -->
 <!--                         ^ keyword.operator.arithmetic.ngx -->
 <!--                           ^^^ variable.other.readwrite.ngx -->
@@ -845,7 +845,7 @@
 <!--            ^^ punctuation.definition.bindon.end.ngx -->
 <!--              ^ punctuation.separator.key-value.ngx -->
 <!--               ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--                ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--                ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--                ^^^ variable.other.readwrite.ngx -->
 <!--                    ^ keyword.operator.arithmetic.ngx -->
 <!--                      ^^^ variable.other.readwrite.ngx -->
@@ -868,7 +868,7 @@
 <!--  ^^^^^^^^^ entity.other.attribute-name.reference.ngx -->
 <!--           ^ punctuation.separator.key-value.ngx -->
 <!--            ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--             ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--             ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--             ^^^ variable.other.readwrite.ngx -->
 <!--                 ^ keyword.operator.arithmetic.ngx -->
 <!--                   ^^^ variable.other.readwrite.ngx -->
@@ -892,7 +892,7 @@
 <!--  ^^^^^^^^ entity.other.attribute-name.template.ngx -->
 <!--          ^ punctuation.separator.key-value.ngx -->
 <!--           ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--            ^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html - string -->
+<!--            ^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html - string -->
 <!--            ^^^ variable.other.readwrite.ngx -->
 <!--                ^ keyword.operator.arithmetic.ngx -->
 <!--                  ^^^ variable.other.readwrite.ngx -->
@@ -916,7 +916,7 @@
 <!--  ^^^^ keyword.control.conditional.if.ngx -->
 <!--      ^ punctuation.separator.key-value.ngx -->
 <!--       ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--        ^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html -->
+<!--        ^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html -->
 <!--        ^^^^ variable.other.readwrite.ngx -->
 <!--             ^ keyword.operator.assignment.ngx -->
 <!--               ^^^^ constant.language.boolean.true.ngx -->
@@ -932,7 +932,7 @@
 <!--  ^^^^^ keyword.control.loop.for.ngx -->
 <!--       ^ punctuation.separator.key-value.ngx -->
 <!--        ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--         ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html -->
+<!--         ^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html -->
 <!--         ^^^ keyword.declation.variable.ngx -->
 <!--             ^^^^^^ variable.other.readwrite.ngx -->
 <!--                    ^^ keyword.operator.iteration.ngx -->
@@ -949,7 +949,7 @@
 <!--  ^^^^^ keyword.control.loop.for.ngx -->
 <!--       ^ punctuation.separator.key-value.ngx -->
 <!--        ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html -->
+<!--         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html -->
 <!--         ^^^ keyword.declation.variable.ngx -->
 <!--             ^^^^ variable.other.readwrite.ngx -->
 <!--                  ^^ keyword.operator.iteration.ngx -->
@@ -971,7 +971,7 @@
 <!--          ^ punctuation.definition.bind.end.ngx -->
 <!--           ^ punctuation.separator.key-value.ngx -->
 <!--            ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--             ^^^^^^^^^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html meta.path.ngx -->
+<!--             ^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html meta.path.ngx -->
 <!--             ^^^^^^^^^^^ variable.other.object.ngx -->
 <!--                        ^ punctuation.accessor.ngx -->
 <!--                         ^^^^^^^ variable.other.member.ngx -->
@@ -987,7 +987,7 @@
 <!--             ^^^^^^^^^^^^ keyword.control.conditional.case.ngx -->
 <!--                         ^ punctuation.separator.key-value.ngx -->
 <!--                          ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--                           ^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html meta.string.ngx string.quoted.single.ngx -->
+<!--                           ^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html meta.string.ngx string.quoted.single.ngx -->
 <!--                           ^ punctuation.definition.string.begin.ngx -->
 <!--                                 ^ punctuation.definition.string.end.ngx -->
 <!--                                  ^ string.quoted.double.ngx punctuation.definition.string.end.ngx -->
@@ -999,7 +999,7 @@
 <!--                                          ^ punctuation.separator.key-value.ngx -->
 <!--                                           ^^^^^^^^^^^^^ meta.directive.value.ngx meta.string.ngx -->
 <!--                                           ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--                                            ^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--                                            ^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html variable.other.readwrite.ngx -->
 <!--                                                       ^ string.quoted.double.ngx punctuation.definition.string.end.ngx -->
 <!--                                                         ^^ punctuation.definition.tag.end.html -->
 
@@ -1016,6 +1016,6 @@
 <!--                                     ^ punctuation.separator.key-value.ngx -->
 <!--                                      ^^^^^^^^^^^^^ meta.directive.value.ngx meta.string.ngx -->
 <!--                                      ^ string.quoted.double.ngx punctuation.definition.string.begin.ngx -->
-<!--                                       ^^^^^^^^^^^ meta.interpolation.ngx source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--                                       ^^^^^^^^^^^ meta.embedded.expression.ngx source.ngx.embedded.html variable.other.readwrite.ngx -->
 <!--                                                  ^ string.quoted.double.ngx punctuation.definition.string.end.ngx -->
 <!--                                                    ^^ punctuation.definition.tag.end.html -->

From 93be7fda3b4acd60fdc545c0a51247bd61bd451b Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Mon, 16 Dec 2024 17:30:59 +0100
Subject: [PATCH 2/5] Fix interpolation in attribute values

This commit adds new `ng-string-interpolations` context, which in addition to
`ng-string-interpolations` to clear `string` scope in quoted strings.

This ensures interpolated expressions are
1. treated as normal source instead of applying special string rules
2. correctly highlighted avoiding unmatched tokens looking like strings.

An inherited special purpose CSS syntax is added to support Mustache tags
in inline styles.
---
 Embeddings/CSS (for Ngx).sublime-syntax | 42 ++++++++++++++
 NgxHTML.sublime-syntax                  | 57 +++++++++++++++++++
 tests/syntax_test_scopes.component.html | 73 +++++++++++++++++++++++++
 3 files changed, 172 insertions(+)
 create mode 100644 Embeddings/CSS (for Ngx).sublime-syntax

diff --git a/Embeddings/CSS (for Ngx).sublime-syntax b/Embeddings/CSS (for Ngx).sublime-syntax
new file mode 100644
index 0000000..270c627
--- /dev/null
+++ b/Embeddings/CSS (for Ngx).sublime-syntax	
@@ -0,0 +1,42 @@
+%YAML 1.2
+---
+# A special syntax definition to drive double quoted inline style attributes
+# with {...} interpolation support
+scope: source.css.embedded.ngx
+version: 2
+hidden: true
+
+extends: Packages/CSS/CSS.sublime-syntax
+
+variables:
+  ident_start: (?:{{nmstart}}|{{)
+
+contexts:
+
+  prototype:
+    - meta_prepend: true
+    - include: NgxHTML.sublime-syntax#ng-interpolations
+
+  string-content:
+    - meta_prepend: true
+    - include: NgxHTML.sublime-syntax#ng-string-interpolations
+
+  at-keyframe-block-body:
+    # required until ST4174 (PR #3820)
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  at-layer-name-list:
+    # required until ST4174 (PR #3820)
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  property-list-body:
+    # required until ST4174 (PR #3820)
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  stylesheet-block-body:
+    # required until ST4174 (PR #3831)
+    - meta_prepend: true
+    - meta_include_prototype: false
diff --git a/NgxHTML.sublime-syntax b/NgxHTML.sublime-syntax
index f1fea55..3c4dc82 100644
--- a/NgxHTML.sublime-syntax
+++ b/NgxHTML.sublime-syntax
@@ -14,6 +14,14 @@ contexts:
 
 ###[ HTML CUSTOMIZATIONS ]#####################################################
 
+  cdata-content:
+    - meta_prepend: true
+    - include: ng-string-interpolations
+
+  strings-common-content:
+    - meta_prepend: true
+    - include: ng-string-interpolations
+
   tag:
     - meta_prepend: true
     - include: ng-declarations
@@ -24,6 +32,44 @@ contexts:
     - meta_prepend: true
     - include: ng-directives
 
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    - include: ng-interpolations
+
+  tag-attribute-value-content:
+    - meta_prepend: true
+    - include: ng-string-interpolations
+
+###[ HTML STYLE ATTRIBUTES ]###################################################
+
+  tag-style-attribute-assignment:
+    - meta_include_prototype: false
+    - match: =
+      scope: punctuation.separator.key-value.html
+      set:
+        - immediately-pop  # workaround https://github.com/sublimehq/sublime_text/issues/4069
+        - tag-style-attribute-value
+    - 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.embedded.ngx#rule-list-body
+      embed_scope: meta.string.html source.css.embedded.html
+      escape: \"
+      escape_captures:
+        0: meta.string.html string.quoted.double.html punctuation.definition.string.end.html
+      pop: 1
+    - match: \'
+      scope: meta.string.html string.quoted.single.html punctuation.definition.string.begin.html
+      embed: scope:source.css.embedded.ngx#rule-list-body
+      embed_scope: meta.string.html source.css.embedded.html
+      escape: \'
+      escape_captures:
+        0: meta.string.html string.quoted.single.html punctuation.definition.string.end.html
+      pop: 1
+    - include: else-pop
+
 ###[ ANGULAR DIRECTIVES ]######################################################
 
   ng-directives:
@@ -295,6 +341,17 @@ contexts:
 
 ###[ ANGULAR INTERPOLATIONS ]##################################################
 
+  ng-string-interpolations:
+    - match: '{{'
+      scope: meta.embedded.expression.ngx.html punctuation.section.embedded.begin.ngx.html
+      push: ng-string-interpolation-body
+
+  ng-string-interpolation-body:
+    - clear_scopes: 1
+    - meta_include_prototype: false
+    - meta_content_scope: meta.embedded.expression.ngx.html source.ngx.embedded.html
+    - include: ng-interpolation-body
+
   ng-interpolations:
     - match: '{{'
       scope: meta.embedded.expression.ngx.html punctuation.section.embedded.begin.ngx.html
diff --git a/tests/syntax_test_scopes.component.html b/tests/syntax_test_scopes.component.html
index ef3ebe1..c525647 100644
--- a/tests/syntax_test_scopes.component.html
+++ b/tests/syntax_test_scopes.component.html
@@ -742,6 +742,79 @@
 <!--                                       ^^ punctuation.section.embedded.end.ngx.html -->
 
 
+<!--
+ String interpolations
+ -->
+
+ <![CDATA[string {{value}}!]]>
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag.sgml.cdata.html -->
+<!--^^^^^ keyword.declaration.cdata.html -->
+<!--     ^ punctuation.definition.tag.begin.html -->
+<!--      ^^^^^^^^^^^^^^^^^ meta.string.html -->
+<!--      ^^^^^^^ string.unquoted.cdata.html -->
+<!--             ^^^^^^^^^ meta.embedded.expression.ngx.html -->
+<!--             ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--               ^^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--                    ^^ punctuation.section.embedded.end.ngx.html -->
+<!--                      ^ string.unquoted.cdata.html -->
+<!--                       ^^^ punctuation.definition.tag.end.html -->
+
+<!-- generic attributes -->
+<div width="{{width}}px">
+<!--^^^^^^^^^^^^^^^^^^^^^ meta.tag -->
+<!-- ^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.html -->
+<!-- ^^^^^ entity.other.attribute-name.html -->
+<!--      ^ punctuation.separator.key-value.html -->
+<!--       ^ meta.string.html string.quoted.double.html punctuation.definition.string.begin.html -->
+<!--        ^^^^^^^^^ meta.string.html meta.embedded.expression.ngx.html -->
+<!--        ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--          ^^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--               ^^ punctuation.section.embedded.end.ngx.html -->
+<!--                 ^^^ meta.string.html string.quoted.double.html -->
+<!--                   ^ punctuation.definition.string.end.html -->
+<!--                    ^ punctuation.definition.tag.end.html -->
+
+<!-- class attributes -->
+<div class="{{class}}-name">
+<!--^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag.block.any.html -->
+<!-- ^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.class.html -->
+<!-- ^^^^^ entity.other.attribute-name.class.html -->
+<!--      ^ punctuation.separator.key-value.html -->
+<!--       ^ meta.string.html string.quoted.double.html punctuation.definition.string.begin.html -->
+<!--        ^^^^^^^^^^^^^^ meta.class-name.html meta.string.html -->
+<!--        ^^^^^^^^^ meta.embedded.expression.ngx.html -->
+<!--        ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--          ^^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--               ^^ punctuation.section.embedded.end.ngx.html -->
+<!--                 ^^^^^ string.quoted.double.html -->
+<!--                      ^ meta.string.html string.quoted.double.html punctuation.definition.string.end.html -->
+<!--                       ^ punctuation.definition.tag.end.html -->
+
+<!-- CSS attributes -->
+<div style="{{prop}}-name: {{value + " >
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag.block.any.html -->
+<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-with-value.style.html -->
+<!--                                  ^^ - meta.attribute-with-value -->
+<!-- ^^^^^ entity.other.attribute-name.style.html -->
+<!--      ^ punctuation.separator.key-value.html -->
+<!--       ^ meta.string.html string.quoted.double.html punctuation.definition.string.begin.html -->
+<!--        ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.html source.css.embedded.html -->
+<!--        ^^^^^^^^ meta.embedded.expression.ngx.html -->
+<!--        ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--          ^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--              ^^ punctuation.section.embedded.end.ngx.html -->
+<!--                ^^^^^ meta.property-name.css support.type.property-name.css -->
+<!--                     ^ punctuation.separator.key-value.css -->
+<!--                      ^^^^^^^^^^^ meta.property-value.css -->
+<!--                       ^^^^^^^^^^ meta.embedded.expression.ngx.html -->
+<!--                       ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--                         ^^^^^^^^ source.ngx.embedded.html -->
+<!--                         ^^^^^ variable.other.readwrite.ngx -->
+<!--                               ^ keyword.operator.arithmetic.ngx -->
+<!--                                 ^ meta.string.html string.quoted.double.html punctuation.definition.string.end.html -->
+<!--                                   ^ punctuation.definition.tag.end.html -->
+
+
 <!--
  Binding dynamic text, properties and attributes
  https://v18.angular.dev/guide/templates/binding#binding-dynamic-properties-and-attributes

From 4053d656feb55664163a9a5c0e1acd90deab322a Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Mon, 16 Dec 2024 17:58:36 +0100
Subject: [PATCH 3/5] Fix interpolation in style tags

This commit overrides HTML's default `style-css-content` to use CSS (for Ngx)
syntax between `<style>` tags, enabling interpolation support.

Note: Maybe not so relevant in templates, but in case someone wants to use it.
---
 NgxHTML.sublime-syntax                  | 17 +++++++++++++++++
 tests/syntax_test_scopes.component.html | 23 +++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/NgxHTML.sublime-syntax b/NgxHTML.sublime-syntax
index 3c4dc82..8d14473 100644
--- a/NgxHTML.sublime-syntax
+++ b/NgxHTML.sublime-syntax
@@ -40,6 +40,23 @@ contexts:
     - meta_prepend: true
     - include: ng-string-interpolations
 
+###[ 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.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-assignment:
diff --git a/tests/syntax_test_scopes.component.html b/tests/syntax_test_scopes.component.html
index c525647..313fff1 100644
--- a/tests/syntax_test_scopes.component.html
+++ b/tests/syntax_test_scopes.component.html
@@ -742,6 +742,29 @@
 <!--                                       ^^ punctuation.section.embedded.end.ngx.html -->
 
 
+<!--
+ Interpolation in inline styles
+ -->
+
+<style>
+    #{{id}} {
+        {{prop}}: {{value}};
+<!--^^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-list.css meta.block.css -->
+<!--    ^^^^^^^^ meta.property-name.css support.type.property-name.css meta.embedded.expression.ngx.html -->
+<!--    ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--      ^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--          ^^ punctuation.section.embedded.end.ngx.html -->
+<!--            ^ punctuation.separator.key-value.css -->
+<!--             ^^^^^^^^^^ meta.property-value.css -->
+<!--              ^^^^^^^^^ meta.embedded.expression.ngx.html -->
+<!--              ^^ punctuation.section.embedded.begin.ngx.html -->
+<!--                ^^^^^ source.ngx.embedded.html variable.other.readwrite.ngx -->
+<!--                     ^^ punctuation.section.embedded.end.ngx.html -->
+<!--                       ^ punctuation.terminator.rule.css -->
+    }
+</style>
+
+
 <!--
  String interpolations
  -->

From 2f49366d2ef3fed358e62ed87836e06750e1b5ff Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Tue, 17 Dec 2024 09:09:29 +0100
Subject: [PATCH 4/5] Add meta scope to control flow statements

This commit scopes all control flow statements
`meta.embedded.statement source.ngx.embedded.html`.
to also apply proper `source.ngx` to angular expressions.
---
 NgxHTML.sublime-syntax                  | 53 +++++++++++++++++++------
 tests/syntax_test_scopes.component.html | 52 ++++++++++++++++++------
 2 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/NgxHTML.sublime-syntax b/NgxHTML.sublime-syntax
index 8d14473..4dc6f16 100644
--- a/NgxHTML.sublime-syntax
+++ b/NgxHTML.sublime-syntax
@@ -177,7 +177,9 @@ contexts:
 
   ng-declarations:
     - match: (@)let{{ident_break}}
-      scope: meta.let.ngx keyword.declaration.variable.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        meta.let.ngx keyword.declaration.variable.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
@@ -191,15 +193,21 @@ contexts:
     - include: else-pop
 
   ng-let-assignment:
-    - meta_content_scope: meta.let.identifier.ngx
+    - meta_content_scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        meta.let.identifier.ngx
     - match: =
-      scope: meta.let.ngx keyword.operator.assignment.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        meta.let.ngx keyword.operator.assignment.ngx
       set: ng-let-value
     - include: else-pop
 
   ng-let-value:
     - meta_include_prototype: false
-    - meta_content_scope: meta.let.value.ngx
+    - meta_content_scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        meta.let.value.ngx
     - match: ';'
       scope: punctuation.terminator.expression.ngx
       pop: 1
@@ -211,39 +219,51 @@ contexts:
     # conditionals
     # https://angular.dev/guide/templates/control-flow#conditionally-display-content-with-if-else-if-and-else
     - match: (@)if{{ident_break}}
-      scope: keyword.control.conditional.if.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.if.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
         - ng-block
         - ng-conditional-group
     - match: (@)else\s+if{{ident_break}}
-      scope: keyword.control.conditional.elseif.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.elseif.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
         - ng-block
         - ng-conditional-group
     - match: (@)else{{ident_break}}
-      scope: keyword.control.conditional.else.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.else.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push: ng-block
     # https://angular.dev/guide/templates/control-flow#conditionally-display-content-with-the-switch-block
     - match: (@)case{{ident_break}}
-      scope: keyword.control.conditional.case.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.case.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
         - ng-block
         - ng-conditional-group
     - match: (@)default{{ident_break}}
-      scope: keyword.control.conditional.case.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.case.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push: ng-block
     - match: (@)switch{{ident_break}}
-      scope: keyword.control.conditional.switch.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.conditional.switch.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
@@ -251,20 +271,26 @@ contexts:
         - ng-conditional-group
     # https://angular.dev/guide/templates/control-flow#providing-a-fallback-for-for-blocks-with-the-empty-block
     - match: (@)for{{ident_break}}
-      scope: keyword.control.loop.for.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.loop.for.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
         - ng-block
         - ng-for-group
     - match: (@)empty{{ident_break}}
-      scope: keyword.control.loop.else.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.loop.else.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push: ng-block
     # https://angular.dev/guide/templates/defer
     - match: (@)(?:defer|error|loading|placeholder){{ident_break}}
-      scope: keyword.control.flow.ngx
+      scope:
+        meta.embedded.statement.ngx.html source.ngx.embedded.html
+        keyword.control.flow.ngx
       captures:
         1: punctuation.definition.keyword.ngx
       push:
@@ -273,6 +299,7 @@ contexts:
 
   ng-block:
     - meta_include_prototype: false
+    - meta_content_scope: meta.embedded.statement.ngx.html source.ngx.embedded.html
     - match: \{
       scope: punctuation.section.block.begin.ngx
       set: ng-block-body
diff --git a/tests/syntax_test_scopes.component.html b/tests/syntax_test_scopes.component.html
index 313fff1..4cbefac 100644
--- a/tests/syntax_test_scopes.component.html
+++ b/tests/syntax_test_scopes.component.html
@@ -6,6 +6,8 @@
  -->
 
 @let name = user.name;
+<!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html meta.let.ngx keyword.declaration.variable.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!-- ^^^^ variable.other.readwrite.ngx -->
 <!--      ^ meta.let.ngx keyword.operator.assignment.ngx -->
@@ -16,6 +18,7 @@
 <!--                 ^ punctuation.terminator.expression.ngx -->
 
 @let func = user.func();
+<!--^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!-- ^^^^ variable.other.readwrite.ngx -->
 <!--      ^ meta.let.ngx keyword.operator.assignment.ngx -->
@@ -29,6 +32,7 @@
 <!--                   ^ punctuation.terminator.expression.ngx -->
 
 @let greeting = 'Hello, ' + name;
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^^^^^ meta.let.identifier.ngx -->
 <!-- ^^^^^^^^ variable.other.readwrite.ngx -->
 <!--          ^ meta.let.ngx keyword.operator.assignment.ngx -->
@@ -41,6 +45,7 @@
 <!--                            ^ punctuation.terminator.expression.ngx -->
 
 @let data = data$ | async;
+<!--^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!--      ^ meta.let.ngx -->
 <!--       ^^^^^^^ meta.let.value.ngx - meta.filter -->
@@ -53,6 +58,7 @@
 <!--                     ^ punctuation.terminator.expression.ngx -->
 
 @let item = var[10]['bar'];
+<!--^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!--      ^ meta.let.ngx -->
 <!--       ^^^^^^^^^^^^^^^ meta.let.value.ngx -->
@@ -71,6 +77,7 @@
 
 <!-- qualified property with missing leading object in incomplete ternary expression -->
 @let path = .foo?.bar? ;
+<!--^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!--      ^ meta.let.ngx -->
 <!--       ^ meta.let.value.ngx - meta.path -->
@@ -87,6 +94,7 @@
 <!--                   ^ punctuation.terminator.expression.ngx -->
 
 @let path = .orders.value()?.[0]?.$extra?.#currency.unit;
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!--      ^ meta.let.ngx -->
 <!--       ^ meta.let.value.ngx - meta.path -->
@@ -116,6 +124,7 @@
 <!--                                                    ^ punctuation.terminator.expression.ngx -->
 
 @let path = orders.value()?.[0]?.$extra?.#currency.unit;
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ meta.let.identifier.ngx -->
 <!--      ^ meta.let.ngx -->
 <!--       ^ meta.let.value.ngx - meta.path -->
@@ -149,9 +158,10 @@
  -->
 
 @if (a > b) {
-<!-- <- keyword.control.conditional.if.ngx punctuation.definition.keyword.ngx -->
- <!-- <- keyword.control.conditional.if.ngx -->
-  <!-- <- keyword.control.conditional.if.ngx -->
+<!--^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
+<!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html keyword.control.conditional.if.ngx punctuation.definition.keyword.ngx -->
+ <!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html keyword.control.conditional.if.ngx -->
+  <!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html keyword.control.conditional.if.ngx -->
 <!--^^^^^^^ meta.group.ngx -->
 <!--^ punctuation.section.group.begin.ngx -->
 <!-- ^ variable.other.readwrite.ngx -->
@@ -173,6 +183,7 @@
 <!--                             ^^ punctuation.section.embedded.end.ngx.html - source.ngx -->
 } @else if (b > a()) {
 <!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
+<!--^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ keyword.control.conditional.elseif.ngx -->
 <!--       ^^^^^^^^^ meta.group.ngx -->
 <!--       ^ punctuation.section.group.begin.ngx -->
@@ -202,7 +213,8 @@
 <!--                                ^^ punctuation.section.embedded.end.ngx.html -->
 } @else {
 <!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
-  <!-- <- keyword.control.conditional.else.ngx punctuation.definition.keyword.ngx -->
+  <!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html keyword.control.conditional.else.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^ keyword.control.conditional.else.ngx -->
 <!--    ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     {{ a }} is equal to {{ b }}
@@ -250,6 +262,8 @@
  -->
 
 @switch (accessLevel) {
+<!-- <- meta.embedded.statement.ngx.html source.ngx.embedded.html keyword.control.conditional.switch.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^ keyword.control.conditional.switch.ngx -->
 <!--    ^^^^^^^^^^^^^ meta.group.ngx -->
 <!--    ^ punctuation.section.group.begin.ngx -->
@@ -257,7 +271,7 @@
 <!--                ^ punctuation.section.group.end.ngx -->
 <!--                  ^ meta.block.ngx punctuation.section.block.begin.ngx -->
     @case ('admin') {
-<!--^^^^^^^^^^^^^^^^ meta.block.ngx - meta.block meta.block -->
+<!--^^^^^^^^^^^^^^^^ meta.block.ngx meta.embedded.statement.ngx.html source.ngx.embedded.html  - meta.block meta.block -->
 <!--                ^^ meta.block.ngx meta.block.ngx -->
 <!--^^^^^ keyword.control.conditional.case.ngx -->
 <!--^ punctuation.definition.keyword.ngx -->
@@ -277,7 +291,7 @@
 <!-- ^ meta.block.ngx - meta.block meta.block -->
 
     @case {
-<!--^^^^^^ meta.block.ngx - meta.block meta.block -->
+<!--^^^^^^ meta.block.ngx meta.embedded.statement.ngx.html source.ngx.embedded.html - meta.block meta.block -->
 <!--      ^^ meta.block.ngx meta.block.ngx -->
 <!--^^^^^ keyword.control.conditional.case.ngx -->
 <!--^ punctuation.definition.keyword.ngx -->
@@ -292,7 +306,7 @@
 <!--^ meta.block.ngx meta.block.ngx punctuation.section.block.end.ngx -->
 <!-- ^ meta.block.ngx - meta.block meta.block -->
     @default {
-<!--^^^^^^^^^ meta.block.ngx - meta.block meta.block -->
+<!--^^^^^^^^^ meta.block.ngx meta.embedded.statement.ngx.html source.ngx.embedded.html - meta.block meta.block -->
 <!--         ^^ meta.block.ngx meta.block.ngx -->
 <!--^^^^^^^^ keyword.control.conditional.case.ngx -->
 <!--^ punctuation.definition.keyword.ngx -->
@@ -311,6 +325,8 @@
  -->
 
 @for (user of users; track user.id) {
+<!-- <- meta.embedded.statement.ngx source.ngx.embedded.html keyword.control.loop.for.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx source.ngx.embedded.html -->
 <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.ngx -->
 <!-- ^ punctuation.section.group.begin.ngx -->
 <!--  ^^^^ variable.other.readwrite.ngx -->
@@ -326,14 +342,16 @@
   {{ user.name }}
 } @empty {
 <!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
-  <!-- <- keyword.control.loop.else.ngx punctuation.definition.keyword.ngx -->
-<!--^^^^ keyword.control.loop.else.ngx -->
+  <!-- <- meta.embedded.statement.ngx source.ngx.embedded.html keyword.control.loop.else.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^ meta.embedded.statement.ngx source.ngx.embedded.html keyword.control.loop.else.ngx -->
+<!--    ^ meta.embedded.statement.ngx source.ngx.embedded.html - keyword - punctuation -->
 <!--     ^ meta.block.ngx punctuation.section.block.begin.ngx -->
   Empty list of users
-}
-<!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
+.html}
+<!--.html <- meta.block.ngx punctuation.section.block.end.ngx -->
 
 @for (item of items; track item.id; let idx = $index, e = $even) {
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx source.ngx.embedded.html -->
 <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.ngx -->
 <!-- ^ punctuation.section.group.begin.ngx -->
 <!--  ^^^^ variable.other.readwrite.ngx -->
@@ -370,9 +388,11 @@
 <!--                       ^^^^ variable.other.member.ngx -->
 <!--                            ^^ punctuation.section.embedded.end.ngx.html -->
 }
-<!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
+<!--.html <- meta.block.ngx punctuation.section.block.end.ngx -->
 
 @if (users$ | async; as users) {
+<!-- <- meta.embedded.statement.ngx source.ngx.embedded.html keyword.control.conditional.if.ngx punctuation.definition.keyword.ngx -->
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx source.ngx.embedded.html -->
 <!--^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.ngx -->
 <!--^ punctuation.section.group.begin.ngx -->
 <!-- ^^^^^^ variable.other.readwrite.ngx -->
@@ -402,7 +422,7 @@
 <!--                       ^ entity.name.tag.block.any.html -->
 <!--                        ^ punctuation.definition.tag.end.html -->
 }
-<!-- <- meta.block.ngx punctuation.section.block.end.ngx -->
+<!--.html <- meta.block.ngx punctuation.section.block.end.ngx -->
 
 
 <!--
@@ -411,6 +431,7 @@
  -->
 
     @defer { <comment-list /> }
+<!--^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ keyword.control.flow.ngx -->
 <!--^ punctuation.definition.keyword.ngx -->
 <!--       ^^^^^^^^^^^^^^^^^^^^ meta.block.ngx -->
@@ -422,6 +443,7 @@
 <!--                          ^ punctuation.section.block.end.ngx -->
 
     @defer (on viewport) {
+<!--^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--^^^^^^ keyword.control.flow.ngx -->
 <!--^ punctuation.definition.keyword.ngx -->
 <!--       ^^^^^^^^^^^^^ meta.group.ngx -->
@@ -433,18 +455,21 @@
         <comment-list />
     } @loading {
 <!--^ meta.block.ngx punctuation.section.block.end.ngx -->
+<!--  ^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--  ^^^^^^^^ keyword.control.flow.ngx -->
 <!--  ^ punctuation.definition.keyword.ngx -->
 <!--           ^ meta.block.ngx punctuation.section.block.begin.ngx -->
       Loading…
     } @error {
 <!--^ meta.block.ngx punctuation.section.block.end.ngx -->
+<!--  ^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--  ^^^^^^ keyword.control.flow.ngx -->
 <!--  ^ punctuation.definition.keyword.ngx -->
 <!--         ^ meta.block.ngx punctuation.section.block.begin.ngx -->
       Loading failed :(
     } @placeholder {
 <!--^ meta.block.ngx punctuation.section.block.end.ngx -->
+<!--  ^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--  ^^^^^^^^^^^^ keyword.control.flow.ngx -->
 <!--  ^ punctuation.definition.keyword.ngx -->
 <!--               ^ meta.block.ngx punctuation.section.block.begin.ngx -->
@@ -454,6 +479,7 @@
 <!-- ^ - meta.block -->
 
 @defer (on viewport; when $var prefetch on idle; prefetch when true) {
+<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.statement.ngx.html source.ngx.embedded.html -->
 <!--   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.ngx -->
 <!--   ^ punctuation.section.group.begin.ngx -->
 <!--    ^^ keyword.control.flow.ngx -->

From 3dcec662091d1bff02e14869b4010b39518d1afa Mon Sep 17 00:00:00 2001
From: deathaxe <deathaxe82@googlemail.com>
Date: Tue, 17 Dec 2024 12:04:13 +0100
Subject: [PATCH 5/5] Add a global `meta.template.ngx` scope

This commit scopes whole document `meta.template`.

Various template syntaxes make use of it to be able to use simpler snippet or
completion selectors across all supported languages (e.g.: CSS/JS/HTML).
---
 NgxHTML.sublime-syntax | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/NgxHTML.sublime-syntax b/NgxHTML.sublime-syntax
index 4dc6f16..dd04854 100644
--- a/NgxHTML.sublime-syntax
+++ b/NgxHTML.sublime-syntax
@@ -14,6 +14,10 @@ contexts:
 
 ###[ HTML CUSTOMIZATIONS ]#####################################################
 
+  main:
+    - meta_prepend: true
+    - meta_scope: meta.template.ngx
+
   cdata-content:
     - meta_prepend: true
     - include: ng-string-interpolations