GWT: How to access in one stylesheet constants defined in another stylesheet from the same ClientBundle

Question

This problem is best described with an example.

I have the following ClientBundle in my GWT app:

interface Resources extends ClientBundle {
    public static final Resources INSTANCE = GWT.create(Resources.class);

    @Source("defines.css")
    Defines defines();

    @Source("appStyle.css")
    @CssResource.NotStrict
    Style style();

    interface Style extends CssResource {
        String appLogo();
        (...)
    }

    interface Defines extends CssResource {
        String formInputBackgroundColor();
        String formInputBorderColor();
        (...)
    }
}

The appStyle.css is the main stylesheet used by the application and the defines.css is a stylesheet containing only constants like:

@def formInputBackgroundColor #D8ECFD;
@def formInputBorderColor #7FAAFF;
(...)

Now I can use the constants in the defines.css stylesheet inside UIBinder templates and in application code without problems, but I can't use those constants in my appStyle.css.

I have already tried replacing interface Style extends CssResource with interface Style extends Defines, hoping that inheriting from the Defines stylesheet would give me access to the constants in the "child" Style stylesheet, but then the GWT compiler complains with errors like:

Rebinding my.project.client.resources.Resources
    Creating assignment for style()
        Replacing CSS class names
            The following obfuscated style classes were missing from the source CSS file:
                formInputBorderColor: Fix by adding .formInputBorderColor{}
                formInputBackgroundColor: Fix by adding .formInputBackgroundColor{}
                (...)

Is there any way to achieve this?

Answer 1

I found a way to do it, but it's far from elegant and I would prefer another solution, like using some kind of inheritance or Annotations, if possible.

The way I got it to work is to @eval every constant I need from defines.css in the appStyle.css stylesheet, but that leads to a lot of code duplication and it's a mess to mantain.

@eval formInputBackgroundColor Resources.INSTANCE.defines().formInputBackgroundColor();
@eval formInputBorderColor Resources.INSTANCE.defines().formInputBorderColor();

If you have a better solution, please share.