Phoenix and Svelte component styles

[terrisgit]

<.button> in a heex template looks a lot different than < button> in a .svelte file.

What would be a good way to sync up the styles between Svelte and Phoenix components?

[woutdp]

So <.button> uses a Phoenix component defined in core_components.ex. In svelte you'd use <button> which is the HTML tag for a button.

If you want to have parity between the 2, you'd need to create a Svelte component <Button> that works in the exact same way as the Phoenix component.

I can't see an immediate easy way of syncing up the styles.

One approach you can take is removing the tailwind styles from the core_components.ex and defining a global .button style which you then can apply on both the Svelte button and the Phoenix button. Then whenever you have a style change you only need to apply it in the .button class.

Another approach is to just copy each core_component and remake it in Svelte. But then you'd have the same style specified in 2 places, which is not always ideal. Another approach might be to make this automated with a command, although I'm not sure that's even possible.

If you decide to go with the approach of remaking every component inside Svelte I'd be happy to add it to the live_svelte core, and maintain it so it's in sync. This way users can just do something like import {Button} from "live_svelte" and they have a button ready that looks the same as core_components. Even better would be to just have it the same as core_components.ex so you can easily edit them. So we'd copy them over inside /assets/svelte/core_components and you'd be able to import from import {Button} from "./core_components"

[dev-guy]

There is no practical way to replicate the Pryo controls exactly in Svelte because they use a tailwind class merge algorithm in the Elixir tails package. Svelte is still very css-centric whereas phoenix has gone all-in on tailwind. I was able to create a prototype of Pyro overrides that removes most of the theme-related classes from the components so that css can do most of the work. For example, button and .button are fairly consistent.