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

SASS syntax error: Identifier is expected svelte(css-syntax-error) #362

Closed
martonlederer opened this issue Jul 25, 2020 · 14 comments
Closed
Labels
bug Something isn't working

Comments

@martonlederer
Copy link

Describe the bug
When I run eslint, or use VSCode, I get the error Identifier is expected˙svelte(css-syntax-error) in the beginning of all components that use sass (<style lang="sass"></style>)
To Reproduce
Create a svelte component in a project with node-sass and sass and create a style tag with lang="sass". Write a basic style, for e.g.:

<style lang="sass">
  .Test
    display: block
</style>

Expected behavior
There should be no errors, since the style has the sass lang attr

Screenshots
image

System (please complete the following information):

  • OS: Manjaro Linux
  • IDE: VSCode
  • Plugin/Package: Svelte for VSCode, eslint
@martonlederer martonlederer added the bug Something isn't working label Jul 25, 2020
martonlederer added a commit to useverto/alpha-interface that referenced this issue Jul 25, 2020
TODO: fix sass in component linting error sveltejs/language-tools#362
@dummdidumm
Copy link
Member

SASS is unfortunately not supported at the moment, because the css language service we use does not support it. But we should at least somehow turn off all diagnostics to not show you these false errors.

@martonlederer
Copy link
Author

martonlederer commented Jul 26, 2020

Thank you. Yes that would be beneficial as eslint also picks up these errors

@jasonlyu123
Copy link
Member

I'm sorry to say. but we can't do much regarding eslint. eslint-plugin-svelte3 doesn't support preprocess. See here

@martonlederer
Copy link
Author

Thank you very much. I'm sad to see that I think that's an important part of a js library/framework

@dummdidumm
Copy link
Member

dummdidumm commented Jul 27, 2020

I cannot reproduce this using your code snippet. Turns out our language-server already should already turn off diagnostics for sass.

@dummdidumm
Copy link
Member

Maybe you still have the old extension installed? This one would certainly throw errors. How to remove: #372 .

@martonlederer
Copy link
Author

I have Svelte for VSCode if you're asking for that. The official new one. Re-installed two days ago

@dummdidumm
Copy link
Member

Did you install the old "Svelte" extension by James Birtles previously? If so, did you remove it?

@martonlederer
Copy link
Author

No I didn't :/ I only had the latest

@7antra
Copy link

7antra commented Aug 24, 2020

SASS is unfortunately not supported at the moment, because the css language service we use does not support it. But we should at least somehow turn off all diagnostics to not show you these false errors.

Do you think SASS will be supported in the future ?

@martonlederer
Copy link
Author

@7antra just a suggestion: try webstorm (with svelte plugin), it has sass support

dummdidumm added a commit that referenced this issue Aug 27, 2020
@dummdidumm
Copy link
Member

I don't think we will support SASS out of the box anytime soon. You can however tweak your setup to get proper syntax highlighting and get rid of the errors. See the docs for more info.

@dummdidumm
Copy link
Member

Another wild guess why this might happen: Maybe you did add "files.associations": {"*.svelte": "html" } to your VSCode settings so that Svelte files are treated as HTML files. If so, this settings needs to be removed. Also see https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#setup

@dummdidumm
Copy link
Member

Closing due to inactivity and since we cannot reproduce this.

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

4 participants