0

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();
    }
}
5
  • 1
    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 <style> tag. Is it possible you only saw one style tag and noticed it started with the first .css file's contents, and assumed the second was missing? Can you share some details of your .css files, and show how you are confirming that the styles aren't present in the document? Commented Apr 28, 2021 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. Commented Apr 28, 2021 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 gitter.im/gwtproject/gwt for help debugging) Commented Apr 28, 2021 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. Commented Apr 28, 2021 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. Commented Apr 29, 2021 at 19:07

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.