LSP Tailwind fails

[artemkovalyov]

LSP Tailwind fails

[manateelazycat]

We have tried the log you fed back more than a year ago. We don’t know why the /competitions request is still not returned after normal feedback from the request request. We don’t know the reason.

[artemkovalyov]

@manateelazycat, alright, it makes sense. If I figure out that black magic one day, I'll contribute;) Lsp-bridge is a great tool.

[artemkovalyov]

How do I send initializationOptions ? I tried smth like this, but didn't work:

{
  "name": "tailwindcss",
  "languageId": "tailwindcss",
  "command": ["tailwindcss-language-server", "--stdio"],
  "settings": {
    "tailwindCSS": {
      "emmetCompletions": false,
      "showPixelEquivalents": true,
      "rootFontSize": 16,
      "validate": true,
      "hovers": true,
      "suggestions": true,
      "codeActions": true,
      "lint": {
        "invalidScreen": "error",
        "invalidVariant": "error",
        "invalidTailwindDirective": "error",
        "invalidApply": "error",
        "invalidConfigPath": "error",
        "cssConflict": "warning",
        "recommendedVariantOrder": "warning"
      },
      "experimental": {
        "classRegex": ""
      },
      "classAttributes": ["class", "className", "ngClass"]
    }
  }
}

[manateelazycat]

We have tried supporting Tailwind LSP server, but Tailwind LSP server does not return any completion information.

Therefore, lsp-bridge has a built-in backend for Tailwind. Although it cannot perform syntax completion like Tailwind LSP server, it will complete Tailwind's CSS keywords, which requires you to add the tailwind.config.js file in the project root location.

[artemkovalyov]

Hey, @manateelazycat, thanks for getting back. This backend is cool but I believe it doesn't reflect custom changes, does it?

Somehow this backend from lsp-mode works pretty Ok. It's slow, but it gives relevant completion.

I traced their logs, here's how the eventual configuration looks like:

[Trace - 07:18:09 PM] Sending response 'workspace/configuration - (1)'. Processing request took 0ms
Params: {
  "jsonrpc": "2.0",
  "id": 1,
  "result": [
    {
      "emmetCompletions": false,
      "showPixelEquivalents": true,
      "rootFontSize": 16,
      "validate": true,
      "hovers": true,
      "suggestions": true,
      "codeActions": true,
      "lint": {
        "invalidScreen": "error",
        "invalidVariant": "error",
        "invalidTailwindDirective": "error",
        "invalidApply": "error",
        "invalidConfigPath": "error",
        "cssConflict": "warning",
        "recommendedVariantOrder": "warning"
      },
      "experimental": {
        "classRegex": ""
      },
      "classAttributes": [
        "class",
        "className",
        "ngClass"
      ]
    }
  ]
}

The actual config in code looks like this.

Could it be vital? I struggled to understand how to properly provide these settings via the lsp-bridge config.
If you help, I'll happily contribute:)
I didn't find a way to send those initializationOptions to see if it could be a quick fix.

[artemkovalyov]

The response is indeed returned. I use the same server, basically same machine with the server globally installed:
Tailwing would be a super cool secondary LSP for so many servers and it would require then less maintenance.

