Unable to process scss with svelte-image - sass

Question

I would like to use scss with svelte and svelte-image but I got an error
(without svelte-image, everything works well)
the error:
CompileError [ParseError]: Colon is expected
code: 'css-syntax-error',
start: { line: 26, column: 6, character: 394 },
end: { line: 26, column: 6, character: 394 },
pos: 394,
filename: undefined,
frame: '24: z-index: 99;\n' +
'25: \n' +
'26: img {\n' +
' ^\n' +
'27: width: 100%;\n' +
'28: height: auto;'
here is my rollup config
import svelte from "rollup-plugin-svelte";
...
import scss from "rollup-plugin-scss";
import sveltePreprocess from "svelte-preprocess";
import image from "svelte-image";
...
export default {
...
plugins: [
svelte({
preprocess: [
sveltePreprocess({
scss: {
includePaths: ["src"],
},
postcss: {
plugins: [require("autoprefixer")],
},
}),
image({
optimizeAll: true,
publicDir: "./public/",
quality: 80,
}),
],
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
}),
scss({
output: "./public/build/bundle.css",
}),
...
],
};
I think it comes from the preprocessor order (markup then script then style)
Should I add the style into separated scss?

Answer 1

You have to run preprocessors sequentially because svelte-image uses svelte.parse() internally, so svelte-preprocess needs to be run before if any scss is present.
You can use https://www.npmjs.com/package/svelte-sequential-preprocessor and do something like this:
svelte({
preprocess: seqPreprocessor([ autoPreprocess(), image() ])
})