Update relative URLs to point to correct location

[fmarcia]

Update relative URLs to point to correct location

[fmarcia]

Hello ottok,

No, uglifycss doesn't parse or update relative paths.

Relative paths should be relative to the output location.

[ottok]

Currently I use PHP Minify (https://code.google.com/p/minify/) but I'd like to migrate to using UglifyCSS and UglifyJS. The only showstopper at the moment is that UglifyCSS does not support the ability to input multiple CSS files from different subfolders and minify them together.

Could this question please be reopened as a feature request?

[fmarcia]

Uglifycss can minify several css files at a time indeed. Isn't it a matter of bundles (with a stylesheet and images) where image paths in css stylesheets should be parsed then updated relatively to the output target? If so, I don't plan to implement this feature but perhaps someone could...

[sstok]

@ottok Please have a look at https://github.com/kriswallsmith/assetic and specially https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/CssRewriteFilter.php

[ottok]

@sstok Thanks but I already have a PHP solution that I would like to replace with Node.js-based solution, hence having this fixed in Uglify.js is more interesting to me than Assetic or PHP minify. But yes, reading that link or the PHP minify source could lead to a faster implementation..

[futureweb]

We would also like to see relative URLs automatically fixed if final CSS is in another Location than the Original CSS Files ...
So we could simply update CSS Files of Libraries we are using - without worrying to forget fixing IMG Pathes within ...

Andreas Schnederle-Wagner

[futureweb]

@fmarcia - That's good News indead - I will test is as soon as NPM got the new 0.0.22 Package! ;-)

[fmarcia]

@futureweb I just published changes on npm. Your test report is welcome, especially if you run it on windows

[futureweb]

@fmarcia - already struggle with first tests :-/
No matter how I call uglifycss with "--convert-urls" Param it always fails with "unable to process "test.css" with TypeError: Object test has no method 'fill'"

uglifycss --convert-urls /test/ test.css > test-gen.css
uglifycss --convert-urls '/test/' test.css > test-gen.css
uglifycss --convert-urls "/test/" test.css > test-gen.css
uglifycss --convert-urls='/test/' test.css > test-gen.css
uglifycss --convertUrls '/te1st/' 'test.css' > 'test-gen.css'
...

?!

[fmarcia]

The right syntax is uglifycss --convert-urls /test/ test.css > test-gen.css.
Could you publish the content of test.css? Thanks.

[futureweb]

---

[root@server tmp]# cat test.css
/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
body:last-child .blueimp-gallery > .slides > .slide-error {
background-image: url("/js/jquery/blueimp_Gallery/img/error.svg");
}
/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
body:last-child .blueimp-gallery1 > .slides > .slide-error1 {
background-image: url("../img/error.svg");
}
[root@server tmp]# uglifycss --convert-urls /test/ test.css > test-gen.css
unable to process "test.css" with TypeError: Object test has no method 'fill'

---

[root@server tmp]# uglifycss test.css > test-gen.css
[root@server tmp]# cat test-gen.css
body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url("/js/jquery/blueimp_Gallery/img/error.svg")}body:last-child .blueimp-gallery1>.slides>.slide-error1{background-image:url("../img/error.svg")}

---

[fmarcia]

@futureweb,
Could you provide versions of uglifycss and nodejs you use?
Also note that --convert-urls is the path to the target directory of minified css in your file system

[futureweb]

@fmarcia

[root@server tmp]# cat /etc/redhat-release
CentOS release 6.8 (Final)
[root@server tmp]# node -v
v0.10.46
[root@server tmp]# npm -g list uglifycss
/usr/lib
`-- [email protected]

[fmarcia]

@futureweb, I made some tests with your css and couldn't reproduce the error you specified. I guess it may be because of the nodejs version but I'm not that sure. I committed last night a version which displays the full error stack when an error occurs. Could you git clone this new version from github and post the error again? Thanks.

[futureweb]

@fmarcia - there you go:

[root@server tmp]# uglifycss/UglifyCSS/uglifycss --convert-urls /test/ test.css > test-gen.css
uglifycss: unable to process "test.css"
TypeError: Object test has no method 'fill'
at convertRelativeUrls (/tmp/uglifycss/UglifyCSS/uglifycss-lib.js:131:28)
at processString (/tmp/uglifycss/UglifyCSS/uglifycss-lib.js:444:15)
at Object.processFiles (/tmp/uglifycss/UglifyCSS/uglifycss-lib.js:809:29)
at main (/tmp/uglifycss/UglifyCSS/uglifycss:98:31)
at Object. (/tmp/uglifycss/UglifyCSS/uglifycss:116:2)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)

maybe it would be beneficial if official Version also got Option to Output Full Error Stack? (maybe with --verbose / --debug Parameter or something like that?)

[fmarcia]

Thank for your help, @futureweb.
It looks like fill is not available in node v0.10.46. You can check it by typing, for example, [1,2].fill("x") at node prompt. It should raise an error as well. I'm going to use an alternate way to fill the array...
And yes, I will add an option to print the full error stack.

[futureweb]

@fmarcia - you are right - that's the cause of the Problem. Also getting Error when executing fill on node promt.
Looking forward testing next version without fill ;-)

[fmarcia]

@futureweb, I'll publish a new version on npm tonight.
Thanks again for your help.

[futureweb]

@fmarcia - you are welcome - thx for this quick fix! ;-)
Already did some tests - and it's looking good now!

[futureweb]

@fmarcia - found another little Bug ;-)
When there are Images containing whole Domain - they will break:

uglifycss/UglifyCSS/uglifycss --convert-urls tmp/2/3/4/ 1/2/test.css 3/4/5/6/7/1.css > 2/3/4/test-gen.css

background-image:url("http://static.fweb.at/js/jquery/blueimp_Gallery/img/error.svg")

becomes:

background-image:url("../../../3/4/5/6/7/http:/static.fweb.at/js/jquery/blueimp_Gallery/img/error.svg")

--> uglifycss-lib.js --> Line: 116 - check for "/" is the Problem.

Possibilities:

• background-image: url(header-background.jpg);
• background-image: url(images/header-background.jpg);
• background-image: url(../images/header-background.jpg);
• background-image: url(/images/header-background.jpg);
• background-image: url(http://www.domain.com/images/header-background.jpg);
• background-image: url(https://www.domain.com/images/header-background.jpg);
• background-image: url(//www.domain.com/images/header-background.jpg);

Guess that's all?

[fmarcia]

I hope so!
Thanks for the catch

[futureweb]

@fmarcia - alright - just did some tests - and it's looking pretty good now! ;-)
thx for superfast bugfixes!

Will deploy on live server when NPM is updated