roborourke/wp-less

wp-less-cache breaks relative URLs

Closed this issue · 6 comments

I'm using wp-less in a theme and expected that I could do a url(images/foo.png) as normal with less and css. However because the compiled css is moved to /wp-content/uploads/wp-less-cache/ and the url() is left as-is the path become broken.

Why are you not using @{themeurl}?

Guess it wasn't documented in the tutorial I read. I expected that relative url()s would just work as normal, like they do in every other WordPress, LESS, and CSS compiler I've run into.

@dantman I couldn't see a way to reliably compile css in the same place as the CSS file itself for relative URLs to work. I should look into the lessc source again though to see if there's anything I can do programmatically but the WordPress uploads folder is the only place you can guarantee is writable. Writing files to the theme folder would represent a security issue and because compilation happens server side it's difficult to know where to make URLs relative to in the cases where CSS is @imported from subfolders.

Can you give me a link to the tutorial you mentioned?

There have been ongoing issues relating to this in the lessphp repo:

leafo/lessphp#220 and leafo/lessphp#119

The other wp-less plugin by @oncletom overrides the url() function make the relative paths work which has worked as expected for some people but not others. I ended up adding the explicit @{themeurl} variable so authors would know exactly what URL to use.

This was the tutorial:
http://www.noeltock.com/web-design/wordpress/using-less-with-wordpress/

MediaWiki does CSS preprocessing (with and without LESS), to solve the relative URL issue it rewrites the url()s into absolute URLs automatically.

Not something I can fix easily due the servers side compile so variables is the way to do it with this plugin. Sorry!