I found how to fix Tailwindcss

[artemkovalyov]

I found how to fix Tailwindcss

[manateelazycat]

@artemkovalyov

Hi, thank you very much for contacting the author of Tailwindcss. I have fixed it in 63e8d72

When the languageId field of tailwindcss.json is empty, lsp-bridge will be based on the file. The extension is dynamically sent to tailwindcss language server.

Thank you for your enthusiastic help

[artemkovalyov]

@manateelazycat, I can see completions from the Tailwindcss at last :)

[artemkovalyov]

@manateelazycat, thanks for the quick fix. Did you manage to get completion in the buffer?
I see them in debug logs but can't see them in candidates in the completion window.
Has it worked for you? Is there any additional configuration required?

[manateelazycat]

If you only want to use tailwindcss lsp server, you can customize lsp-bridge-single-lang-server-extension-list option

If you want tailwindcss lsp server mix works with other lsp servers, you need write multi-lsp-server config under multiserver, and then customize lsp-bridge-multi-lang-server-extension-list option

[manateelazycat]

https://github.com/manateelazycat/lsp-bridge?tab=readme-ov-file#customize-language-server-configuration

[artemkovalyov]

@manateelazycat, I did two multiserver configs, for CSS and for Svelte. I see project configured and both servers launched for each mode accordingly. But I don't get completions merged together even Though I see them in the log buffer. Meaning I don't get completion for Tailwind, just for the other server (svelte or css).

Where should I look?

CSS:

{
  "completion": ["tailwindcss", "vscode-css-language-server"],
  "completion_item_resolve": ["tailwindcss", "vscode-css-language-server"],
  "diagnostics": ["vscode-css-language-server", "tailwindcss"],
  "code_action": ["vscode-css-language-server", "tailwindcss"],
  "execute_command": ["vscode-css-language-server", "tailwindcss"],
  "find_define": "vscode-css-language-server",
  "find_type_define": "vscode-css-language-server",
  "peek_find_definition": "vscode-css-language-server",
  "peek_find_references": "vscode-css-language-server",
  "find_implementation": "vscode-css-language-server",
  "find_references": "vscode-css-language-server",
  "formatting": "vscode-css-language-server",
  "hover": "vscode-css-language-server",
  "signature_help": "vscode-css-language-server",
  "prepare_rename": "vscode-css-language-server",
  "rename": "vscode-css-language-server",
  "document_symbol": "vscode-css-language-server",
  "workspace_symbol": "vscode-css-language-server",
  "inlay_hint": "vscode-css-language-server"
}

svelte:

{
  "completion": ["svelteserver", "tailwindcss"],
  "completion_item_resolve": ["svelteserver", "tailwindcss"],
  "diagnostics": "svelteserver",
  "code_action": "svelteserver",
  "execute_command": "svelteserver",
  "find_define": "svelteserver",
  "find_type_define": "svelteserver",
  "find_implementation": "svelteserver",
  "find_references": "svelteserver",
  "peek_find_definition": "svelteserver",
  "peek_find_references": "svelteserver",
  "formatting": "svelteserver",
  "hover": ["svelteserver", "tailwindcss"],
  "signature_help": "svelteserver",
  "prepare_rename": "svelteserver",
  "rename": "svelteserver",
  "document_symbol": "svelteserver",
  "workspace_symbol": "svelteserver",
  "inlay_hint": "svelteserver"
}

[artemkovalyov]

I'm happy to contribute my multi-server configs when they are proven to work fine:)

[manateelazycat]

@manateelazycat, I did two multiserver configs, for CSS and for Svelte. I see project configured and both servers launched for each mode accordingly. But I don't get completions merged together even Though I see them in the log buffer. Meaning I don't get completion for Tailwind, just for the other server (svelte or css).，我为 CSS 和 Svelte 做了两个多服务器配置。我看到项目已配置，并且两台服务器相应地为每种模式启动。但即使我在日志缓冲区中看到它们，我也没有将完成合并在一起。这意味着我没有得到 Tailwind 的完成，只是得到了其他服务器（svelte 或 css）的完成。

Where should I look?我应该去哪里看？

CSS: CSS：

