PostCSS syntax highlighting is broken since v0.25.5

[sto3psl]

I noticed that since version 0.25.5 of Volar, the syntax highlighting of <style lang="postcss"></style> blocks is broken and doesn't highlight anything anymore.

When I remove lang="postcss" the highlighting works again (I assume because the block is now considered normal CSS), but now I get linting errors from Stylelint (because it assumes normal CSS).

I noticed in the changelog that you made a bunch of changes with language support, maybe that's why it broke for PostCSS.

v0.25.4	v0.25.7

[johnsoncodehk]

You need to install additional extension for postcss syntax highlighting, because vscode do not built-in support postcss syntax highlighting, see https://github.com/johnsoncodehk/volar#note.

If you have not, in version 0.25.4 it's show incorrect syntax highlighting and it's bug.

[sto3psl]

I know and have csstools.postcss installed. Since it's the first search result and has pretty big usage, I thought it would work.

Do you recommend another one?

[sto3psl]

I tried out ricard.postcss and cpylua.language-postcss just now. Only cpylua.language-postcss seems to work but it isn't maintained anymore. Maybe it keeps working but no idea why the other ones work fine with everything except .vue files.

[johnsoncodehk]

I'm not sure why, it seems to be related to this issue csstools/postcss-language#6.

[christhofer]

I'm switching to Volar now, and notice this issue too.

But when I try lang="pcss", it seems to be working just fine.

I don't know if there's any side effect using lang="pcss"instead of lang="postcss"
My program seems to be working fine in npm run dev

[johnsoncodehk]

@christhofer <style lang="pcss"> just rollback to <style>, so it's syntax highlighting of lang="css".

[christhofer]

@johnsoncodehk
Seems to be different though
I got error with @apply using lang="css"

[johnsoncodehk]

Syntax highlighting and language support is deal with separately.

<style> = css syntax highlighting + css language support
<style lang="postcss"> = postcss syntax highlighting + postcss language support
<style lang="pcss"> = css syntax highlighting + unknown style language support (no any supports)

[xymopen]

Sorry for bring up this thread. The reason for this seems to be that csstools.postcss uses source.css instead of source.postcss (which is used by vue.volar) as scope for PostCSS grammar.

[johnsoncodehk]

@xymopen Can you remove lang="postcss" to resolve?

[xymopen]

@xymopen Can you remove lang="postcss" to resolve?

Yes. Using <style> alone does bring tokens defined by csstools.postcss. However CSS Language Server is not happy about that.

[johnsoncodehk]

@xymopen Please try change css.lint.* settings in vscode and it may helps.

[me-vlad-k]

I still have the same problem in November 2024. In a Vue file with lang="postcss", everything is shown in plain white.