style tag in string literal causes incorrect `*{}` injection into template during dev

[ocavue]

Describe the bug

Given the following Svelte component

<main>
    <pre><code>{text}</code></pre>
</main>

<style>
  pre {
    color: green;
  }
</style>

<script lang="ts">
  let text = $state(`<style>Style3</style>`)
</script>

The *{} text (from compile.js#L67) is incorrectly injected into the app.

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-o39yk1ja

Reproduction

No response

Logs

N/A

System Info

N/A

[dominikg]

workaround1: move the <style> node to the end of the .svelte file. The recommended ordering is script-template-style.

<script lang="ts">
  let text = $state(`<style>Style3</style>`)
</script>

<main>
    <pre><code>{text}</code></pre>
</main>

<style>
  pre {
    color: green;
  }
</style>

workaround2: obfuscate the style tags in the string. This is recommended when working with literal script or style tags as otherwise svelte preprocess might pick them up too.

<script lang="ts">
  let text = $state(`<${'style'}>Style3</${'style'}>`)
</script>

<main>
    <pre><code>{text}</code></pre>
</main>

<style>
  pre {
    color: green;
  }
</style>

[ocavue]

workaround1: move the <style> node to the end of the .svelte file. The recommended ordering is script-template-style.

Yep, this is the obvious workaround. Just to be clear, I didn't encounter this issue in real apps. I just found it while exporting the source code of this repo.

[ocavue]

I took some time to look into this issue. Here is what I thought:

1. We might not need *{} injection hack anymore.

   This workaround was first added by @rixo in Improve CSS only HMR by applying scoping class to every element #1. In that pull request, Discord was mentioned. The only thing I can find is the screenshot below, and I cannot reproduce this issue in the after removing the *{} injection.

   

2. Even if we want to keep the *{} injection hack, it seems that the previous implementation based on PreprocessorGroup is more reliable (code link).

[dominikg]

The reason *{} is injected was to force the svelte compiler to attach the scoping class to every dom node of the template. This is to keep the js module stable even when you add or remove styles from the css, which could otherwise trigger the svelte compiler to add or remove a scope class from a node that is newly targeted or not targeted anymore.

The reason it was switched from preprocessor to the simple replace was that it is much simpler and avoids having a preprocessor. Modern svelte applications can be built without using any preprocessor, esp. since the svelte compiler understands typescript. If vite-plugin-svelte adds a preprocessor just for this, it causes a whole lot of code to run for everyone just because some user doesn't escape a literal style tag AND has template nodes ordered last in their component.

there's only one case i'm aware of where that happend sveltejs/kit#15183 , maybe @stephenlrandall can share their usecase?

[stephenlrandall]

@dominikg The workaround you described above with obfuscating the style tags was sufficient for me, since I could just build it in to the Markdown processor I’m using. You mention it being recommended — is that an official recommendation that’s documented somewhere? (Edit: Best I could find for such a recommendation: sveltejs/svelte#5292)