LESS support in Errai

As you may know, GWT supports some cool CSS tools. They have extended CSS and made it all more dynamic, that way your css can be more compact and GWT will create a permutation of your css just as it does for your Javascript. Now in Errai, we have our own approach to building user interfaces based on plain HTML5 templates. These templates can come directly from your designer our brand team. So supporting some of that dynamic behaviour is not feasible as we would loose the ability to directly preview the  templates in the browser without first running them through a template engine.

But, GWT is not the only dynamic CSS language. That is why we added support for LESS. It's already used by web designers, so they are familiar with it. You can convert it using javascript so that it you can still look at your templates in a browser. On top of that Errai will find all the LESS stylesheets in your project and convert them to CSS automatically and with this generated CSS it will perform some optimizations:

Optimizations

Basic minification

.div {
  /* This is the default background color */
  background: blue;
}
.empty {}

Would generate:

.div{background:blue;}

Selector merging

.div {prop: value;}
.div {foo: bar;}

Is converted into:

.div {prop:value;foo:bar;} 

Property merging

.a {background: blue;}
.b {background: blue;}

would give

.a,.b{background:blue;}

Finally the last thing it does is obfuscating the class selectors. For that to work it will go through your templates and find where these selectors are used and change them. To be able to use your CSS classes in your Java code, there is a utility that you can inject to access the selectors.

public class MyComponent extends Component {
   @Inject
   private LessStyle lessStyle;

...

   @PostCreate
   private void init() {
       textBox.setStyleName(lessStyle.get("input"));
   }
}

Errai will also inject this generated stylesheet into the head of your page. So, to use this, all you have to do is put a LESS file in your classpath and in true Errai fashion it will do the rest for you. This is available in the latest 3.0-SNAPSHOTs and 2.4-SNAPSHOTs. Give it a spin and let us know what you think.

What we could do next is automatically add variables to your LESS stylesheet so that you can have logic based on browser for instance.