Multiple preprocessors, doesn't get parsed content from previous preprocessor

[atwoodhouse]

Thanks for an amazing framework that surely will take over the world in the years to come!

I'm writing my first Svelte (Sapper) project and want to use two great preprocessors combined:

• @kazzkiq/svelte-preprocess-scss
• svelte-image

In my rollup.config.js I've defined the preprocess pipeline as such:

preprocess: [ { style: scss() }, { ...image({ placeholder: 'trace' }) } ]

svelte-image uses svelte.process() to parse the content, but fails to do so because unparsed scss remains in the content it receives, even though it's after the scss preprocessor in the pipeline.

Have I misunderstood how the Svelte preprocessor pipeline should be defined, or is this a bug in Svelte?

Here's a minimal example of the issue: https://github.com/atwoodhouse/example-svelte-multiple-preprocessors

[ghost]

@atwoodhouse,

Hi, so there's actually two one things going on...

Markup plugins are run first (which is what svelte-image is), regardless of the order in the array.
So if you use sass inside any html tags, you're going to have a bad day because those will get processed first.

Bah! Nevermind about the space in the file... this stupid laptop keyboard causes cursor to jump all over the place and I inserted the space in the config file 🤦‍♂️

[ghost]

Oh, and
you should be using the main project from here:
https://github.com/ls-age/svelte-preprocess-sass

The fork you're using is abandoned and really didn't do anything special.
You'll have to tweak your rollup-config... see the readme of the official project.

[atwoodhouse]

Thank you for your quick response, @dkondrad! And thanks for the tip about using svelte-preprocess-sass instead, I've exchanged it in my example repo.

But the core problem remains: how would one combine a style preprocessor with a markup preprocessor? If the markup always runs first it will try to parse Svelte code that isn't valid.

Wouldn't it make more sense for Svelte to simply run the preprocessors in the order we provide?

Does anyone know of a workaround to use both svelte-preprocess-sass and svelte-image?

[Conduitry]

The markup processors in general need to run first, because if your component is written in Pug or something, there won't even be <script> or <style> tags to look for. But I can see why that's not desirable in your case. I'm not sure what the proper eventual solution here is (and any changes to this would be breaking anyway). For now I would suggest that you write a single markup preprocessor that simply calls the svelte-preprocess-sass one manually (using the compile-time API) and then sends the output of that into the svelte-image one.

[atwoodhouse]

I kept discussing this issue with matyunya, author of svelte-image, and we thought it would be cool to be able to fully set the order of preprocessors when passing them to rollup-plugin-svelte.

He wrote a fixed version of rollup-plugin-svelte (https://github.com/matyunya/rollup-plugin-svelte) where you can pass orderPreprocessors: true and it will actually apply the preprocessors in the order they're being passed.

The prop orderPreprocessors should maybe be renamed to something more suitable, but this should definitely be applied to rollup-plugin-svelte.

Hope it can get merged. For now I'll be using matyunya's fork.

EDIT: The example repo (https://github.com/atwoodhouse/example-svelte-multiple-preprocessors) is updated to use matyunya's fork of rollup-plugin-svelte, if anyone wants to see it work in action.

[tanhauhau]

@atwoodhouse the order of preprocessor is sorted, you can refer to the docs https://svelte.dev/docs#svelte_preprocess

[atwoodhouse]

Yes, that's what I meant with that the option "orderPreprocessors" is a bit counter-intuitive and should be renamed. The purpose is to tell rollup-plugin-svelte not to reorder the preprocessors.
A better name could be strictOrder: true or reorder: false (with true being the default).

What we want to achieve is the possibility to not sort the order of the preprocessors but let the user (ie coder) set the exact order that the preprocessors will be applied. So that it's possible to first run a style preprocessor and then run a markup preprocessor afterwards.

See PR 86 for rollup-plugin-svelte: sveltejs/rollup-plugin-svelte#86