[Grid] Fix Grid v1 spacing when using CSS variables

[DiegoAndai]

Summary

Closes: #44662

Sadly, we went back and forth in regressions with #40224, #42574 and #44376.

The issue

This latest regression is caused because -calc(...) values are not valid, see https://codepen.io/diegoandai/pen/qEWboqp. The Grid is outputting -calc(...) margin values when cssVariables: true:

The solution

This PR fixes it by replacing-calc(...) with calc(-1 * calc(...)). It also replaces -<pixelValue>px with calc(-1 * pixelValue) as I don't think it's worth it adding the logic to differentiate between cases inside the Grid.

Before: https://stackblitz.com/edit/react-ziw5rb?file=Demo.tsx,package.json
After: https://codesandbox.io/p/sandbox/pull-44663-after-jvt2tj

Post mortem

As a post-mortem of the multiple regressions, what I think enabled them was not having enough tests with each PR to cover the cases being fixed.

What I don't like about this fix is that it also changes the implementation for users who are not using CSS variables. Although the result should be the same, I hope there are no edge cases to my approach. If there are an ideas for how to fix this without changing the functionality for non-CSS variables users, I'll be happy to refactor the solution.

[mui-bot]

Netlify deploy preview

https://deploy-preview-44663--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against d434d75

[siriwatknp]

This makes the most sense. Delate the calculation to CSS if we can 👍, I like it.

[oliviertassinari]

Sadly, we went back and forth in regressions

Lol.

1 #40224 breaks Grid v1 with CSS variables
2 #42574 fixes it, adds test for other stuff in #40224 that felt missing, but doesn't add test for the fix
3 #44376 fixes the regression introduced by 2. but reintroduces the bug 2 aimed to fix, proof https://deploy-preview-44376--material-ui.netlify.app/base-ui/, back to 1
4 #44663 fixes 1, add tests that should have been added in 2.

I think it's why having clear scopes with clear https://www.notion.so/mui-org/Product-owners-836c72feffcc4cb2b735b51527e6991a?pvs=4#01db303c540643969c7274ef6c823ba5 is important. Tests help for sure scale the ownership, but they don't allow to be as fast and do as quality work with 3-4 people iterating on the logic, as 1 can.

What I don't like about this fix is that it also changes the implementation for users who are not using CSS variables. Although the result should be the same, I hope there are no edge cases to my approach. If there are an ideas for how to fix this without changing the functionality for non-CSS variables users, I'll be happy to refactor the solution.

We could solve this with a partial revert of https://github.com/mui/material-ui/pull/42574/files#r1632084146. This wasn't truly accurate.