diff --git a/index.js b/index.js index 353fffa..73f5836 100644 --- 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 index dad89c7..179e5e7 100644 --- 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 {