From fda5111dc0239e3003d3c0d26346270c356cbc9f Mon Sep 17 00:00:00 2001
From: Zach Riegel <zjriegel@gmail.com>
Date: Mon, 25 Aug 2025 08:30:09 -0700
Subject: [PATCH] Add CSS language injections for calls to `styled` (#33966)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…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.
---
 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(+)

diff --git a/crates/languages/src/javascript/injections.scm b/crates/languages/src/javascript/injections.scm
index 7baba5f227..dbec1937b1 100644
--- a/crates/languages/src/javascript/injections.scm
+++ b/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
diff --git a/crates/languages/src/tsx/injections.scm b/crates/languages/src/tsx/injections.scm
index 48da80995b..9eec01cc89 100644
--- a/crates/languages/src/tsx/injections.scm
+++ b/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
diff --git a/crates/languages/src/typescript/injections.scm b/crates/languages/src/typescript/injections.scm
index 7affdc5b75..1ca1e9ad59 100644
--- a/crates/languages/src/typescript/injections.scm
+++ b/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