Comments (9)
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.
Related Issues (20)
- Unexpected token HOT 2
- Generate output HTML HOT 2
- cssOutputFilename not working HOT 2
- Breaks watch mode on error when preprocess dependency transformation fails HOT 5
- Example use with Typescript HOT 4
- how combine with esbuild-coffeescript ? HOT 1
- svelte: 3.53.0 ▲ [WARNING] [plugin esbuild-svelte] options.css as a boolean is deprecated. Use 'external' instead of false. HOT 2
- Option to enable svelte-check? HOT 2
- External Svelte module errors when using a Svelte import HOT 3
- Unexpected token error with latest svelte-preprocess v5 HOT 2
- Updating examples to use the 0.17.x esbuild "context API"? HOT 3
- svelte@4 - compilerOptions.css as a boolean is deprecated HOT 3
- compilerOptions css does not bundle external css files HOT 1
- Add `svelte` condition automatically
- customElement option throws an error HOT 2
- Release plugin version 1.0.0 HOT 11
- Migrate error and warning codes for Svelte 5 support (including in tests) HOT 1
- Svelte 5 Compatibility
- Svelte 5 Pre-release Compatibility HOT 5
- Could not resolve "svelte/internal" HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esbuild-svelte.