Question

I have 2 CSS files defining 2 sets of CSS rules for the same CSSResource. Can I somehow apply some-sort of scope so that the styles from one css file don’t override the styles from the other css file?

A simplified Example:

CSSResource

public interface Style extends CssResource {
String box_bkg();
}

Style1.CSS

.box_bkg {
background-color: red;
}

Style2.CSS

.box_bkg {
background-color: yellow;
}

ClientBundle

public interface BoxBundle extends ClientBundle {
    @Source("css/Style1.css")
    MyClass.Style redBoxStyle();

    @Source("css/Style2.css")
    MyClass.Style yellowBoxStyle();
}

When I look at the HTML generated, I see that the obfuscated class-name is the same regardless of which BoxBundle method it came from. So the boxes are either all yellow or red. How can I style the boxes differently if the obfuscated name is the same?

Thanks

Answer 1

The obfuscated class names are computed from the CssResource sub-interface and method names. If you want different class names, you have to make at least one subinterface of MyClass.Style and use it as the return type for the method(s) in BoxBundle; the goal is that the two methods have different return types:

public interface BoxBundle extends ClientBundle {
   @Source("css/Style1.css")
   Style1 redBoxStyle();

   @Source("css/Style2.css")
   Style2 yellowBoxStyle();

   interface Style1 extends MyClass.Style { }
   interface Style2 extends MyClass.Style { }
}

See also https://code.google.com/p/google-web-toolkit/issues/detail?id=6144