Basic arithmetic in GWT CssResource

Question

I'm looking for a way to do something like this:

// style.css
@def borderSize '2px';

.style {
  width: borderSize + 2;
  height: borderSize + 2;
}

where the width and height attributes would end up having values of 4px.

Answer 1

Sometimes I use the following:

@eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */

Oddly, this only works, if you don't put any spaces between the + operator and the operands. Also, in @eval you can't use constants that were previously defined by @def. You can however use constants that are defined as static fields in one of your Java classes:

@eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px";

Or you could let the calculation be performed completely by Java:

@eval WIDTH com.example.MyCssCalculations.width(); /* static function, 
                                                      no parameters! */
@eval HEIGHT com.example.MyCssCalculations.height();
.style {
    width: WIDTH;
    height: HEIGHT;
}

But what I would actually like to do is very similar to your suggestion:

@def BORDER_SIZE 2;
.style {
    width: value(BORDER_SIZE + 2, 'px'); /* not possible */
    height: value(BORDER_SIZE + 3, 'px');
}

I don't think that's possible in GWT 2.0. Maybe you find a better solution - here's the Dev Guide page on this topic.

Answer 2

Mozilla kind-of-sort-of-not-really supports this with it's CSS calc() function.

This example shamelessly stolen (with attribution!) from Ajaxian

/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

It's not cross-browser, and it's probably only barely supported by even bleeding-edge versions of Firefox, but there's at least being progress made in that direction.