Tailwind LSP support broken for ERB #12728

drale2k · 2024-06-06T11:16:17Z

Check for existing issues

Completed

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- with scroll-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

  "languages": {
    "Ruby": {
      "language_servers": ["tailwindcss-language-server", "..."]
    }
  },
  "lsp": {
    "tailwindcss-language-server": {
      "includeLanguages": {
        "erb": "html",
        "ruby": "html"
      },
      "experimental": {
        "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"]
      }
    }
  },

The Tailwind LSP logs:

[Global] Creating projects: [{"folder":"/Users/drale2k/work/playground/projectx/data/code","configPath":"/Users/drale2k/work/playground/projectx/data/code/config/tailwind.config.js","isUserConfigured":false,"documentSelector":[{"pattern":"/Users/drale2k/work/playground/projectx/data/code/config/tailwind.config.js","priority":0},{"pattern":"/Users/drale2k/work/playground/projectx/data/code/config/**","priority":3},{"pattern":"/Users/drale2k/work/playground/projectx/data/code/**","priority":4}]}]
[Global] Adding watch patterns: /Users/drale2k/work/playground/projectx/data/code/config/tailwind.config.js, /Users/drale2k/work/playground/projectx/data/code/config, /Users/drale2k/work/playground/projectx/data/code
[config/tailwind.config.js] Initializing...
[config/tailwind.config.js] Failed to load workspace modules.
[config/tailwind.config.js] Using bundled version of `tailwindcss`: v3.4.1
[config/tailwind.config.js] Using bundled version of `postcss`: v8.4.31
[config/tailwind.config.js] Building...
Unhandled exception: Cannot read properties of undefined (reading 'colorDecorators')
TypeError: Cannot read properties of undefined (reading 'colorDecorators')
    at Object.onUpdateSettings (/Users/drale2k/Library/Application Support/Zed/languages/tailwindcss-language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:2953:621)
    at /Users/drale2k/Library/Application Support/Zed/languages/tailwindcss-language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:2953:13372

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:

mrnugget · 2024-06-06T11:59:35Z

When you have an *.erb file open, can you open the debug: open language server logs and toggle on the RPC messages for Tailwind, then try to use it, and see if there's messages in there?

drale2k · 2024-06-06T12:21:31Z

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":[]}}

mrnugget · 2024-06-06T13:19:02Z

Do you have a sample repository with the right Gemfile and package.json so I can reproduce this?

mrnugget · 2024-06-06T15:52:51Z

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- with scroll-pt-1 for example, as can be seen in the video below.

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?

Issue 2: Documentation completion is not working at all.

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 npm install: https://github.com/kucho/toolbox

screenshot-2024-06-06-17.51.14.mp4

That's with Zed 0.138.4.

The problem seems to be that - is not considered part of the word characters in string inside Ruby in ERB, which is why completions fail.

joeldrapper · 2024-06-06T16:24:50Z

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.mp4

The error message is

{"jsonrpc":"2.0","id":220,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}

Full logs:

