CSS Syntax Highlighting Issue with <style scoped lang="postcss">

[cyocun]

Is it a known issue that CSS syntax highlighting doesn't work within <style scoped lang="postcss"> blocks in Vue files? It works fine with <style scoped lang="css">. Any workarounds?

[luksak]

I've been fighting with this a lot over the past day. So the only currently working setup is using this unmaintained and very incomplete postcss extension for vscode: https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss

I collected all issues I came across here:

• postcss(css-lcurlyexpected) error when using PostCSS #103
• PostCSS syntax highlighting is broken since v0.25.5 #191
• Support for PostCSS nesting in .vue files #765
• <style> tag support csstools/postcss-language#6
• Feature request: support for the source.css.postcss scope csstools/postcss-language#8
• https://www.answeroverflow.com/m/1319717318367907861

Those are the available vscode extensions:

• https://github.com/csstools/postcss-language
  The only maintained one, missing a few important features like postcss-mixins and postcss-custom-media
• https://github.com/vunguyentuan/vscode-postcss
  Unmaintained, but clearly the most feature complete supporting postcss-mixins but not postcss-custom-media, works great on .css files
• https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss
  The only one working with volar. Very rudamentary postcss syntax highlighting and Intellisense

How could we fix the support of csstools/postcss-language and vunguyentuan/vscode-postcss? I don't understand where the actual issue lies and why this is not being worked on. The issues date back quite a few years and vue and nuxt both have native postcss supprt, but no editor to actually work with it...

I wonder: is there and easy hacky way to get https://github.com/vunguyentuan/vscode-postcss working with volar? This would save me. I'm grateful for any suggestions

[KazariEX]

I guess what you need is language service support in the <style lang="postcss"> block. This either needs to be implemented inside this project (see https://github.com/vuejs/language-tools/blob/f720e0b/packages/language-service/lib/plugins/css.ts#L12-L19) or actively supported by external extensions.

For the former, if you could create a volar-service-postcss as an upstream package, or just enhance volar-service-css to fully support postcss, we would be happy to make it builtin.

[luksak]

@KazariEX thank you for your feedback!

I guess what you need is language service support in the <style lang="postcss"> block.

Yeah that sound right.

Which of the approaches is the easier to fix and get committed?
Which of the approaches is makes most sense in your opinion?

I have little knowledge about language services and don't have the capacity to fix this on my own. But I'm willing to sponsor development in case this helps to push this forward.