@html nested style content is being replaced with ✂prettier:content✂ + ignore not working

[codingwithchris]

Hello there! I'm trying to use the @html template syntax to server render styles in my svelte-kit application. I have prettier auto-fix configured on save.

My code block is as follows:

<script lang="ts">
	import { getCssText } from '@stitches/core';
</script>

<svelte:head>
	{@html `<style>${getCssText()}</style>`}
	<meta name="google-site-verification" content="" />
</svelte:head>

<slot />

When I save the file, my code block, the code inside of svelte:head is altered to the following:

<svelte:head>
	{@html `<style ✂prettier:content✂="JHtnZXRDc3NUZXh0KCl9"></style>`}
	<meta name="google-site-verification" content="" />
</svelte:head>

The above issue seems to be the same as #240

I have attempted to use a prettier ignore to bypass this issue temporarily, but nothing I am trying is working and the file is still being autoformatted on save. This issue seems to be the same as #59

I've tried the following:

<svelte:head>
        <!-- prettier-ignore -->
	{@html `<style>${getCssText()}</style>`}
	<meta name="google-site-verification" content="" />
</svelte:head>

<!-- prettier-ignore -->
<svelte:head>
	{@html `<style>${getCssText()}</style>`}
	<meta name="google-site-verification" content="" />
</svelte:head>

My prettier & svelte dependencies with Node 16.13.2

"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.47.0",

Any insight would be much appreciated :)

[TheHadiAhmadi]

Hi, I have same problem but without @html

<pre class="p-2">
{`<script ✂prettier:content✂="CiAgaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSAnc3ZpbmQnCgo=">{}</script>

<Button>Hello World!</Button>
`}
</pre>

[andrey-pavlenko]

I confirm the problem. My component

Test.svelte

<script lang="ts">
  import { HighlightSvelte } from 'svelte-highlight';
  import 'svelte-highlight/styles/atom-one-dark.css';
</script>

<section>
  <div>
    <span>Hello</span>
    <span>World</span>
  </div>

  <HighlightSvelte
    code={`<div>
  <span>Hello</span>
  <span>World</span>
</div>

<style lang="postcss">
  div {
    @apply text-red-500;
  }

  span {
    @apply text-blue-500;
  }
</style>`}
  />
</section>

<style lang="postcss">
  div {
    @apply text-red-500;
  }

  span {
    @apply text-blue-500;
  }
</style>

becomes

<script lang="ts">
  import { HighlightSvelte } from 'svelte-highlight';
  import 'svelte-highlight/styles/atom-one-dark.css';
</script>

<section>
  <div>
    <span>Hello</span>
    <span>World</span>
  </div>

  <HighlightSvelte
    code={`<div>
  <span>Hello</span>
  <span>World</span>
</div>

<style lang="postcss" ✂prettier:content✂="CiAgZGl2IHsKICAgIEBhcHBseSB0ZXh0LXJlZC01MDA7CiAgfQoKICBzcGFuIHsKICAgIEBhcHBseSB0ZXh0LWJsdWUtNTAwOwogIH0K"></style>`}
  />
</section>

<style lang="postcss">
  div {
    @apply text-red-500;
  }

  span {
    @apply text-blue-500;
  }
</style>

svelte.config.js

import sveltePreprocess from 'svelte-preprocess';

export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess()
};

.prettierrc

{
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100
}

[andrey-pavlenko]

Workaround

Test.svelte

<script lang="ts">
  import { HighlightSvelte } from 'svelte-highlight';
  import 'svelte-highlight/styles/atom-one-dark.css';
</script>

<section>
  <div>
    <span>Hello</span>
    <span>World</span>
  </div>

  <HighlightSvelte
    code={`<div>
  <span>Hello</span>
  <span>World</span>
</div>

<${'style lang="postcss"'}>  <=== HERE ===
  div {
    @apply text-red-500;
  }

  span {
    @apply text-blue-500;
  }
</style>`}
  />
</section>

<style lang="postcss">
  div {
    @apply text-red-500;
  }

  span {
    @apply text-blue-500;
  }
</style>