Skip to content

Commit eade676

Browse files
deathaxedeathaxe
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 eade676

9 files changed

+293
-31
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: 3 additions & 22 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,6 @@ 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)
26-
- meta_prepend: true
27-
- meta_include_prototype: false
28-
29-
at-layer-name-list:
30-
# required until ST4174 (PR #3820)
31-
- meta_prepend: true
32-
- meta_include_prototype: false
33-
34-
property-list-body:
35-
# required until ST4174 (PR #3820)
36-
- meta_prepend: true
37-
- meta_include_prototype: false
38-
39-
stylesheet-block-body:
40-
# required until ST4174 (PR #3831)
41-
- meta_prepend: true
42-
- meta_include_prototype: false
21+
variables:
22+
# allow identifiers to start with {{...}} tags
23+
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

‎tests/syntax_test_scopes.component.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,6 +538,65 @@
538538
<!-- ^ punctuation.section.interpolation.end.ngx - string -->
539539
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
540540

541+
{{ css`color: ${`bs-` + color}` }}
542+
<!-- ^^^ variable.function.tagged-template.ngx - meta.string -->
543+
<!-- ^^^^^^^^ meta.string.template.ngx - meta.interpolation -->
544+
<!-- ^^^^^^^^^^^^^^^^ meta.string.template.ngx meta.interpolation.ngx -->
545+
<!-- ^ meta.string.template.ngx - meta.interpolation -->
546+
<!-- ^^ - meta.string -->
547+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.begin.ngx -->
548+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded.ngx -->
549+
<!-- ^^^^^ meta.property-name.css support.type.property-name.css -->
550+
<!-- ^ punctuation.separator.key-value.css -->
551+
<!-- ^^^^^^^^^^^^^^^^ meta.property-value.css meta.interpolation.ngx -->
552+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
553+
<!-- ^^^^^ meta.string.template.ngx string.quoted.other.ngx -->
554+
<!-- ^ punctuation.definition.string.begin.ngx -->
555+
<!-- ^ punctuation.definition.string.end.ngx -->
556+
<!-- ^ keyword.operator.arithmetic.ngx -->
557+
<!-- ^^^^^ variable.other.readwrite.ngx -->
558+
<!-- ^ punctuation.section.interpolation.end.ngx -->
559+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
560+
561+
{{ html`<script>let i = ${value}</script>` }}
562+
<!-- ^^^^ variable.function.tagged-template.ngx -->
563+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.template.ngx -->
564+
<!-- ^^^^^^^^ text.html.embedded.ngx meta.tag.script.begin.html -->
565+
<!-- ^^^^^^^^^^^^^^^^ meta.string.template.ngx text.html.embedded.ngx source.js.embedded.html -->
566+
<!-- ^^^^^^^^^ text.html.embedded.ngx meta.tag.script.end.html -->
567+
<!-- ^ punctuation.definition.string.end.ngx -->
568+
<!-- ^^ - meta.string -->
569+
570+
{{ html`<style>tag {color: ${color}}</style>` }}
571+
<!-- ^^^^ variable.function.tagged-template.ngx -->
572+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.template.ngx -->
573+
<!-- ^^^^^^^ text.html.embedded.ngx meta.tag.style.begin.html -->
574+
<!-- ^^^^^^^^^^^^^^^^^^^^^ text.html.embedded.ngx source.css.embedded.html -->
575+
<!-- ^^^^^^^^ meta.interpolation.ngx -->
576+
<!-- ^^^^^^^^ text.html.embedded.ngx meta.tag.style.end.html -->
577+
<!-- ^ punctuation.definition.string.end.ngx -->
578+
<!-- ^^^ - meta.string -->
579+
580+
<!-- tagged template strings -->
581+
{{ html`<p style="color: ${color}">Text \`${var}\`</p>` }}
582+
<!-- ^^^^ variable.function.tagged-template.ngx - meta.string -->
583+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.template.ngx -->
584+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.begin.ngx -->
585+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ text.html.embedded.ngx -->
586+
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag -->
587+
<!-- ^ meta.attribute-with-value.style.html meta.string.html string.quoted.double.html punctuation.definition.string.begin.html -->
588+
<!-- ^^^^^^^ meta.attribute-with-value.style.html meta.string.html meta.interpolation.html source.css.embedded.html -->
589+
<!-- ^^^^^^^^ meta.attribute-with-value.style.html meta.string.html meta.interpolation.html source.css.embedded.html meta.property-value.css meta.interpolation.ngx -->
590+
<!-- ^ meta.attribute-with-value.style.html meta.string.html string.quoted.double.html punctuation.definition.string.end.html -->
591+
<!-- ^^ constant.character.escape.ngx -->
592+
<!-- ^^^^^^ meta.interpolation.ngx - string -->
593+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
594+
<!-- ^^^ variable.other.readwrite.ngx -->
595+
<!-- ^ punctuation.section.interpolation.end.ngx -->
596+
<!-- ^^ constant.character.escape.ngx -->
597+
<!-- ^^^^ meta.tag -->
598+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
599+
541600
<!-- tagged template strings -->
542601
{{ tag`Text \`${var}\`` }}
543602
<!-- ^^^ variable.function.tagged-template.ngx - string -->

0 commit comments

Comments
 (0)