Stylus blocks are treated as CSS

Hey! 👋

Describe the bug I want to use stylus in my svelte components. Syntax highlighting is correct, but it seems the code is still treated as CSS. The code-completion is confused and I get a lot of errors regarding braces, like css(css-lcurlyexpected).

I followed this guide but that didn’t help and neither did disabling everything style-related in VS Code and the language tools.

It seems to me that the language tools don’t recognize stylus as a language yet.

To Reproduce

1. Install “Svelte for VS Code” extension (svelte.svelte-vscode)
2. Install “language-stylus” extension (sysoev.language-stylus)
3. Create new svelte file with <style lang="stylus"> tag

For example:

<style lang="stylus">
  div
    background #FFFFFF
    width 290px
</style>

Expected behavior

• No errors or stylus related errors.
• No syntax completion or stylus syntax completion.

I don’t necessarily need all language features within this block (although it would be nice), but the css errors make working with svelte and stylus really hard.

Screenshots

System (please complete the following information):

• OS: macOS
• IDE: VSCode
• Plugin/Package: sveltePreprocess and the others mentioned above

[JulianGaibler]

Yay, that did the trick! 🎉

I don’t know if you want to close this. IMHO some support for stylus would be nice, because svelte-preprocess supports it. But looking at veturs code, it seems adding full support for stylus might be comparatively complicated.

But maybe it’s possible to at least disable CSS language features, by as you said, adding ‘stylus’ here and add a check here as well, like:

if (shouldExcludeCompletion(kind)) {
    return null;
}

---

TL;DR for humans that get CSS errors when using stylus in VS Code:

"svelte.plugin.css.completions.enable": false
"svelte.plugin.css.diagnostics.enable": false

[dummdidumm]

Diagnostics and autocompletion is now turned off when lang="stylus".