refactor(vue, html): Update injections

Update html_tags injections so that html/vue/svelte parsers can use
it without having a script/style tag being captured twice

Signed-off-by: Pham Huy Hoang <hoangtun0810@gmail.com>

queries/html/injections.scm

@@ -1,12 +1 @@
-((style_element
-  (raw_text) @css))
-
-((attribute
-   (attribute_name) @_attr
-   (quoted_attribute_value (attribute_value) @css))
- (#eq? @_attr "style"))
-
-((script_element
-  (raw_text) @javascript))
-
-(comment) @comment
+; inherits html_tags

queries/html_tags/injections.scm

@@ -1,7 +1,67 @@
-((style_element
-  (raw_text) @css))
+; <style>...</style>
+(
+  (style_element
+    (start_tag) @_no_attribute
+    (raw_text) @css)
+  (#match? @_no_attribute "^\\<\\s*style\\s*\\>$")
+  ; unsure why, but without escaping &lt; and &gt; the query breaks
+) 
 
-((script_element
-  (raw_text) @javascript))
+; <style blocking> ...</style>
+; Add "lang" to predicate check so that vue/svelte can inherit this
+; without having this element being captured twice
+(
+  (style_element
+    (start_tag
+      (attribute
+        (attribute_name) @_no_set_type))
+    (raw_text) @css)
+  (#not-any-of? @_no_set_type "type" "lang")
+) 
+
+(
+  (style_element
+    (start_tag
+      (attribute
+        (attribute_name) @_type
+        (quoted_attribute_value (attribute_value) @_css)))
+    (raw_text) @css)
+  (#eq? @_type "type")
+  (#eq? @_css "text/css")
+)
+
+; <script>...</script>
+(
+  (script_element
+    (start_tag) @_no_attribute
+    (raw_text) @javascript)
+  (#match? @_no_attribute "^\\<\\s*script\\s*\\>$")
+) 
+
+; <script defer>...</script>
+(
+  (script_element
+    (start_tag
+      (attribute
+        (attribute_name) @_no_set_type))
+    (raw_text) @javascript)
+  (#not-any-of? @_no_set_type "type" "lang")
+) 
+
+(
+  (script_element
+    (start_tag
+      (attribute
+        (attribute_name) @_type
+        (quoted_attribute_value (attribute_value) @_javascript)))
+    (raw_text) @javascript)
+  (#eq? @_type "type")
+  (#eq? @_javascript "text/javascript")
+)
+
+((attribute
+   (attribute_name) @_attr
+   (quoted_attribute_value (attribute_value) @css))
+ (#eq? @_attr "style"))
 
 (comment) @comment

queries/vue/injections.scm

@@ -1,20 +1,6 @@
-(
-  (style_element
-    (start_tag) @_no_attribute
-    (raw_text) @css)
-  (#match? @_no_attribute "^\\<\\s*style\\s*\\>$")
-  ; unsure why, but without escaping &lt; and &gt; the query breaks
-) 
-
-(
-  (style_element
-    (start_tag
-      (attribute
-        (attribute_name) @_no_lang))
-    (raw_text) @css)
-  (#not-eq? @_no_lang "lang")
-) 
+; inherits html_tags
 
+; <script lang="css">
 (
   (style_element
     (start_tag
@@ -26,36 +12,8 @@
   (#eq? @_css "css")
 )
 
-; If script tag does not have any extra attributes, set it to javascript
-(
-  (script_element
-    (start_tag) @_no_attribute
-    (raw_text) @javascript)
-  (#match? @_no_attribute "^\\<\\s*script\\s*\\>$")
-) 
-
-; if start_tag does not specify `lang="..."` then set it to javascript
-(
- (script_element
-    (start_tag
-      (attribute
-        (attribute_name) @_no_lang))
-    (raw_text) @javascript)
- (#not-eq? @_no_lang "lang")
-)
-
-(
-  (script_element
-    (start_tag
-      (attribute
-        (attribute_name) @_lang
-        (quoted_attribute_value (attribute_value) @_js)))
-    (raw_text) @javascript)
-  (#eq? @_lang "lang")
-  (#eq? @_js "js")
-)
-
 ; TODO: When nvim-treesitter have postcss and less parser, use @language and @content instead
+; <script lang="scss">
 (
   (style_element
     (start_tag
@@ -67,6 +25,19 @@
   (#any-of? @_scss "scss" "less" "postcss")
 )
 
+; <script lang="js">
+(
+  (script_element
+    (start_tag
+      (attribute
+        (attribute_name) @_lang
+        (quoted_attribute_value (attribute_value) @_js)))
+    (raw_text) @javascript)
+  (#eq? @_lang "lang")
+  (#eq? @_js "js")
+)
+
+; <script lang="ts">
 (
   (script_element
     (start_tag
@@ -93,5 +64,3 @@
     (text) @pug)
   (#eq? @_lang "pug")
 )
-
-(comment) @comment

tests/query/injections/html/test-html-injections.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="css/style.css" rel="stylesheet">
+    <style>
+    footer{
+/*    ^ css
+*/
+    }
+    </style>
+    <style title="Test Style without type attribute">
+    footer{
+/*    ^ css
+*/
+    }
+    </style>
+    <style type="text/css" title="test style with defined type attribute">
+    footer{
+/*    ^ css
+*/
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    const x = 1
+//        ^ javascript
+    </script>
+    <script defer>
+    const x = 1
+//        ^ javascript
+    </script>
+    <script type="text/javascript">
+    const x = 1
+//        ^ javascript
+    </script>
+    <div style="height: 100%">
+<!--                ^ css      -->
+      Test div to test css injections for style attributes
+    </div>
+  </body>
+</html>