Update relative URLs to point to correct location #12

ottok · 2013-11-26T10:14:52Z

Hello,

If I run something like

uglifycss /css/ie.css css/output.css css/styles.css adminbar/css/adminbar.css bootstrap/css/bootstrap.css themes/seravo.css

.. but in the resulting CSS many of the images will point to wrong locations, eg. '../img/xyz.png' when it should be 'adminbar/img/xyz.png'.

Is UglifyCSS supposed to update relative URLs so that the point to the correct location?

The text was updated successfully, but these errors were encountered:

fmarcia · 2013-12-24T08:21:24Z

Hello ottok,

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

Relative paths should be relative to the output location.

ottok · 2013-12-25T13:54:31Z

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 · 2013-12-26T10:05:11Z

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 · 2014-01-14T12:01:21Z

@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 · 2014-01-14T12:07:52Z

@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 · 2016-09-12T13:22:48Z

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

With the option "--convert-urls d", relative urls are converted according to the d directory. Probably buggy on Windows Ref: #12

futureweb · 2016-10-14T08:55:11Z

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

fmarcia · 2016-10-14T18:15:42Z

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

futureweb · 2016-10-18T11:40:51Z

@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 · 2016-10-18T14:58:32Z

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

futureweb · 2016-10-18T15:03:20Z

[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 · 2016-10-18T20:56:43Z

@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 · 2016-10-18T22:24:46Z

@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
`-- uglifycss@0.0.24

fmarcia · 2016-10-19T07:04:34Z

@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 · 2016-10-19T07:39:24Z

@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 · 2016-10-19T08:21:01Z

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 · 2016-10-19T08:25:21Z

@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 · 2016-10-19T09:08:14Z

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

futureweb · 2016-10-19T09:11:25Z

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

futureweb · 2016-10-19T10:05:17Z

@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 · 2016-10-19T12:48:51Z

I hope so!
Thanks for the catch

futureweb · 2016-10-19T13:14:07Z

@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

fmarcia closed this as completed Dec 24, 2013

fmarcia reopened this Dec 26, 2013

yobrx mentioned this issue Mar 10, 2016

Wrong css images path avanzu/AdminThemeBundle#64

Closed

fmarcia added a commit that referenced this issue Oct 14, 2016

Add option to convert relative urls

63f9b4a

With the option "--convert-urls d", relative urls are converted according to the d directory. Probably buggy on Windows Ref: #12

fmarcia closed this as completed in 53b82d3 Oct 14, 2016

fmarcia reopened this Oct 18, 2016

fmarcia closed this as completed in a8b04ef Oct 19, 2016

fmarcia reopened this Oct 19, 2016

fmarcia closed this as completed in 4565409 Oct 19, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update relative URLs to point to correct location #12

Update relative URLs to point to correct location #12

ottok commented Nov 26, 2013

fmarcia commented Dec 24, 2013

ottok commented Dec 25, 2013

fmarcia commented Dec 26, 2013

sstok commented Jan 14, 2014

ottok commented Jan 14, 2014

futureweb commented Sep 12, 2016

futureweb commented Oct 14, 2016

fmarcia commented Oct 14, 2016

futureweb commented Oct 18, 2016 •

edited

Loading

fmarcia commented Oct 18, 2016

futureweb commented Oct 18, 2016 •

edited

Loading

fmarcia commented Oct 18, 2016

futureweb commented Oct 18, 2016

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016 •

edited

Loading

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

futureweb commented Oct 19, 2016 •

edited

Loading

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

Update relative URLs to point to correct location #12

Update relative URLs to point to correct location #12

Comments

ottok commented Nov 26, 2013

fmarcia commented Dec 24, 2013

ottok commented Dec 25, 2013

fmarcia commented Dec 26, 2013

sstok commented Jan 14, 2014

ottok commented Jan 14, 2014

futureweb commented Sep 12, 2016

futureweb commented Oct 14, 2016

fmarcia commented Oct 14, 2016

futureweb commented Oct 18, 2016 • edited Loading

fmarcia commented Oct 18, 2016

futureweb commented Oct 18, 2016 • edited Loading

fmarcia commented Oct 18, 2016

futureweb commented Oct 18, 2016

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016 • edited Loading

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

futureweb commented Oct 19, 2016 • edited Loading

fmarcia commented Oct 19, 2016

futureweb commented Oct 19, 2016

futureweb commented Oct 18, 2016 •

edited

Loading

futureweb commented Oct 18, 2016 •

edited

Loading

futureweb commented Oct 19, 2016 •

edited

Loading

futureweb commented Oct 19, 2016 •

edited

Loading