Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix meta.embedded vs. meta.interpolation #34

Merged
merged 5 commits into from
Dec 17, 2024
Merged

Fix meta.embedded vs. meta.interpolation #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c436cf
Extend meta.expression scope
deathaxe Dec 17, 2024
93be7fd
Fix interpolation in attribute values
deathaxe Dec 16, 2024
4053d65
Fix interpolation in style tags
deathaxe Dec 16, 2024
2f49366
Add meta scope to control flow statements
deathaxe Dec 17, 2024
3dcec66
Add a global `meta.template.ngx` scope
deathaxe Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions Embeddings/CSS (for Ngx).sublime-syntax
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
141 changes: 123 additions & 18 deletions NgxHTML.sublime-syntax
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ contexts:

###[ HTML CUSTOMIZATIONS ]#####################################################

main:
- meta_prepend: true
- meta_scope: meta.template.ngx

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
Expand All @@ -24,6 +36,61 @@ 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 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:
- 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:
Expand Down Expand Up @@ -85,15 +152,15 @@ 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
pop: 1
- 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
Expand All @@ -114,7 +181,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:
Expand All @@ -128,15 +197,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
Expand All @@ -148,60 +223,78 @@ 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:
- ng-block
- 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:
Expand All @@ -210,6 +303,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
Expand Down Expand Up @@ -295,16 +389,27 @@ 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.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

Expand Down
Loading
Loading