Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sto3psl opened this issue Mar 17, 2021 · 15 comments
Closed

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

sto3psl opened this issue Mar 17, 2021 · 15 comments
Labels
bug Something isn't working

Comments

@sto3psl
Copy link

sto3psl commented Mar 17, 2021

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.

@sto3psl
Copy link
Author

sto3psl commented Mar 17, 2021

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 johnsoncodehk added the bug Something isn't working label Mar 17, 2021
@johnsoncodehk
Copy link
Member

johnsoncodehk commented Mar 17, 2021

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
Copy link
Author

sto3psl commented Mar 17, 2021

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
Copy link
Member

johnsoncodehk commented Mar 17, 2021

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
Copy link
Author

sto3psl commented Mar 17, 2021

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
Copy link
Member

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
Copy link
Member

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

@segevfiner
Copy link
Contributor

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

@Darkzarich
Copy link

@segevfiner
Copy link
Contributor

Doesn't seem to help. And it is unmaintained. Maybe it isn't triggered for plain style blocks. (No lang)

@Darkzarich
Copy link

@segevfiner despite it being unmaintained it works for now
Volar said they won't natively support PostCSS due to technical reasons so we have the only option
Not sure why it doesn't work for you though
image

@segevfiner
Copy link
Contributor

It seems to require lang="postcss" but our code base isn't using that. I wonder if Volar could integrate with the maintained postcss extension to make it work.

@johnsoncodehk
Copy link
Member

@segevfiner I'm open with this, you can open feature request.

@tmlmt
Copy link

tmlmt commented Mar 17, 2023

Has anyone managed to make it work with vscodium? I suppose it should work the same as vscode, but it doesn't work on my system.

@hriverahdez
Copy link

hriverahdez commented May 8, 2023

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants