MDsveX: Cannot use custom (preprocessed) syntax in mdsvex files

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>

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.

Oh well, that does seem to suck… Keep us updated. And great work so far!

Well I did almost all of the work (in the svelte-parse package in this repo) and now I need to do it all again because the remark APIs changed significantly.

I don’t have an eta on this but I am about to start actively working on it. Situation completely sucks but it is what it is sadly.

Thank you @jfcieslak! Until this is issue is fixed, it’s a great workaround.

@TheComputerM I’m running into a similar issue, and I think I’ve got a messy-but-potential workaround. It looks like you’re trying to use sveltePreprocess to do some css transforms. I was having issues with the same thing, specifically globalStyle and scss in my case. What I found is that those can be used in the project, just not directly in a file used as a layout. I was able to string this together to accomplish what I needed, maybe you can do something similar for now?

// rollup.config.js
import { mdsvex } from 'mdsvex'
import { globalStyle, scss } from 'svelte-preprocess'

const preprocess = [
	mdsvex({
		layout: {
			_: 'src/layouts/default.svelte',
	}),
	scss(),
	globalStyle()
]

// layouts/default.svelte

<script>
  import Styles from './styles.svelte'
</script>

<Styles />

<div>
  <slot />
</div>

// style.svelte

<style global type='text/scss'>
  $red: red;
  div {
    color: $red;
  }

  @import './test.scss';
</style>

// test.scss

$blue: blue; 

div {
  border: 1px solid green;
}

This works for me, I’m able to import a variable, apply it in a style tag, and set that style tag to apply globally, then import that into my layout. This should work for you postcss plugin, I’m not sure about includePaths.

A workaround for the TypeScript issue is to use JSDoc types:

<script>
  /** @type {import("$lib/types/blog").Post} */
  const post = { ...$$restProps };
</script>