languages: Add Tailwind CSS support for TypeScript (#38254)

Smit Barmase created 1 month ago

Closes #37028

I noticed many projects use Tailwind in plain TypeScript (.ts) files, so
it makes sense to support them out of the box, alongside .js and .tsx
files we already handle. For example, see
[supabase](https://github.com/supabase/supabase/blob/master/packages/ui/src/lib/theme/defaultTheme.ts).

Note: You’ll still need to add `"classFunctions": ["cva", "cx"],`
manually for Tailwind completions to work in `cva` type methods. This is
because you don’t want completions on every string, only in specific
methods or regex matches. This is documented.

Release Notes:

- Added out-of-the-box support for Tailwind completions in `.ts` files.

Change summary

crates/languages/src/lib.rs                 | 1 +
crates/languages/src/tailwind.rs            | 2 ++
crates/languages/src/typescript/config.toml | 4 +++-
docs/src/languages/tailwindcss.md           | 1 +
4 files changed, 7 insertions(+), 1 deletion(-)

Detailed changes

crates/languages/src/lib.rs

@@ -286,6 +286,7 @@ pub fn init(languages: Arc<LanguageRegistry>, fs: Arc<dyn Fs>, node: NodeRuntime
         "HEEX",
         "HTML",
         "JavaScript",
+        "TypeScript",
         "PHP",
         "Svelte",
         "TSX",

crates/languages/src/tailwind.rs

@@ -146,6 +146,7 @@ impl LspAdapter for TailwindLspAdapter {
                 "html": "html",
                 "css": "css",
                 "javascript": "javascript",
+                "typescript": "typescript",
                 "typescriptreact": "typescriptreact",
             },
         })))
@@ -178,6 +179,7 @@ impl LspAdapter for TailwindLspAdapter {
             (LanguageName::new("HTML"), "html".to_string()),
             (LanguageName::new("CSS"), "css".to_string()),
             (LanguageName::new("JavaScript"), "javascript".to_string()),
+            (LanguageName::new("TypeScript"), "typescript".to_string()),
             (LanguageName::new("TSX"), "typescriptreact".to_string()),
             (LanguageName::new("Svelte"), "svelte".to_string()),
             (LanguageName::new("Elixir"), "phoenix-heex".to_string()),

crates/languages/src/typescript/config.toml

@@ -21,9 +21,11 @@ word_characters = ["#", "$"]
 prettier_parser_name = "typescript"
 tab_size = 2
 debuggers = ["JavaScript"]
+scope_opt_in_language_servers = ["tailwindcss-language-server"]
 
 [overrides.string]
-completion_query_characters = ["."]
+completion_query_characters = ["-", "."]
+opt_into_language_servers = ["tailwindcss-language-server"]
 prefer_label_for_snippet = true
 
 [overrides.function_name_before_type_arguments]

docs/src/languages/tailwindcss.md

@@ -13,6 +13,7 @@ To configure the Tailwind CSS language server, refer [to the extension settings]
   "lsp": {
     "tailwindcss-language-server": {
       "settings": {
+        "classFunctions": ["cva", "cx"],
         "experimental": {
           "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"],
         },