search

mockko / livereload

LiveReload applies CSS/JS changes to Safari or Chrome w/o reloading the page (and autoreloads the page when HTML changes)
http://livereload.com/
1.18k stars 56 forks source link

Live reload not working with imported css files (included via link) #32

Closed rizkysyazuli closed 13 years ago

rizkysyazuli commented 13 years ago

i have a few css files linked to the master stylesheet via @import method. after a few editing i realized the live reload doesn't run. the page does get refreshed by the extension, but without the live reload thing.. i hope you understand what i mean :P

i'm working with SASS files and developing on Safari 5.0.2 (OSX 10.6.4)

NV commented 13 years ago

LiveReload currently does not support @import. CSSOM provides CSSImportRule#href, so I think I can fix it.

rizkysyazuli commented 13 years ago

awesome.. looking forward for the next release :)

NV commented 13 years ago

I was not completely accurate. LiveReload supports @import in CSS files, it does not support @import in <style>.

index.html

<link rel="stylesheet" href="main.css">

main.css

@import "slave.css";
html {background: red}

slave.css

body {background: green}

When you change slave.css changes should be applied. Everything should work well.

However, this one won't work:

index.html

<style>@import "slave.css";<style>

I don't see any reason to put @import into <style>, so I won't fix it.

andreyvit commented 13 years ago

LiveReload does not support @import in a sense that it will do a full page reload when slave.css is changed in your example, since it uses document.getElementsByTagName("link") to find stylesheets.

Any good ideas on how to handle @import's, aside from doing XMLHTTPRequest on every stylesheet and running a regexp?

NV commented 13 years ago

http://github.com/NV/livereload/commit/f185861d59e7b4881785149d3acdf3165d7def22 No XHRs, no regexps. Try it.

  1. Open test/index.html
  2. Change test/slave.css

LR will try to reload test/main.css. It'll work well. However, test/slave.css won't be reloaded because it's cached. I can't bust the cache, because I can't append ?livereload= to imported stylesheet.

NV commented 13 years ago

I've got something working http://github.com/NV/livereload/commit/1ba2a52f174d54e1bd06f52b8cd2d3c6b10323e6

andreyvit commented 13 years ago

Wow! NV, you're awesome. I guess we should bake a new version on weekend.

rizkysyazuli commented 13 years ago

hell yea!

NV commented 13 years ago

LiveReload does not support @import in a sense that it will do a full page reload when slave.css is changed in your example ...

Instead of full page reload we could reload all stylesheets. http://github.com/NV/livereload/commit/0b4d1fd79ca7708ccaf5454160a834e50da96af1

Reload just imported stylesheet is a bit more complicated. I'll do it later.

NV commented 13 years ago

Support for CSS files included with @import. Closed by c65e295772bf91292c52253a3e3de0f344c1a7f1, #35.