Preprocessor dependencies are not tracked

[TheComputerM]

Describe the bug
Suppose I have installed svelte-preprocess and sass. Here is my index.svelte file:

<style lang="scss" src="../app.scss"></style>

So when I run svelte-kit dev the dev server is launched. If I make changes to the index.svelte file, the server is reloaded but if I make changes to app.scss file, the server is not reloaded and no change occurs.

Expected behavior
When I make changes to app.scss file, the output should be updated.

Information about your SvelteKit Installation:

Diagnostics

• System:
  OS: Windows 10 10.0.19041
  CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Memory: 2.70 GB / 7.80 GB
• Binaries:
  Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
• Browsers:
  Chrome: 81.0.4044.138
  Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
  Internet Explorer: 11.0.19041.1
• npmPackages:
  @sveltejs/kit: next => 1.0.0-next.70
  svelte: ^3.37.0 => 3.37.0
  vite: ^2.1.5 => 2.1.5

Severity
A serious bug for me as I cannot debug by scss styles.

Additional context
If a repro is needed I can provide one.

[dominikg]

This is relying on svelte-preprocess "external files" feature: https://github.com/sveltejs/svelte-preprocess#external-files

And likely does not work as intended because 2 things need to happen for it to work

1. watch the additional depenencies
   vite-plugin-svelte needs to ensure additional dependencies from proprocess step are on the watchlist (should be the case here)
2. trigger update on .svelte
   when one of those additional files changes, vite needs to know that the index.svelte module has changed. This is tricky because vite hmr detection works on import relationships and the resulting index.svelte does not import the dependency, it is copypasted at preprocess time. Maybe an additional watch service that triggered a file update event to the svelte file could do the trick.

There are 2 ways you can try to work around this right now:

1. import the scss in the script block of index.svelte

<script>
import '../app.scss';
</script>

This means that the style won't be scoped to index.svelte, which is likely what you want anyways

2. use scss @import

<style lang="scss">
@import "../app.scss"
</style>

That should produce scoped style and vite should track the import, no clue about svelte-preprocess handling this correctly though. And as always with scss @import be aware that it should not be used and esp. a file containing any rule output must not be imported more than once or you duplicate styles

General rule of thumb for working with styles:

• Try to avoid putting styles inside component style tags unless you are absolutely sure those styles need to be scoped to the svelte component.
• Use vite import features to add global styles. Do not use <style global>

cc @kaisermann

[TheComputerM]

Thanks @dominikg for the explanation, but the second workaround that you told me:

<style lang="scss">
@import "../app.scss"
</style>

is not working. It has the same problem of not reloading.

[kaisermann]

svelte-preprocess should be returning the app.scss as a dependency of that preprocess run:

For @import: https://github.com/sveltejs/svelte-preprocess/blob/main/src/transformers/scss.ts#L21
For external file src=....: https://github.com/sveltejs/svelte-preprocess/blob/main/src/modules/tagInfo.ts#L49

If you're able to reproduce the issue in a simple svelte project (not kit + vite), please feel free to open an issue on the svelte-preprocess repo

[TheComputerM]

This is not a bug with svelte-preprocess, but one with svelte-kit, so I do not think that working with rollup with this would be a problem. I do not know if this is a problem with svelte-kit or vite.

[dominikg]

I was able to reproduce this in a vite-plugin-svelte playground and the plugin does not register the dependencies of preprocess output with vite correctly. see sveltejs/vite-plugin-svelte#25

[babichjacob]

I was able to reproduce this in a vite-plugin-svelte playground and the plugin does not register the dependencies of preprocess output with vite correctly. see sveltejs/vite-plugin-svelte#25

Think we should close this to keep tracking there only?

[TheComputerM]

Yeah, thanks everyone.