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.