Add support for css variables.

Author: ben-eb

parser.jison

@@ -38,6 +38,7 @@
 ([0-9]+("."[0-9]+)?|"."[0-9]+)\b       return 'NUMBER';
 
 (calc)                                 return 'NESTED_CALC';
+(var\(.*\))                            return 'CSS_VAR';
 ([a-z]+)                               return 'PREFIX';
 
 "("                                    return 'LPAREN';
@@ -68,6 +69,7 @@ expression
   	| LPAREN math_expression RPAREN { $$ = $2; }
     | NESTED_CALC LPAREN math_expression RPAREN { $$ = $3; }
     | SUB PREFIX SUB NESTED_CALC LPAREN math_expression RPAREN { $$ = $6; }
+    | css_variable { $$ = $1; }
   	| css_value { $$ = $1; }
   	| value { $$ = $1; }
     ;
@@ -77,6 +79,10 @@ expression
   	| SUB NUMBER { $$ = { type: 'Value', value: parseFloat($2) * -1 }; }
   	;
 
+  css_variable
+    : CSS_VAR { $$ = { type: 'CssVariable', value: $1 }; }
+    ;
+
   css_value
   	: LENGTH { $$ = { type: 'LengthValue', value: parseFloat($1), unit: /[a-z]+/.exec($1)[0] }; }
   	| ANGLE { $$ = { type: 'AngleValue', value: parseFloat($1), unit: /[a-z]+/.exec($1)[0] }; }

src/__tests__/index.js

@@ -84,6 +84,12 @@ test(
   '-webkit-calc(50% - 25px)'
 )
 
+test(
+  'should ignore calc with css variables',
+  testFixture,
+  'calc(var(--mouseX) * 1px)'
+)
+
 test(
   'should reduce calc with newline characters',
   testFixture,

src/lib/stringifier.js

@@ -35,6 +35,8 @@ function stringify(node, prec) {
     }
     case "Value":
       return round(node.value, prec)
+    case 'CssVariable':
+      return node.value
     default:
       return round(node.value, prec) + node.unit
   }