CODEWITHSUNDEEP
gwt
yuji
yuji

Reputation: 16725

How to migrate global stylesheet to GSS in GWT

I have a GWT 2.7 application where a lot of the styling is done in a CSS file referenced in the module XML file. I'd like to migrate this file to GSS so I can use some of the new functionality like variables and functions.

The GSS Migration Guide has instructions on migrating to GSS, but it appears to apply only to styles used through CSSResource objects. My understanding is that the only class selectors that can be accessed through CSSResources are those for which one declares accessors, and that all these class selectors will be obfuscated. This won't work for me because the selectors I want to use are unobfuscated ones that have mainly been added through UIObject.addStyleName and addStyleDependentName. I also don't want to have to add an accessor to an interface every time I want to add a new style.

As for the other three ways of using CSS files in a GWT project:

The first two don't seem to support GSS: even if I specify a GSS file it simply gets served directly to the browser without processing.

Is my only choice, then, to migrate to UIBinder? And if so, what's the minimal way to do this? (My current HTML host page is just the default host page with some additional stuff in the <head> element, so I feel like this ought to be straightforward).

Upvotes: 0

Views: 569

Answers (2)

yuji
yuji

Reputation: 16725

As I discovered later on, it turns out that you can inject a GSS (or CSS) stylesheet as a CSSResource without the selectors being obfuscated. Simply add the following annotation to the stylesheet:

@external '*';

This will mark all selectors in the file as external, which means 1) that the CSSResource subinterface used as the type for the stylesheet resource will no longer be required to implement accessor methods corresponding corresponding to the class selectors in the stylesheet and 2) that the selectors in the stylesheet will be unobfuscated, so for example if you have a class .foo in the stylesheet you'll be able to apply it to entities using UIObject.addStyleName("foo").

This way you can easily get some of the major benefits of GSS (variables, functions, etc.) and CSSResource (injection into the page rather than serving another file) without having to make any changes to your workflow.

Upvotes: 1

Colin Alworth
Colin Alworth

Reputation: 18331

Using a <ui:style> is the same as using CssResource. The .ui.xml file will generate the required ClientBundle and CssResource files, and those in turn will convert the GSS to css.

When you refer to <ui:style> content in a .ui.xml file, you do so as if you were caling an accessor on the interface, as {style.myStyleName} - because you are calling the accessor, but it is generated automatically. This may limit what you can do in your <ui:style> tag slightly. On the other hand, once you write CSS, your IDE can almost certainly add the accessors for you automatically, and if it doesn't, the failed recompile will list them so you can add them.

If instead you simply put a string literal "my-class-name" in your Java or HTML, the compiler has no way of knowing that "my-class-name" is the same or different everywhere in your app, and when to use one CssResource versus another. It also cannot rewrite those strings, so your CSS would remain unoptimized. Plus, now you can check for usages of a given css class name accessor - if no one uses it, delete it, then delete the CSS that uses it, to keep your .gss files smaller, and your application smaller.

You are correct in that <link> tags in the html, and <stylesheet> tags in the .gwt.xml do not result in running GSS. You do not need to use UiBinder (and I'm not a fan personally, but some people like it), but you do need to use the accessors, or there is no point to GSS as it stands.

If you want to avoid obfuscation and renaming, consider just running the closure-stylesheets directly, or something like LESS or SASS on your plain CSS file, which have no GWT integration, and so will work just fine with your string literals already in use. This will result in bigger compiled outputs, and remove your ability to find and remove unused CSS in an easy way.

Upvotes: 1

Related Questions