Svelte/Sapper duplicates CSS styles

[yuliankarapetkov]

Describe the bug
Svelte/Sapper duplicates CSS styles.

To Reproduce
I cannot reproduce this in REPL as I am also using Sapper. However, here's a simple example from a tiny project of mine, which you can find here (use Google Translate, if you need to, as the page is in Bulgarian) - just inspect any elements's styles.

Here's a simple CSS style that I use in index.svelte:

p {
  margin: 0.5rem 0 2rem;
  font-size: 0.75rem;
}

Then, if I open the dev tools, I can see this:

These styles seem to have been inserted twice - first in index.css and then inline in index

In a larger project I am currently working on, I observe similar behavior:

Expected behavior
CSS styles and classes should be rendered only once (or to be more precise - the number of times you've written them in your code).

Information about your Svelte project:

• Your browser and the version: Chrome Version 80.0.3987.149 (64-bit)
• Your operating system: Windows 10 Pro
• Svelte version: 3.20.0
• Rollup

Note: Issue is not related to browser or OS, as I can reproduce it not only locally, but in production as well. Tried with a different laptop (Mac) as well.

Severity
I wouldn't say the issue is blocking anything, but I would say it's quite important as it seems like I am getting twice as much CSS as I need. And this could be an issue for larger projects like the one I am currently working on.

[Conduitry]

See also #1076/#1098/#1115. What version of Sapper are you on? Behavior related to this was changed in 0.27.10 in an attempt to fix a different duplicated CSS bug and then rolled back in 0.27.11 when it was decided that the new issue was worse.

[yuliankarapetkov]

@Conduitry In the small one-page project that I have sent a link to the version of Sapper is 0.27.10. In the bigger project it is 0.27.9.

If I understand correctly from #1115, it's an issue that is being worked on.

[timoanttila]

In my case this only happens if I use components. First, component styles are loaded without the id (<style>), and then with the id (<style="svelte-3i35sa-style">). Export and dev run.

[sandrina-p]

The same is happening on an open-source project I'm working on with sapper@0.27.11. In another project with sapper@0.27.8 the bug doesn't happen.

Could you explain what's the easiest way to do the downgrade to 0.27.8 until the problem gets fixed?

Thank you 🤗

[antony]

@sandrina-p have you tried npm install --save-dev sapper@0.27.8?

I don't know how it might affect your project, but that's how you would downgrade.

[acoyfellow]

Can confirm this is happening to me on 0.27.8 still

[acoyfellow]

Temporarily solved by rolling back Rollup.. from rollup@1.32.1 to rollup@1.29.0

[brewmycode]

Updating rollup to @2.7.6 solved the issue for me.

[Conduitry]

@brewmycode Very interesting! I've confirmed this to also be the case in my own project. This definitely warrants updating the version of Rollup in the official template, although there is certainly some weird code in Sapper that should be dug into at some point.

[Conduitry]

I've update the Sapper template to use Rollup 2, and closing this. I'm leaving #1115 open to circle back on cleaning up some of Sapper's code for CSS handling.

[i-montes]

I am currently having the same problem, the classes in the .css file are repeated 41 times, the project works but you will understand that it is a problem that the weight of a single css file grows so much.