Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
typhonrt opened this issue Dec 17, 2023 · 3 comments
Labels
bug Something isn't working upstream

Comments

@typhonrt
Copy link

typhonrt commented Dec 17, 2023

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: sveltejs/svelte-preprocess#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
@typhonrt typhonrt added bug Something isn't working triage Awaiting triage by a project member labels Dec 17, 2023
@dominikg
Copy link
Member

dominikg commented Dec 17, 2023

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 dominikg added upstream and removed triage Awaiting triage by a project member labels Dec 17, 2023
@dominikg
Copy link
Member

please follow the issue in svelte-preprocess sveltejs/svelte-preprocess#619

@typhonrt
Copy link
Author

typhonrt commented Dec 17, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working upstream
Projects
None yet
Development

No branches or pull requests

2 participants