Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reloading application.css when constituent files are changed (Sprockets) #64

Closed
rogerkk opened this issue Jan 6, 2025 · 3 comments
Closed

Reloading application.css when constituent files are changed (Sprockets) #64

rogerkk opened this issue Jan 6, 2025 · 3 comments

Comments

@rogerkk
Copy link

rogerkk commented Jan 6, 2025

Thanks for making this! 🤩 We're still running sprockets, so it was nice to see #41 adding basic sprockets support – thanks for that @codergeek121!

I was still struggling to make it work, and have had to make some modifications to get to a walking skeleton of CSS reloading:

  1. Add some subfolders of app/assets/stylesheets to css_paths
  2. Add scss to css_extensions
  3. Monkey patch Hotwire::Spark::Change#canonical_changed_path to always return "/application.css" when action == :reload_css.

The first two points was necessary for any events to get fired in the first place, as my CSS is mainly defined in scss files in subfolders of app/assets/stylesheets, imported in app/assets/stylesheets/application.scss. Part 3 was to get application.css reloaded, in stead of the constituent file that was actually modified.

Is there something I've misunderstood here? If not, perhaps some additions could be made to streamline this a bit 🤔
@codergeek121
Copy link
Contributor

codergeek121 commented Jan 7, 2025 •
edited
Loading

I don't think you misunderstood! Currently, there's only basic support for Sprockets, meaning it simply doesn't raise an error if you're using Sprockets. There's no support for sass/scss/coffeescript right now. I think this would also be kind of hard to add in a non-buggy way, without parsing sass imports.

If you don't want to monkey patch, you could also try the following instead:

  1. Change the reload method to :replace, since this will also reload the <head> if there are changes
  2. Add the scss extension and paths to the html_paths and html_extensions, which will then trigger an :replace reload if a scss file is changed

This will not do a fine-grained css reload, but a full Turbo visit instead, but maybe this is good enough for your use case.

@rogerkk
Copy link
Author

rogerkk commented Jan 8, 2025 •
edited
Loading

Ah, nice to know about an alternative approach. The monkey patching is working at the moment, but now I have somewhere to go if/when it causes me too much pain. 😅 Thanks again!

@jorgemanrubia
Copy link
Member

Thanks for the help here @codergeek121

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rogerkk @jorgemanrubia @codergeek121