Error in svelte.config.js and Error: Identifier is expected in scss style tag - Svelte

Question

I'm getting the following error in some of my .svelte files that contain <style lang="scss"> tags.

Error in svelte.config.js

Error: Identifier is expected (23:9)
21:         flex-direction: column;
22:         align-items: center;
23:         * {
             ^
24:             padding: 0 0 1rem 0;
25:             width: 50vw;

The error always points to the same file, /src/routes/blog/_blog.svelte, which is the layout file for mdsvex. I would just ignore the error as the page works without issue otherwise, but the error prevents me from running the dev server, building, or previewing. I can get around the issue by removing the offending style tag, starting the server, and then adding it back. After uncommenting it and saving the page loads fine and the server doesn't error.

The offending style tag is:

<style lang="scss">
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        * {
            padding: 0 0 1rem 0;
            width: 50vw;
            :global(p) {
                padding-bottom: 1rem;
            }
            :global(blockquote) {
                margin: .5rem 0 1rem 1rem;
                padding: 1rem .5rem 0 1rem;
                border-left: 2px solid $orange;
            }
            :global(ul) {
                margin-top: .5rem;
            }
            :global(li) {
                margin-left: 1.5rem;
            }
            :global(code) {
                font-family: 'Courier New', Courier, monospace;
                background-color: $bg-secondary;
                padding: .25rem;
                border-radius: 5px;
            }
            :global(pre) {
                font-family: 'Courier New', Courier, monospace;
                background-color: $bg-secondary;
                padding: .25rem;
                border-radius: 5px;
                max-width: fit-content;
                margin-bottom: .5rem;
            }
            :global(img) {
                max-width: 50vw;
            }
        }
        h1,h2,h3 {
            padding-bottom: 0;
        }
    }
</style>

My svelte.config.js is:

import adapter from '@sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess';
import { mdsvex } from 'mdsvex'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    },

    extensions: ['.svelte', '.md'],
    
    preprocess: [
        sveltePreprocess({
            scss: {
                prependData: `@import './src/style/app.scss';`
            } 
        }),
        mdsvex({
            extensions: ['.md'],
            layout: {
                blog: 'src/routes/blog/_blog.svelte'
            }
        })
    ],

};
export default config;

My versions are:

svelte: v3.46.4

svelte-preprocess: v4.10.4

sass: v1.49.9

mdsvex: v0.10.5

Answer 1

This is related to MDsveX issue:116 as pointed out by Bob Fanger. The current workaround is to "wrap your actual Layout in another 'plain' svelte component, that only passes down frontmatter props" (from jfcieslak in the GH thread).

The new files are:

svelte.config.js

...
preprocess: [
        sveltePreprocess({
            scss: {
                prependData: `@import './src/style/app.scss';`
            } 
        }),
        mdsvex({
            extensions: ['.md'],
            layout: {
                blog: 'src/routes/blog/blogLayout.svelte'
            }
        })
    ],
...

blogLayout.svelte

<script lang="ts">
    import Layout from './_blog.svelte'
    export let title
    export let date
</script>

<Layout title={title} date={date}>
    <slot />
</Layout>

_blog.svelte is unchanged.