Replace url() relative path with full domain in css files

Question

I'd like to run a script on release that replaces all url() declarations in a css file with the full domain path, because images are hosted on a static web server.

Example

Current:  background-image: url(/images/menu.gif);
Desired:  background-image: url(http://example.com/images/menu.gif);
Current:  background-image: url('/images/menu.gif');
Desired:  background-image: url('http://example.com/images/menu.gif');
Current:  background-image: url("/images/menu.gif");
Desired:  background-image: url("http://example.com/images/menu.gif");

I have concocted a bash script using sed to do just that, but it does not handle url with quotes url(''), or urls that already have a full path.

 STATIC_HOST="http://example.com"
 sed -i '' "s|url(\([^)]*\)|url($STATIC_HOST\1|g" main.css

Yes, but most importantly I need to be able to handle the single and double quote cases. Updated test cases above. — deepwell
– deepwell, Commented Jan 14, 2011 at 22:53

marco · Accepted Answer · 2011-01-15 13:05:33Z

4

Try with this

sed "s|\(url(['\"]\?\)\(/[^)]*\)|\1$STATIC_HOST\2|g" main.css

Put the -i option only when you are sure the result is what you were looking for.

edited Jan 15, 2011 at 13:05

answered Jan 14, 2011 at 19:45

marco

4,7551 gold badge26 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SiegeX Over a year ago

Remove the url( in the replacement text and Ill switch from -1 to +1

SiegeX Over a year ago

Update \\(url('\?\\) to \\(url(['\"]\?\\) so your script meets the OP's new requirements. Didn't feel like it was right to answer jack you for such a small change.

marco Over a year ago

This should work fine; I have escaped the double quote because otherwise the shell would have interpretated it.

Gerben · Accepted Answer · 2011-01-15 16:52:34Z

0

|url\(['\"]?([^'\":)]+)['\"]?\)|url($STATIC_HOST\1)|g

where the colon will prevent "http://..." like urls

edited Jan 15, 2011 at 16:52

answered Jan 14, 2011 at 19:58

Gerben

16.8k6 gold badges39 silver badges56 bronze badges

1 Comment

SiegeX Over a year ago

You should add the comment that you need GNU sed with the '-r` option for your ERE's to work properly

Collectives™ on Stack Overflow

Replace url() relative path with full domain in css files

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related