ParseError: Unexpected end of input

[brgrz]

Describe the bug

Compilation error ParseError: Unexpected end of input happens when you have a Svelte component with the following contents:

<script lang="ts">
	import '../app.css';
</script>

<!-- <style lang="scss"> -->
<style>
    /* :global {
		@import './lib/shared/drawer/Drawer.css';
	} */

	:global(body) {
		padding: 1rem;
	}

</style>

The issue here is the commented line <!-- style lang="scss"> -->. If this line is removed compilation error is gone.

I often comment out parts of markup when working and continously run into this issue.

Reproduction

<script lang="ts"> import '../app.css'; </script> <style> :global(body) { padding: 1rem; } </style>

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) ia32 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 3.61 GB / 15.78 GB
  Binaries:
    Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
    npm: 7.22.0 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    svelte: ^3.43.1 => 3.43.1

Severity

annoyance

[rmunn]

Almost certainly related to Svelte's use of regexes for finding things like the <script> and <style> tags. See #6844 which was also caused by a regex in the Svelte compiler, and sveltejs/kit#2742 (comment) where @Conduitry was pondering switching away from regexes to a proper HTML parser. That would be slower, but the speed penalty would only be paid at compile-time and wouldn't affect the speed of the compiled code.

[Conduitry]

That SvelteKit issue was specifically about using an HTML parser on SSR'd output (which actually is HTML and not Svelte component source) for the purposes of crawling an app for static rendering, and I don't think it's really related to this issue. I don't think we want to be trying to parse Svelte components with an HTML parser.

This issue does seem related to the one addressed in #3894 but I haven't poked around at what the difference in the two situations is.

[bluwy]

May be fixed by #6611, but I believe we may need to break up that PR before the feature/fix gets in.

[suman-kr]

Svelte uses HTML comment syntax for tags. And the parser fails for the given regex. There should be a fix on the regex level or change the comment style to JS syntax comments for svelte components.

[AriPerkkio]

I have a similar error which is likely caused by same root cause. As this example isn't triggered by a comment I think it's worth to mention here:

<script lang="ts">
    import CodeMirror from './CodeMirror.svelte';

    const code = `<style>\n  \n</style>`;
</script>

<CodeMirror {code} />

/<path>/src/lib/StyleEditor.svelte:1:1: Unknown words

A work-around is to trick the compiler a bit:

<script lang="ts">
    import CodeMirror from './CodeMirror.svelte';

    // Svelte seems to break if style tag is written in string literal directly
    const code = '<' + `style>\n  \n</style>`;
</script>

<CodeMirror {code} />