Run Svelte preprocessors in the sequence they are declared

00-svelte.config.js

// Example usage

import { sequence } from './sequence.mjs'
import cssModules from "svelte-preprocess-cssmodules";

export default {
  preprocess: sequence([sveltePreprocess(), cssModules()]),
}

01-sequence.mjs

import { preprocess } from 'svelte/compiler'

/**
 *
 * @typedef {import("svelte/types/compiler/preprocess").PreprocessorGroup} PreprocessorGroup
 * @param {PreprocessorGroup[]} preprocessors
 * @returns {PreprocessorGroup[]}
 */
export function sequence(preprocessors) {
  return preprocessors.map((preprocessor) => ({
    markup({ content, filename }) {
      return preprocess(content, preprocessor, { filename })
    },
  }))
}

03-index.svelte

<script>
  import App from "./_app.svelte";
</script>

<App class="xxx" />

<style module>
  .xxx {
    color: red;
  }
</style>

04-_app.svelte

<script lang="ts">
  let klass: string = "";
  export { klass as class };
</script>

<div class={klass}>hello</div>

I don't understand at all what you're doing in the first two scripts, but I want to wholeheartly thank you for this hack/workaround/solution.
It works exceptionally well and it let's us pass class attributes to components in a clean way.
Thank you very much for this contribution.