fix operator spacing when inside parenthesis (#58)

closes #57
projectwallace · May 31, 2024 · 811d7f7 · 811d7f7
1 parent c407ba0
commit 811d7f7
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 26 deletions.
diff --git a/index.js b/index.js
@@ -385,32 +385,9 @@ function print_list(children, css) {
 			// var(--prop, VALUE)
 			buffer += print_value(node, css)
 		} else if (node.type === TYPE_OPERATOR) {
-			// https://developer.mozilla.org/en-US/docs/Web/CSS/calc#notes
-			// The + and - operators must be surrounded by whitespace
-			// Whitespace around other operators is optional
-
-			// Trim the operator because CSSTree adds whitespace around it
-			let operator = node.value.trim()
-			let code = operator.charCodeAt(0)
-
-			if (code === 43 || code === 45) { // + or -
-				// Add required space before + and - operators
-				buffer += SPACE
-			} else if (code !== 44) { // ,
-				// Add optional space before operator
-				buffer += OPTIONAL_SPACE
-			}
-
-			// FINALLY, render the operator
-			buffer += operator
-
-			if (code === 43 || code === 45) { // + or -
-				// Add required space after + and - operators
-				buffer += SPACE
-			} else {
-				// Add optional space after other operators (like *, /, and ,)
-				buffer += OPTIONAL_SPACE
-			}
+			buffer += print_operator(node)
+		} else if (node.type === 'Parentheses') {
+			buffer += '(' + print_list(node.children, css) + ')'
 		} else {
 			buffer += substr(node, css)
 		}
@@ -427,6 +404,42 @@ function print_list(children, css) {
 	return buffer
 }
 
+/**
+ * @param {import('css-tree').Operator} node
+ * @returns {string} A formatted Operator
+ */
+function print_operator(node) {
+	let buffer = EMPTY_STRING
+	// https://developer.mozilla.org/en-US/docs/Web/CSS/calc#notes
+	// The + and - operators must be surrounded by whitespace
+	// Whitespace around other operators is optional
+
+	// Trim the operator because CSSTree adds whitespace around it
+	let operator = node.value.trim()
+	let code = operator.charCodeAt(0)
+
+	if (code === 43 || code === 45) { // + or -
+		// Add required space before + and - operators
+		buffer += SPACE
+	} else if (code !== 44) { // ,
+		// Add optional space before operator
+		buffer += OPTIONAL_SPACE
+	}
+
+	// FINALLY, render the operator
+	buffer += operator
+
+	if (code === 43 || code === 45) { // + or -
+		// Add required space after + and - operators
+		buffer += SPACE
+	} else {
+		// Add optional space after other operators (like *, /, and ,)
+		buffer += OPTIONAL_SPACE
+	}
+
+	return buffer
+}
+
 /** @param {import('css-tree').Dimension} node */
 function print_dimension(node) {
 	let unit = node.unit

diff --git a/test/values.test.js b/test/values.test.js
@@ -115,6 +115,38 @@ test('formats whitespace around operators (*/+-) correctly', () => {
 	assert.is(actual, expected)
 })
 
+test('formats whitespace around operators (*/+-) correctly in nested parenthesis', () => {
+	let actual = format(`a {
+	width: calc(((100% - var(--x))/ 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x))/ 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x))/ 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x))/ 12 * 6) + (-1 * var(--y)));
+}`)
+	let expected = `a {
+	width: calc(((100% - var(--x)) / 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x)) / 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x)) / 12 * 6) + (-1 * var(--y)));
+	width: calc(((100% - var(--x)) / 12 * 6) + (-1 * var(--y)));
+}`
+	assert.is(actual, expected)
+})
+
+test('formats parenthesis correctly', () => {
+	let actual = format(`a {
+	width: calc(100% - var(--x));
+	width: calc((100% - var(--x)));
+	width: calc(100% - (var(--x)));
+	width: calc((100% - (var(--x))));
+}`)
+	let expected = `a {
+	width: calc(100% - var(--x));
+	width: calc((100% - var(--x)));
+	width: calc(100% - (var(--x)));
+	width: calc((100% - (var(--x))));
+}`
+	assert.is(actual, expected)
+})
+
 test('does not lowercase grid-area names', () => {
 	let actual = format(`a { grid-area: emailInputBox; }`)
 	let expected = `a {