Nuxt•3w ago

PostCSS support for vscode inside Vue SFCs

Hi there! I've been fighting with getting <style scoped lang="postcss"> to work inside vscode 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: - https://github.com/vuejs/language-tools/issues/103 - https://github.com/vuejs/language-tools/issues/191 - https://github.com/vuejs/language-tools/issues/765 - https://github.com/csstools/postcss-language/issues/6 - https://github.com/csstools/postcss-language/issues/8 - https://www.answeroverflow.com/m/1319717318367907861 - https://github.com/vuejs/language-tools/discussions/5288 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

language-postcss - Visual Studio Marketplace

Extension for Visual Studio Code - PostCSS language support

GitHub

postcss(css-lcurlyexpected) error when using PostCSS · Issue #103 ...

Hi there and first of all, thanks for this project! I'm having some issues with using <style lang="postcss">. I have a Vue 3 project with TailwindCSS and when using @apply in co...

GitHub

PostCSS syntax highlighting is broken since v0.25.5 · Issue #191 ...

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 rem...

GitHub

Support for PostCSS nesting in .vue files · Issue #765 · vuejs/la...

Nested styles in single file components currently report an error: Setting lang="postcss" removes the errors but also removes syntax highlighting: Interestingly, the tooltips are are stil...

GitHub

Description says it is supported but I can't get it to work.

2 Replies

kapa.ai•3w ago

Hi @luksak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain information about improving or hacking VS Code extension support for PostCSS inside Vue SFCs, nor do they address integration with Volar or specific editor extension issues. The Nuxt documentation confirms that you can use <style lang="postcss"> in SFCs and configure PostCSS plugins in your nuxt.config.ts, but it does not provide guidance on editor tooling or VS Code extension compatibility for PostCSS syntax highlighting or IntelliSense within SFCs. The sources also do not mention workarounds or hacks for getting specific VS Code extensions (like vunguyentuan/vscode-postcss) to work with Volar or within Vue SFCs. If you need to configure PostCSS itself in Nuxt, you can do so as follows:

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {},
    },
  },
})

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {},
    },
  },
})

And use it in your SFC:

<style lang="postcss">
  /* Write postcss here */
</style>

<style lang="postcss">
  /* Write postcss here */
</style>

But for editor support, the knowledge sources do not provide a solution or workaround for your VS Code extension issues or Volar integration. You may need to follow the discussions and issues you linked for updates from the relevant extension maintainers or the Vue/Volar teams themselvesUsing PostCSS in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@744222048032784434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

PostCSS support for vscode inside Vue SFCs

Did you find this page helpful?