search

woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 37 forks source link

@apply in <style> possible? #116

Closed garlandcrow closed 3 months ago

garlandcrow commented 4 months ago

I was playing around and noticed I couldnt @apply in <style> or <style lang="postcss"> and I am sure its some order of operations in how things are built, but just wondering if it was somehow configurable to be able to use that or not?

ahacking commented 4 months ago

If you're using out of the box Phoenix asset pipeline with Tailwind, the entrypoint is assets/css/app.css. so any style tags embedded in your heex templates or render calls will not be processed.

I'm implementing a CSS blueprint and @apply used in CSS works just fine without any changes to the asset pipleine.

garlandcrow commented 4 months ago

I'm not sure I follow the last part of the comment about CSS blueprint. Is there some change you made to make @apply in style tags in Heex and render calls to work?

ahacking commented 3 months ago

I'm not sure I follow the last part of the comment about CSS blueprint. Is there some change you made to make @apply in style tags in Heex and render calls to work?

No. I can't image that could ever work trying to apply tailwind styles if your styles are not imported via assets/css/app.css unless you were using a svelte preprocessor in your asset pipeline.

This might be sometime look into: https://github.com/sveltejs/svelte-preprocess

garlandcrow commented 3 months ago

This is fairly common thing to deal with when you use just svelte (instead of sveltekit) so usually I do mess with the preprocessor and/or webpack/vite to have this work, but in this case it seems Phoenix uses esbuild to do it (I guess?). I am not familiar with how Phoenix does all this asset stuff since I always do projects w/out the asset pipeline and (last few years) use vite to handle all that stuff. I can have a look, I am not sure the magic needed to make svelte work in liveview so likely won't know the magic to make css compile in elixir land 😅 (I am coming from svelte making me be interested in liveview because of this project as opposed to being a liveview dev being interested in svelte, which i guess is the normal way people find this)