Question

I have some CSS in a ClientBundle that uses a background url. Since I load the javascript (/MyModule/MyModule.nocache.js) from /index.html, my relative urls in CSS are from root. This means

.myBackground { background: url("images/background.png"); }

will try to load from /images/background.png. This seems like a perfect case for runtime css substitution. I added the following line to the top of my css file:

@eval moduleName com.google.gwt.core.client.GWT.getModuleName();

How do I now combine the moduleName variable with the string "images/background.png"?

I’m looking for something like:

@eval moduleName com.google.gwt.core.client.GWT.getModuleName();
.myBackground { background: url(moduleName + "images/background.png"); }

Unfortunately, this approach causes some errors in the output during compile:

Line 46 column 30: encountered " ". Was expecting one of: <NUMBER> <PERCENTAGE>
<PT> <MM> <CM> <PC> <IN> <PX> <EMS> <EXS> <DEG> <RAD> <GRAD> <MS> <SECOND> <HZ>
<KHZ> <DIMEN> <FUNCTION>

Note: I know, there’s CSS Sprites, and I’m using that in some places, but I can’t get those working correctly in this case because of GWT’s extra style information around a CSS sprite conflicting with the extra style stuff I need.

Answer 1

You could always add a static function somewhere:

public static String getBackgroundUrl(){
     return com.google.gwt.core.client.GWT.getModuleName() + "/images/background.png";
}

And in your CSS

@eval BG_URL com.yourclass.getBackgroundUrl();

.myBackground { background-url:BG_URL; }