Style changes remove all styles

Full disclosure: I’m new to Svelte and Elder.js, so I might be missing something obvious.

I found an odd behavior when changing styles:

Whenever I change any style property in a .svelte file, the whole style declaration for the file disappears from the page. On save, both rollup and nodemon work as expected, and the page is reloaded. Anyhow, the styles for the component completely disappear. The only way to restore them is to stop and re-run rollup, refresh the page, and only then, the style changes are available.

I was able to reproduce the problem by creating a new project and changing only the .banner background color in the Home.svelte file.

Here are the steps:

1. Run:

npx degit Elderjs/template elderjs-app
cd elderjs-app
npm install
npm run dev:rollup
npm run dev:server

1. Open src/routes/home/Home.svelte and change line 16 to background: red;
2. Save and observe styles disappear from Home

My hunch is that this has something to do with the scoped styles, as :global() declarations are unaffected, and undoing the changes restore the original styles.

If relevant:

macOS 11.0.1
node v15.5.0 (also tried with v12.18.0)
npm v7.3.0 (also tried v6.4.8)
rollup: 2.33.3
svelte: 3.29.0
elderjs: 1.2.1

In any case, really love the project! Thanks for open sourcing this, looking forward to using it for my website. 🙏

[angelgarpi]

I created an issue in template repository, probably related to this: https://github.com/Elderjs/template/issues/38

[nickreese]

@Agedjus @kiuKisas @stefan-contiero pushed a fix for this.