fix: preserve brackets around functions

Modify the parser to track parenthesized expressions. Keep the parentheses if a function is inside. Fix #113 Fix #115
postcss · Jan 10, 2022 · 0b70a1d · 0b70a1d
1 parent 50a0c4e
commit 0b70a1d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 3 deletions.
diff --git a/src/__tests__/index.js b/src/__tests__/index.js
@@ -735,6 +735,25 @@ test(
   testValue('calc(100% - calc(10px - 2vw))', 'calc(100% - 10px + 2vw)')
 );
 
+test(
+  'should preserve division precedence',
+  testValue(
+    'calc(100%/(var(--aspect-ratio)))',
+    'calc(100%/(var(--aspect-ratio)))'
+  )
+);
+
+test(
+  'should preserve division precedence (2)',
+  testValue(
+    `calc(
+        (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
+        ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
+    )`,
+    'calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width)/16 - var(--fluid-min-width)/16))'
+  )
+);
+
 test('precision for calc', testValue('calc(100% / 3 * 3)', '100%'));
 
 test(

diff --git a/src/lib/reducer.js b/src/lib/reducer.js
@@ -100,6 +100,8 @@ function collectAddSubItems(preOperator, node, collected, precision) {
         collected.push({node: reducedNode, preOperator});
       }
     }
+  } else if (node.type === 'ParenthesizedExpression') {
+    collectAddSubItems(preOperator, node.content, collected, precision);
   } else {
     collected.push({node, preOperator});
   }
@@ -286,6 +288,7 @@ function convertNodesUnits(left, right, precision) {
 /**
  * @param {import('../parser').CalcNode} node
  * @param {number} precision
+ * @return {import('../parser').CalcNode}
  */
 function reduce(node, precision) {
   if (node.type === "MathExpression") {
@@ -305,6 +308,12 @@ function reduce(node, precision) {
     return node;
   }
 
+  if (node.type === 'ParenthesizedExpression') {
+    if (node.content.type !== 'Function') {
+      return reduce(node.content, precision);
+    }
+  }
+
   return node;
 }
 

diff --git a/src/lib/stringifier.js b/src/lib/stringifier.js
@@ -20,6 +20,8 @@ function round(value, prec) {
 /**
  * @param {number | false} prec
  * @param {import('../parser').CalcNode} node
+ *
+ * @return {string}
  */
 function stringify(node, prec) {
   switch (node.type) {
@@ -46,6 +48,8 @@ function stringify(node, prec) {
       return round(node.value, prec).toString();
     case 'Function':
       return node.value.toString();
+    case 'ParenthesizedExpression':
+      return `(${stringify(node.content, prec)})`;
     default:
       return round(node.value, prec) + node.unit;
   }

diff --git a/src/parser.d.ts b/src/parser.d.ts
@@ -5,6 +5,11 @@ export interface MathExpression {
   operator: '*' | '+' | '-' | '/';
 }
 
+export interface ParenthesizedExpression {
+  type: 'ParenthesizedExpression';
+  content: CalcNode;
+}
+
 export interface DimensionExpression {
   type:
     | 'LengthValue'
@@ -37,7 +42,7 @@ export interface FunctionExpression {
 
 export type ValueExpression = DimensionExpression | NumberExpression;
 
-export type CalcNode = MathExpression | ValueExpression | FunctionExpression;
+export type CalcNode = MathExpression | ValueExpression | FunctionExpression | ParenthesizedExpression;
 
 export interface Parser {
   parse: (arg: string) => CalcNode;

diff --git a/src/parser.jison b/src/parser.jison
@@ -74,7 +74,7 @@ expression
     | math_expression SUB math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
     | math_expression MUL math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
     | math_expression DIV math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
-    | LPAREN math_expression RPAREN { $$ = $2; }
+    | LPAREN math_expression RPAREN { $$ = { type: 'ParenthesizedExpression', content: $2 }; }
     | function { $$ = $1; }
     | dimension { $$ = $1; }
     | number { $$ = $1; }

diff --git a/types/lib/reducer.d.ts b/types/lib/reducer.d.ts
@@ -6,5 +6,6 @@ export type Collectible = {
 /**
  * @param {import('../parser').CalcNode} node
  * @param {number} precision
+ * @return {import('../parser').CalcNode}
  */
-declare function reduce(node: import('../parser').CalcNode, precision: number): import("../parser").MathExpression | import("../parser").DimensionExpression | import("../parser").NumberExpression | import("../parser").FunctionExpression;
+declare function reduce(node: import('../parser').CalcNode, precision: number): import('../parser').CalcNode;