fix(syntax): Don't highlight attributes for HTML events that are not …

…string with JS highlighting (#844) * fix(syntax): Don't highlight attributes for HTML events that are not string with JS highlighting * chore: changeset
withastro · Mar 23, 2024 · 8e55c37 · 8e55c37
1 parent 1fe7503
commit 8e55c37
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 21 deletions.
diff --git a/.changeset/old-apes-beg.md b/.changeset/old-apes-beg.md
@@ -0,0 +1,5 @@
+---
+"astro-vscode": patch
+---
+
+Fixes attributes for HTML events (onload, onclick etc) using the wrong highlighting for interpolated attributes
diff --git a/packages/vscode/syntaxes/astro.tmLanguage.json b/packages/vscode/syntaxes/astro.tmLanguage.json
@@ -1,7 +1,9 @@
 {
   "name": "Astro",
   "scopeName": "source.astro",
-  "fileTypes": ["astro"],
+  "fileTypes": [
+    "astro"
+  ],
   "injections": {
     "L:(meta.script.astro) (meta.lang.json) - (meta source)": {
       "patterns": [
@@ -347,6 +349,12 @@
           },
           "end": "(?<=[^\\s=])(?!\\s*=)|(?=/?>)",
           "patterns": [
+            {
+              "include": "#interpolation"
+            },
+            {
+              "include": "#attribute-literal"
+            },
             {
               "begin": "(?=[^\\s=<>`/]|/(?!>))",
               "end": "(?!\\G)",
@@ -523,6 +531,19 @@
         }
       ]
     },
+    "attribute-literal": {
+      "begin": "(`)",
+      "end": "\\1",
+      "name": "string.template.astro",
+      "patterns": [
+        {
+          "include": "source.tsx#template-substitution-element"
+        },
+        {
+          "include": "source.tsx#string-character-escape"
+        }
+      ]
+    },
     "attributes-value": {
       "patterns": [
         {
@@ -548,17 +569,7 @@
           "name": "string.quoted.astro"
         },
         {
-          "begin": "(`)",
-          "end": "\\1",
-          "name": "string.template.astro",
-          "patterns": [
-            {
-              "include": "source.tsx#template-substitution-element"
-            },
-            {
-              "include": "source.tsx#string-character-escape"
-            }
-          ]
+          "include": "#attribute-literal"
         }
       ]
     },
@@ -832,4 +843,4 @@
       ]
     }
   }
-}
+}
diff --git a/packages/vscode/syntaxes/astro.tmLanguage.src.yaml b/packages/vscode/syntaxes/astro.tmLanguage.src.yaml
@@ -284,6 +284,8 @@ repository:
         beginCaptures: { 0: { name: punctuation.separator.key-value.astro } }
         end: (?<=[^\s=])(?!\s*=)|(?=/?>)
         patterns:
+          - include: '#interpolation'
+          - include: '#attribute-literal'
           - begin: (?=[^\s=<>`/]|/(?!>))
             end: (?!\G)
             name: meta.embedded.line.js
@@ -355,6 +357,14 @@ repository:
         end: (?<=[^\s=])(?!\s*=)|(?=/?>)
         patterns: [include: '#attributes-value']
 
+  attribute-literal:
+    begin: (`)
+    end: \1
+    name: string.template.astro
+    patterns:
+      - include: 'source.tsx#template-substitution-element'
+      - include: 'source.tsx#string-character-escape'
+
   # The value part of attribute key-values. e.g. `"my-class"` in `class="my-class"`
   attributes-value:
     patterns:
@@ -370,12 +380,7 @@ repository:
         endCaptures: { 0: { name: punctuation.definition.string.end.astro } }
         name: string.quoted.astro
       # Template literals
-      - begin: (`)
-        end: \1
-        name: string.template.astro
-        patterns:
-          - include: 'source.tsx#template-substitution-element'
-          - include: 'source.tsx#string-character-escape'
+      - include: '#attribute-literal'
 
   # ------
   #  TAGS

diff --git a/packages/vscode/test/grammar/fixtures/attributes.astro b/packages/vscode/test/grammar/fixtures/attributes.astro
@@ -7,4 +7,8 @@
 
 <div onclick="console.log()"></div>
 
-<div class=`\${not-a-variable}`></div>
+<div onload={"console.log('')"}></div>
+
+<div onload=`console.log('')`></div>
+
+<div class=`\${not-a-variable}`></div>
diff --git a/packages/vscode/test/grammar/fixtures/attributes.astro.snap b/packages/vscode/test/grammar/fixtures/attributes.astro.snap
@@ -54,6 +54,34 @@
 #                               ^^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro entity.name.tag.astro
 #                                  ^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.end.astro
 >
+><div onload={"console.log('')"}></div>
+#^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
+# ^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro entity.name.tag.astro
+#    ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro
+#     ^^^^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro entity.other.attribute-name.astro
+#           ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro punctuation.separator.key-value.astro
+#            ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro punctuation.section.embedded.begin.astro
+#             ^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro meta.embedded.expression.astro source.tsx
+#                              ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro punctuation.section.embedded.end.astro
+#                               ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.end.astro
+#                                ^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
+#                                  ^^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro entity.name.tag.astro
+#                                     ^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.end.astro
+>
+><div onload=`console.log('')`></div>
+#^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
+# ^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro entity.name.tag.astro
+#    ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro
+#     ^^^^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro entity.other.attribute-name.astro
+#           ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro punctuation.separator.key-value.astro
+#            ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.onload.astro
+#             ^^^^^^^^^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro meta.attribute.console.log.astro entity.other.attribute-name.astro
+#                        ^^^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro
+#                             ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.end.astro
+#                              ^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
+#                                ^^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro entity.name.tag.astro
+#                                   ^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.end.astro
+>
 ><div class=`\${not-a-variable}`></div>
 #^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
 # ^^^ source.astro meta.scope.tag.div.astro meta.tag.start.astro entity.name.tag.astro
@@ -70,4 +98,5 @@
 #                               ^ source.astro meta.scope.tag.div.astro meta.tag.start.astro punctuation.definition.tag.end.astro
 #                                ^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
 #                                  ^^^ source.astro meta.scope.tag.div.astro meta.tag.end.astro entity.name.tag.astro
-#                                     ^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.end.astro
+#                                     ^ source.astro meta.scope.tag.div.astro meta.tag.end.astro punctuation.definition.tag.end.astro
+>