fix: Fix improper variable handing in css-shorthand-expand by pre-processing whitespace

[mellyeliu]

Context

The css-shorthand-expand library (https://www.npmjs.com/package/css-shorthand-expand) does not handle variable spacing correctly. Property values like rgb(0, 0, 0 and var(--example-var, 0) are incorrectly being split (see: D61342957). Font values with quotations perform fine.

See: D61342957

Implementation

Let's preprocess the values to strip the whitespace in between parentheses that occur within comma separated parameters:

• rgb(0, 0, 0) -> rgb(0,0,0)
• var(--example-var, 0) -> var(--example-var,0)

We'll add back whitespaces after the commas within parentheses after splitting values if they are absent. (Prettier should handle this as well, but just for safety)

• rgb(0,0,0) -> rgb(0, 0, 0)
• var(--example-var,0) -> var(--example-var, 0)

In cases where there are whitespaces remaining (such as in calc(5px - 2px) or linear-gradient(to right, #ff7e5f, #feb47b)), let's avoid providing an autofix for simplicity. We achieve this by checking for leftover spaces between parentheses after stripping.

Ideally I would open a PR on the repo, but it has not been updated in a few years. The repo license is MIT, so another option would be to port over the code and maintain it in StyleX itself.

Testing

Added in test cases to ensure that:

1. Single values like borderColor: rgb(0, 0, 0) and borderWidth: var(--example-var, 0)are ignored
2. Multi-value shorthands like borderColor: rgb(0, 0, 0) rgb(10, 10, 10) are split appropriately
3. Multi-value shorthands like calc(100% - 20px) calc(90% - 20px) are marked as errors but exempt from autofix

• [x] I have read the contributing guidelines Contribution Guidelines
• [x] Performed a self-review of my code

[github-actions[bot]]

compressed-size: runtime library

Size change: 0.00 kB Total size: 2.52 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./packages/stylex/lib/stylex.js	1.04 (3.22)	0.00 (0.00)	0.0% (0.0%)
./packages/stylex/lib/StyleXSheet.js	1.48 (3.75)	0.00 (0.00)	0.0% (0.0%)

[github-actions[bot]]

compressed-size: e2e bundles

Size change: 0.00 kB Total size: 1125.68 kB

View unchanged

Filename: gzip (minify)	kB size	kB change	% change
./apps/rollup-example/.build/bundle.js	1002.49 (10185.35)	0.00 (0.00)	0.0% (0.0%)
./apps/rollup-example/.build/stylex.css	123.19 (774.43)	0.00 (0.00)	0.0% (0.0%)

[necolas]

Looks like you need to squash your commits and rebase the diff onto main

[mellyeliu]

@necolas Rebased - although if we squash and merge when merging it should automatically squash into one commit on top of main right?