language-tools: postcss(css-lcurlyexpected) error when using PostCSS

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 combination with normal CSS rules, I get an error postcss(css-lcurlyexpected).

Example code: image

<style lang="postcss" scoped>
.panel {
  @apply p-4 bg-neutral-50;

  min-height: var(--space-14);
}
</style>

This does not happen in .css files or in any other project. Only when using Vue 3 and Volar. Does anyone have an idea why that is happening?

Volar Version: 0.22.16 VSCode Version: 1.54.3

Some VSCode settings I have:

  "volar.style.defaultLanguage": "postcss",
  "stylelint.enable": true,
  "tailwindCSS.validate": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

It doesn’t matter though If I toggle these, the error still appears.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (8 by maintainers)

Commits related to this issue

Most upvoted comments

I have a different use case, I’m using a postcss mixin but in the project Tailwind is not used, so I would be ok with simply having a way to ignore a single line, so that the file is not flagged red by the editor as having a problem.

Is there a way to do this? I tried the <!-- @vue-ignore --> approach but that doesn’t seem to do anything (I also want to know if it’s possible to simply ignore that line, but not the whole style block)