[Twoslash] All themes are broken on Vue SFC

[victorgarciaesgi]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Hi!

Just noticed a problem with Twoslash theming recently. The syntax highlightning seems to be broken and just stays white.

It happened when upgrading postcss and sass to their latest version. Reverting the versions fixed the problem

 "postcss": "8.5.3",
 "sass": "1.86.0",

Vue SFC problem

Even with this fixed versions, there is still a problem with Vue SFC component highlights.

Reproduction will be simple as it's also happening on your website

Just in case, you can look at my docs also to reproduce: https://github.com/victorgarciaesgi/regle

• pnpm i
• pnpm run docs:dev

Reproduction

https://github.com/shikijs/shiki/tree/main/docs

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[Mishra-coder]

Hello @victorgarciaesgi
I’ve reviewed the issue and would like to work on a fix for the Twoslash theming problem in Vue SFCs.
Could you please assign me to this issue? I’ll open a PR once I make progress.
Thank you!

[iNotSoCrisp]

Hey @victorgarciaesgi, since there’s no pending PR for this issue, I’m working on it and will open a PR soon.