fix: handle calc keywords correctly (#234)

Fix #210

Author: ludofischer

parser.jison

@@ -73,6 +73,8 @@
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)dppx\b            return 'RES';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)\%                return 'PERCENTAGE';
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)\b                return 'NUMBER';
+("infinity"|"pi"|"e")\b                                           return 'CALC_KEYWORD';
+
 
 (([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)-?([a-zA-Z_]|[\240-\377]|(\\[0-9a-fA-F]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-fA-F]))([a-zA-Z0-9_-]|[\240-\377]|(\\[0-9a-fA-F]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-fA-F]))*\b       return 'UNKNOWN_DIMENSION';
 
@@ -106,6 +108,7 @@ expression
     | function { $$ = $1; }
     | dimension { $$ = $1; }
     | number { $$ = $1; }
+    | calc_keyword { $$ = $1; }
     ;
 
   function
@@ -160,6 +163,10 @@ expression
     | SUB dimension { var prev = $2; prev.value *= -1; $$ = prev; }
     ;
 
+  calc_keyword
+    : CALC_KEYWORD { $$ = { type: 'CalcKeyword', value: $1 }; }
+    ;
+
   number
     : NUMBER { $$ = { type: 'Number', value: parseFloat($1) }; }
     | ADD NUMBER { $$ = { type: 'Number', value: parseFloat($2) }; }

src/lib/reducer.js

@@ -361,6 +361,9 @@ function includesNoCssProperties(node) {
  * @return {import('../parser').CalcNode}
  */
 function reduce(node, precision) {
+  if (node.type === 'MathExpression' && (node.left.type === 'CalcKeyword' || node.right.type === 'CalcKeyword')) {
+    return node;
+  }
   if (node.type === 'MathExpression') {
     if (isAddSubOperator(node.operator)) {
       // reduceAddSubExpression will call reduce recursively

src/lib/stringifier.js

@@ -31,6 +31,8 @@ function stringify(node, prec) {
       let str = '';
       if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
         str += `(${stringify(left, prec)})`;
+      } else if (left.type === 'CalcKeyword') {
+        str += left.value;
       } else {
         str += stringify(left, prec);
       }
@@ -42,6 +44,8 @@ function stringify(node, prec) {
         order[op] < order[right.operator]
       ) {
         str += `(${stringify(right, prec)})`;
+      } else if (right.type === 'CalcKeyword') {
+        str += right.value;
       } else {
         str += stringify(right, prec);
       }
@@ -54,6 +58,8 @@ function stringify(node, prec) {
       return node.value.toString();
     case 'ParenthesizedExpression':
       return `(${stringify(node.content, prec)})`;
+    case 'CalcKeyword':
+      return node.value;
     default:
       return round(node.value, prec) + node.unit;
   }
@@ -74,7 +80,7 @@ module.exports = function (calc, node, originalValue, options, result, item) {
 
   const shouldPrintCalc =
     node.type === 'MathExpression' || node.type === 'Function' ||
-    node.type === 'ParenthesizedExpression';
+    node.type === 'ParenthesizedExpression' || node.type === 'CalcKeyword';
 
   if (shouldPrintCalc) {
     // if calc expression couldn't be resolved to a single value, re-wrap it as

src/parser.d.ts

@@ -68,9 +68,14 @@ export interface FunctionExpression {
   value: string;
 }
 
+export interface CalcKeywordExpression {
+  type: 'CalcKeyword';
+  value: string;
+}
+
 export type ValueExpression = DimensionExpression | NumberExpression;
 
-export type CalcNode = MathExpression | ValueExpression | FunctionExpression | ParenthesizedExpression;
+export type CalcNode = MathExpression | ValueExpression | FunctionExpression | ParenthesizedExpression  | CalcKeywordExpression;
 
 export interface Parser {
   parse: (arg: string) => CalcNode;

test/index.js

@@ -259,6 +259,33 @@ test(
   )
 );
 
+
+test(
+ 'should ignore multiplication with infinity',
+testValue('calc(infinity * 1px)', 'calc(infinity*1px)')
+);
+
+test(
+ 'should ignore addition with infinity',
+testValue('calc(infinity + 1px)', 'calc(infinity + 1px)')
+);
+
+test(
+ 'should ignore multiplication with pi',
+testValue('calc(1px * pi)', 'calc(1px*pi)')
+);
+
+test(
+ 'should ignore addition with pi',
+testValue('calc(43 + pi)', 'calc(43 + pi)')
+);
+
+test(
+ 'should preserve e',
+testValue('calc(e)', 'calc(e)')
+);
+
+
 test(
   'should reduce calc with newline characters',
   testValue('calc(\n1rem \n* 2 \n* 1.5)', '3rem')