LiveReload and Drupal 7

I recently came across LiveReload and was impressed. Actually impressed is an under statement. I was amazed. LiveReload has really improved the way I work with css. As it says on its github page LiveReload is browser extension & a command-line tool that:

1. Applies CSS and JavaScript file changes without reloading a page.
2. Automatically reloads a page when any other file changes (html, image, server-side script, etc).

Getting it to work is straightforward. You simply need to download the LiveReload gem and install the extension/plugin in your browser of choice (as long as your browser of choice is Chrome, Safari, or Firefox!). When you have all that set up you can make edits to your files and have the changes display instantly in the browser. Even better if you are doing css and js changes the page will only load the css or js file. As such it is like using firebug to tweak properties except that you can do it in your IDE of choice.

I got this to work fine on Drupal 6 but I ran across a bit of a problem using Drupal 7. I was not sure what the problem was but eventually tracked it down to the fact that LiveReload will not work with css files imported using @import. As anyone who has been using Drupal 7 or following its development knows Drupal 7 uses @import extensively to get round the IE 31 link/style tag limit.

LiveReload has such a positive impact on my workflow that I was not going to let something small like that stop me using it! After a little bit of digging around I came across a solution to the problem.

Thanks to the new hook_css_alter it is easy to change the properties of a css file. So something simple like this

function MYTHEME_css_alter(&$css) { // Alter css to display as link tags. foreach ($css as $key => $value) { $css[$key]['preprocess'] = FALSE; } }

will render css links as a link tag rather than a style tag with @import. Perfect! It works because the default style if you do not preprocess is a
tag. You can dig into to drupal_pre_render_styles to learn about how css files in Drupal 7 are rendered.