Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svelteSortOrder: 'none' deletes <style> tags unless followed by HTML comment. #472

Closed
andreasputlitz opened this issue Nov 12, 2024 · 4 comments

Comments

@andreasputlitz
Copy link

andreasputlitz commented Nov 12, 2024

I first realized this issue through this phenomenon:

If you add a #region tag after the markup, but don't add an #endregion tag after that, and you have a <style> tag at the end of the page, everything after the last HTML tag will be erased, including the style tag and any comment after the last HTML tag.

I was adding #region markers to my page-files, and all of my style-tags have disappeared from the pages.

This is fine:

<!-- #region MARKUP -->
<body></body>
<!-- #endregion -->

<!-- #region STYLES -->
<style></style>
<!-- #endregion -->

But this:

<!-- #region MARKUP -->
<body></body>
<!-- #endregion -->

<!-- #region STYLES -->
<style></style>

Will be formatted to this:

<!-- #region MARKUP -->
<body></body>

Effectively erasing the styles. Happened to me on all of my pages.

@dummdidumm
Copy link
Member

Please provide a code example. If you use triple back tick (` repeated three times) you can paste whatever you want in there and it's preserved:

<!-- hello -->
# region
bla

@andreasputlitz
Copy link
Author

andreasputlitz commented Nov 12, 2024

Just realized it is actually different (but worse?). Apparenty ALL style tags get erased (now that I have set svelteSortOrder: 'none') unless they are followed by a comment. It seems to have nothing to do with the #region tags.

Because also this:

<body></body>
<style></style>

Will be formatted to this:

<body></body>

But this:

<body></body>
<style></style>
<!--  -->

...will persist.

It doesn't matter if the style-tags contain code. This is how I found out, because after setting svelteSortOrder: 'none' all of a sudden my entire app was without styles.

@andreasputlitz andreasputlitz changed the title svelteSortOrder: 'none' conflicts with #region tags and deletes all <style> tags svelteSortOrder: 'none' deletes <style> tags unless followed by HTML comment. Nov 12, 2024
@andreasputlitz
Copy link
Author

andreasputlitz commented Nov 12, 2024

Btw, different issue, but the reason why I set svelteSortOrder: 'none' in the first place, is because if you have a sort order defined (or at least with the default one), it doesn't allow for HTML comments after the script tags, which was conflicting with my use of #region-#endregion tags.

My use case is: in long components, I would like to wrap my logic, markup, and style in those region-tags, so I can fold them away. But the very last #endregion tag (which has to be inside of a comment) would always be moved before the style-tags by svelte-prettier. Probably because it thinks that the comment is part of the markup, which is supposed to go before the style-tags. If you could change that behaviour - e.g. so that it ignores comments in the sort-order - I would gladly refrain from setting svelteSortOrder: 'none'.

dummdidumm added a commit that referenced this issue Nov 22, 2024
@andreasputlitz
Copy link
Author

Thanks 👍🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants