PostCSS/Tailwind JIT not recompiling correctly in watch mode about esbuild-svelte HOT 9 CLOSED

Thanks, it works! Definitely wise to keep it behind an option, as running tailwind is fairly expensive (the build time with cache: "overzealous" is about halfway between true and false)

from esbuild-svelte.

Ah that's an interesting metric! I'll look at adding a filter to the caching logic (for both true and "overzealous", though one will block and the other will allow caching... that'll be fun) at some point in the future, but leave it at this for now

from esbuild-svelte.

Thanks for the report. Hmm, it's possible the caching code is screwing up here, try

esbuildSvelte({
  cache: false,
  ...
}),

and see if that changes anything. If it does, then the bug is probably the fault of this plugin. If it doesn't, then I'll still take a deeper look anyway, but it's less likely to be coming from esbuild-svelte. Cheers!

from esbuild-svelte.

I tried cache: false, but it had no effect.

I tried to create a simple repro from a fresh project, but actually the tailwind is properly recompiling on it! So I suspect it's something weird about my project; we actually include the esbuild-svelte plugin twice, once to compile the webcomponent files we have (with customElement: true), and a second time to compile the other files (with customElement: false).

I will try doing the webcomponent build a different way and will update here if that resolves the issue. I highly doubt there's anything esbuild-svelte should/could change, as our project is straying pretty far from the light already haha, but this issue will hopefully serve as documentation for anyone else trying to handle both webcomponent and regular svelte components in the same build.

from esbuild-svelte.

I was able to reproduce and isolate the issue! Turns out I couldn't reproduce it because for whatever reason the issue doesn't happen when I change App.svelte, but it does if I change another file that is imported by App.svelte.

When I set cache: false, then it properly recompiles no matter what file I change. If I have cache: true, then it only properly recompiles if I change App.svelte.

I've posted my repro at https://github.com/tyler-boyd/esbuild-svelte-issue-102.

Check src/Other.svelte for a bit of explanation. You should be able to reproduce, and if you set cache: false in the config, no longer be able to reproduce it.

I hope this helps! For now I'll consider turning off cache locally...it does make it about 10x slower, but maybe that's just the cost of running tailwind.

from esbuild-svelte.

This is an impressive edge case! I can reproduce this, which makes testing easier, thank you!

Putting

<style global lang="postcss">
    @tailwind utilities;
</style>
<!-- or whatever tailwind stuff is needed -->

in src/Other.svelte solves this for the time being. Though I recognize that this isn't ideal, as it can add a ton of boilerplate and more importantly increases CSS bundle size (w/ my limited testing, it adds the css to the bundle even if already included).

My limited understanding is that Svelte components should be independent (in the sense that their styling shouldn't rely on other components, though global breaks that I guess...) and without that style block, the Other component relies on App to create the needed classes. When you compound that with PostCSS/Tailwind preprocessing, it's a whole bundle of fun.

This plugin currently assumes that the CSS for a component is "pure" (relies only on the code within the component and what it imports) which isn't true in this case. I don't imagine this is a particularly unique setup so it'd be nice to cover this use case.

esbuild does have a onStart and onEnd callbacks which could potentially be useful for cache invalidation on watch builds but I'll need to give some more thought to how to solve this in a performant and understandable way

from esbuild-svelte.

Gotcha, your explanation makes sense to me! So only the Svelte component with the @tailwind utilities; line actually gets the tailwind utilities included in its bundle, but on a full/fresh build (or any time the main component that includes tailwind is rebuild), tailwind is properly scanning all the .svelte files due to content: ["./src/**/*.svelte"], in the tailwind config.

As a consequence to this, I have observed that if I save App.svelte any time I change any other file, it will pick up any new classes into the bundle. This is indeed just a side effect of the global styles and Svelte or esbuild not being able to be aware of that.

IMO the easiest workaround would be to add a way to turn off caching but JUST for the file that has the @tailwind directives. Perhaps we could expand the cache option to accept a function returning whether or not a specified file should be cached, or even just a blocklist of files to never cache. If that doesn't sound great, I'm sure one could write an esbuild plugin or tweak the build to automatically touch the file with the @tailwind directives whenever any other file is changed. Thoughts?

from esbuild-svelte.

Yep those all sound like great solutions. I'm a bit busy this week, but I'll try my best to get something out soon. I think the onEnd callback will provide a way to handle the cache invalidation automatically so less effort is required here, but if not, then the solutions you proposed will integrate well enough.

FYI someone else ran into (what looks like) a similar problem on the Svelte subreddit. Though they aren't using this plugin, my guess is Vite (?) does caching in a similar way. You can see the way they solved it here: https://www.reddit.com/r/sveltejs/comments/s69r8g/tailwind_3_isnt_generating_new_classes_when/ht2wgba/?context=3

from esbuild-svelte.

Go ahead and try with cache: "overzealous" on release v0.6.2. This option invalidates the cached version of a component if any of it's imported components have changed. Let me know if you run into any issues!

from esbuild-svelte.