oyejorge / less.php

less.js ported to PHP.
http://lessphp.typesettercms.com
Apache License 2.0
656 stars 2 forks source link

wrong parsing of filenames inside url() #184

Open lduer opened 9 years ago

lduer commented 9 years ago

I'm currently working with bootstrap and less.php.

I've detected that the paths to image- or font-sources inside the url() are converted wrong. By default, the @icon-font-dir in bootstrap is defined as "../fonts/". This would be the right value as output in my css-file.

The less-parser adds the absolute url to the url-string of my css-definition src: url('@{icon-font-path}@{icon-font-name}.eot'); which results in src: url('/absolute/path/to/project/vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot'); when the bootstrap.less is imported via less-import from another less-file in another directory.

(The reason why I'm using the @import "file.less" method: I want to re-use the bootstrap variables, mixins, ... in my own stylesheets.)

I wonder if this is should be the default beavior, and if it is intended to display the absolute path!

After a while of searching, I've found the source of this (in my opinion) strange behavior. To use the "relative paths" and don't change them, I simply used

$parser = new \Less_Parser(array('relativeUrls' => false))
lduer commented 9 years ago

my own pull-request #187 contains one possible solution to this issue.

When setting the options, it works as desired:

$lc = new \lessc();
$lc->setOptions(array('relativeUrls' => false));
$content = $lc->parse($lessContent);
marclaporte commented 9 years ago

When using Tiki 14.x (code from svn revision 55662), the code generated by oyejorge/less.php is slightly different than the one generated by PhpStorm. The diff is below. And extra "vendor/" is added.

webmaster@web1:~/html/14x$ svn diff themes/thenews/css/thenews.css
Index: themes/thenews/css/thenews.css
===================================================================
--- themes/thenews/css/thenews.css      (revision 55664)
+++ themes/thenews/css/thenews.css      (working copy)
@@ -256,8 +256,8 @@
 }
 @font-face {
   font-family: 'Glyphicons Halflings';
-  src: url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.eot');
-  src: url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+  src: url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.eot');
+  src: url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../vendor/vendor/twitter/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 .glyphicon {
   position: relative;

Thanks!

jonnybradley commented 9 years ago

A little more on Marc's report above re the Glyphicons paths in Tiki.

Our less.php is also inside the vendors directory which might be related to why it's getting this one wrong. It gets called from a symlink in vendors/bin/lessc (not sure why, i didn't set this up) but i tried using a direct call to vendor/oyejorge/less.php/bin/lessc and also tried it with an symlink to bin/lessc but both did the same thing. I've also tried with dev-master and no difference (although an update from 1.7.0.2 to 1.7.0.4 did make compiling work again for us, not sure why, it just hung before)

I don't really want to start changing the relative URL options as all the other ones (to images and icons) behave themselves fine now, plus we're not seeing the same problem with less.js.

Thanks too!