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();
    }
}

That code looks exactly right - can you clarify what you mean by "only the first call actually does anything"? Both should be injected at the same time when used this way (at the end of the current event loop), and in the same — Colin Alworth, Apr 28 '21 at 15:34
Your suggestion gave me the clue I needed. When I took a closer look at the style block in chrome, it was cutting off after a certain point so it LOOKED like some of the css was missing. I opened up the same page in firefox and used the style editor to verify that everything was there. My page is still not styled correctly, but at least now I can cross this off the list of potential causes. If you post this as an answer I will mark this as solved. Thanks. — pbuchheit, Apr 28 '21 at 16:54
Awesome, I'll post shortly. Feel free to update the Q or make another if you have more hints (or come chat in https://gitter.im/gwtproject/gwt for help debugging) — Colin Alworth, Apr 28 '21 at 18:53
The real problem seems to be the obfuscation. There are a bunch of old components in the code that are not designed to deal with the renaming, they expect to see the class name as defined in the original css. Any idea how to disable obfuscation and renaming? I know about @external, but that needs to be defined for every css class. I need a way to do it for everything. — pbuchheit, Apr 28 '21 at 19:08
@external is one option, the other is to change CssResource.style to one of the stable varieties (the enum CssObfuscationStyle tells you what the options are). Unfortunately, in super dev mode, this will always be changed to the value "stable", so that incremental resource gen works as expected. If it is just legacy widgets that are stuck that way, consider treating `@external` as a marker for "this is tech debt", to be fixed rather than live with it? Also I _think_ you can use `*` as a suffix on style names to wildcard them, match more than one item. — Colin Alworth, Apr 29 '21 at 19:07

score 1 · Accepted Answer · answered Apr 28 '21 at 18:58

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.

GWT Initialize ClientBundle With Multiple CssResources

1 Answers1