not working with svelte-kit.

[ohbob]

terminal

mkdir combo3
cd combo3
npm init svelte@next
pnpx svelte-add scss
pnpx svelte-add tailwindcss
npm install -D svimg
npm install

svelte.config.js

import preprocess from 'svelte-preprocess';
import imagePreprocessor from 'svimg';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        imagePreprocessor({
            inputDir: "static",
            outputDir: "static/g",
            webp: true,
            avif: true,
        }),
        preprocess({
            "postcss": true
        }),
    ],
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
    }
};

export default config;
// Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem)
const mode = process.env.NODE_ENV;
const dev = mode === "development";
process.env.TAILWIND_MODE = dev ? "watch" : "build";

index.svelte

<script lang="ts">
  const hello: string = 'world';
  import Image from 'svimg'
</script>

<style lang="scss">
  section{
    @apply bg-red-50 p-3;
    p{
      @apply text-[brown] bg-blue-50 p-2 rounded;
    }
  }
</style>

<section>
  <p>hey yay</p>
</section>

<Image src="girls.jpg" />

<section>
  <p>yay hey {hello}</p>
</section>

[xiphux]

This sounds like sveltejs/svelte#4141 - markup is preprocessed before script or style tags are, so when the svimg preprocessor tries to parse the markup it chokes on the Typescript and SCSS syntax. It looks like there are some open pull requests to try to handle this more gracefully in svelte-preprocessor, but I might be able to (hackily) work around this in the svimg preprocessor. I'll give it a shot.