my code is replaced with ✂prettier:content✂ #240

Mlocik97 · 2021-07-31T21:04:18Z

I still have this problem, with for example this kind of code:

{@html `<style>
        body { background-color: ${bg_col}; }
    </style>`}

it's replaced for:

{@html `<style ✂prettier:content✂="CgkJYm9keSB7IGJhY2tncm91bmQtY29sb3I6ICR7bWYuYmFja2dyb3VuZF9jb2xvcn07IH0KCQ=="></style>`}

tried even comment above {@html ...}, but still it was transforming it to that ugly prettier:content thing.

https://www.youtube.com/watch?v=lHK66Y06OoE

@dummdidumm

Originally posted by @Mlocik97 in #59 (comment)

Mlocik97 · 2021-08-13T11:13:11Z

so #130 didn't fix it.

navorite · 2021-08-15T18:17:12Z

I have the same issue as well when using this code:

<iframe
    class="content"
    id="inlineviewer"
    title="Inline Viewer"
    name="Inline Viewer"
    srcdoc={`<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'/>
    <title>Inline Viewer</title>
    <style></style>
  </head>
  <body>
  </body>
</html>`}/>

It produces:

<iframe
    class="content"
    id="inlineviewer"
    title="Inline Viewer"
    name="Inline Viewer"
    srcdoc={`<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'/>
    <title>Inline Viewer</title>
    <style ✂prettier:content✂=""></style>
  </head>
  <body>
  </body>
</html>`}/>

And when attempting to escape the style tag using <style><\/style> it gives me the following error on <!DOCTYPE html>: Unterminated template

dummdidumm · 2021-08-27T07:59:10Z

Duplicate of #70

codingwithchris · 2022-04-11T23:21:51Z

@dummdidumm This issue still exists as of:

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

Example:

Input

import { getCssText } from '@tokens';
<svelte:head>
	{@html `<style>${getCssText()}</style>`}
</svelte:head>

Output

import { getCssText } from '@tokens';
<svelte:head>
    {@html `<style ✂prettier:content✂="JHtnZXRDc3NUZXh0KCl9"></style>`}
</svelte:head>

bjornarhagen · 2022-10-31T14:34:29Z

Using version 2.8.0 I'm getting this:

Original:

{'<script></script>'}
{`<script></script>`}

Formatted:

{'<script ✂prettier:content✂="">{}</script>'}
{`<script ✂prettier:content✂="">{}</script>`}

justingolden21 · 2023-03-22T05:35:31Z

My code:

