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.

Can you show how you are using this? Are you calling moduleStyle().buttonGroup(), or appStyle().buttonGroup()? — Colin Alworth, Sep 12 '17 at 17:40
Obviously through AppStyle (AppStyle.INSTANCE.appStyle.button()) because the button is a component used through the app on different places. I just want in this one module, that the buttons have slightly different colour, but other than that they should stay the same. I would add different class to the button, but the button implementation is outside of the module scope, so it will always have the .active class from AppStyle — ezpzlmnsqz1337, Sep 13 '17 at 06:28
Equally obviously, if you call appstyle.button, you'll get the appstyle button class and not the module button style ;). I'll write up a suggestion or two for how to proceed in an answer. — Colin Alworth, Sep 13 '17 at 11:47
I was thinking maybe make the .active class external, but I thought that there must be a way how this is normally done :) — ezpzlmnsqz1337, Sep 13 '17 at 13:15

score 0 · Answer 1 · answered Nov 14 '17 at 09:58

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.

score 0 · Answer 2 · answered Nov 14 '17 at 19:40

0

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

answered Nov 14 '17 at 19:40

Thomas Broyer

64,353
7
91
164

GWT override GSS style in another GSS file

2 Answers2