GWT - problems with constants in css

Question

Hi,

I'm new to GWT; I'm building a small sample app. I have several CSS files. I'm able to successfully use the ClientBundle and CssResource to assign styles to the elements defined in my UiBinder script.

Now I'd like to take it one step further and introduce CSS constants using @def css-rule. The @def works great when I define a constant and use it in the same CSS file. However I cannot use it in another CSS file. When I try to use the @eval rule to evaluate an existing constant the compiler throws an execption: "cannot make a static reference to the non-static method ".

Here is an example of what I'm trying to do:

ConstantStyle.css

@def BACKGROUND red;

ConstantStyle.java

package abc;
import ...;
interface ConstantStyle extends cssResource {
         String BACKGROUND();
}

MyStyle.css

@eval BACKGROUND abc.ConstantStyle.BACKGROUND();
.myClass {background-color: BACKGROUND;}

MyStyle.java

package abc;
import ...;
interface ConstantStyle extends cssResource {
         String myClass;
}

MyResources.java

package abc;
import ...;
interface MyResources extends ClientBundle {
    @Source("ConstantStyle.css")
     ConstantStyle constantStyle();

    @Source("MyStyle.css")
    MyStyle myStyle();
}

Thanks in advance!

Answer 1

The way I do this in my code is to simply refer to the constant within MyStyle.css, i.e.:

.myClass {background-color: BACKGROUND;}

I'm not entirely sure why that works, probably because both CSS files are injected in the right order. Otherwise, I tried adding the following at the top of MyStyle.css and it works too:

@import url("ConstantStyle.css");