{@html `<script type="application/ld+json">${JSON.stringify(({
	"@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Desktop Clock"
    "url": '"'+appURL+'"',
}))}

is replaced with:

{@html `<script type="application/ld+json" ✂prettier:content✂="JHtKU09OLnN0cmluZ2lmeSgoewoJIkBjb250ZXh0IjogImh0dHBzOi8vc2NoZW1hLm9yZyIsCiAgICAiQHR5cGUiOiAiV2ViU2l0ZSIsCiAgICAibmFtZSI6ICJEZXNrdG9wIENsb2NrIgogICAgInVybCI6ICciJythcHBVUkwrJyInLAp9KSl9Cgk=">{}</script>`}

justingolden21 · 2023-07-14T01:38:33Z

Happening in July 2023...

Simple reproducible example in a svelte file conditionally rendering SVGs:

<script>
    export let name;
</script>
{#if name === 'sunlight'}
	<!-- prettier-ignore -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423.9 590.2">
        <circle class="fill-accent-500" cx="65.8" cy="65.8" r="65.8" />
   </svg>
{:else if name === 'time'}
	<!-- prettier-ignore -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 675.67 631.95">
        <style>
            .st0{fill:#94A3B8;} /*400*/
        </style>
            <circle cx="166" cy="508.87" r="17"/>
        </svg>
{/if}

Is replaced with:

<script>
	export let name;
</script>

{#if name === 'sunlight'}
	<!-- prettier-ignore -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423.9 590.2">
        <circle class="fill-accent-500" cx="65.8" cy="65.8" r="65.8" />
   </svg>
{:else if name === 'time'}
	<!-- prettier-ignore -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 675.67 631.95">
        <style ✂prettier:content✂="CiAgICAgICAgICAgIC5zdDB7ZmlsbDojOTRBM0I4O30gLyo0MDAqLwogICAgICAgIA=="></style>
            <circle cx="166" cy="508.87" r="17"/>
        </svg>
{/if}

devpikachu · 2023-07-14T17:48:38Z

Can confirm, this is still happening

digvijayad · 2023-07-16T00:35:35Z

For me the issue because of PhpStorms Reformat code or Optimize Imports options.

I disabled those from my git commit checks and am using either the PhpStorm Prettier plugin's Run-on-save option or Ctrl+Shift+Alt+P - Reformat with Prettier

intzaaa · 2023-07-19T01:03:15Z

Can confirm, this is still happening.

justingolden21 · 2023-07-21T00:53:40Z

Why is this issue closed? Do we need to make a new issue to reopen it?

dummdidumm · 2023-07-21T07:07:24Z

Yes, if people still have certain code snippets that fail using the latest version of this plugin, then they should open a new issue with that code snippet.

benediktms · 2024-05-30T09:10:28Z

I also had this issue in webstorm, but similar to @digvijayad I got around it by disabling the build in Reformat code option and relying on prettier. I think it's probably an issue with both formatters trying to run at the same time. Running only prettier on save solved the issue for me. I think this is webstorm/jetbrains specific, at least in my case, because formatting the same file in VSCode worked fine.

imagoiq · 2024-06-10T08:11:28Z

I've just got the same issue with Intellij, but in my case disabling Optimize imports for HTML seems to solve it.

DannyFestor · 2024-06-13T01:06:08Z

I've just get the same issue with Intellij, but in my case disabling Optimize imports for HTML seems to solve it.

Thank you, this fixed it for me in PHPstorm.

ThibGonceDKT · 2025-01-02T17:13:59Z

To disable Optimize imports option on code reformat in Intellij, you have to open the reformat popup with Ctrl + Alt + Shift + L (or Opt + Cmd + Shift + L on MacOS) and uncheck the Optimize imports option

Mlocik97 closed this as completed Aug 13, 2021

Mlocik97 reopened this Aug 13, 2021

navorite mentioned this issue Aug 15, 2021

Having a style tag in a string removes the style sheet rules #246

Closed

dummdidumm marked this as a duplicate of #70 Aug 27, 2021

dummdidumm closed this as completed Aug 27, 2021

This was referenced Apr 11, 2022

prettier-ignore is ignored #59

Closed

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

Closed

alancwoo mentioned this issue Feb 8, 2024

Strange issue in vscode when pasting #427

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

my code is replaced with ✂prettier:content✂ #240

my code is replaced with ✂prettier:content✂ #240

Mlocik97 commented Jul 31, 2021

Mlocik97 commented Aug 13, 2021

navorite commented Aug 15, 2021 •

edited

Loading

dummdidumm commented Aug 27, 2021

codingwithchris commented Apr 11, 2022

bjornarhagen commented Oct 31, 2022

justingolden21 commented Mar 22, 2023

justingolden21 commented Jul 14, 2023

devpikachu commented Jul 14, 2023

digvijayad commented Jul 16, 2023

intzaaa commented Jul 19, 2023

justingolden21 commented Jul 21, 2023

dummdidumm commented Jul 21, 2023

benediktms commented May 30, 2024

imagoiq commented Jun 10, 2024 •

edited

Loading

DannyFestor commented Jun 13, 2024

ThibGonceDKT commented Jan 2, 2025

my code is replaced with ✂prettier:content✂ #240

my code is replaced with ✂prettier:content✂ #240

Comments

Mlocik97 commented Jul 31, 2021

Mlocik97 commented Aug 13, 2021

navorite commented Aug 15, 2021 • edited Loading

dummdidumm commented Aug 27, 2021

codingwithchris commented Apr 11, 2022

bjornarhagen commented Oct 31, 2022

justingolden21 commented Mar 22, 2023

justingolden21 commented Jul 14, 2023

devpikachu commented Jul 14, 2023

digvijayad commented Jul 16, 2023

intzaaa commented Jul 19, 2023

justingolden21 commented Jul 21, 2023

dummdidumm commented Jul 21, 2023

benediktms commented May 30, 2024

imagoiq commented Jun 10, 2024 • edited Loading

DannyFestor commented Jun 13, 2024

ThibGonceDKT commented Jan 2, 2025

navorite commented Aug 15, 2021 •

edited

Loading

imagoiq commented Jun 10, 2024 •

edited

Loading