Skip to content
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.

Sign up for GitHub

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

Jump to bottom

TailwindCSS LSP doesn't work in an Astro project #12402

Closed
1 task done
Moshyfawn opened this issue May 29, 2024 · 7 comments · Fixed by #12741
Closed
1 task done

TailwindCSS LSP doesn't work in an Astro project #12402

Moshyfawn opened this issue May 29, 2024 · 7 comments · Fixed by #12741
Labels
astro Astro.js framework support autocompletions Feedback for code completions in the editor defect [core label] language server failure Language server doesn't work as expected language server An umbrella label for all language servers language An umbrella label for all programming languages syntax behaviors tailwind css Tailwind CSS styling framework support

Comments

@Moshyfawn
Copy link
Contributor

Moshyfawn commented May 29, 2024 •
edited
Loading

Check for existing issues

  • Completed

Describe the bug / provide steps to reproduce it

Reproduction steps

  1. pnpm create astro - select all default options - open the project in Zed.
  2. pnpm astro add tailwind - choose Y for all prompts.
  3. Open src/pages/index.astro - try adding a TailwindCSS class to the main tag:
<main class="flex">
  1. Note that no TailwindCSS LSP suggestions are displayed.
  2. Try showing the autocompletions by selecting editor: show completions from the command palette.
  3. Note that no TailwindCSS LSP suggestions are displayed.

Expected behaviour

The expected behaviour in both cases 3 and 5 would be for the TailwindCSS classes autocompletions to be displayed.

Environment

Zed: v0.138.0 (Zed Nightly b466a8b)
OS: macOS 14.5.0
Memory: 18 GiB
Architecture: aarch64

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

No response

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

Zed.log

[INFO] Language server with id 13 sent unhandled notification @/tailwindCSS/projectInitialized:
[
  null
]

TailwindCSS LSP log

[Global] Creating projects: [{"folder":"/<project-path>/astro-tw-sandbox","configPath":"/<project-path>/astro-tw-sandbox/tailwind.config.mjs","isUserConfigured":false,"documentSelector":[{"pattern":"/<project-path>/astro-tw-sandbox/tailwind.config.mjs","priority":0},{"pattern":"/<project-path>/astro-tw-sandbox/**","priority":3}]}]
[Global] Adding watch patterns: /<project-path>/astro-tw-sandbox/tailwind.config.mjs, /<project-path>/astro-tw-sandbox
[tailwind.config.mjs] Initializing...
[tailwind.config.mjs] Loaded Tailwind CSS config file: /<project-path>/astro-tw-sandbox/tailwind.config.mjs
[tailwind.config.mjs] Loaded postcss v8.4.38: /<project-path>/astro-tw-sandbox/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss
[tailwind.config.mjs] Loaded tailwindcss v3.4.3: /<project-path>/astro-tw-sandbox/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss
[tailwind.config.mjs] Building...

An additional log popped up (not sure when while trying to enter different classes)

Unhandled exception: Cannot read properties of undefined (reading 'colorDecorators')
TypeError: Cannot read properties of undefined (reading 'colorDecorators')
    at Object.onUpdateSettings (/<user-path>/Library/Application Support/Zed/languages/tailwindcss-language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:2953:621)
    at /<user-path>/Library/Application Support/Zed/languages/tailwindcss-language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server:2953:13372
@Moshyfawn Moshyfawn added defect [core label] language An umbrella label for all programming languages syntax behaviors language server failure Language server doesn't work as expected admin read Pending admin review language server An umbrella label for all language servers tailwind css Tailwind CSS styling framework support autocompletions Feedback for code completions in the editor astro Astro.js framework support labels May 29, 2024
@github-actions github-actions bot mentioned this issue May 29, 2024
Open
@imkarthikk
Copy link

imkarthikk commented May 29, 2024 •
edited
Loading

@Moshyfawn I'm facing the same issue as well. I tried all sorts of configuration. Tailwind LSP is actually running properly, it unfortunately does not recognize or trigger for Astro tags to be specific. Also, from your logs, looks like only the colorDecorators does not work, which is find, and is a potential issue with Tailwind LSP as @mrnugget mentioned in this PR #11858.

On the other hand, if you are in a .astro file, the Tailwind LSP works just fine with autocomplete when using within the scoped <style> tag that Astro supports. It's weird. I used to think that TW LSP does not trigger for any .astro files. But then, it works within the <style> tag.

