Unexpected token type: 44(IMPORT_SYM) for @import

[alexo]

When processing the following less using latest less4j version (0.0.7)

#functions {
  @var: 10;
  color: color("red"); // #660000
  width: increment(15);
  height: undefined("self");
  border-width: add(2, 3);
  variable: increment(@var);
}

#built-in {
  @r: 32;
  escaped: e("-Some::weird(#thing, y)");
  lighten: lighten(#ff0000, 40%);
  darken: darken(#ff0000, 40%);
  saturate: saturate(#29332f, 20%);
  desaturate: desaturate(#203c31, 20%);
  greyscale: greyscale(#203c31);
  spin-p: spin(hsl(340, 50%, 50%), 40);
  spin-n: spin(hsl(30, 50%, 50%), -40);
  format: %("rgb(%d, %d, %d)", @r, 128, 64);
  format-string: %("hello %s", "world");
  eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));

  hue: hue(hsl(98, 12%, 95%));
  saturation: saturation(hsl(98, 12%, 95%));
  lightness: lightness(hsl(98, 12%, 95%));
}

#alpha {
  alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
}

I get the following exception:

com.github.sommeri.less4j.core.problems.BugHappened: Bug, please report issue: Unexpected token type: 44(IMPORT_SYM) for @import Offending place: 1:1

Expected output:

#functions {
  color: #eedd;
  width: increment(15);
  height: undefined("self");
  border-width: add(2, 3);
  variable: increment(10);
}
#built-in {
  escaped: -Some::weird(#thing, y);
  lighten: #ffcccc;
  darken: #330000;
  saturate: #203c31;
  desaturate: #29332f;
  greyscale: #2e2e2e;
  spin-p: #bf6a40;
  spin-n: #bf4055;
  format: "rgb(32, 128, 64)";
  format-string: "hello world";
  eformat: rgb(32, 128, 64);
  hue: 98;
  saturation: 12%;
  lightness: 95%;
}
#alpha {
  alpha: rgba(153, 94, 51, 0.6);
}

[alexo]

Same problem when processing the following less:

.mixin { border: 1px solid black; }
.mixout { border-color: orange; }
.borders { border-style: dashed; }

#namespace {
  .borders {
    border-style: dotted;
  }
  .biohazard {
    content: "death";
    .man {
      color: transparent;
    }
  }
}
#theme {
  > .mixin {
    background-color: grey;
  }
}
#container {
  color: black;
  .mixin;
  .mixout;
  #theme > .mixin;
}

#header {
  .milk {
    color: white;
    .mixin;
    #theme > .mixin;
  }
  #cookie {
    .chips {
      #namespace .borders;
      .calories {
        #container;
      }
    }
    .borders;
  }
}
.secure-zone { #namespace .biohazard .man; }
.direct {
  #namespace > .borders;
}

[SomMeri]

That is weird, I'm getting different error with the first file. Is is a full file? The error suggests that the character 1 of line 1 should have @import in it, but the example does not have it. Importing is not implemented yet.

Beginning of error report I get with less4j-0.0.7.jar:

 Errors produced by compilation of test.less
 ERROR 9:3 no viable alternative at input 'escaped' in ruleset (which started at 8:1)
 ERROR 9:31 missing ')' at ',' in selector (which started at 9:3)
 ERROR 9:34 mismatched input ')' expecting '{' in ruleset (which started at 9:3)
 ERROR 10:12 no viable alternative at input '#ffcccc' in selector (which started at 10:3)

I tried that file also with less.js-1.3.1 and I get this:

 ERR:
   type: Parse
   message: Syntax Error on line 9
   index: 152
   filename: test.less
   line: 9
   column: 2
   extract: #built-in {,  escaped: -Some::weird(#thing, y);,  lighten: #ffcccc;

Both seem to crash on the line 9 which contains this -Some::weird(#thing, y); That is not valid less, so if you really want it to pass, you should use properties escaping escaped: ~"-Some::weird(#thing, y)";.

I can not explain the error you are getting on the first input (I will have another look on it tomorrow).

[alexo]

I'm using using these less files to test how the less4j behaves when comparing to less.js. The idea is that when being compiled with less.js, the same content is processed to a valid output.... Can provide you with more details if needed...

[SomMeri]

The second file also returns different error for me:

Errors produced by compilation of test.less
ERROR 34:11 missing '}' at '{' in ruleset (which started at 28:1)
ERROR 35:12 missing '}' at '{' in ruleset (which started at 34:11)
ERROR 36:18 missing '}' at '.' in ruleset (which started at 35:12)
ERROR 36:26 no viable alternative at input ';' in stylesheet (which started at 1:1)
ERROR 36:26 no viable alternative at input ';' in selector (which started at 36:19)
ERROR 40:5 missing EOF at '}' in stylesheet (which started at 1:1)
Could not compile the file test.less

This is valid less but less4j crash for three reasons:

• The #namespace .borders; syntax on line 36 is not implemented yet, the #namespace > .borders; should work
• The same with #namespace .biohazard .man syntax on line 44 is not implemented yet, the #namespace > .biohazard > .man should work
• Mixin call #theme > .mixin on line 25 can not match mixin. I did not knew that this

#theme {
  > .mixin {
    background-color: grey;
  }
}

is supposed to be mixin definition. I can fix them either in 0.0.8 or 0.0.9.

[SomMeri]

Which version of less.js do you use?

[SomMeri]

Now I see escaped: e("-Some::weird(#thing, y)"); in the first input, did you changed it?

That syntax is not implemented in less4j, what it does? I think I'm going to split this issue into three smaller issues so it is less confusing. I still can not explain the import error :(

Edit: OK, I made mistake, I copy pasted expected output instead of input for testing. It is too late.

[SomMeri]

Sorry for previous comments, I see the error now. The problem with first input is the line escaped: e("-Some::weird(#thing, y)"); which contains unimplemented syntax. Had bad file copy pasted, sorry.

[SomMeri]

Required issues:

• Implement %(...) format function #62
• Alternative namespaces referencing #63
• Mixin declaration with preceeding combinator #64
• Add escape functions #65
• Color functions #16

[SomMeri]

Update after less4j-0.0.8: both cases produce css output without errors or warnings. The first case still does not produces expected output due to missing color functions #16 . Second case produce following:

 .mixin {
   border: 1px solid black;
 }
 .mixout {
   border-color: orange;
 }
 .borders {
   border-style: dashed;
 }
 #namespace .borders {
   border-style: dotted;
 }
 #namespace .biohazard {
   content: "death";
 }
 #namespace .biohazard .man {
   color: transparent;
 }
 #theme > .mixin {
   background-color: grey;
 }
 #container {
   color: black;
   border: 1px solid black;
   border-color: orange;
   background-color: grey;
 }
 #header .milk {
   color: white;
   border: 1px solid black;
   background-color: grey;
 }
 #header #cookie {
   border-style: dashed;
 }
 #header #cookie .chips {
   border-style: dotted;
 }
 #header #cookie .chips .calories {
   color: black;
   border: 1px solid black;
   border-color: orange;
   background-color: grey;
 }
 .secure-zone {
   color: transparent;
 }
 .direct {
   border-style: dotted;
 }

Tested with command line version.

[SomMeri]

The first case now produces output similar to less.js. There is only one difference: color: color("red"); Less.js translates it into color: #eedd, less4j into color: red. My theory is that color function in less.js is not able to handle named colors.

Closing since all required issues are either closed or will be closed in the next release.