style content erased

[tipy01]

Hello,

I face a situation where the style content is erased by prettier, I tried to rearrange things in the file to find the problem cause but I definitely do not understand how it behaves.
For the moment my workaround is to avoid having a second script context="module", but I have such script in others of my files in which I did not see this problem.

The symptomatic file is in the zip archive:

sample.zip

[dummdidumm]

Could you post the content of that file in here?

[cedricr]

I've got the same kind of problem here, and it's really strange....

The following file will get its <style> content stripped

<script>
  import MyFunction from "./this_is_a_long_import_path/this_is_a_long_import_name.svelte";

  // a long, and useless comment
</script>

<style>
  iframe {
    width: 100%;
  }
</style>

<svelte:head>
  <script></script>
</svelte:head>

Now if I remove anything from it, or even make the import path shorter, it won't get stripped anymore.

[tipy01]

Could you post the content of that file in here?

Actually, I tried to share the code with one of my colleague to compare using copy/paste method but sometime is not exactly the same thing that result on each editors at the end, it is the reason why I preferred to provide it as an attachment (and it is too bad that we can not attach a svelte file directly).

Regarding the strange behavior I think that it is important to have exactly the same code to compare.

[cedricr]

Edit: I've created a new issue for it here: #261

@dummdidumm I think that was fixed at one point, but this stills happens with up to date packages.
Let me know if you'd prefer to have a new issue opened.

Repro:

$ npm init svelte@next my-app
Need to install the following packages:
  create-svelte@next
Ok to proceed? (y) 
(...)
✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … No 
✔ Add ESLint for code linting? … No 
✔ Add Prettier for code formatting? … Yes

At this point the dev dependencies are:

  "devDependencies": {
    "@sveltejs/kit": "next",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.42.6"
  },

After npm install:

$ npm list
[email protected] /Users/cr/Dora/src/my-app
├── @sveltejs/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Then add the file content of my previous comment: #255 (comment) to src/routes/test.svelte

Now both npx prettier --plugin-search-dir=. src/routes/test.svelte or vscode format document will reformat the file like this, losing the style content:

<script>
        import MyFunction from './this_is_a_long_import_path/this_is_a_long_import_name.svelte';

        // a long, and useless comment
</script>

<svelte:head>
        <script></script>
</svelte:head>

<style></style>

If i downgrade prettier-plugin-svelte to 2.4.0, by removing the leading version caret in package.json, followed by npm install, I then get:

$ npm list
[email protected] /Users/cr/Dora/src/my-app
├── @sveltejs/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

And this time formatting via either the cli or vscode option works as expected.

[tipy01]

For my case with prettier-plugin-svelte 2.5.0 it is fixed. Thanks.