Sass compiler handles length()/nth()/join()/append() incorrectly

[vaadin-bot]

Originally by @Artur-

---

The following scss does not compile correctly:

$list1: 10px;
$list2: 10 20;
$list3: 10,10%,abc;

.foo {
l1: length($list1);
l2: length($list2);
l3: length($list3);

n10: nth($list2, 1);
n20: nth($list2, 2);
nabc: nth($list3,3);
nn: nth((a b,c),2);
nn2: nth((a,b c),2);

nl1: join($list1,$list2,space);
nl2: join($list1,$list3,auto);
nl3: join($list1,$list2,auto);
nl4: join($list2,$list3, comma);
l2c: join($list2,comma,comma);

ll1: append($list3,foo);
ll2: append($list3,bar,space);
ll3: append($list3,bar,comma);
ll4: append($list3,bar,auto);
ll5: append((a b, c),bar,auto);
}

The expected output produced by sass-lang:

.foo {
 l1: 1;
 l2: 2;
 l3: 3;
 n10: 10;
 n20: 20;
 nabc: abc;
 nn: c;
 nn2: b c;
 nl1: 10px 10 20;
 nl2: 10px, 10, 10%, abc;
 nl3: 10px 10 20;
 nl4: 10, 20, 10, 10%, abc;
 l2c: 10, 20, comma;
 ll1: 10, 10%, abc, foo;
 ll2: 10 10% abc bar;
 ll3: 10, 10%, abc, bar;
 ll4: 10, 10%, abc, bar;
 ll5: a b, c, bar;
}

Ouput produced by Vaadin:

Error when parsing file 
web.scss on line 13, column 8
encountered "(". Was expecting one of: "+" "-" "." ")" "to" "through" "from" <STRING> <IDENT> <NUMBER> <URL> <VARIABLE> <PERCENTAGE> <PT> <MM> <CM> <PC> <IN> <PX> <EMS> <LEM> <REM> <EXS> <DEG> <RAD> <GRAD> <MS> <SECOND> <HZ> <KHZ> <DIMEN> <HASH> <UNICODERANGE> <FUNCTION> 

Error when parsing file 
web.scss on line 13, column 18
encountered ";
. Was expecting one of: "}
 "+" ">" "~" "[" "*" "&" "." ":" <INTERPOLATION> "@include" "@debug" "@warn" "@each" "@if" "@extend" "@content" <MICROSOFT_RULE> <IDENT> <VARIABLE> <HASH> "@import" "@media" <KEY_FRAME_SYM> 

Error when parsing file 
web.scss on line 14, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 14, column 11
Skipping: a,b c),2);

Error when parsing file 
web.scss on line 16, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 16, column 11
Skipping: $list1,$list2,space);

Error when parsing file 
web.scss on line 17, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 17, column 11
Skipping: $list1,$list3,auto);

Error when parsing file 
web.scss on line 18, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 18, column 11
Skipping: $list1,$list2,auto);

Error when parsing file 
web.scss on line 19, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 19, column 11
Skipping: $list2,$list3, comma);

Error when parsing file 
web.scss on line 20, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 20, column 11
Skipping: $list2,comma,comma);

Error when parsing file 
web.scss on line 22, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 22, column 13
Skipping: $list3,foo);

Error when parsing file 
web.scss on line 23, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 23, column 13
Skipping: $list3,bar,space);

Error when parsing file 
web.scss on line 24, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 24, column 13
Skipping: $list3,bar,comma);

Error when parsing file 
web.scss on line 25, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 25, column 13
Skipping: $list3,bar,auto);

Error when parsing file 
web.scss on line 26, column 4
encountered " ". Was expecting one of: ":" <IDENT> <FUNCTION> 

Warning when parsing file 
web.scss on line 26, column 16
Skipping: b, c),bar,auto);

Warning when parsing file 
web.scss on line 26, column 32
Skipping: }

---

Imported from https://dev.vaadin.com/ issue #12773

[vaadin-bot]

Originally by Mika Murtojarvi

---

Even the implemented list functions were incompatible with sass-lang in many cases. Those list functions have been removed from the compiler. They will be reimplemented soon while adding the support for custom function definitions.

[vaadin-bot]

Originally by Mika Murtojarvi

---

The fix to this problem will only address the missing functions. The provided test case also requires support for parenthesized lists which will be addressed separately (#13659).

As a temporary workaround, the test case is modified to store lists to variables such as $abc_list: a b,c; nn: nth($abc_list,2);