Skip to content

Commit 6947919

Browse files
deathaxeprincemaple
deathaxe
authored and
princemaple
committed
Add CSS/HTML syntax highlighting in tagged template strings
This commit adds syntax highlighting in `` css`...` `` and `` html`...` `` tagged template strings.
1 parent 370bb1c commit 6947919

9 files changed

+319
-24
lines changed

‎.github/workflows/test.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ jobs:
1111

1212
- uses: SublimeText/syntax-test-action@v2
1313
with:
14-
build: 4152
15-
default_packages: v4152
14+
build: 4180
15+
default_packages: binary
1616
package_name: Ngx HTML

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
%YAML 1.2
2+
---
3+
# A special syntax definition for syntax highlighted tagged template strings
4+
# with ${...} interpolation support
5+
scope: source.css.embedded.template-string.quoted.double.ngx
6+
version: 2
7+
hidden: true
8+
9+
extends: CSS (for Ngx Template Strings).sublime-syntax
10+
11+
contexts:
12+
13+
main:
14+
- include: rule-list-body
15+
16+
quoted-strings:
17+
- meta_prepend: true
18+
- match: (?=")
19+
pop: 1
20+
21+
quoted-string:
22+
- meta_prepend: true
23+
- match: (?=")
24+
pop: 1
25+
26+
quoted-urls:
27+
- meta_prepend: true
28+
- match: (?=")
29+
pop: 1

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
%YAML 1.2
2+
---
3+
# A special syntax definition for syntax highlighted tagged template strings
4+
# with ${...} interpolation support
5+
scope: source.css.embedded.template-string.quoted.single.ngx
6+
version: 2
7+
hidden: true
8+
9+
extends: CSS (for Ngx Template Strings).sublime-syntax
10+
11+
contexts:
12+
13+
main:
14+
- include: rule-list-body
15+
16+
quoted-strings:
17+
- meta_prepend: true
18+
- match: (?=')
19+
pop: 1
20+
21+
quoted-string:
22+
- meta_prepend: true
23+
- match: (?=')
24+
pop: 1
25+
26+
quoted-urls:
27+
- meta_prepend: true
28+
- match: (?=')
29+
pop: 1

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
%YAML 1.2
2+
---
3+
# A special syntax definition for syntax highlighted tagged template strings
4+
# with ${...} interpolation support
5+
scope: source.css.embedded.template-string.ngx
6+
version: 2
7+
hidden: true
8+
9+
extends: Packages/CSS/CSS.sublime-syntax
10+
11+
contexts:
12+
13+
main:
14+
- include: comments
15+
- include: properties-or-selectors
16+
- include: at-rules
17+
- include: property-lists
18+
- include: rule-terminators
19+
- include: illegal-commas
20+
- include: illegal-groups
21+
22+
prototype:
23+
- meta_prepend: true
24+
- match: (?=\`)
25+
pop: 1
26+
- include: NgxHTML.sublime-syntax#ng-template-interpolations
27+
- include: NgxHTML.sublime-syntax#ng-string-content
28+
29+
property-end:
30+
- meta_prepend: true
31+
- match: (?=\`)
32+
pop: 1
33+
34+
string-content:
35+
- meta_prepend: true
36+
- match: (?=\`)
37+
pop: 1
38+
- include: NgxHTML.sublime-syntax#ng-template-string-interpolations
39+
- include: NgxHTML.sublime-syntax#ng-string-content
40+
41+
variables:
42+
# allow identifiers to start with ${...} interpolation
43+
ident_start: (?:{{nmstart}}|\$\{)

‎Embeddings/CSS (for Ngx).sublime-syntax‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ hidden: true
88

99
extends: Packages/CSS/CSS.sublime-syntax
1010

11-
variables:
12-
ident_start: (?:{{nmstart}}|{{)
13-
1411
contexts:
1512

1613
prototype:
@@ -21,22 +18,39 @@ contexts:
2118
- meta_prepend: true
2219
- include: NgxHTML.sublime-syntax#ng-string-interpolations
2320

24-
at-keyframe-block-body:
25-
# required until ST4174 (PR #3820)
21+
at-counter-style-declaration-list:
22+
# required until ST4193 (PR #4055)
2623
- meta_prepend: true
27-
- meta_include_prototype: false
24+
- match: (?={{)
25+
pop: 1
2826

29-
at-layer-name-list:
30-
# required until ST4174 (PR #3820)
31-
- meta_prepend: true
27+
at-keyframe-block:
28+
# required until ST4193 (PR #4055)
3229
- meta_include_prototype: false
30+
- meta_prepend: true
31+
- match: (?={{)
32+
pop: 1
3333

34-
property-list-body:
35-
# required until ST4174 (PR #3820)
34+
at-other-body:
35+
# required until ST4193 (PR #4055)
3636
- meta_prepend: true
37-
- meta_include_prototype: false
37+
- match: (?={{)
38+
pop: 1
3839

39-
stylesheet-block-body:
40-
# required until ST4174 (PR #3831)
40+
maybe-property-list:
41+
# required until ST4193 (PR #4055)
4142
- meta_prepend: true
42-
- meta_include_prototype: false
43+
- match: (?={{)
44+
pop: 1
45+
46+
property-lists:
47+
# required until ST4193 (PR #4055)
48+
- match: '{{block_start}}'
49+
scope: punctuation.section.block.begin.css
50+
push: property-list-body
51+
52+
variables:
53+
# `{{` starts interpolation, but not two nested CSS blocks
54+
block_start: \{(?!{)
55+
# allow identifiers to start with {{...}} tags
56+
ident_start: (?:{{nmstart}}|{{)

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
%YAML 1.2
2+
---
3+
# A special syntax definition for syntax highlighted tagged template strings
4+
# with ${...} interpolation support
5+
scope: text.html.embedded.template-string.ngx
6+
version: 2
7+
hidden: true
8+
9+
extends: Packages/HTML/HTML.sublime-syntax
10+
11+
contexts:
12+
13+
###[ HTML CUSTOMIZATIONS ]#####################################################
14+
15+
main:
16+
- include: html
17+
18+
prototype:
19+
- meta_prepend: true
20+
- match: (?=\`)
21+
pop: 1
22+
- include: NgxHTML.sublime-syntax#ng-template-interpolations
23+
- include: NgxHTML.sublime-syntax#ng-string-content
24+
25+
cdata-content:
26+
- meta_prepend: true
27+
- include: ng-string-prototype
28+
29+
strings-common-content:
30+
- meta_prepend: true
31+
- include: ng-string-prototype
32+
33+
tag-generic-attribute-name:
34+
- meta_prepend: true
35+
- include: ng-string-prototype
36+
37+
tag-attribute-value-content:
38+
- meta_prepend: true
39+
- include: ng-string-prototype
40+
41+
###[ HTML STYLE TAG ]##########################################################
42+
43+
style-css-content:
44+
- meta_include_prototype: false
45+
- match: '{{style_content_begin}}'
46+
captures:
47+
1: comment.block.html punctuation.definition.comment.begin.html
48+
pop: 1 # make sure to match only once
49+
embed: scope:source.css.embedded.template-string.ngx
50+
embed_scope: source.css.embedded.html
51+
escape: '{{style_content_end}}'
52+
escape_captures:
53+
1: source.css.embedded.html
54+
2: comment.block.html punctuation.definition.comment.end.html
55+
3: source.css.embedded.html
56+
4: comment.block.html punctuation.definition.comment.end.html
57+
58+
###[ HTML STYLE ATTRIBUTES ]###################################################
59+
60+
tag-style-attribute-value:
61+
- meta_include_prototype: false
62+
- match: \"
63+
scope: meta.string.html string.quoted.double.html punctuation.definition.string.begin.html
64+
set: tag-style-attribute-double-quoted-value
65+
- match: \'
66+
scope: meta.string.html string.quoted.single.html punctuation.definition.string.begin.html
67+
set: tag-style-attribute-single-quoted-value
68+
- include: else-pop
69+
70+
tag-style-attribute-double-quoted-value:
71+
- meta_include_prototype: false
72+
- meta_content_scope: meta.string.html meta.interpolation.html source.css.embedded.html
73+
- match: \"
74+
scope: meta.string.html string.quoted.double.html punctuation.definition.string.end.html
75+
pop: 1
76+
- include: scope:source.css.embedded.template-string.quoted.double.ngx
77+
apply_prototype: true
78+
79+
tag-style-attribute-single-quoted-value:
80+
- meta_include_prototype: false
81+
- meta_content_scope: meta.string.html meta.interpolation.html source.css.embedded.html
82+
- match: \'
83+
scope: meta.string.html string.quoted.single.html punctuation.definition.string.end.html
84+
pop: 1
85+
- include: scope:source.css.embedded.template-string.quoted.single.ngx
86+
apply_prototype: true
87+
88+
ng-string-prototype:
89+
- match: (?=\`)
90+
pop: 1
91+
- include: NgxHTML.sublime-syntax#ng-template-string-interpolations
92+
- include: NgxHTML.sublime-syntax#ng-string-content
93+
94+
###############################################################################
95+
96+
variables:
97+
# allow tags to start with ${...} interpolation
98+
tag_name_start: (?:[A-Za-z]|\$\{)
99+

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
%YAML 1.2
22
---
3-
scope: source.regexp.embedded.ngx.template-string
3+
scope: source.regexp.embedded.template-string.ngx
44
version: 2
55
hidden: true
66

@@ -11,4 +11,4 @@ contexts:
1111
prototype:
1212
- match: (?=/?`)
1313
pop: 1
14-
- include: NgxHTML.sublime-syntax#ng-template-text-interpolations
14+
- include: NgxHTML.sublime-syntax#ng-template-interpolations

‎NgxHTML.sublime-syntax‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -672,6 +672,16 @@ contexts:
672672

673673
ng-templates:
674674
# tagged template strings
675+
- match: (css)(\`)
676+
captures:
677+
1: variable.function.tagged-template.ngx
678+
2: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.begin.ngx
679+
push: ng-tagged-template-css-body
680+
- match: (html)(\`)
681+
captures:
682+
1: variable.function.tagged-template.ngx
683+
2: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.begin.ngx
684+
push: ng-tagged-template-html-body
675685
- match: ({{ident_name}})(\`)
676686
captures:
677687
1: variable.function.tagged-template.ngx
@@ -685,6 +695,18 @@ contexts:
685695
- ng-template-pattern-begin
686696
- ng-template-plain-body
687697

698+
ng-tagged-template-css-body:
699+
- meta_content_scope: meta.string.template.ngx source.css.embedded.ngx
700+
- include: ng-tagged-template-plain-end
701+
- include: scope:source.css.embedded.template-string.ngx
702+
apply_prototype: true
703+
704+
ng-tagged-template-html-body:
705+
- meta_content_scope: meta.string.template.ngx text.html.embedded.ngx
706+
- include: ng-tagged-template-plain-end
707+
- include: scope:text.html.embedded.template-string.ngx
708+
apply_prototype: true
709+
688710
ng-tagged-template-plain-body:
689711
- meta_content_scope: meta.string.template.ngx string.quoted.other.ngx
690712
- include: ng-tagged-template-plain-end
@@ -718,7 +740,7 @@ contexts:
718740
- match: \n
719741
scope: invalid.illegal.newline.ngx
720742
pop: 2
721-
- include: scope:source.regexp.embedded.ngx.template-string
743+
- include: scope:source.regexp.embedded.template-string.ngx
722744
apply_prototype: true
723745

724746
ng-template-plain-body:
@@ -741,15 +763,15 @@ contexts:
741763
ng-template-string-interpolation-body:
742764
- clear_scopes: 1
743765
- meta_scope: meta.interpolation.ngx
744-
- include: ng-template-text-interpolation-body
766+
- include: ng-template-interpolation-body
745767

746-
ng-template-text-interpolations:
768+
ng-template-interpolations:
747769
# used by embedded syntaxes (e.g.: CSS or HTML)
748770
- match: \$\{
749771
scope: punctuation.section.interpolation.begin.ngx
750-
push: ng-template-text-interpolation-body
772+
push: ng-template-interpolation-body
751773

752-
ng-template-text-interpolation-body:
774+
ng-template-interpolation-body:
753775
- meta_scope: meta.interpolation.ngx
754776
- match: \}
755777
scope: punctuation.section.interpolation.end.ngx

0 commit comments

Comments
 (0)