[Trace - 07:34:31 PM] Received response 'textDocument/completion - (29)' in 622ms.
Result: {
  "isIncomplete": null,
  "items": [
    {
      "kind": 9,
      "data": {
        "_projectKey": "0",
        "_type": "variant"
      },
      "command": {
        "title": "",
        "command": "editor.action.triggerSuggest"
      },
      "sortText": "-00000000",
      "label": "*:",
      "detail": "& > *",
      "additionalTextEdits": [],
      "textEdit": {
        "newText": "*:",
        "range": {
          "start": {
            "line": 11,
            "character": 116
          },
          "end": {
            "line": 11,
            "character": 125
          }
        }
      }
    },
    {
      "kind": 9,
      "data": {
        "_projectKey": "0",
        "_type": "variant"
      },
      "command": {
        "title": "",
        "command": "editor.action.triggerSuggest"
      },
      "sortText": "-00000001",
      "label": "first-letter:",
      "detail": "&::first-letter",
      "additionalTextEdits": [],
      "textEdit": {
        "newText": "first-letter:",
        "range": {
          "start": {
            "line": 11,
            "character": 116
          },
          "end": {
            "line": 11,
            "character": 125
          }
        }
      }
    },
    {
      "kind": 9,
      "data": {
        "_projectKey": "0",
        "_type": "variant"
      },
      "command": {
        "title": "",
        "command": "editor.action.triggerSuggest"
      },
      "sortText": "-00000002",
      "label": "first-line:",
      "detail": "&::first-line",
      "additionalTextEdits": [],
      "textEdit": {
        "newText": "first-line:",
        "range": {
          "start": {
            "line": 11,
            "character": 116
          },
          "end": {
            "line": 11,
            "character": 125
          }
        }
      }
    },

[artemkovalyov]

Can you advise how I influence the initialize request? Meaning how to I add anything into it's fields by leveraging lsp-bridge config files?

[manateelazycat]

Hey, @manateelazycat, thanks for getting back. This backend is cool but I believe it doesn't reflect custom changes, does it?

Somehow this backend from lsp-mode works pretty Ok. It's slow, but it gives relevant completion.

I traced their logs, here's how the eventual configuration looks like:

[Trace - 07:18:09 PM] Sending response 'workspace/configuration - (1)'. Processing request took 0ms
Params: {
  "jsonrpc": "2.0",
  "id": 1,
  "result": [
    {
      "emmetCompletions": false,
      "showPixelEquivalents": true,
      "rootFontSize": 16,
      "validate": true,
      "hovers": true,
      "suggestions": true,
      "codeActions": true,
      "lint": {
        "invalidScreen": "error",
        "invalidVariant": "error",
        "invalidTailwindDirective": "error",
        "invalidApply": "error",
        "invalidConfigPath": "error",
        "cssConflict": "warning",
        "recommendedVariantOrder": "warning"
      },
      "experimental": {
        "classRegex": ""
      },
      "classAttributes": [
        "class",
        "className",
        "ngClass"
      ]
    }
  ]
}

The actual config in code looks like this.

Could it be vital? I struggled to understand how to properly provide these settings via the lsp-bridge config. If you help, I'll happily contribute:) I didn't find a way to send those initializationOptions to see if it could be a quick fix.

If you want send response to workspace/configuration, please track

lsp-bridge/core/lspserver.py

Line 644 in 7c70339

if message["method"] == "workspace/configuration":

and

lsp-bridge/core/lspserver.py

Line 503 in 7c70339

def handle_workspace_configuration_request(self, name, request_id, params):

If you want response to initialize , example send customize initializationOptions, you need create tailwindcss.json under directory lspbridge/langserver, then fill initializationOptions field in tailwindcss.json, example

lsp-bridge/langserver/jdtls.json

Line 15 in 7c70339

"initializationOptions": {

[artemkovalyov]

Thanks for quickly getting back. I played with configuration in many ways and tried to compare the communication logs, but no luck or magic so far.
I might ask the author of the lsp-tailwind package. There everything works well, hover, autocomplete, etc.

I'm lacking knowledge a bit, to hack with it further, but your suggestion helped me move forward with ideas.
lsp-bridge is absolutely great and solves quite some fundamental issues around LSP support.

[artemkovalyov]

@manateelazycat, my debugging via logs didn't yield result yet. The server configuration sequences look pretty similar now but completion requests return nothing for lsp-bridge while for very similar requests for lsp-mode it does work.
I used the latest tailwindcss server version for both clients on the very same project.
Attaching session logs if someone can help:
lsp-bridge-log.json
lsp-mode-log.json

Here's my config,
tailwindcss.json

Any ideas how to debug it further? Are there logs generated by python for server calls, serialization, etc.?
Feels like I miss smth obvious knowing it works.