How can I use the same @def in multiple CssResource css files?

Question

I'd like to say, in a single, centralized location,

@def mainColor = #f00;

and then, in all of my other css files, refer to mainColor without having to redefine it. Then when I change mainColor in once place, my entire app changes color.

The best way I can think of so far is to include two @Source files for every CssResource declaration and always include the global def file. Are there any other ways?

Reathareave

Could you please add your own @Source example as another 'answer' for comparison? – Cracked

I just added it as a comment to Danny Kirchmeier's answer below. It's essentially the same technique, with a different syntax and context. – Reathareave

Answer 1

As far as I know, this is your only option:

style.css

@def mainColor #f00;

*.ui.xml

<ui:style src="../../../styles/style.css">
    .widget{ color: mainColor; }
</ui:style>

The downside to this is the relative path. Each ui.xml will require a different src path.

Alternatively, if you dont mind using a Constants.java file (instead of css), you could use @eval

<ui:style>
  @eval mainColor com.myproject.client.Styles.INSTANCE.mainColor(); 
  .widget{ color: mainColor; }
</ui:style>    

Oceania

Oof. Thanks for the suggestions. These are pretty rough, though ;) – Reathareave

@Thomas Broyer added at groups.google.com/forum/#!msg/google-web-toolkit/c8XdDoxDNZA/… that he uses this method, too. Outside of uibinders he mentioned the multiple @Source technique: @Source({"path/to/definitions.css", "foo.css"}) FooStyles foo; – Reathareave