Textmate: fix Razor expression classification inside of HTML tags using injection (#7055)

* fix "fix-html-textmate" using injection

- this commit explores a new way of injecting razor textmate grammar into the html textmate grammar. so that razor expressions can still be recognized inside html tags without having to directly change any of the html textmate
- we also updated some grammar tests to make the test cases more comprehensive regarding this matter

- revert the changes made to html.tmlanguage.json so that it matches the one on the textmate repo (we removed all the razor refences inside it)

Author: Jordi Ramos

src/razor/syntaxes/aspnetcorerazor.tmLanguage.json

@@ -5,6 +5,28 @@
     "razor",
     "cshtml"
   ],
+  "injections": {
+    "string.quoted.double.html": {
+      "patterns": [
+        {
+          "include": "#explicit-razor-expression"
+        },
+        {
+          "include": "#implicit-expression"
+        }
+      ]
+    },
+    "string.quoted.single.html": {
+      "patterns": [
+        {
+          "include": "#explicit-razor-expression"
+        },
+        {
+          "include": "#implicit-expression"
+        }
+      ]
+    }
+  },
   "patterns": [
     {
       "include": "#razor-control-structures"
@@ -64,16 +86,6 @@
         }
       ]
     },
-    "implicit-or-explicit-expression": {
-      "patterns": [
-        {
-          "include": "#explicit-razor-expression"
-        },
-        {
-          "include": "#implicit-expression"
-        }
-      ]
-    },
     "escaped-transition": {
       "name": "constant.character.escape.razor.transition",
       "match": "@@"

src/razor/syntaxes/aspnetcorerazor.tmLanguage.yml

@@ -3,6 +3,19 @@ scopeName: text.aspnetcorerazor
 fileTypes:
   - 'razor'
   - 'cshtml'
+
+# These injections make sure that razor expressions can be recognized in the HTML grammar, specifically in strings
+injections:
+  string.quoted.double.html:
+    patterns:
+      - include: '#explicit-razor-expression'
+      - include: '#implicit-expression'
+
+  string.quoted.single.html:
+    patterns:
+      - include: '#explicit-razor-expression'
+      - include: '#implicit-expression'
+
 patterns:
   - include: '#razor-control-structures'
   - include: 'text.html.basic'
@@ -31,11 +44,6 @@ repository:
       - include: '#optionally-transitioned-csharp-control-structures'
       - include: '#implicit-expression'
 
-  # a clause to combine the explicit and implicit razor expressions, used by the html grammar
-  implicit-or-explicit-expression:
-    patterns:
-      - include: '#explicit-razor-expression'
-      - include: '#implicit-expression'
 
   escaped-transition:
     name: constant.character.escape.razor.transition

test/razorTests/Microsoft.AspNetCore.Razor.VSCode.Grammar.Test/embeddedGrammars/html.tmLanguage.json

@@ -113,9 +113,6 @@
 											},
 											"name": "string.quoted.double.html",
 											"patterns": [
-												{
-													"include": "text.aspnetcorerazor#implicit-or-explicit-expression"
-												},
 												{
 													"include": "#entities"
 												}
@@ -140,9 +137,6 @@
 											},
 											"name": "string.quoted.single.html",
 											"patterns": [
-												{
-													"include": "text.aspnetcorerazor#implicit-or-explicit-expression"
-												},
 												{
 													"include": "#entities"
 												}
@@ -409,9 +403,6 @@
 							},
 							"name": "string.quoted.double.html",
 							"patterns": [
-								{
-									"include": "text.aspnetcorerazor#implicit-or-explicit-expression"
-								},
 								{
 									"include": "#entities"
 								}
@@ -432,9 +423,6 @@
 							},
 							"name": "string.quoted.single.html",
 							"patterns": [
-								{
-									"include": "text.aspnetcorerazor#implicit-or-explicit-expression"
-								},
 								{
 									"include": "#entities"
 								}

test/razorTests/Microsoft.AspNetCore.Razor.VSCode.Grammar.Test/tests/__snapshots__/grammarTests.test.ts.snap

@@ -5205,7 +5205,7 @@ exports[`Grammar tests HTML dynamic (razor) attribute double quotes inside singl
 "
 `;
 
-exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute 1`] = `
+exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute double inside double quotes 1`] = `
 "Line: <div id="@("")"> </div>
  - token from 0 to 1 (<) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.begin.html
  - token from 1 to 4 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, entity.name.tag.html
@@ -5227,6 +5227,73 @@ exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute 1`]
 "
 `;
 
+exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute double inside single quotes 1`] = `
+"Line: <div id='@("")'> </div>
+ - token from 0 to 1 (<) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.begin.html
+ - token from 1 to 4 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, entity.name.tag.html
+ - token from 4 to 5 ( ) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html
+ - token from 5 to 7 (id) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, entity.other.attribute-name.html
+ - token from 7 to 8 (=) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, punctuation.separator.key-value.html
+ - token from 8 to 9 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, punctuation.definition.string.begin.html
+ - token from 9 to 10 (@) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml.transition
+ - token from 10 to 11 (() with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 11 to 12 (") with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, string.quoted.double.cs, punctuation.definition.string.begin.cs
+ - token from 12 to 13 (") with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, string.quoted.double.cs, punctuation.definition.string.end.cs
+ - token from 13 to 14 ()) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 14 to 15 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, punctuation.definition.string.end.html
+ - token from 15 to 16 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html
+ - token from 16 to 17 ( ) with scopes text.aspnetcorerazor
+ - token from 17 to 19 (</) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.begin.html
+ - token from 19 to 22 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, entity.name.tag.html
+ - token from 22 to 23 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.end.html
+"
+`;
+
+exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute single inside double quotes 1`] = `
+"Line: <div id="@('')"> </div>
+ - token from 0 to 1 (<) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.begin.html
+ - token from 1 to 4 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, entity.name.tag.html
+ - token from 4 to 5 ( ) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html
+ - token from 5 to 7 (id) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, entity.other.attribute-name.html
+ - token from 7 to 8 (=) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, punctuation.separator.key-value.html
+ - token from 8 to 9 (") with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, punctuation.definition.string.begin.html
+ - token from 9 to 10 (@) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, meta.expression.explicit.cshtml, keyword.control.cshtml.transition
+ - token from 10 to 11 (() with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 11 to 12 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, meta.expression.explicit.cshtml, string.quoted.single.cs, punctuation.definition.char.begin.cs
+ - token from 12 to 13 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, meta.expression.explicit.cshtml, string.quoted.single.cs, punctuation.definition.char.end.cs
+ - token from 13 to 14 ()) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 14 to 15 (") with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.double.html, punctuation.definition.string.end.html
+ - token from 15 to 16 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html
+ - token from 16 to 17 ( ) with scopes text.aspnetcorerazor
+ - token from 17 to 19 (</) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.begin.html
+ - token from 19 to 22 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, entity.name.tag.html
+ - token from 22 to 23 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.end.html
+"
+`;
+
+exports[`Grammar tests HTML dynamic (razor) attribute razor inside attribute single inside single quotes 1`] = `
+"Line: <div id='@('')''> </div>
+ - token from 0 to 1 (<) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.begin.html
+ - token from 1 to 4 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, entity.name.tag.html
+ - token from 4 to 5 ( ) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html
+ - token from 5 to 7 (id) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, entity.other.attribute-name.html
+ - token from 7 to 8 (=) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, punctuation.separator.key-value.html
+ - token from 8 to 9 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, punctuation.definition.string.begin.html
+ - token from 9 to 10 (@) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml.transition
+ - token from 10 to 11 (() with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 11 to 12 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, string.quoted.single.cs, punctuation.definition.char.begin.cs
+ - token from 12 to 13 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, string.quoted.single.cs, punctuation.definition.char.end.cs
+ - token from 13 to 14 ()) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, meta.expression.explicit.cshtml, keyword.control.cshtml
+ - token from 14 to 15 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, meta.attribute.id.html, string.quoted.single.html, punctuation.definition.string.end.html
+ - token from 15 to 16 (') with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, invalid.illegal.character-not-allowed-here.html
+ - token from 16 to 17 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html
+ - token from 17 to 18 ( ) with scopes text.aspnetcorerazor
+ - token from 18 to 20 (</) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.begin.html
+ - token from 20 to 23 (div) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, entity.name.tag.html
+ - token from 23 to 24 (>) with scopes text.aspnetcorerazor, meta.tag.structure.div.end.html, punctuation.definition.tag.end.html
+"
+`;
+
 exports[`Grammar tests HTML dynamic (razor) attribute single quotes in side double quotes 1`] = `
 "Line: <button @onclick="myFunction('test')">Test</button>
  - token from 0 to 1 (<) with scopes text.aspnetcorerazor, meta.tag.structure.button.start.html, punctuation.definition.tag.begin.html

test/razorTests/Microsoft.AspNetCore.Razor.VSCode.Grammar.Test/tests/htmlDynamicAttribute.ts

@@ -10,10 +10,21 @@ import { assertMatchesSnapshot } from './infrastructure/testUtilities';
 
 export function RunHTMLDynamicAttributeSuite() {
     describe('HTML dynamic (razor) attribute', () => {
-        it('razor inside attribute', async () => {
+        it('razor inside attribute double inside double quotes', async () => {
             await assertMatchesSnapshot('<div id="@("")"> </div>');
         });
 
+        it('razor inside attribute single inside single quotes', async () => {
+            await assertMatchesSnapshot("<div id='@('')''> </div>");
+        });
+
+        it('razor inside attribute single inside double quotes', async () => {
+            await assertMatchesSnapshot('<div id="@(\'\')"> </div>');
+        });
+        it('razor inside attribute double inside single quotes', async () => {
+            await assertMatchesSnapshot('<div id=\'@("")\'> </div>');
+        });
+
         it('single quotes in side double quotes', async () => {
             await assertMatchesSnapshot('<button @onclick="myFunction(\'test\')">Test</button>');
         });