postcss(css-lcurlyexpected) error when using PostCSS

[sto3psl]

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.

[sto3psl]

I just installed a clean copy of VSCode with only Volar, no other extensions (not even PostCSS language support) and still get the same error.

[johnsoncodehk]

Currently postcss support is limited, postcss is recognized as loose scss, and @apply p-4 bg-neutral-50; broke scss ast, I will request upstream handle it because the syntax after the semicolon should not be affected.

You can use <!-- @vue-ignore --> for now, this will get the same result as vetur because vetur ignore all postcss diagnosis:

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

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

Related: microsoft/vscode-css-languageservice#232

[sto3psl]

Thanks for the quick reply @johnsoncodehk!

Is there a way to configure @vue-ignore for the whole project? I'd rather not add this to every file 😅.

[johnsoncodehk]

Maybe provide an option, but I want to avoid this way, let me think about it.

btw I just found you can put @apply after properties to avoid error for now:

.panel {
  min-height: var(--space-14);

  @apply p-4 bg-neutral-50;
}

Will it change postcss compile result? I don't know. 😅

[sto3psl]

Yeah it does. It basically puts all the apply rules after the min-height, order is important (like in CSS).

.panel {
  min-height: var(--space-14);

  @apply p-4 bg-neutral-50;
}

//compiled
.panel {
  min-height: var(--space-14);

  padding: 4px;
  background: #123;
}

Something like this.

Is there a way to let Volar always behave like it does with @vue-ignore instead of the opposite? Then users don't have to add it. When I understand it correctly that's what Vetur does (?). Are there any downsides with other languages like CSS, Less, SCSS?

---

Btw, I already added the comment to my files for now 😄

[johnsoncodehk]

Is there a way to let Volar always behave like it does with @vue-ignore instead of the opposite?

Currently we can't, it was conflict with volar design principles. But I will improve it by some way.

I understand it correctly that's what Vetur does

Yes.

Are there any downsides with other languages like CSS, Less, SCSS?

stylus, sass, postcss works limited. But css, less, scss works fine because it as reliable language support by vscode-css-languageservice.

stylus, sass only support auto-complete (with emmet) and syntax highlighting.
postcss support with scss language service but ignore some errors: https://github.com/johnsoncodehk/volar/blob/988fb927886d9291886e406f6ee0dcebc923c639/packages/vscode-vue-languageservice/src/utils/languageServices.ts#L15-L24

[johnsoncodehk]

I has make a temporarily patching in 0.22.21, because not sure vscode-css-languageservice will be fix soon.

[segevfiner]

I'm still seeing css-rcurlyexpected errors with v0.39.5 and VS Code 1.70.0. This should be reopened

[Darkzarich]

@segevfiner this extension might help https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss