<style> tag is emptied when javascript string contains <!-- * -->

[kristianvld]

So a bit of a strange one. If there is an html comment within the script tag, then the whole style tag is just deleted when formatting.

Example test.svelte:

<script>
	const abc = "<!-- javascript string -->";
</script>

<div>Hello there</div>

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

Output after formatting:

<script>
	const abc = "<!-- javascript string -->";
</script>

<div>Hello there</div>

<style></style>

As you can see, the style tag is just emptied. This seems to happen whenever the pattern <!--.*--> is within a script tag.

<script>
	const abc = "<" + "!-- javascript string -->";
</script>

<div>Hello there</div>

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

for instance works as expected and the style remains.

Personally tested with the svelte prettier plugin for vs code with auto formatting on save.

VS Code: 1.59.0
Svelte for VS Code v105.3.4

[Mlocik97]

I have same problem. doing something like ${'<'}!-- comment --> works fine, but it's similiar workaround as in #240 there is so a lot of bugs with prettier,...

[Mlocik97]

<script>
	const abc = "<style></style>";
</script>

<div>Hello there</div>

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

E: this gives same error. https://stackoverflow.com/a/236106 hmm, it seems JavaScript and HTML itself is buggy. You should probably escape Your HTML comment inside JS string...

so like this:

<script>
	const abc = "\<!-- javascript string --\>";
</script>

<div>Hello there</div>

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

this is correct and works as expected, but I see formating remove those escape character, and at second formating, it still remove CSS: lol... Same ugly behaviour for other 2 examples. Hmm...

[Mlocik97]

<script>
	const abc = "<style>";
</script>

<div>Hello there</div>

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

this give error: <script> must have a closing tagjs(-1)

[Mlocik97]

<script>
	const abc = "</script>";
</script>

<div>Hello there</div>
{abc}

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

give error </script> attempted to close an element that was not openjs(-1), and I see Svelte compiler fails on this code too. But I see, last one is https://stackoverflow.com/a/1659762 bug in javascript itself.