sommeri / less4j Goto Github PK

Review and clean up readme before the maven release.

• less/less.js#999
• media bubbling
• @page inside media

Use TravisCI for continuous integration; http://travis-ci.org

They are all defined in https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js

This causes stack overflow less/less.js#280

.button {
    .button();
}

See mixin-closure.less test from less.js.

Hint:

• less/less.js#1042 (comment)

These cause null pointer exceptions:

String css = compiler.compile("selector:finc() { margin: 1 1 1 1; }");
String css = compiler.compile("{ margin: 1 1 1 1; }");

GroupId and packaging requirements:

• https://docs.sonatype.org/display/Repository/Choosing+your+Coordinates

General pom requirements:

• https://docs.sonatype.org/display/Repository/Central+Sync+Requirements

Sonatype repository guide:

• https://docs.sonatype.org/display/Repository/Sonatype+OSS+Maven+Repository+Usage+Guide

Mini guide:

• http://maven.apache.org/guides/mini/guide-naming-conventions.html

Whe processing the following valid less:

#overflow {
  .a { color: #111111 - #444444; } // #000000
  .b { color: #eee + #fff; } // #ffffff
  .c { color: #aaa * 3; } // #ffffff
  .d { color: #00ee00 + #009900; } // #00ff00
}

The following exception is thrown:
com.github.sommeri.less4j.core.compiler.CompileException: Only operations on numbers are supported.

According to lesstester site (http://lesstester.com/), the compiled css should look like this:

#overflow .a{color:#000000;}
#overflow .b{color:#ffffff;}
#overflow .c{color:#ffffff;}
#overflow .d{color:#00ff00;}

Test case: mixins-named-args.less

This was not implemented in less-1.3.0.js, so the feature can wait. However, it seems to be easy to implement. (Required changes:

• ASTBuilderSwitch.handleMixinReference
• MixinReference
• LessToCssCompiler.initializeMixinVariableScope
  )

See whether it would be helpful also for server side and implement if it is relevant. It is possible that it would be useful only for browser side.

less/less.js#1050

Less.js does not allow space between unary minus and a number behind it, less4j currently omits this requirement.

Input:

something {
  margin: - -2;
  margin: - 2 -2 -2 -2;
  margin: -1 - 1;
  parentheses: 12 - 23;
  simple: - 23;
}

Less.js:

inExpression {
  margin: - 1- 1- 1- 1;
  margin: - 2 -2 -2 -2;
  margin: -1 - - 1;
  parentheses: (12) (- 23);
  simple: - 23;
}

Less4j:

inExpression {
  margin: -4;
  margin: -2 -2 -2 -2;
  margin: 0;
  parentheses: 12 -23;
  simple: -23;
}

Four important points:

1.) Less.js behaviour follows CSS specification which requires no space between the unary '-' and the number behind it:

• correct negative number: -3
• incorrect negative number: - 3

2.) When this situation happens, Less.js produces incorrect CSS while less4j produces correct one. Once we fix the difference, we should make less4j produce warning when this happend. It is likely that the author of .less file did not planned to produce incorrect .css.

3.) Handling of spaces in expressions is already subtle and thus may have confuse the user. Difference between less4j and less.js makes situation even more complicated and may be even more confusing - therefore it must be removed.

4.) Functions: the same applies for functions. This makes it impossible to combine unary '-' and a function.

Input:

inFunctions {
  width: round(15);
  width: - round(15);
  width: -round(15);
}

Less.js output:

inFunctions {
  width: 15;
  width: - 15;
  width: -round(15);
}

do you have plans to publish your library on maven central?

Important differences between less.js and less4j should cause warnings. Important differences are those that cause functional differences in produces css. (e.g. lazy loading and last win strategy so far)

less/less.js#509

It is not in 1.3.0, but it is a good feature and should be ported.

This is illegal in les4j, but should be legal:

.max (@a, @b) when (@a > @b) {
  width: @a;
}
.max (@a, @b) when (@a < @b) {
  width: @b;
}

.max1 { .max(3, 6) }
.max2 { .max(8, 1) }

This is future feature of less.js. It is better to wait until they do it. less/less.js#748

Review and clean up wiki before the first maven release.

Less.js implements some kind of property declaration optimization:

#allAreUsedHere {
  margin: 2 2 2 2;
  margin: 2;
  margin: 2;
  margin: 2 2 2 2;
}

compiles into:
#allAreUsedHere {
margin: 2;
margin: 2 2 2 2;
}

It is not entirely sure whether they will keep this feature: less/less.js#943

Less4j does not support namespaces in selectors. Neither less.js supports them, so we can add them later.

Found in css-3.less.

Accessors are described on less.js wiki. Less 1.3.0 does not have them.

That feature was added and then removed and may be added again: less/less.js#76

