-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tailwind LSP support broken for ERB #12728
Comments
When you have an |
When i start editing the class attribute in line 12 (see video) which is a ERB tag, i get the following output and errors below. One thing i noticed is that i edit line 12 but the RPC logs and errors only mention line 11 and 13 // Send:
{"jsonrpc":"2.0","id":13517,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"position":{"line":13,"character":45}}}
// Receive:
{"jsonrpc":"2.0","id":13517,"result":null}
// Send:
{"jsonrpc":"2.0","id":13518,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"range":{"start":{"line":11,"character":89},"end":{"line":11,"character":89}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":13518,"result":[]}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":155},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 \" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","id":13519,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"range":{"start":{"line":11,"character":90},"end":{"line":11,"character":90}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":13519,"result":[]}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":156},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 p\" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","id":13520,"method":"textDocument/completion","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"position":{"line":11,"character":91}}}
// Receive:
{"jsonrpc":"2.0","id":13520,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":157},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 pt\" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","id":13521,"method":"textDocument/completion","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"position":{"line":11,"character":92}}}
// Receive:
{"jsonrpc":"2.0","id":13521,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}
// Send:
{"jsonrpc":"2.0","id":13522,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"range":{"start":{"line":11,"character":92},"end":{"line":11,"character":92}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":13522,"result":[]}
// Receive:
{"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","diagnostics":[]}} |
Do you have a sample repository with the right |
What do you mean with "has no effect"? When I use the settings, I get tailwind completions in ERB files. Without the settings, I don't. So I do think the settings have an effect. Seems like the issue is the completion sorting, yes?
To be clear: what you're seeing here is documentation completion. How is "not working at all"? Here's a recording of me having Tailwind completions in this project after cloning and running screenshot-2024-06-06-17.51.14.mp4That's with Zed 0.138.4. The problem seems to be that |
For me on this project, it is now working fine in ERB files, but not in Ruby files. CleanShot.2024-06-06.at.17.20.57.mp4The error message is
Full logs:
|
This fixes #12728 as much as I can tell. The problem was that inside ERB files, when inside Ruby code, we didn't treat `-` as part of the word, which broke completions. So, with the change in here, and the following Zed settings, it works. ```json { "languages": { "Ruby": { "language_servers": ["tailwindcss-language-server", "solargraph"] } }, "lsp": { "tailwindcss-language-server": { "settings": { "includeLanguages": { "erb": "html", "ruby": "html" }, "experimental": { "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"] } } } } ``` This enabled `tailwindcss-language-server` for Ruby files and tells the language server to look for classes inside `class: ""` strings. See demo video. Co-authored-by: Max Brunsfeld <max@zed.dev>
Tried my best in #12742 and fixed the word characters for strings inside Ruby inside ERB. But I still haven't figured out why it works for me in Ruby and not for you, @joeldrapper. Does it work for you in https://github.com/kucho/toolbox? |
Relative to the linked issue, it had no effect in solving the problem for me - bad wording.
Ok, i was under the impression it should also show color pallet previews. I checked now in other issues and it seems that's not implemented yet. Why close the issue when it's not working yet for the both of us? It works when using regular HTML. It does not work when used within ERB tags and seemingly (looking at Joel's example) it actually does not work anywhere in a ruby file other than plain HTML. He is using ViewComponents i believe. @joeldrapper Can you try if it works for you within a html.erb file, using an ERB tag e.g. I will start a new rails project and try in there. If it doesn't work i can push that as a sample project |
I closed it because in the PR I merged, I fixed the issue of completions with
In your video it works inside ERB tags. I guess you mean inside Ruby inside ERB.
See the video in #12742 and here: #11858 (comment) It works for me in Ruby files and I have a very basic Ruby setup and just used the open source project that someone posted: https://github.com/kucho/toolbox Does it work for you in that project? As a general note: with bugs like this language like "does not work for me at all" or "simply doesn't work" doesn't help as much as clear steps to reproduce the issue. I really want to fix these issues for you all, but if we're not precise when talking about what is broken under which circumstances, then we can't figure out why it's broken and even less how to fix it. |
Just bumped the Ruby extension to 0.0.7: zed-industries/extensions#879 Should be available in a few minutes. |
Reopening until we have clear steps to reproduce and know that lead to a bug that is fixed. |
Ok thanks i will update the extension when it's out and test.
In my video it works inside ERB files when using plain HTML. It does not work within ERB tags (<% %>). My guess though is since Joel is not using ERB (but Phlex components i believe) and it is not working for him as well, is that for the two of us at least it only works with plain HTML (within both .html and .html.erb files) |
Updated the extension to v.0.0.7 but unfortunately no change. It behaves exactly the same in all the same test cases as in my my previous video. The RPC logs look the same as well // Send:
{"jsonrpc":"2.0","id":2,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"range":{"start":{"line":11,"character":89},"end":{"line":11,"character":89}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":2,"result":[]}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":1},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 \" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":2},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 p\" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","id":3,"method":"textDocument/completion","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"position":{"line":11,"character":91}}}
// Receive:
{"jsonrpc":"2.0","id":3,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","version":3},"contentChanges":[{"text":"<div class=\"mb-12 sm:flex sm:items-center sm:justify-end\">\n <%= link_to \"+ New alert\", new_alert_path, class: \"ml-3 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm\n hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\" %>\n</div>\n\n<div class=\"flex\">\n <%= render partial: \"sidebar\", locals: { alerts: @alerts } %>\n\n <div class=\"flex-1 pl-14\">\n <div class=\"flex mb-4 justify-between items-center\">\n <h3 class=\"text-lg font-semibold tracking-tight\"><%= @alert.name %></h3>\n <%= link_to \"Edit\", edit_alert_path, class: \"text-sm underline active:text-gray-500 pt\" %>\n </div>\n <%= render partial: \"mentions\", locals: { mentions: @mentions } %>\n </div>\n</div>\n"}]}}
// Send:
{"jsonrpc":"2.0","id":4,"method":"textDocument/completion","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"position":{"line":11,"character":92}}}
// Receive:
{"jsonrpc":"2.0","id":4,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}
// Send:
{"jsonrpc":"2.0","id":5,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb"},"range":{"start":{"line":11,"character":92},"end":{"line":11,"character":92}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":5,"result":[]}
// Receive:
{"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///Users/drale2k/work/playground/projectx/data/code/app/views/alerts/show.html.erb","diagnostics":[]}} I tried the linked project https://github.com/kucho/toolbox and i have the exact same behaviour, with the same error in the RPC log. Screen.Recording.2024-06-06.at.19.55.05.mp4I tried deleting tailwind lsp from Zed and then restarting the editor as well. I don't have a second Mac unfortunately but will try a VM once i get to it on the weekend. Maybe recent Zed updates corrupted something for me. |
|
This fixed it for me ^^ |
Btw, I was having a similar issue with tailwind + rust. |
Omg, can't believe I missed that key for weeks. I'm so sorry, @mrnugget! |
Nice catch, @gusinacio! I didn't even notice that. @drale2k: can you confirm that using the right settings, with |
I'm also pretty sure that
is due to the configuration being wrong when the |
I'm wondering whether it's related to this: #4432 (comment) We seem to have a bug where we don't detect the local |
Yes it works now, thanks a lot @gusinacio @mrnugget 🥳 It would be really helpful to have this documented on the Zed docs page. |
Did that: #12762 |
This fixes zed-industries#12728 as much as I can tell. The problem was that inside ERB files, when inside Ruby code, we didn't treat `-` as part of the word, which broke completions. So, with the change in here, and the following Zed settings, it works. ```json { "languages": { "Ruby": { "language_servers": ["tailwindcss-language-server", "solargraph"] } }, "lsp": { "tailwindcss-language-server": { "settings": { "includeLanguages": { "erb": "html", "ruby": "html" }, "experimental": { "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"] } } } } ``` This enabled `tailwindcss-language-server` for Ruby files and tells the language server to look for classes inside `class: ""` strings. See demo video. Release Notes: - Fixed `tailwindcss-language-server` not being activated inside Ruby strings (inside `.erb`) ([zed-industries#12728](zed-industries#12728)). Demo video: https://github.com/zed-industries/zed/assets/1185253/643343b4-d64f-4c4e-98a1-d10df0b24e31 Co-authored-by: Max Brunsfeld <max@zed.dev>
Check for existing issues
Describe the bug / provide steps to reproduce it
Extracted from this discussion #11858 (comment).
Issue 1: Configuring the Tailwind LSP using the recommended settings below has no effect. In my case, tailwind CSS class completion works for regular HTML files and ERB files only with plain HTML, but not within ERB tags. Even when it works it seems a bit odd sometimes, completing
pt-
withscroll-pt-1
for example, as can be seen in the video below.Issue 2: Documentation completion is not working at all.
A video is recorded below
Settings.json
The Tailwind LSP logs:
Environment
Zed: v0.138.4 (Zed)
OS: macOS 14.2.1
Memory: 64 GiB
Architecture: aarch64
If applicable, add mockups / screenshots to help explain present your vision of the feature
Screen.Recording.2024-06-06.at.13.11.57.mp4
If applicable, attach your
~/Library/Logs/Zed/Zed.log
file to this issue.No response
The text was updated successfully, but these errors were encountered: