CODEWITHSUNDEEP
cssgwtobfuscation
1corn
1corn

Reputation: 447

Possible to remove all class prefixes in GWT-generated HTML?

I currently work as a web designer on a larger GWT project and I would like to suggest a refactoring of our CSS. I would like to remove all class prefixes and obfuscation from the DOM and instead use a clean cascading style to prevent collisions.

I understand why GWT works this way, but with our approach of using it, it would speed up development enormously if we could have a cleaner DOM tree.

I.e., instead of a class like this in the DOM:
GPJVK4TDFAB-com-project-name-project-folder-project-subfolder-CSS-resource-actual-classname

I would prefer this:
actual-classname

Ideally, the developers shouldn't have to change anything with their workflow. I just want to switch off the prefixes globally. I know in certain cases this could impact the ability to work in a modular way, but I don't see any drawbacks considering our project and workflow.

Cross-references would be much easier and, as mentioned above, with a clean and strict cascading approach there is no risk of collisions in my opinion.

Upvotes: 2

Views: 463

Answers (1)

Igor Klimer
Igor Klimer

Reputation: 15321

If you are using CssResource, you'd need to annotate all the classes that you don't want obfuscated with @external:

interface MyCssResource extends CssResource {
  String obfuscated();
  String legacySelectorA();
}

interface Resource extends ClientBundle {
  @Source("my.css")
  MyCssResource css();
}

@external legacySelectorA, legacySelectorB;
.obfuscated .legacySelectorA { .... }
.obfuscated .legacySelectorB { .... }

.obfuscated will get obfuscated, while .legacySelectors will not.

See documentation for more information.

There is no "disable obfuscation" global setting, since the whole concept of CssResources is so that you don't have to worry about duplicate class names and that can only be guaranteed if GWT can rename your classes.
Other "levers and knobs" that are available for CssResource that you'll probably stumble upon, but won't help:

  • <set-configuration-property name="CssResource.obfuscationPrefix" value="empty" /> will only result in "minimal-length selector names", but still obfuscated.
  • <set-configuration-property name="CssResource.style" value="pretty"/> will just make class names... "prettier", that is, the actual class name will get included in the obfuscated name (you probably have it enabled).

Upvotes: 3

Related Questions