Parcel/Svelte: styles are duplicated

[jsonkao]

🐛 Bug Report

Styles are being duplicated. In a Svelte component like…

<div></div>>

<style>
  div {
    background: red;
    width: 100px;
    height: 100px;
  }
</style>

…DevTools shows these styles:

Seems to be related to sveltejs/sapper#1127.

🎛 Configuration (.svelterc, package.json, cli command)

package.json:

{
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-svelte": "^4.0.6",
    "svelte": "^3.21.0"
  }
}

No extra configuration in Svelte rendering.

💻 Code Sample

Example repo: @jsonkao/svelte-parcel-duplicate-styles

[rondonjon]

The duplication is not the only problem.

I have tried to use CSS background images in this Svelte/Parcel template and couldn't get them to work.

It seems that the image files are copied to the dist folder, but their paths are broken; surprisingly only in one of the style copies, and unfortunately in the copy that takes precedence.

[antony]

This happened in the official Sapper build for a while, and a really random library upgrade stopped it happening. Might be related.

Edit: Ah, looks like it was rollup 2 which solved it. Maybe a starting point...

[canadaduane]

Possibly related? parcel-bundler/parcel#2592

[canadaduane]

I think I have a solution for this in the Parcel2 transformer that may apply here also (see orlov-vo/parcel-transformer-svelte#8)