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:

<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

fix: patch postcss diagnostics https://github.com/johnsoncodehk/volar/issues/103 — committed to vuejs/language-tools by johnsoncodehk 3 years ago

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  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)

hriverahdez on May 8, 2023