Giter VIP home page Giter VIP logo

less4j's People

Contributors

alexo avatar cmiles74 avatar doccrazy avatar expephall avatar felixscheffer avatar gdelhumeau avatar grantyb avatar jochenberger avatar karlvr avatar martin-g avatar sommeri avatar theogimonde avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

less4j's Issues

"Only operations on numbers are supported" error

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;}

Mixins lack named arguments feature

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
    )

Different handling of standalone '-'

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);
}

Maven Release

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

Warnings on Differences

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)

Exact ruleset optimization

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;
}

Provide a 'regular' jar

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?

Hashes as Mixins

This does not compile but should:

#container {
  color: black;
}

#mixin {
  #cookie {
     #container;
  }
}

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

Mixins - allowed names and how it works with nested rules

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.

Error Handling, Recovery and Reporting

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.

NPE in ExpressionEvaluator

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.

Math functions

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%

DefaultLessCompiler should be thread-safe

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.

Mixin Guards

  • 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; }

Implement cycle detection for mixins.

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

fails to parse ie-related hack using star prefix

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/

Lacking Main-Class

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.

Mixins in ruleset with multiple selectors

This is legal in less.js:

.h1, .h2 {
something: something;
}

.max1 { 
  .h1();
}

and compiles into:

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

Operations on Colors

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.