{
  "completion": ["tailwindcss", "vscode-css-language-server"],
  "completion_item_resolve": ["tailwindcss", "vscode-css-language-server"],
  "diagnostics": ["vscode-css-language-server", "tailwindcss"],
  "code_action": ["vscode-css-language-server", "tailwindcss"],
  "execute_command": ["vscode-css-language-server", "tailwindcss"],
  "find_define": "vscode-css-language-server",
  "find_type_define": "vscode-css-language-server",
  "peek_find_definition": "vscode-css-language-server",
  "peek_find_references": "vscode-css-language-server",
  "find_implementation": "vscode-css-language-server",
  "find_references": "vscode-css-language-server",
  "formatting": "vscode-css-language-server",
  "hover": "vscode-css-language-server",
  "signature_help": "vscode-css-language-server",
  "prepare_rename": "vscode-css-language-server",
  "rename": "vscode-css-language-server",
  "document_symbol": "vscode-css-language-server",
  "workspace_symbol": "vscode-css-language-server",
  "inlay_hint": "vscode-css-language-server"
}

svelte: 苗条：

{
  "completion": ["svelteserver", "tailwindcss"],
  "completion_item_resolve": ["svelteserver", "tailwindcss"],
  "diagnostics": "svelteserver",
  "code_action": "svelteserver",
  "execute_command": "svelteserver",
  "find_define": "svelteserver",
  "find_type_define": "svelteserver",
  "find_implementation": "svelteserver",
  "find_references": "svelteserver",
  "peek_find_definition": "svelteserver",
  "peek_find_references": "svelteserver",
  "formatting": "svelteserver",
  "hover": ["svelteserver", "tailwindcss"],
  "signature_help": "svelteserver",
  "prepare_rename": "svelteserver",
  "rename": "svelteserver",
  "document_symbol": "svelteserver",
  "workspace_symbol": "svelteserver",
  "inlay_hint": "svelteserver"
}

Can you send me log of *lsp-bridge* ? Or example code to me for test?

[manateelazycat]

@artemkovalyov
When lsp-bridge obtains completion candidate words from the lsp server, it will call

https://github.com/manateelazycat/lsp-bridge/blob/14b7c370f7b18da44cf9057d8596512b0ebfafbc/core/handler/completion.py#L189-#L196

This code renders the completion menu. If this code does not execute normally, it is a Python bug.

If this code executes, but you don't see completion, you need to check

lsp-bridge/lsp-bridge.el

Line 1294 in 14b7c37

lsp-bridge-completion-popup-predicates)

Check to see if there is any function in lsp-bridge-completion-popup-predicates that causes the completion menu not to pop up.

[manateelazycat]

Above screenshot show tailwindcss works with single lsp server, mutli lsp servers I haven't test, need test code.

[manateelazycat]

@artemkovalyov I have test multi-lsp-server with tailwindcss, works fine.

First, I create lspbridge/multiserver/html_and_tailwindcss.json file with content

{
  "completion": ["tailwindcss", "vscode-html-language-server"],
  "completion_item_resolve": ["tailwindcss", "vscode-html-language-server"],
  "diagnostics": ["vscode-html-language-server", "tailwindcss"],
  "code_action": ["vscode-html-language-server", "tailwindcss"],
  "execute_command": ["vscode-html-language-server", "tailwindcss"],
  "find_define": "vscode-html-language-server",
  "find_type_define": "vscode-html-language-server",
  "peek_find_definition": "vscode-html-language-server",
  "peek_find_references": "vscode-html-language-server",
  "find_implementation": "vscode-html-language-server",
  "find_references": "vscode-html-language-server",
  "formatting": "vscode-html-language-server",
  "hover": "vscode-html-language-server",
  "signature_help": "vscode-html-language-server",
  "prepare_rename": "vscode-html-language-server",
  "rename": "vscode-html-language-server",
  "document_symbol": "vscode-html-language-server",
  "workspace_symbol": "vscode-html-language-server",
  "inlay_hint": "vscode-html-language-server"
}

Then I customize lsp-bridge-multi-lang-server-extension-list with

