Bug: CSS variables can't be a space character

React version: v16/v17

Steps To Reproduce

1. https://codesandbox.io/s/empty-css-value-jmbfl?file=/src/App.js
2. Notice the “should be black border” has a pink border
3. Dangerously setting inner HTML works because it doesn’t go through reacts trim() flow
4. I’ve tracked the suspect code to here https://github.com/facebook/react/blob/6cbb9394d1474e3a728b49dc7f3a11d61a421ce3/packages/react-dom/src/shared/dangerousStyleValue.js#L44

Link to code example: https://codesandbox.io/s/empty-css-value-jmbfl?file=/src/App.js

The current behavior

CSS variables have their value trimmed - resulting in ' ' become '' which then removes the CSS variable from the browser.

The expected behavior

The ' ' value should not be trimmed.

One potential option is to, for any custom properties that have a space value, don’t trim.

if (isCustomProperty && value === ' ') {
   return value;
}

return ('' + value).trim();

I’m happy to do the bug fix. I would also love for this to get released on v16.

---

Found a work around:

https://codesandbox.io/s/empty-css-value-forked-g5jud?file=/src/App.js

style={{ "--border-color": "var(--, )" }}

[eps1lon]

Interestingly, trimming was intentionally added and considered “correct” (see commit message): https://github.com/facebook/react/commit/2bff5c5c7e776a183ed9b429f2cb46cc044d9bc1.

Considering that whitespace is a valid token for custom properties (2. Defining Custom Properties: the --* family of properties -> 8.2. Defining Arbitrary Contents: the <declaration-value> and <any-value> productions), it doesn’t seem like trimming is correct.

Maybe it was added to fix a browser quirk? Would be interesting to see if the described quirk still happens in React 17 without trimming the values.

[eps1lon]

what do we want for more evidence or investigation 😄

I guess propose the change via PR and then we’ll see what core members think about this change.