M:::::::M M:::::::M A:::A N:::::::N N::::::N A:::A L:::::::::L I::::::::IV::::::V V::::::VE::::::::::::::::::::E !!:!!
M::::::::M M::::::::M A:::::A N::::::::N N::::::N A:::::A L:::::::::L I::::::::IV::::::V V::::::VE::::::::::::::::::::E !:::!
M:::::::::M M:::::::::M A:::::::A N:::::::::N N::::::N A:::::::A LL:::::::LL II::::::IIV::::::V V::::::VEE::::::EEEEEEEEE::::E !:::!
M::::::::::M M::::::::::M A:::::::::A N::::::::::N N::::::N A:::::::::A L:::::L I::::I V:::::V V:::::V E:::::E EEEEEE !:::!
M:::::::::::M M:::::::::::M A:::::A:::::A N:::::::::::N N::::::N A:::::A:::::A L:::::L I::::I V:::::V V:::::V E:::::E !:::!
M:::::::M::::M M::::M:::::::M A:::::A A:::::A N:::::::N::::N N::::::N A:::::A A:::::A L:::::L I::::I V:::::V V:::::V E::::::EEEEEEEEEE !:::!
M::::::M M::::M M::::M M::::::M A:::::A A:::::A N::::::N N::::N N::::::N A:::::A A:::::A L:::::L I::::I V:::::V V:::::V E:::::::::::::::E !:::!
M::::::M M::::M::::M M::::::M A:::::A A:::::A N::::::N N::::N:::::::N A:::::A A:::::A L:::::L I::::I V:::::V V:::::V E:::::::::::::::E !:::!
M::::::M M:::::::M M::::::M A:::::AAAAAAAAA:::::A N::::::N N:::::::::::N A:::::AAAAAAAAA:::::A L:::::L I::::I V:::::V V:::::V E::::::EEEEEEEEEE !:::!
M::::::M M:::::M M::::::M A:::::::::::::::::::::A N::::::N N::::::::::N A:::::::::::::::::::::A L:::::L I::::I V:::::V:::::V E:::::E !!:!!
M::::::M MMMMM M::::::M A:::::AAAAAAAAAAAAA:::::A N::::::N N:::::::::N A:::::AAAAAAAAAAAAA:::::A L:::::L LLLLLL I::::I V:::::::::V E:::::E EEEEEE !!! 
M::::::M M::::::M A:::::A A:::::A N::::::N N::::::::N A:::::A A:::::A LL:::::::LLLLLLLLL:::::LII::::::II V:::::::V EE::::::EEEEEEEE:::::E  
M::::::M M::::::M A:::::A A:::::A N::::::N N:::::::N A:::::A A:::::A L::::::::::::::::::::::LI::::::::I V:::::V E::::::::::::::::::::E !!! 
M::::::M M::::::M A:::::A A:::::A N::::::N N::::::N A:::::A A:::::A L::::::::::::::::::::::LI::::::::I V:::V E::::::::::::::::::::E !!:!!



Tags [ ]

After spending much time looking into the various solutions for serving vendored CSS containing relative urls (with much help from Bibliographic Wilderness, I decided on using the sprockets-urlrewriter preprocessor.

After some adjustments to the regex used to identify and rewrite the CSS urls, there was one other issue.

Although the sprockets-urlrewriter claims to rewrite relative urls to absolute ones, what it really does is rewrites urls relative to itself, to urls relative to the root asset directory.

This means that if the CSS all being compiled into application.css, everything works great. However if in development you are debugging your assets (a default in Rails), each CSS is linked individually. This means that the newly re-written urls are relative to application.css, but referenced in a different css file.

This is still ok if the location of the CSS files you are rewriting the urls for are located in a root asset path, but if they are nested, your new urls dont work anymore.

For example...

.{ background: url(../img/image.png); }

So withOUT the urlrewriter, in development we will get this...

.{ background: url(../img/image.png); }

works great!

in production... not so much...

.{ background: url(../img/image.png); }

This is exactly what the urlrewriter is for! Now productions works.

.{ background: url(folderone/img/image.png); }

since the new url is relative to /assets, the image path is fine. but now in development...

.{ background: url(folder
one/img/image.png); }

the rewritten url is now relative to a directory the css file does not live in.

Since the preprocessor is unaware of the rails environment it is rewriting for, we need to restrict when to preprocess.

The solution I decided on was restricting the preprocessor from being registered if the css assets are not compiled into a single application.css.

Rails.application.assets.register_preprocessor 'text/css', Sprockets::UrlRewriter unless Rails.application.config.assets.debug

No entries found