Semantic UI 2.0.8 doesn't compile

[onetom]

I'm getting hundreds of all sorts of errors with less4j, though the official nodejs implementation works. The root cause of all these I suspect is the following syntax:

ERROR themes/default/globals/site.variables 496:21 no viable alternative at input ':' in unknown ruleset (which started at 496:1)
 495: /* Header Spacing */
 496: @headerTopMargin    : ~"calc(2rem - "@headerLineHeightOffset~")";
 497: @headerBottomMargin : 1rem;

Steps to reproduce:

git clone https://github.com/Semantic-Org/Semantic-UI-LESS.git
cd Semantic-UI-LESS/
cp -R _site/ site
cp theme.config.example theme.config

curl -Lo less4j.jar 'https://www.dropbox.com/sh/zcb8p27db9ou4x1/AADL3bTmbx4Q3R-89VcGzXsva/less4j-1.14.0.jar?dl=0'
java -jar less4j.jar semantic.less 2>&1 | less

At the same time, the original implementation works:

npm install less
node_modules/.bin/lessc semantic.less semantic.css

[Deraen]

Here's a simple test case:

❯ cat test.less 
@a: 5;

body {
  width: ~"calc(2rem - "@a~")";
}

~/tmp/Semantic-UI-LESS master*
❯ lessc test.less               
body {
  width: calc(2rem -  5 );
}

~/tmp/Semantic-UI-LESS master*
❯ java -jar less4j.jar test.less
Errors produced by compilation of test.less
ERROR 4:3 no viable alternative at input 'width' in ruleset (which started at 3:1)
 3: body {
 4:   width: ~"calc(2rem - "@a~")";
 5: }

ERROR 4:3 no viable alternative at input 'width' in ruleset (which started at 4:3)
 3: body {
 4:   width: ~"calc(2rem - "@a~")";
 5: }

ERROR 4:8 no viable alternative at input ':' in ruleset (which started at 4:8)
 3: body {
 4:   width: ~"calc(2rem - "@a~")";
 5: }

ERROR 4:10 missing EOF at '~"calc(2rem - "' in stylesheet (which started at 1:1)
 3: body {
 4:   width: ~"calc(2rem - "@a~")";
 5: }

Could not compile the file test.less

[SomMeri]

Thank you for reporting the issue.

The problem seem to be the lack of space between ", @a and ~". Less.js tolerates it, less4j does not. I will fix this into the next release.

[onetom]

@SomMeri Thanks in advance! I would rely on your library then to maintain the LESS version of Semantic UI packaged up as a http://cljsjs.github.io/ and/or http://www.webjars.org/ package then.

I'm currently packaging the default compiled version here https://github.com/exicon/hoplon-semantic-ui but we started to miss theming support...

[SomMeri]

There was also second problem: math operation (+, -) between string and number would return an error instead of being compiled into space separated list.

[SomMeri]

@onetom Semantic UI now compiles, but I want to close #296 too before I make new release. If you need release faster, let me know.

[onetom]

No, rush, it makes sense to fix #296 first. Thanks for the quick feedback! In the meantime we can still proceed with locally installed versions from the master branch.

[onetom]

For the record, thats how a Semantic-UI compilation looks like now:

onetom@retinatom ~/g/S/Semantic-UI-LESS> git branch -av
* master                87dd9cc Updated distribution to version 2.1.6

onetom@retinatom ~/g/S/Semantic-UI-LESS> time java -jar ~/Downloads/less4j-1.15.2.jar semantic.less > semantic.css
Warnings produced by compilation of semantic.less
WARNING theme.less 51:3 Compilation resulted in incorrect CSS. The IMPORT ended up inside a body of rule set located at 15:1.
 50: .loadFonts() when (@importGoogleFonts) {
 51:   @import url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}');
 52: }

        9.42 real        27.84 user         0.93 sys

onetom@retinatom ~/g/S/Semantic-UI-LESS> ls -l semantic.css
-rw-r--r--  1 onetom  staff  638783 Nov 22 13:55 semantic.css

No errors, but 1 curious warning. Thanks for the fixes @SomMeri !

[SomMeri]

@onetom css specification does not allow import inside ruleset. The fonts.googleapis.com thing probably ended inside some ruleset.