GWT override GSS style in another GSS file

Question

Since my application got larger, I decided that each "module" of my application, will have its own resource file, style file and GSS file. Also styling of for example buttons will be in a different, global GSS file as it is more of an application style, used through the application.

This is not a problem, but when I wanted to do something like this:

.buttonGroup>.button.active{ background-color: red}

in one of the modules, it does not match anything.

Since the button style(buttonGroup, button, active) and behavior (add "active" class on click) is specified in different (global) GSS file, I am not able to change the style of the "active" class.

Here is a simplified example:

public interface AppResources extends ClientBundle {

    public static AppResources INSTANCE = GWT.create(AppResources.class);

    @Source({"style.gss"})
    AppStyle appStyle();
}

Style file:

public interface AppStyle extends CssResource {

    String buttonGroup();
    String button();
    String active();
}

Module:

public interface ModuleResources extends AppResources{

    public static ModuleResources INSTANCE = GWT.create(ModuleResources.class);

    @Source({"style.gss","module.gss"})
    ModuleStyle moduleStyle();
}

Style file:

public interface ModuleStyle extends AppStyle {
}

In GSS files I tried to use @provide and @require (it would not compile without it as it would have missing identifiers or classes).

It then compiles fine, but the buttonGroup, button and even the active class is treated as it belongs to the AppStyle, therefore style.gss styles are used and the rule:

.buttonGroup>.button.active{ background-color: red}

in module.gss is not matching anything as it is probably looking for .hash-ModuleStyle-buttonGroup, .hash-ModuleStyle-button and .hash-ModuleStyle-active classes, whereas the actual styles on the button are .hash-AppStyle-buttonGroup etc.

Answer 1

In the end I solved it by using @external on the classes I wanted to use in different GSS stylesheets.

By using @external all the classes from widgets, which had their own stylesheets, keep their class names unobfuscated, so that they can be overridden in any module stylesheet.

I didn't want to do it before, but that was the only solution that I could think off.

Answer 2

This is actually exactly what @Import is meant to solve!