(defcustom lsp-bridge-multi-lang-server-extension-list
  '(
    (("vue")        . "volar_emmet")
    (("ts" "tsx")   . "typescript_eslint")
    (("html") . "html_and_tailwindcss")
    )
  "The multi lang server rule for file extension."
  :type 'cons)

Last, you need execute commands show in https://tailwindcss.com/docs/installation in your tailwindcss project.

[manateelazycat]

@artemkovalyov
I'll close this issue first. If you have any questions, please reopen this issue.

You are very welcome to contribute the multi-server configuration of tailwindcss. Thank you for your patient research. It will be of great help to lsp-bridge.

[artemkovalyov]

@manateelazycat, I played with it and it works but very weirdly and not in a helpful way.
The most valuable and obvious completion are always missing. I tried with group and it worked:

Then I tried text that is very often use and it doesn't work:

Same for font:

Although it give you smth if you only type fo

[artemkovalyov]

It almost never works on very frequently used and widespread keywords like: flex, mx-, bg-, font, text, and many others.
I tried with HTML + Tailwind & Svelte + Tailwind - same results for both of them.
Does it work fine for you? Do you have meaningful results?

[manateelazycat]

Can you enable log and send content of *lsp-bridge* ?

[artemkovalyov]

Sure, here's the one for font
lsp-bridge.log

[artemkovalyov]

Here's file for group
lsp-bridge-group.log

[manateelazycat]

Is it convenient for you to upload your project files? I'll test it

[artemkovalyov]

I tried creating a new project to test the setup out in a clean environment.
I also seem to find a bug with symbols like + in file names that are used ubiquitously in Svelte leading to "bad file descriptor" error
my-app.zip

Run npm install
You can open any *.svelte file or app.css in src.

I see smth like this in the logs (notice the encoding on the line two):

--- [11:51:01.832324] Recv window/logMessage notification from 'tailwindcss' for project +layout.svelte
Initialize language server at  file:///umetra/tmp/my-app/src/routes/%2Blayout.svelte

--- [11:51:02.352831] Recv response (60880) from 'svelteserver' for project +layout.svelte

--- [11:51:02.353378] Send initialized notification to 'svelteserver' for project +layout.svelte

--- [11:51:02.353593] Send workspace/didChangeConfiguration notification to 'svelteserver' for project +layout.svelte

--- [11:51:02.354167] Send textDocument/didOpen notification to 'svelteserver' for project +layout.svelte
Initialize new ts service at  
Trying to load configs for /umetra/tmp/my-app/src/routes/+layout.svelte
Error: ENOTDIR: not a directory, scandir '/umetra/tmp/my-app/src/routes/+layout.svelte'
    at Object.readdirSync (node:fs:1514:26)
    at readdirWithFileTypes (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/providers/sync.js:16:33)
    at Object.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/providers/sync.js:10:16)
    at SyncReader.scandirSync [as _scandir] (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/index.js:18:17)
    at SyncReader._handleDirectory (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:28:34)
    at SyncReader._handleQueue (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:23:18)
    at SyncReader.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:15:14)
    at SyncProvider.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/providers/sync.js:11:29)
    at ReaderSync.walkSync [as _walkSync] (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/index.js:20:21)
    at ReaderSync.dynamic (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/fast-glob/out/readers/sync.js:13:21) {
  errno: -20,
  code: 'ENOTDIR',
  syscall: 'scandir',
  path: '/umetra/tmp/my-app/src/routes/+layout.svelte'
}

[artemkovalyov]

here are my multiserver configs for tailwind+
multiserver.zip

[artemkovalyov]

I tried with a very simple HTML setup described here: https://tailwindcss.com/docs/installation
I still see very weird bad file descriptor error:

Lsp-Bridge mode enabled in current buffer
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] Active file  index.html , enjoy hacking!
[LSP-Bridge] index.html (tailwindcss): Unhandled exception: Bad file descriptor
Error: Bad file descriptor

From the logs in lsp bridge

--- [21:58:53.357482] Send textDocument/didChange notification to 'tailwindcss' for project index.html

--- [21:58:53.357646] Send textDocument/didChange notification to 'vscode-html-language-server' for project index.html

--- [21:58:53.517419] Send textDocument/completion request (52050) to 'tailwindcss' for project index.html