// Send:
{"jsonrpc":"2.0","id":218,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"range":{"start":{"line":8,"character":20},"end":{"line":8,"character":20}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":218,"result":[]}
// Send:
{"jsonrpc":"2.0","id":219,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"position":{"line":11,"character":23}}}
// Receive:
{"jsonrpc":"2.0","id":219,"result":null}
// Send:
{"jsonrpc":"2.0","method":"textDocument/didChange","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb","version":1},"contentChanges":[{"text":"module Dashboard\n  module Components\n    class TableComponent < ApplicationView\n      def initialize(headers:)\n        @headers = headers\n      end\n\n      def template(&content)\n        div(class: \"m\") { \"Hello\" }\n\n        table(class: '') do\n          thead(class: \"move\") do\n            tr do\n              th(class: \"p\", scope: \"col\") do\n                div(class: \"flex items-center\") do\n                  input(\n                    id: \"checkbox-all\",\n                    type: \"checkbox\",\n                    \"aria-describedby\": \"checkbox-1\",\n                    class:\n                      \"bg-gray-50 border-gray-300 focus:ring-3 focus:ring-cyan-200 h-4 w-4 rounded\"\n                  )\n                  label(for: \"checkbox-all\", class: \"sr-only\") { \"checkbox\" }\n                end\n              end\n\n              @headers.each do |column_title|\n                th(\n                  class:\n                    \"p-4 text-left text-xs font-medium text-gray-500 uppercase\",\n                  scope: \"col\"\n                ) { column_title }\n              end\n\n              tbody(class: \"bg-white divide-y divide-gray-200\", &content)\n            end\n          end\n        end\n      end\n\n      def row(&content)\n        tr(class: \"hover:bg-gray-100\", &content)\n      end\n\n      def cell(&content)\n        td(\n          class: \"p-4 whitespace-nowrap text-base font-medium text-gray-900\",\n          &content\n        )\n      end\n\n      def action_cell(&content)\n        td(class: \"p-4 whitespace-nowrap space-x-2\", &content)\n      end\n\n      def checkbox(id:)\n        checkbox_id = \"checkbox-#{id}\"\n\n        td(class: \"p-4 w-4\") do\n          div(class: \"flex items-center\") do\n            input(\n              id: checkbox_id,\n              type: \"checkbox\",\n              \"aria-describedby\": checkbox_id,\n              class:\n                \"bg-gray-50 border-gray-300 focus:ring-3 focus:ring-cyan-200 h-4 w-4 rounded\"\n            )\n            label(for: checkbox_id, class: \"sr-only\") { \"checkbox\" }\n          end\n        end\n      end\n    end\n  end\nend\n"}]}}
// Send:
{"jsonrpc":"2.0","id":220,"method":"textDocument/completion","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"position":{"line":8,"character":21}}}
// Receive:
{"jsonrpc":"2.0","id":220,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}
// Send:
{"jsonrpc":"2.0","id":221,"method":"textDocument/codeAction","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"range":{"start":{"line":8,"character":21},"end":{"line":8,"character":21}},"context":{"diagnostics":[],"only":["","quickfix","refactor","refactor.extract","source"]}}}
// Receive:
{"jsonrpc":"2.0","id":221,"result":[]}
// Receive:
{"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb","diagnostics":[]}}
// Send:
{"jsonrpc":"2.0","id":222,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"position":{"line":8,"character":10}}}
// Receive:
{"jsonrpc":"2.0","id":222,"result":null}
// Send:
{"jsonrpc":"2.0","id":223,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"position":{"line":8,"character":10}}}
// Receive:
{"jsonrpc":"2.0","id":223,"result":null}
// Send:
{"jsonrpc":"2.0","id":224,"method":"textDocument/hover","params":{"textDocument":{"uri":"file:///Users/joeldrapper/src/toolbox/app/frontend/dashboard/components/table_component.rb"},"position":{"line":8,"character":10}}}
// Receive:
{"jsonrpc":"2.0","id":224,"result":null}

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>

mrnugget · 2024-06-06T17:01:56Z

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?

drale2k · 2024-06-06T17:20:31Z

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.

Relative to the linked issue, it had no effect in solving the problem for me - bad wording.

To be clear: what you're seeing here is documentation completion. How is "not working at all"?

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.
<%= link_to "blub", class: "pt-1" %>

I will start a new rails project and try in there. If it doesn't work i can push that as a sample project

mrnugget · 2024-06-06T17:27:35Z

Why close the issue when it's not working yet for the both of us?

I closed it because in the PR I merged, I fixed the issue of completions with - in them not working inside Ruby code inside ERB tags. That was the only actionable, reproducible bug report in this issue.

It does not work when used within ERB tags

In your video it works inside ERB tags. I guess you mean inside Ruby inside ERB.

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.

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.

mrnugget · 2024-06-06T17:28:06Z

Just bumped the Ruby extension to 0.0.7: zed-industries/extensions#879 Should be available in a few minutes.

mrnugget · 2024-06-06T17:28:46Z

Reopening until we have clear steps to reproduce and know that lead to a bug that is fixed.

drale2k · 2024-06-06T17:43:03Z

Ok thanks i will update the extension when it's out and test.

In your video it works inside ERB tags. I guess you mean inside Ruby inside ERB.

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)

drale2k · 2024-06-06T18:00:49Z

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.mp4

I 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.

gusinacio · 2024-06-06T20:10:04Z

 "tailwindcss-language-server": {
    "settings": {  // <--- try adding this
      "includeLanguages": {
        "erb": "html",
        "ruby": "html"
      },
      "experimental": {
        "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"]
      }
    }
 }

joeldrapper · 2024-06-06T20:19:48Z

This fixed it for me ^^

gusinacio · 2024-06-06T20:46:31Z

Btw, I was having a similar issue with tailwind + rust.
It looks like if I use the local-settings it doesn't work, but if I put the same configuration in the global config, it works. Maybe anyone having issues should try putting the config on the global and see if it runs.

kucho · 2024-06-06T21:40:52Z


 "tailwindcss-language-server": {

    "settings"{  // <--- try adding this

      "includeLanguages": {

        "erb": "html",

        "ruby": "html"

      },

      "experimental": {

        "classRegex": ["\\bclass:\\s*['\"]([^'\"]*)['\"]"]

      }

    }

 }

Omg, can't believe I missed that key for weeks. I'm so sorry, @mrnugget!

