Toolkit creates invalid CSS when using double parentheses with calc()

[derweili]

Describe the bug

When using calc with double parentheses, toolkit produces invalid css output

Example input:

margin-left: calc((var(--inset-content-margin) * -1));

Example output

margin-left: (var(--inset-content-margin) * -1);

I know, having double parentheses is uncommon and unnecessary, but it's valid CSS according to W3C CSS Validator so I would expect toolkit to produce valid output.

This did not happen in toolkit version ^1.0.13.

Steps to Reproduce

1. Apply following styles to an element:

--inset-content-margin: 1rem;
margin-left: (var(--inset-content-margin) * -1);

2. Run build process. You will see the invalid CSS mentioned above.

Screenshots, screen recording, code snippet

Environment information

• Toolkit Version: 4.3.1

WordPress information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Antonio-Laguna]

@derweili could you provide more info regarding the steps to reproduce? It kind of goes in a different way to the first examples you pasted so I want to be sure I'm looking at the right thing.

[derweili]

@Antonio-Laguna I just did some tests. So the issue only occurs with double parantheses combined with a custom property:

This works:

/** Input: **/
max-width: calc(100vw - 500px));

/** Output: **/
max-width: calc(100vw - 500px));

This does not work:

/** Input: **/
max-width: calc((var(--my-width) - 500px));

/** Output: **/
max-width: (var(--my-width) - 500px)

What other information do you need?

[Antonio-Laguna]

I'm unsure how a calc would be removed in this instance. I'll dig deeper :)

[Antonio-Laguna]

@derweili This is caused by CSSNANO and it's this issue specifically postcss/postcss-calc#77

I'd suggest my suggestion is not to add several parenthesis for the time being or disabling calc from CSSNANO but given you can still benefit from some of the calc benefits I'd say the former is preferred

[nicholasio]

It sounds like this isn't something we can actually fix in toolkit so I'm closing this issue but if there's anything we need to do in toolkit regarding this issue feel free to reope.