Fix a crash when trying to divide by a CSS variable.

Author: ben-eb

src/__tests__/index.js

@@ -126,6 +126,27 @@ test(
   'calc(10px - 100px * var(--mouseX))'
 )
 
+test(
+  'should ignore calc with css variables (3)',
+  testFixture,
+  'calc(10px - (100px + var(--mouseX)))',
+  'calc(-90px - var(--mouseX))'
+)
+
+test(
+  'should ignore calc with css variables (4)',
+  testFixture,
+  'calc(10px - (100px / var(--mouseX)))',
+  'calc(10px - 100px / var(--mouseX))'
+)
+
+test(
+  'should ignore calc with css variables (5)',
+  testFixture,
+  'calc(10px - (100px - var(--mouseX)))',
+  'calc(-90px - var(--mouseX))'
+)
+
 test(
   'should reduce calc with newline characters',
   testFixture,

src/lib/reducer.js

@@ -65,6 +65,9 @@ function convertMathExpression(node, precision) {
 function reduceAddSubExpression(node, precision) {
   const {left, right, operator: op} = node
 
+  if (left.type === 'CssVariable' || right.type === 'CssVariable')
+    return node
+
   // something + 0 => something
   // something - 0 => something
   if (right.value === 0)
@@ -125,7 +128,7 @@ function reduceAddSubExpression(node, precision) {
   // (expr) <op> value
   if (
     left.type === 'MathExpression' &&
-    (left.operator === '+' || left.operator === '-') &&    
+    (left.operator === '+' || left.operator === '-') &&
     isValueType(right.type)
   ) {
     // (value + something) + value => (value + value) + something
@@ -176,7 +179,7 @@ function reduceAddSubExpression(node, precision) {
 }
 
 function reduceDivisionExpression(node) {
-  if (node.right.type === 'MathExpression')
+  if (!isValueType(node.right.type))
     return node
 
   if (node.right.type !== 'Value')
@@ -188,7 +191,7 @@ function reduceDivisionExpression(node) {
   // (expr) / value
   if (node.left.type === 'MathExpression') {
     if (
-      isValueType(node.left.left.type) && 
+      isValueType(node.left.left.type) &&
       isValueType(node.left.right.type)
     ) {
       node.left.left.value /= node.right.value