CSS class definition doesn't work inside <g:HTML> element

Question

Could you guys tell me why css class definition doesn't work in following example ?

I'm using GWT 2.4 + Chrome 17.

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <ui:style>
        div.test {
            color: red;
        }
    </ui:style>
    <g:HTML>
        <div class="test">I should be red but I'm not</div>
    </g:HTML>
</ui:UiBinder>

Answer 1

CSS classes listed in the <ui:style> will be obfuscated, going from test to GKYSKJX (or something similar).

Update your div to this:

<div class="{style.test}">Now I'm red :)</div>

Alternatively, you could choose to force your style to NOT obfuscate by doing this:

@external .test;
div.test {
    color: red;
}

Unless you have a good reason, I recommend sticking with the first method.

See more at Declarative Layout with UiBinder - Hello Stylish World.