Skip to content

Commit 01ed57f

Browse files
JeanMecheleonsenft
JeanMeche
authored and
leonsenft
committed
fix(vscode-extension): support highlighting for class bindings with brackets
Tailwind classes can often be quite complex strings. This change adds supports for classes with backets. fixes #66818
1 parent 03e1a95 commit 01ed57f

4 files changed

Lines changed: 31 additions & 9 deletions

File tree

‎vscode-ng-language-service/syntaxes/src/template-tag.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ export const TemplateTag: GrammarDefinition = {
1212
scopeName: 'template.tag.ng',
1313
injectionSelector: 'L:text.html#meta.tag -comment',
1414
patterns: [
15+
{include: '#twoWayBinding'},
1516
{include: '#propertyBinding'},
1617
{include: '#eventBinding'},
17-
{include: '#twoWayBinding'},
1818
{include: '#templateBinding'},
1919
],
2020
repository: {
2121
propertyBinding: {
22-
begin: /(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
22+
begin: /(\[\s*@?(?:[-_a-zA-Z0-9.$]+|\[[^\[\]]*]|\([^()]*\))*%?\s*])(=)(["'])/,
2323
beginCaptures: {
2424
1: {
2525
name: 'entity.other.attribute-name.html entity.other.ng-binding-name.property.html',
@@ -101,7 +101,8 @@ export const TemplateTag: GrammarDefinition = {
101101
bindingKey: {
102102
patterns: [
103103
{
104-
match: /([\[\(]{1,2}|\*)(?:\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\s*)([\]\)]{1,2})?/,
104+
match:
105+
/([\[\(]{1,2}|\*)(?:\s*)(@?(?:[-_a-zA-Z0-9.$]+|\[[^\[\]]*]|\([^()]*\))*%?)(?:\s*)([\]\)]{1,2})?/,
105106
captures: {
106107
1: {name: 'punctuation.definition.ng-binding-name.begin.html'},
107108
2: {

‎vscode-ng-language-service/syntaxes/template-tag.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@
33
"injectionSelector": "L:text.html#meta.tag -comment",
44
"patterns": [
55
{
6-
"include": "#propertyBinding"
6+
"include": "#twoWayBinding"
77
},
88
{
9-
"include": "#eventBinding"
9+
"include": "#propertyBinding"
1010
},
1111
{
12-
"include": "#twoWayBinding"
12+
"include": "#eventBinding"
1313
},
1414
{
1515
"include": "#templateBinding"
1616
}
1717
],
1818
"repository": {
1919
"propertyBinding": {
20-
"begin": "(\\[\\s*@?[-_a-zA-Z0-9.$]*%?\\s*])(=)([\"'])",
20+
"begin": "(\\[\\s*@?(?:[-_a-zA-Z0-9.$]+|\\[[^\\[\\]]*]|\\([^()]*\\))*%?\\s*])(=)([\"'])",
2121
"beginCaptures": {
2222
"1": {
2323
"name": "entity.other.attribute-name.html entity.other.ng-binding-name.property.html",
@@ -147,7 +147,7 @@
147147
"bindingKey": {
148148
"patterns": [
149149
{
150-
"match": "([\\[\\(]{1,2}|\\*)(?:\\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\\s*)([\\]\\)]{1,2})?",
150+
"match": "([\\[\\(]{1,2}|\\*)(?:\\s*)(@?(?:[-_a-zA-Z0-9.$]+|\\[[^\\[\\]]*]|\\([^()]*\\))*%?)(?:\\s*)([\\]\\)]{1,2})?",
151151
"captures": {
152152
"1": {
153153
"name": "punctuation.definition.ng-binding-name.begin.html"

‎vscode-ng-language-service/syntaxes/test/data/template-tag.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<div [myProperty$]="val"></div>
1414
<div [%invalidProperty]="val"></div>
1515
<div [invalidProperty)="val"></div>
16+
<div [class.min-h-[calc(100vh-var(--header-height))]]="val"></div>
1617

1718
<!-- Event binding test -->
1819
<button (click)="onClick($event)"></button>

‎vscode-ng-language-service/syntaxes/test/data/template-tag.html.snap‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,18 @@
127127
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng
128128
><div [invalidProperty)="val"></div>
129129
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng
130+
><div [class.min-h-[calc(100vh-var(--header-height))]]="val"></div>
131+
#^^^^^ template.tag.ng
132+
# ^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
133+
# ^^^^^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.class.min-h-[calc(100vh-var(--header-height))].html
134+
# ^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.class.min-h-[calc(100vh-var(--header-height))].html punctuation.accessor.html
135+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.class.min-h-[calc(100vh-var(--header-height))].html
136+
# ^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
137+
# ^ template.tag.ng meta.ng-binding.property.html punctuation.separator.key-value.html
138+
# ^ template.tag.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
139+
# ^^^ template.tag.ng meta.ng-binding.property.html expression.ng variable.other.readwrite.ts
140+
# ^ template.tag.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
141+
# ^^^^^^^^ template.tag.ng
130142
>
131143
><!-- Event binding test -->
132144
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng
@@ -348,7 +360,15 @@
348360
# ^ template.tag.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
349361
# ^^^^^^^^^^^^^^^^^ template.tag.ng
350362
><my-component [(%invalid)]="invalid"></my-component>
351-
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng
363+
#^^^^^^^^^^^^^^ template.tag.ng
364+
# ^^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
365+
# ^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.%.html
366+
# ^^^^^^^^^ template.tag.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
367+
# ^ template.tag.ng meta.ng-binding.property.html punctuation.separator.key-value.html
368+
# ^ template.tag.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
369+
# ^^^^^^^ template.tag.ng meta.ng-binding.property.html expression.ng variable.other.readwrite.ts
370+
# ^ template.tag.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
371+
# ^^^^^^^^^^^^^^^^^ template.tag.ng
352372
><my-component ([invalid)]="invalid"></my-component>
353373
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.tag.ng
354374
>

0 commit comments

Comments
 (0)