mrnugget · 2024-06-07T04:20:56Z

Nice catch, @gusinacio! I didn't even notice that. @drale2k: can you confirm that using the right settings, with "settings" key in there, fixes it?

mrnugget · 2024-06-07T04:35:49Z

I'm also pretty sure that

{"jsonrpc":"2.0","id":4,"error":{"code":-32603,"message":"Request textDocument/completion failed with message: Cannot read properties of undefined (reading 'length')"}}

is due to the configuration being wrong when the settings key is missing.

mrnugget · 2024-06-07T04:39:44Z

It looks like if I use the local-settings it doesn't work, but if I put the same configuration in the global config, it works. Maybe anyone having issues should try putting the config on the global and see if it runs.

I'm wondering whether it's related to this: #4432 (comment)

We seem to have a bug where we don't detect the local settings.json if it's .gitignored (it's been on my list but I haven't gotten to it yet)

drale2k · 2024-06-07T09:01:48Z

Yes it works now, thanks a lot @gusinacio @mrnugget 🥳

It would be really helpful to have this documented on the Zed docs page.

mrnugget · 2024-06-07T11:44:06Z

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>

This fixes zed-industries/zed#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`) ([#12728](zed-industries/zed#12728)). Demo video: https://github.com/zed-industries/zed/assets/1185253/643343b4-d64f-4c4e-98a1-d10df0b24e31 Co-authored-by: Max Brunsfeld <max@zed.dev>

drale2k added admin read Pending admin review bug [core label] triage Maintainer needs to classify the issue labels Jun 6, 2024

drale2k changed the title ~~Tailwind LSP support broken for ERB files~~ Tailwind LSP support broken for ERB Jun 6, 2024

mrnugget mentioned this issue Jun 6, 2024

tailwind: Allow Tailwind LS to be used in Scala #11858

Merged

mrnugget mentioned this issue Jun 6, 2024

ruby: Allow opt-in to Tailwind LS in string #12742

Merged

mrnugget closed this as completed in #12742 Jun 6, 2024

mrnugget closed this as completed in 8809408 Jun 6, 2024

mrnugget reopened this Jun 6, 2024

Moshyfawn added needs info / awaiting response Issue that needs more information from the user and removed triage Maintainer needs to classify the issue labels Jun 7, 2024

Moshyfawn added ruby Ruby programming language support language An umbrella label for all programming languages syntax behaviors language server An umbrella label for all language servers tailwind css Tailwind CSS styling framework support labels Jun 7, 2024

mrnugget mentioned this issue Jun 7, 2024

TailwindCSS support in ERB tags broken #11128

Closed

1 task

drale2k closed this as completed Jun 7, 2024

Moshyfawn removed the needs info / awaiting response Issue that needs more information from the user label Jun 7, 2024

JosephTLyons removed the admin read Pending admin review label Jun 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind LSP support broken for ERB #12728

Tailwind LSP support broken for ERB #12728

drale2k commented Jun 6, 2024

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

joeldrapper commented Jun 6, 2024

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

drale2k commented Jun 6, 2024 •

edited

Loading

gusinacio commented Jun 6, 2024 •

edited by mrnugget

Loading

joeldrapper commented Jun 6, 2024

gusinacio commented Jun 6, 2024 •

edited

Loading

kucho commented Jun 6, 2024

mrnugget commented Jun 7, 2024

mrnugget commented Jun 7, 2024

mrnugget commented Jun 7, 2024

drale2k commented Jun 7, 2024

mrnugget commented Jun 7, 2024

Tailwind LSP support broken for ERB #12728

Tailwind LSP support broken for ERB #12728

Comments

drale2k commented Jun 6, 2024

Check for existing issues

Describe the bug / provide steps to reproduce it

Environment

If applicable, add mockups / screenshots to help explain present your vision of the feature

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue.

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

joeldrapper commented Jun 6, 2024

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

mrnugget commented Jun 6, 2024

drale2k commented Jun 6, 2024

drale2k commented Jun 6, 2024 • edited Loading

gusinacio commented Jun 6, 2024 • edited by mrnugget Loading

joeldrapper commented Jun 6, 2024

gusinacio commented Jun 6, 2024 • edited Loading

kucho commented Jun 6, 2024

mrnugget commented Jun 7, 2024

mrnugget commented Jun 7, 2024

mrnugget commented Jun 7, 2024

drale2k commented Jun 7, 2024

mrnugget commented Jun 7, 2024

If applicable, attach your `~/Library/Logs/Zed/Zed.log` file to this issue.

drale2k commented Jun 6, 2024 •

edited

Loading

gusinacio commented Jun 6, 2024 •

edited by mrnugget

Loading

gusinacio commented Jun 6, 2024 •

edited

Loading