<style></style> in comment results incorrect output

[JounQin]

source:

<!-- <style>
.foo {
  background-image: url("x");
}
</style> -->

<style lang="scss">
.foo {
  background-image: url("x");
}

$map: (
  'alpha': 10,
  'beta': 20,
  'gamma': 30
);
</style>

<span>Hi</span>

result:

<span>Hi</span>

<!-- <style ✂prettier:content✂="Ci5mb28gewogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgieCIpOwp9Cg=="></style> -->
<style lang="scss">
  .foo {
    background-image: url('x');
  }

  $map: (
    'alpha': 10,
    'beta': 20,
    'gamma': 30
  );
</style>

[dummdidumm]

We need to adjust this regex to account for comments.

[JounQin]

Besides, if there are two style tags, the error message is not original text which is very confusing:

test/fixtures/check.inert.svelte
[error] test/fixtures/check.inert.svelte: You can only have one top-level <style> tag per component
[error]   1 | <style ✂prettier:content✂="CiAgLmZvbyB7CiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ3gnKTsKICB9Cg=="></style>
[error]   2 | 
[error] > 3 | <style lang="scss" ✂prettier:content✂="CiAgLmZvbyB7CiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ3gnKTsKICB9CgogICRtYXA6ICgKICAgICdhbHBoYSc6IDEwLAogICAgJ2JldGEnOiAyMCwKICAgICdnYW1tYSc6IDMwLAogICk7Cg=="></style>
[error]   4 | 
[error]   5 | <span>Hi</span> (3:0)
[error] 1: <style ✂prettier:content✂="CiAgLmZvbyB7CiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ3gnKTsKICB9Cg=="></style>
[error] 2: 
[error] 3: <style lang="scss" ✂prettier:content✂="CiAgLmZvbyB7CiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ3gnKTsKICB9CgogICRtYXA6ICgKICAgICdhbHBoYSc6IDEwLAogICAgJ2JldGEnOiAyMCwKICAgICdnYW1tYSc6IDMwLAogICk7Cg=="></style>
[error]    ^
[error] 4: 
[error] 5: <span>Hi</span>

[JulianvonGebhardi]

I just came across this problem myself. I hope it gets fixed soon. Currently, its messing up any regex pattern which includes the style tag.

[dummdidumm]

That's #70 . Accounting for html comments is a special case of that but easier to handle.

[kmcfate]

This isn't just style tags in comments. Any comments cause problems:

This:

<script>
  import * as fs from 'fs';
  // some long test comment to see if this breaks
</script>

Results in:

<script>
  import * as fs from 'fs'; ;
  // some long test comment to see if this br
</script>

Note the extra semicolon and truncation.

Edit: This happens only in combination with import-sort and svelte.

[dummdidumm]

This is a separate issue, please open a new issue for that with more details on now to reproduce