--- [21:58:53.517978] Send textDocument/completion request (57223) to 'vscode-html-language-server' for project index.html
Recv message (error):
{
   "jsonrpc": "2.0",
   "id": 52050,
   "error": {
      "code": -32603,
      "message": "Request textDocument/completion failed with message: Bad file descriptor"
   }
}

Both servers are asked for completion:

--- [22:08:14.258710] Send textDocument/completion request (7654) to 'tailwindcss' for project index.html
{
   "id": 7654,
   "method": "textDocument/completion",
   "params": {
      "position": {
         "line": 9,
         "character": 17
      },
      "context": {
         "triggerKind": 1
      },
      "textDocument": {
         "uri": "file:///umetra/tmp/t1/src/index.html"
      }
   },
   "message_type": "request",
   "jsonrpc": "2.0"
}

--- [22:08:14.259422] Send textDocument/completion request (37526) to 'vscode-html-language-server' for project index.html
{
   "id": 37526,
   "method": "textDocument/completion",
   "params": {
      "position": {
         "line": 9,
         "character": 17
      },
      "context": {
         "triggerKind": 1
      },
      "textDocument": {
         "uri": "file:///umetra/tmp/t1/src/index.html"
      }
   },
   "message_type": "request",
   "jsonrpc": "2.0"
}
Recv message (error):
{
   "jsonrpc": "2.0",
   "id": 7654,
   "error": {
      "code": -32603,
      "message": "Request textDocument/completion failed with message: Bad file descriptor"
   }
}
Eval in Emacs: (message '"[LSP-Bridge] Request textDocument/completion failed with message: Bad file descriptor")

--- [22:08:14.264687] Recv textDocument/completion response (37526) from 'vscode-html-language-server' for project index.html

--- [22:08:14.265011] Got completion candidates (0) from 'vscode-html-language-server' for file index.html

--- [22:08:14.265241] Record completion candidates (0) from 'vscode-html-language-server' for file index.html
Eval in Emacs: (lsp-bridge-completion--record-items '"/umetra/tmp/t1/src/index.html" '"" '() '(:line 9 :character 17) '"vscode-html-language-server" '("." ":" "<" "\"" "=" "/") '("tailwindcss" "vscode-html-language-server"))
{
   "jsonrpc": "2.0",
   "id": 37526,
   "result": {
      "isIncomplete": false,
      "items": []
   }
}

[artemkovalyov]

The project is crazy simple. Just run npm install and then npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
t1.zip

[manateelazycat]

I tried with a very simple HTML setup described here: https://tailwindcss.com/docs/installation I still see very weird bad file descriptor error:

Lsp-Bridge mode enabled in current buffer
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] Active file  index.html , enjoy hacking!
[LSP-Bridge] index.html (tailwindcss): Unhandled exception: Bad file descriptor
Error: Bad file descriptor

From the logs in lsp bridge

--- [21:58:53.357482] Send textDocument/didChange notification to 'tailwindcss' for project index.html

--- [21:58:53.357646] Send textDocument/didChange notification to 'vscode-html-language-server' for project index.html

--- [21:58:53.517419] Send textDocument/completion request (52050) to 'tailwindcss' for project index.html

--- [21:58:53.517978] Send textDocument/completion request (57223) to 'vscode-html-language-server' for project index.html
Recv message (error):
{
   "jsonrpc": "2.0",
   "id": 52050,
   "error": {
      "code": -32603,
      "message": "Request textDocument/completion failed with message: Bad file descriptor"
   }
}

Both servers are asked for completion:

--- [22:08:14.258710] Send textDocument/completion request (7654) to 'tailwindcss' for project index.html
{
   "id": 7654,
   "method": "textDocument/completion",
   "params": {
      "position": {
         "line": 9,
         "character": 17
      },
      "context": {
         "triggerKind": 1
      },
      "textDocument": {
         "uri": "file:///umetra/tmp/t1/src/index.html"
      }
   },
   "message_type": "request",
   "jsonrpc": "2.0"
}

--- [22:08:14.259422] Send textDocument/completion request (37526) to 'vscode-html-language-server' for project index.html
{
   "id": 37526,
   "method": "textDocument/completion",
   "params": {
      "position": {
         "line": 9,
         "character": 17
      },
      "context": {
         "triggerKind": 1
      },
      "textDocument": {
         "uri": "file:///umetra/tmp/t1/src/index.html"
      }
   },
   "message_type": "request",
   "jsonrpc": "2.0"
}
Recv message (error):
{
   "jsonrpc": "2.0",
   "id": 7654,
   "error": {
      "code": -32603,
      "message": "Request textDocument/completion failed with message: Bad file descriptor"
   }
}
Eval in Emacs: (message '"[LSP-Bridge] Request textDocument/completion failed with message: Bad file descriptor")

--- [22:08:14.264687] Recv textDocument/completion response (37526) from 'vscode-html-language-server' for project index.html

--- [22:08:14.265011] Got completion candidates (0) from 'vscode-html-language-server' for file index.html

--- [22:08:14.265241] Record completion candidates (0) from 'vscode-html-language-server' for file index.html
Eval in Emacs: (lsp-bridge-completion--record-items '"/umetra/tmp/t1/src/index.html" '"" '() '(:line 9 :character 17) '"vscode-html-language-server" '("." ":" "<" "\"" "=" "/") '("tailwindcss" "vscode-html-language-server"))
{
   "jsonrpc": "2.0",
   "id": 37526,
   "result": {
      "isIncomplete": false,
      "items": []
   }
}

Because tailwindcss don't support single file, you need run git init in project t1 first.

[manateelazycat]

I pushed a new patch today

bc10c15

This patch should fix the problem that the acm menu does not display candidate words when the LSP Server returns too many completion items.

The reason why completion is not displayed is that a group of users do not want lsp-bridge to filter candidate words on the Python side, but do not filter candidate words at all. When the LSP server returns too many candidate words, Emacs will create too many objects. It caused GC and eventually stuck Emacs, so the acm-backend-lsp-candidates-max-number option was introduced later to avoid GC.

However, there are also problems with this design. If the candidate words returned by the LSP server are much larger than the acm-backend-lsp-candidates-max-number setting (such as Tailwindcss LSP server), the default no filtering policy will be used, and lsp-bridge will just Candidate words within the acm-backend-lsp-candidates-max-number range are always sent, and these candidate words have nothing to do with the user's input.

The new design is that lsp-bridge will always filter candidate words on the Python side, but users can configure the matching mode of acm-backend-lsp-match-mode. This solves the problem that acm does not display when the LSP server returns too many candidates. Bug in completing candidate words

[artemkovalyov]

Yeah, I've read some of your reddit discussions... I actually think propagating filtering logic to python should be the way for the design you've chosen to unload emacs. Another plugin that works is indeed slow because of the sheer amount of completion candidates Tailwind provides. My GC is raised significantly but when you reach a clean up range it can be painful. I'll give it a try again.

By the way, a possibility to rather simply combine LSP server is a killer feature of LSP-bridge. LSP-mode has it partially as well but you approach is much simpler and should be also more performant.

I assumed there's some filtering or limitation because I see completion candidates in the logs but nothing in the menu.

[manateelazycat]

@manateelazycat, I can see completions from the Tailwindcss at last :) 

@artemkovalyov

I noticed that although your screenshot shows candidates, the first ones are fuzzy matches. I pushed a new patch 5890f3b

The purpose of this patch is to ensure that the list of candidate words after fuzzy filtering is prioritized again according to the prefix entered by the user.

In this way, when Tailwindcss returns a large number of candidate words that exceed the limit of acm-backend-lsp-candidates-max-number, the acm completion menu will prioritize the candidate words starting with font instead of other fuzzy matching candidate words.

[artemkovalyov]

@manateelazycat , indeed, I didn't even notice immediately. I was too happy about some progress and it was late :)
I'll check again to see the candidates are meaningful. I use orderless, I'll test with and without it enabled, but usually it filters down great matches.

[artemkovalyov]

Works now fine from my perspective. Both servers are considered and return reasonable results.

[artemkovalyov]

Aggregation of LSP servers is the killer feature of LSP-bridge.

[manateelazycat]

Thank you for your help. Without your assistance, tailwindcss could not complete autocompletion properly.