Cannot use self-closing <style /> or <script /> tags

[vgpechenkin]

I try to run format svelte files but have an error

[error] lobby\Armory.svelte: Expected > [error] > 1 | <style type="text/scss" src="./Armory.scss"/><script ✂prettier:content✂="CgogICAgaW1wb3J0IFN0YXRCYXIgZnJvbSAnLi9TdGF0QmFyLnN2ZWx0ZSc7CiAgICBpbXBvcnQgQXJtb3J5U2xvdCBmcm9tICcuL0FybW9yeVNsb3Quc3ZlbHRlJzsKCiAgICBsZXQgc3Rhd HMgPSBbCiAgICAgICAgeyBuYW1lOidEYW1hZ2UnLCBwcm9ncmVzczo1MCwgZGlmZjo2MCB9LAogICAgICAgIHsgbmFtZTonUmFuZ2UnLCBwcm9ncmVzczozMCwgZGlmZjozNSB9LAogICAgICAgIHsgbmFtZTonUmF0ZSBvZiBmaXJlJywgcHJvZ3Jlc3M6NjAsIGRpZmY6NTAgfSwKICAgICAgICB7IG5hbWU6J 0FpbSBhY2N1cmFjeScsIHByb2dyZXNzOjIwLCBkaWZmOjQwIH0sCiAgICAgICAgeyBuYW1lOidIaXAgQWNjdXJhY3knLCBwcm9ncmVzczo3MCwgZGlmZjo3MCB9LAogICAgICAgIHsgbmFtZTonQW1tbyBjYXBhY2l0eScsIHByb2dyZXNzOjQwLCBkaWZmOjEwIH0sCiAgICBdOwoKICAgIGxldCBzbG90cyA9I FsKICAgICAgICB7IH0sCiAgICAgICAgeyBuYW1lOidBcGVydHVyZSBTaWdodCcsIGltYWdlOicvYnVpbGQvYXNzZXRzL3NpZ2h0cy9hcGVydHVyZS5wbmcnIH0sCiAgICAgICAgeyBsb2NrZWQ6dHJ1ZSB9LAogICAgICAgIHsgbG9ja2VkOnRydWUgfSwKICAgICAgICB7IGxvY2tlZDp0cnVlIH0sCiAgICBdO woK">{}</script><div class="armory">

I use
"prettier": "^2.2.1",
"prettier-plugin-svelte": "^2.1.1",

[dummdidumm]

The Svelte compiler does not support self-closing style / script tags and will throw an error. As a result, the Svelte AST cannot be generated and therefore the formatting fails. There are two options:

• Support self-closing tags in the Svelte parser itself. This would also solve Support for self-closing tags language-tools#299
• Adjust the preprocessor of prettier-plugin-svelte to deal with this and transform that tag into <script ..></script>

I prefer the first option. @Conduitry is there something that speaks against implementing this inside the parser?

In the meantime, do <style src="..."></style> instead of <style src="..." />

[vgpechenkin]

@dummdidumm thanks. It works.

[mataslib]

@dummdidumm

I have run into the same issue, however not due to self-closing tag.

// Test.svelte
<script>
    ...
    $: containerStylesHtml = `<style>${containerStyles}</style>`;
</script>

Run cmd, or "Format document" action in vscode when svelte plugin installed:

npx prettier --write --plugin-search-dir=. ./**/*.svelte

Results in:

  $: containerStylesHtml = `<style ✂prettier:content✂="JHtjb250YWluZXJTdHlsZXN9"></style>`;

Workaround escape style closing tag like so: :/

$: containerStylesHtml = `<style>${containerStyles}<\/style>`;

[wiesson]

I have the same error if I select something in Webstorm and then run the format code:

Screen.Recording.2021-04-19.at.15.04.10.mov

[dummdidumm]

@mataslib this issue is tracked in #219
@wiesson without a reproducible code snippet I can't do much. Also it seems like you want to format sections of the file, not the whole file, not sure how that plays out. Either way, this seems unrelated to the original issue which is about supporting <script .. />. Please open a separate issue.

[dummdidumm]

Closing for housekeeping reasons. The original issue was "works as designed"/"svelte compiler limitation", the other issues were unrelated.