GWT Initialize ClientBundle With Multiple CssResources

Question

I'm working on updating some legacy code to GWT 2 and I'm running into some odd behaviour. I have a custom interface that extends ClientBundle as per the gwt docs. Within that bundle I define several CssResources to point to the various .css documents for my module. The problem comes when I go to actually initialize my module. I have some code in the initializer that gets the static reference to each CssResource and calls ensureInjected(). The problem is, only the first call actually does anything. Any subsequent calls seem to be getting ignored and the css styles are not getting added to the application. What do I need to do to work with multiple css documents for a single module?

CssBundle.java

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

    /* CSS */
    @Source("mypath/public/Client.css")
    public ClientCss mainCSS();

    @Source("mypath/resources/css/mini/ext-all.css")
    public ExtAllCss extAllCSS();
}

ClientCss.java

public interface ClientCss extends CssResource {

    String applicationTitle();

    String branding();

    String bugReportDirections();

    @ClassName("Caption")
    String caption();
}

ExtAllCss.java

public interface ExtAllCss extends CssResource {
    @ClassName("close-icon")
    String closeIcon();

    @ClassName("close-over")
    String closeOver();

    @ClassName("col-move-bottom")
    String colMoveBottom();
}

MyModule.java

public class MyModule extends Composite
{
    public void initialize()
    {
        //this css shows up in the client
        CssBundle.INSTANCE.mainCSS().ensureInjected();
        //this does nothing
        CssBundle.INSTANCE.extAllCSS().ensureInjected();
    }
}

Answer 1

That code looks exactly right, but might not function the way you expect - instead of each ensureInjected() causing a new <style> block to be created, instead they just enqueue the styles that they need to be made available, and at the end of the current event loop a single <style> is added with all of the various collected styles. This limits the number of times that the document potentially needs to be restyled, and also helps reduce the number of style tags (old IE had a bug where there was a max number of tags possible).

To confirm this, check the entire contents of the <style> tag, you should see that both css files are appended there, one after the other.