Cannot use custom (preprocessed) syntax in mdsvex files

I tried to use SCSS in my layout svelte file and it gave me the error:

(node:14140) UnhandledPromiseRejectionWarning: ParseError: Colon is expected
    at error$1 (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:15595:20)
    at Parser$1.error (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:15671:10)
    at Object.read_style [as read] (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:11997:21)
    at tag (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:14737:34)
    at new Parser$1 (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:15630:22)
    at Object.parse$3 [as parse] (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\svelte\compiler.js:15761:21)
    at process_layouts (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\mdsvex\dist\main.cjs.js:25708:26)
    at Object.mdsvex (D:\Mudit and Harshit\Projects\svelte-materialify\site\node_modules\mdsvex\dist\main.cjs.js:25799:12)
    at Object.<anonymous> (D:\Mudit and Harshit\Projects\svelte-materialify\site\rollup.config.js:32:10)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)

But when I removed the lang attribute from my style tag and used CSS instead of SCSS, it showed no errors and worked fine.

[michaeloliverx]

I hit an error while trying to use typescript in my layout files like this:

<script lang="ts">
  export let title: string;
</script>

<div class="mt-8 mx-auto prose">
  <h1>{title}</h1>
  <slot />
</div>

[jfcieslak]

A rather simple workaround to this that seems to do the job well, is to wrap your actual Layout in another “plain” svelte component, that only passes down frontmatter props. Apprently whatever is imported into layout file is still correctly preprocessed. E.g.:

<!-- WrappedLayout.svelte -->
<script lang="ts">
	import Layout from './Layout.svelte'
	export let someProp = ''
</script>

<Layout {someProp}>
	<slot />
</Layout>

The above will work just fine even if Layout.svelte is written in typescript or needs other preprocessors.