What's your settings.json? Do you have configs set for Tailwind LSP?

@JosephTLyons JosephTLyons removed the admin read Pending admin review label May 31, 2024
@Jonnotie
Copy link

Jonnotie commented Jun 2, 2024

I'm also running into this issue with my Astro project

@imkarthikk
Copy link

I'm also running into this issue with my Astro project

@Jonnotie What's your settings.json? Do you have a config for Tailwind LSP?

mrnugget added a commit that referenced this issue Jun 6, 2024
@mrnugget
astro: Fix Tailwind LS not working in attributes
39cbdca 
This fixes #12402.

We already had the `tailwind-language-server` config in Astro's
`config.toml` here: https://github.com/zed-industries/zed/blob/fd39f20842967f0fb8a6c508bc2e1ebaefbaf15f/extensions/astro/languages/astro/config.toml#L17-L23

But it's not enough to add `overrides.string` to the `config.toml`, you
also need an `overrides.scm` file that sets the overrides.

And, tricky bit, when you add a single override to the `overrides.scm`
file you have to add all of them that Zed knows about. In my case, I
had to add `@comment` too, because Zed somehow expects that.
@mrnugget mrnugget mentioned this issue Jun 6, 2024
Merged
@mrnugget
Copy link
Member

mrnugget commented Jun 6, 2024

99% sure I fixed it here: #12741

Thanks for the amazing reproduction steps, @Moshyfawn.

mrnugget added a commit that referenced this issue Jun 6, 2024
@mrnugget
astro: Fix Tailwind LS not working in attributes (#12741)
c354793 
This fixes #12402.

We already had the `tailwind-language-server` config in Astro's
`config.toml` here:
https://github.com/zed-industries/zed/blob/fd39f20842967f0fb8a6c508bc2e1ebaefbaf15f/extensions/astro/languages/astro/config.toml#L17-L23

But it's not enough to add `overrides.string` to the `config.toml`, you
also need an `overrides.scm` file that sets the overrides.

And, tricky bit, when you add a single override to the `overrides.scm`
file you have to add all of them that Zed knows about. In my case, I had
to add `@comment` too, because Zed somehow expects that.

Release Notes:

- Fixed `tailwind-language-server` not working in attributes inside of
`*.astro` files.
([#12402](#12402)).

Demo/proof:


https://github.com/zed-industries/zed/assets/1185253/05677a2d-831d-4e05-a1a2-4d1730ce2a46
@mrnugget
Copy link
Member

mrnugget commented Jun 6, 2024

I bumped the Astro extension to 0.0.3 here: zed-industries/extensions#880 Should be available in a few minutes and include the fix here.

@imkarthikk
Copy link

@mrnugget Thank you for your amazing work Thorsten. 👏

@Moshyfawn
Copy link
Contributor Author

Can confirm, the autocompletions are there now! Thanks 🙏

ming900518 pushed a commit to ming900518/zed that referenced this issue Jun 14, 2024
@mrnugget @ming900518
astro: Fix Tailwind LS not working in attributes (zed-industries#12741)
2401f7f 
This fixes zed-industries#12402.

We already had the `tailwind-language-server` config in Astro's
`config.toml` here:
https://github.com/zed-industries/zed/blob/fd39f20842967f0fb8a6c508bc2e1ebaefbaf15f/extensions/astro/languages/astro/config.toml#L17-L23

But it's not enough to add `overrides.string` to the `config.toml`, you
also need an `overrides.scm` file that sets the overrides.

And, tricky bit, when you add a single override to the `overrides.scm`
file you have to add all of them that Zed knows about. In my case, I had
to add `@comment` too, because Zed somehow expects that.

Release Notes:

- Fixed `tailwind-language-server` not working in attributes inside of
`*.astro` files.
([zed-industries#12402](zed-industries#12402)).

Demo/proof:


https://github.com/zed-industries/zed/assets/1185253/05677a2d-831d-4e05-a1a2-4d1730ce2a46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
astro Astro.js framework support autocompletions Feedback for code completions in the editor defect [core label] language server failure Language server doesn't work as expected language server An umbrella label for all language servers language An umbrella label for all programming languages syntax behaviors tailwind css Tailwind CSS styling framework support
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

astro: Fix Tailwind LS not working in attributes zed-industries/zed
5 participants
@Jonnotie @imkarthikk @mrnugget @Moshyfawn @JosephTLyons