Improve highlighting of styled components with generics.

Thom1729 · Nov 10, 2021 · d28ce3a · d28ce3a
1 parent 6b866a4
commit d28ce3a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/extensions/custom_templates/custom_templates.syntax-extension b/extensions/custom_templates/custom_templates.syntax-extension
@@ -84,7 +84,9 @@ contexts:
       scope: variable.function.js
       pop: true
 
-    - match: '{{non_reserved_identifier}}(?=\s*`)'
+      # If we see <, assume it's a template.
+      # Not perfect, but should be correct most of the time.
+    - match: '{{non_reserved_identifier}}(?=\s*[`<])'
       scope: variable.function.tagged-template.js
       pop: true
 

diff --git a/tests/syntax_test_suites/templates/styled_components.js b/tests/syntax_test_suites/templates/styled_components.js
@@ -66,3 +66,6 @@ keyframes`
         color: red;
     }
 `;
+
+styled.span<{}>`color: red`;
+//     ^^^^ variable.function.tagged-template