Add CSS language injections for calls to `styled` (#33966)

Zach Riegel created 2 months ago

…emotion).

Closes: https://github.com/zed-industries/zed/issues/17026

Release Notes:

- Added CSS language injection support for styled-components and emotion
in JavaScript, TypeScript, and TSX files.

Change summary

crates/languages/src/javascript/injections.scm | 15 +++++++++++++++
crates/languages/src/tsx/injections.scm        | 15 +++++++++++++++
crates/languages/src/typescript/injections.scm | 15 +++++++++++++++
3 files changed, 45 insertions(+)

Detailed changes

crates/languages/src/javascript/injections.scm

@@ -11,6 +11,21 @@
                               (#set! injection.language "css"))
 )
 
+(call_expression
+  function: (member_expression
+    object: (identifier) @_obj (#eq? @_obj "styled")
+    property: (property_identifier))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
+(call_expression
+  function: (call_expression
+    function: (identifier) @_name (#eq? @_name "styled"))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
 (call_expression
   function: (identifier) @_name (#eq? @_name "html")
   arguments: (template_string) @injection.content

crates/languages/src/tsx/injections.scm

@@ -11,6 +11,21 @@
                               (#set! injection.language "css"))
 )
 
+(call_expression
+  function: (member_expression
+    object: (identifier) @_obj (#eq? @_obj "styled")
+    property: (property_identifier))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
+(call_expression
+  function: (call_expression
+    function: (identifier) @_name (#eq? @_name "styled"))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
 (call_expression
   function: (identifier) @_name (#eq? @_name "html")
   arguments: (template_string (string_fragment) @injection.content

crates/languages/src/typescript/injections.scm

@@ -15,6 +15,21 @@
                               (#set! injection.language "css"))
 )
 
+(call_expression
+  function: (member_expression
+    object: (identifier) @_obj (#eq? @_obj "styled")
+    property: (property_identifier))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
+(call_expression
+  function: (call_expression
+    function: (identifier) @_name (#eq? @_name "styled"))
+  arguments: (template_string (string_fragment) @injection.content
+                              (#set! injection.language "css"))
+)
+
 (call_expression
   function: (identifier) @_name (#eq? @_name "html")
   arguments: (template_string) @injection.content