Use an actual HTML parser: unexpected behavior around nested `<style>` / `script` tags

Obligatory https://stackoverflow.com/a/1732454/1422124

Took me a while to track this down, because prettier was also swallowing the error message (I’ll investigate and open an issue in the appropriate repo).

Essentially the offending code I had was something like this (adapted from https://github.com/rmariuzzo/react-new-window/blob/2417b08352f34f193cc5e69524379fb70ccecf5b/src/NewWindow.js#L195 for svelte):

<script>
  Array.from(document.styleSheets).forEach(styleSheet => {
    // For <style> elements
    let rules;
    try {
      rules = styleSheet.cssRules;
    } catch (err) {
      console.error(err);
    }
    if (rules) {
      //...
    } else if (styleSheet.href) {
      // for <link> elements loading CSS from a URL
      ...
    }
  });
</script>

<style>...</style>

<div>...</div>

The comment For <style> elements inside the JavaScript causes the regex based parser to think it’s a style tag.

Sure it’s an edge case, but it might be worth considering switching to an actual HTML parser. Maybe svelte core can be imported into this plugin? I’m sure they’re handling this already.

Thanks for the plugin by the way!

[dummdidumm]

Also causes this behavior:

Input:

{@html `<style class="block">
...
</style>`}

Output:

{@html `<style class="block ✂prettier:content✂="LmFuaW1hdGlvbk5hbWUgewogI..."></style>`}

Workaround: Hide it in a nested string.

{@html `<${'style'} class="block">
...
</style>`}

(from https://github.com/sveltejs/prettier-plugin-svelte/issues/59#issuecomment-643336817)

[tadeohepperle]

I also have this issue. Are there any news on this? How can I disable this behavior? It’s potentially fucking up code pretty badly that could end up in production, just by accidentally saving with prettier.