DeMoorJasper/parcel-plugin-svelte

Parcel/Svelte: styles are duplicated

jsonkao opened this issue · 4 comments

jsonkao commented

🐛 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:
image

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 commented

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.

styles

  • 👍1
antony commented

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 commented

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