At the moment, only a standalone jar is created. This causes issues when less4j is used as a dependency in another project (like WRO4J) as classes might end up on the classpath twice. Also, it dictates the slf4j-log4j binding.
For inclusion in another project, a "regular" jar with the respective dependencies would be desirable. Maybe you could create two distribution jars?

Known syntaxes:

  color: `javascript`;

less/less.js#926

This does not compile but should:

#container {
  color: black;
}

#mixin {
  #cookie {
     #container;
  }
}

#namespace {
  #cookie {
     #mixin > #cookie;
  }
}

Mixins apparently work in a bit different way as I through. This is a valid mixin name: #namespace .borders; and matches both:

#namespace {
  .borders {
    border-style: dotted;
  }
}

and

#namespace .borders {
    border-style: dotted;
}

such case is in mixins.less test case of less.js.

Less.js supports also & after nested rule selector and & + & which does some kind of selectors combinations.

Must have also this feature: less/less.js#410

Units division: less/less.js#391

Less4j should recover from errors whenever possible and report all compilation errors at once. It should throw the exception only if it is impossible to continue or in the end. User should be able to fix all errors within few iterations.

When processing the following less content:

    @x: blue;
    @z: transparent;
    @mix: none;

    .mixin {
      @mix: #989;
    }

    .tiny-scope {
      color: @mix; // #989
      .mixin;
    }

    .scope1 {
      @y: orange;
      @z: black;
      color: @x; // blue
      border-color: @z; // black
      .hidden {
        @x: #131313;
      }
      .scope2 {
        @y: red;
        color: @x; // blue
        .scope3 {
          @local: white;
          color: @y; // red
          border-color: @z; // black
          background-color: @local; // white
        }
      }
    }

The following exception is thrown:

        Caused by: java.lang.NullPointerException
          at com.github.sommeri.less4j.core.compiler.expressions.ExpressionEvaluator.evaluate(ExpressionEvaluator.java:66)
          at com.github.sommeri.less4j.core.compiler.expressions.ExpressionEvaluator.evaluate(ExpressionEvaluator.java:104)
          at com.github.sommeri.less4j.core.compiler.LessToCssCompiler.evaluateExpressions(LessToCssCompiler.java:72)

This problem can be reproduced with less4j-0.0.3.

Less.js supports four math functions:

• round(1.67); // returns 2
• ceil(2.4); // returns 3
• floor(2.6); // returns 2
• percentage(0.5); // returns 50%

When using same instance of DefaultLessCompiler in multi-threaded environment and compiling a valid less content (ex: #id {.class {color: red;}} ) , the compiler fails with java.util.EmptyStackException at NestedRulesCollector.popSelectors() method.

If the DefaultLessCompile is not designed to be thread-safe, then document this.

Other API suggestions:

• rename ILessCompiler to LessCompiler
• ILessCompiler.compile(String) should throw a checked exception. The purpose is to force the client to deal with less compilation errors.

• The full list of comparison operators usable in guards are: > >= = =< <.
• The keyword "true" is the only truthy value. It is case sensitive.
• Any value other than the keyword "true" (including "TRUE") is falsy.
• Guards can be separated with a comma ‘,’ (it does OR)
• Use the 'and' keyword to provide additional conditions inside a guard.
• Use the 'not' keyword to negate conditions.

More details on last three points: OR has higher precedence than AND. This .bool () when (true), (false) and (false) { content: 4444 } evaluates to true

.mixin (@a) when (@a < 10), (@a < -10) {  declaration: value; }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { declaration: value; }
.mixin (@b) when not (@b > 0) { declaration: value; }
.mixin () {...}

• 'And' ',' and 'not' are allowed only on top level, not inside guards.

.illegal(@a) when ((@a < 10)) {  declaration: value; }
.illegal(@a) when (not (@a < 10)) {  declaration: value; }
.illegal(@a) when ((@a < 10) and (@a > 2)) {  declaration: value; }

including pattern matching

If variables or mixins reference each other in cycle, current version behavior is undefined. That means, that it will crash with stack overflow error.

Sample LESS file:

.border-box {
    box-sizing: border-box;
    *behavior: url(/js/polyfill/boxsizing.htc); 
}

This is accepted by lessc just fine and the latest less4j I downloaded today won't parse it.

From the author of the polyfill @ https://github.com/Schepp/box-sizing-polyfill

If you prefix the behavior property with a star, like seen above,
it will only be seen by IE6 & IE7, not by IE8+ (it's a hack) which
is better for the performance on those newer browsers.

Also note this page for more css selector hacks (yes, this is ugly, but important):

http://centricle.com/ref/css/filters/

It would be very nice if you could add a Main-Class attribute and a static main method that compiles files from the command line. I expect that errors are much better reported with antlr than the javascript parser.

This is legal in less.js:

.h1, .h2 {
something: something;
}

.max1 { 
  .h1();
}

and compiles into:

.h1,
.h2 {
  something: something;
}
.max1 {
  something: something;
}

Less4j supports only operations on numbers. Less.js supports also operations on colors.