search

sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
864 stars 105 forks source link

Aggressive warning / 'vite-plugin-svelte-preprocess-depends-on-self' when `<style lang="scss">` utilized. #822

Closed typhonrt closed 11 months ago

typhonrt commented 11 months ago

Describe the bug

Greets,

With the latest vite-plugin-svelte / 3.0.1 / Svelte 4.2.8 / Vite 5.0.10 / svelte-preprocess 5.1.2 there is a situation for voluminous warning messages generated. I have an investigation into the code points where this is generated in vite-plugin-svelte and have narrowed things down. The main cause / symptom is using Sass in Svelte components via <style lang="scss"></style> blocks. Convert things over to normal CSS <style></style> and the warnings go away.

With the latest 3.0.x release checking of dependencies output by the Svelte compiler / preprocessor was added in src/utils/preprocess.js via the new checkPreprocessDependencies function. I tracked the issue through svelte-preprocess and it appears the problem is in the scss transformer as it does file path comparisons between Posix & Windows paths thus not being equal thereby adding an erroneous "dependency". Quite possibly other transformers are also doing path comparisons incorrectly.

I figured it might be a good idea to open an issue here as well since this likely will be something that comes up for many potentially using Windows. I only found the related issue in svelte-preprocess after tracing things for 1+ hours. The problem is in svelte-preprocess, but is exposed by the latest vite-plugin-svelte.

Related: https://github.com/sveltejs/svelte-preprocess/issues/619

Reproduction URL

https://github.com/richardfxr/sveltekit2-preprocess-dependency-issue

Reproduction

I used another fellows reproduction case from svelte-preprocess / Issue 619. I verified that I see the same result.

1) On Windows / non-Unix / Posix OS. 2) Use svelte-preprocess with scss style block in Svelte components 3) See all the new errant dependency warnings.

In the repo linked run npm run build and you'll see the warnings on a Windows box.

Logs

No response

System Info

`vite-plugin-svelte` `3.0.1`
Svelte `4.2.8`
Vite `5.0.10`
svelte-preprocess `5.1.2`

OS: Windows
dominikg commented 11 months ago

This is not a bug in vite-plugin-svelte. To silence the warning until a fix has been made in svelte-preprocess, you can use onwarn in the config and ignore the code vite-plugin-svelte-preprocess-depends-on-self

https://github.com/sveltejs/vite-plugin-svelte/blob/ee0aa51e4a484f3b7e5e8b3563f6dc9cb6c89c8d/packages/vite-plugin-svelte/src/utils/preprocess.js#L151C11-L151C56

dominikg commented 11 months ago

please follow the issue in svelte-preprocess https://github.com/sveltejs/svelte-preprocess/issues/619

typhonrt commented 11 months ago

Yeah.. Apologies for the churn. I figured it would be good to at least have something in the issues here as it is not clear where the bug occurs. I spent a good bit of time tracing it back to svelte-preprocess through the Vite plugin code; over an hour of time. Having it in the issues here might help someone else doing the same. I checked various Svelte repos initially for existing issues, but svelte-preprocess was not an obvious one to check.