search

phoenixframework / phoenix_live_reload

Provides live-reload functionality for Phoenix
MIT License
315 stars 90 forks source link

Add option to do full page reloads when CSS changes #122

Closed Blond11516 closed 2 years ago

Blond11516 commented 2 years ago

I'm trying to use CSS modules with phoenix and am running into an issue where changes to my modules aren't picked up by phoenix_live_reload.

With CSS modules, the class names are automatically generated with, among other things, a hash of the contents of the class. This means class names have to be fetched at runtime (I'm working with custom code based on https://github.com/DefactoSoftware/ex_css_modules).

Since the current implementation of phoenix_live_reload doesn't reload the page for CSS changes, the stylesheet itself does get updated in the browser, but the class name in the DOM is wrong until the page reloads and the liveview code is evaluated again.

I'd like to have the option to do full page reloads on CSS changes, like for all other asset types. The way I'm seeing it working is with a new configuration option (fullPageReloadOnCssChange?: true?) that substitutes the css reload strategy for the page strategy in the client. This could also be done with a more general strategies option that would look something like config :my_app, MyAppWeb.Endpoint, live_reload: [strategies: [css: :full_reload]] but I'm not sure if the concept of strategies should be exposed to the users.

josevalim commented 2 years ago

Given the strategies are either CSS specific or full page reload, I think an option like reload_page_on_css_changes: true would be enough. WDYT?

Blond11516 commented 2 years ago

Yeah that's what I figured too, just wanted to make sure exposing the strategies wouldn't be better for some reason I can't think of.

If that's all right I can start working of this today. Not to jinx myself but I don't think it should take too much time!

josevalim commented 2 years ago

Sure, a PR is welcome!