I would like Pug support, and also Stylus

[BatsShadow]

My current tech stack is Angular + Pug + Stylus. I would like to explore moving to Svelte, but it would be infeasible for me to move off of Pug. Stylus is a nice bonus too.

I believe I was able to get the preprocessor to do what I needed, but the lack of decent VSCode support was a deal breaker. I'm super glad this project is taking off!

In summary: please add some sort of pug and stylus support to the language processor and vscode. Thanks!

[dummdidumm]

Both are supported through https://github.com/sveltejs/svelte-preprocess. You need to setup a svelte.config.js for that - see the docs of Svelte plugin beta for more info. Or is there something more advanced you desire support for?

[dummdidumm]

Revising my comment a little: Both are supported through svelte-preprocess, but the intellisense support of Svelte Beta (the plugin, not the build config) is not very good. Stylus preprocessor support is there, but it may be that you don't get the syntax highlighting that you desire. template preprocessor support is missing completely at the moment, so no pug.

So what definetely should be done is to add that some basic template preprocessor support. But on how far to go with the intellisense, I'm not sure at this point, it might just get too many things at once to support, especially if there are not ready-to-use language servers around.

[vaaski]

I'm having a similar issue, my compilation with stylus works fine, but formatting in vscode doesn't work. It seems to be trying to use prettier to format the code, but afaik prettier doesn't have support for stylus.

Coming from Vuejs, it worked fine with the Vetur extension.

I initially thought that the svelte extension treats the stylus style block as normal css, but that doesn't seem to be the case. Compared to not including lang="stylus"

But upon trying to format, it prints Using Prettier v2.0.5 from *path* followed by some json and Error: unknown node type: Style into the Svelte output console.

{
    "type": "Style",
    "start": 69,
    "end": 152,
    "attributes": [
        {
            "start": 76,
            "end": 89,
            "type": "Attribute",
            "name": "lang",
            "value": [
                {
                    "start": 82,
                    "end": 88,
                    "type": "Text",
                    "raw": "stylus",
                    "data": "stylus"
                }
            ]
        }
    ],
    "children": [],
    "content": {
        "start": 144,
        "end": 144,
        "styles": "",
        "type": "StyleProgram"
    }
}

It behaves the same regardless of using a svelte.config.js like this or a modified version of this

I also just now realized that this could be related to sveltejs/prettier-plugin-svelte#55

[Enteleform]

Is it possible to provide IntelliSense for components and their attributes in Pug?

It seems that IntelliSense is working for interpolated values (see: Hello {name}) in Pug syntax, but components/attributes are not detected unless using HTML syntax. The following example is functional & renders as expected, but demonstrates the lack of IntelliSense.

[theoephraim]

👍 Would also love to see pug + typescript / intellisense support.

Any pointers on how things are working currently and how/where to pitch in to help make this happen?

[trylks]

I have seen that Vue volar has support for Stylus syntax highlighting. I could not understand how to integrate their magic to make a pull request (just importing the highlighting from somewhere else). I hope this helps: https://github.com/vuejs/language-tools/search?q=stylus