CSS Resource - Combining literal and runtime substitution

Question

To enable runtime skinning changes that use browser specific rules, I need to combine two CSS-resource capabilities - runtime substitution and literal.

For example, to have dynamic button gradient, I would do something like that:

button {
   background: literal("-moz-linear-gradient(top, lightBg 0%, darkBg 100%)"); 
   background: literal("-webkit-linear-gradient(top,  lightBg 0%, darkBg 100%)");
   background: literal("-o-linear-gradient(top, lightBg 0%, darkBg 100%)");
   background: literal("-ms-linear-gradient(top,  lightBg 0%, darkBg 100%)");
   background: linear-gradient(top,  lightBg 0%, darkBg 100%); 
}

where lightBg and darkBg are evaluated at runtime using @eval.

The problem is that GWT doesn't parse the literal string, so it doesn't evaluate these two values. See here

Is it possible? Thanks.

Answer 1

I believe you can concatenate literals and regular css, which can look something like

background: literal("-moz-linear-gradient(") top lightBg 0, darkBg 100 literal(")");

Not sure if that last literal is needed or not.