🐛 BUG: Intellisense for CSS not working in .astro files

[FairyPenguin]

Describe the Bug

In a nutshell: .astro files lose the Intellisense for CSS. And the only solution is to restart the extension.

it happened many times, I checked every possible cause from my side but none

Today it happened again I did a basic test and enabled the CSS in file associations for the .astro files CSS Intellisense works back with no problem.

IS there are any steps or methods I can do or use when i encounter this again to check the reason.

Steps to Reproduce

1. npm init astro using template
2. ...
3. ...
4. ...
5. Error! Describe what went wrong (and what was expected instead)...

[Princesseuh]

I can't really help without more details (the file where it stops working etc). The CSS intellisense kinda has no state attached to it, so typically it's an unrelated error that would break it, perhaps the compiler failed to parse a file or something.

[github-actions]

Hello @FairyPenguin. Please provide a minimal reproduction using a GitHub repository or at least sharing the file where the issue happen. Issues marked with needs repro will be closed if they have no activity within 3 days.

[FairyPenguin]

I can't really help without more details (the file where it stops working etc). The CSS intellisense kinda has no state attached to it, so typically it's an unrelated error that would break it, perhaps the compiler failed to parse a file or something.

Every .astro file Simply: all the .astro files lose the CSS intellisense. And the only fixation is to restart the Extension.

If it happens once in a while I wouldn't report it and Keep with it but it's happening every time I use Astro now.

[FairyPenguin]

I will record a video when this happens again. It's a repeated issue so this will be easy for me to catch it in a Screen Recording, For the Repo as I asked in the other Issue I need an Email Address to send the repo.

[FairyPenguin]

@Princesseuh

A rproduce!

https://github.com/FairyPenguin/astro-reproduce

As required, hope this helps, because now the extension or the language server is too laggy that I had to use .css files to work around this.

[Princesseuh]

@Princesseuh

A rproduce!

https://github.com/FairyPenguin/astro-reproduce

As required, hope this helps, because now the extension or the language server is too laggy that I had to use .css files to work around this.

Thank you, I'll take a look as soon as possible

[adleviton]

Not sure if this is related. I've tried Visual Studio Code CSS Intellisense for HTML and IntelliSense for CSS class names in HTML. Neither of these extensions seem to work with the Astro language by not providing CSS suggestions.

Here's a quick video showing how it works fine for HTML and not Astro files. I've added the astro language ID to the settings for both extensions, but this does not make a difference. Any insight is appreciated since I'm not familiar with how VS Code extensions work. It seems like these extensions only work with the built-in languages, while add-on languages like Astro get ignored.

Screen.Recording.2024-05-10.at.3.43.04.PM.mov

[Princesseuh]

This is unrelated, those extensions need to enable themselves in other kinds of files or be configured to do so. They cannot understand third-party formats magically

[FairyPenguin]

Not sure if this is related. I've tried Visual Studio Code CSS Intellisense for HTML and IntelliSense for CSS class names in HTML. Neither of these extensions seem to work with the Astro language by not providing CSS suggestions.

Here's a quick video showing how it works fine for HTML and not Astro files. I've added the astro language ID to the settings for both extensions, but this does not make a difference. Any insight is appreciated since I'm not familiar with how VS Code extensions work. It seems like these extensions only work with the built-in languages, while add-on languages like Astro get ignored.
Screen.Recording.2024-05-10.at.3.43.04.PM.mov

I don't understand 100% your point and the video you privded is not working too, but if it's that the .astro files lose intellisense for CSS/HTML or even the Astro syntax, YES 200% this is Astro problem and it's unsolvable until this moment and it was the reason I switched even I loved working and using Astro much.

For some workarounds try to restart the Astro extension or your Vs-Code window and it will works fine.

Notable mentions:

1- most of the users who complains from this issue were using Linux.

2- You will notice this with typescript in .astro files too if you are using ts, so don;t go down the hole of what's wrong with ts no it's astro causing this issues you will need to do the above workaround again.

[Princesseuh]

I still cannot reproduce on any OSes and I've never heard anyone else having this issue. Do you have a link to the "most of the users" experiencing this?

[FairyPenguin]

I still cannot reproduce on any OSes and I've never heard anyone else having this issue. Do you have a link to the "most of the users" experiencing this?

You never heard, however there were other issues with the same problems and you yourself, commented with link to these issues and then replaied this still didn't solved. (I will consider you forget or something)

The users I knew this from after I discovered were on twitter when someone was experiencing the same problem with ts in .astro files and all the comments were the saying the same ts LSP with .astro files id laggy and lose intellisense and the only solution a restart.

You asked for a reproduce and I gave you that, but can't discover it, that doesn't mean it's not happening because you don't face it!!

You told me you are depending on the same code of Vue js and for that i took your word and test Vue for 1 whole month guess the results
0 problems 0 lagg 0 intellisense losing problems.

So it's clear where is the problem, You are saying you tested this on every possible OS
On which Linux Distro and version you did the test? It was better to ask me then so I provide you with the same OS version we are using in the team !

[FairyPenguin]

#785 (comment)

This was you comment ! so how you never heard any other users face these issues !!

[FairyPenguin]

So until last March users were still reporting the same issue !!

Now I'm really confused you said you did test on every OS, and users here saying they face it on every OS?!

Bottom Line: There is a real issue with the LSP or Astro Extension or maybe both, you yourself can't reach the issue OK fine, But others are facing it and it's real you can't reproduce it OK fine but it's happening to others. End of line.

And for the record a better approach for solving this was to pair with a user facing the issue not a reproduce, because it's look like the tests you did with every OS as you aid wasn't valid and mocking the same environment,So it would far better if someone from the Astro team did a pair session ans see the issue live which will give a better understanding and actual facing of what is happening. A re produce here is not much useful, because it's like a OS/System related issue.

[Princesseuh]

The issue you linked is not the same one, the users in the screenshot are reporting about new files not appearing in auto imports (which has been mostly fixed already), not that they're losing all kinds of intellisense, which is what you seem to be reporting.

Same thing for the tsserver crashes, it's not the same issue. The tsserver can crash without the language server stopping, and vice versa.

I tried on Arch Linux, last version of everything (as expected on Arch)

Please understand that I am alone on this project, it is not my main project at Astro (Astro itself is), no one else in the Astro team works on it and I receive 1 or 2 external contributions per year.

I'm trying my best to fix people's issues, I do not have the time to do 1:1 calls regarding people's specific setups when the issues are this isolated. Thousands and thousands of people use this project every day, if an issue like was super prevalent, there would be hundreds of reports.

[adleviton]

@Princesseuh I just want to say thanks for your incredibly prompt response, efforts, and work on Astro projects. Your comment was probably the fastest response I've had on any repo and I really appreciate it.

I made another observation in case it sheds light on this or can help point me in the right direction. To put it simply:

I'm just trying to set things up so whenever I go to add CSS class names to an HTML element, the class names will be suggested. I'm using the HTML CSS Support extension. I've restarted VS Code.

In an HTML file, it works:

In an Astro file, it does not work:

But in the same Astro file, if I put quotes inside of quotes, it works:

Any help is appreciated, thanks again.