style prop is not being built properly when there are CSS var present

[zernie]

• Check if updating to the latest Preact version resolves the issue

Describe the bug

Compiled style can be incorrect if there are css values present

To Reproduce

Let's say you have the following component

     const Component = () => {
       const [foo, setFoo] = useState(false)

       return (
         <button onClick={() => setFoo(val => !val)} style={{background: foo ? 'red' : undefined, "--font-family": 'Hevetica'}}>
         Test
          </button>
       )

Expected behavior

You'd imagine that if you click on the button multiple times, it'd switch between being red and transparent.

However, on the third render, in the compiled style string, the background property will be placed after the --font-family variable and thus ignored, making it always transparent.

The easiest fix is to pass any value other than underined, eg:
background: foo ? 'red' : 'none';

However, it is pretty counterintuitive. :)

[JoviDeCroock]

On what browser is that happening, when trying this in Chrome/Firefox it works correctly, https://stackblitz.com/edit/vitejs-vite-pnzfdq?file=src%2Fapp.tsx&terminal=dev - we always ask for a reproduction for this reason.

[rschristian]

Can you clarify what you mean here:

However, on the third render, in the compiled style string, the background property will be placed after the --font-family variable and thus ignored, making it always transparent.

Are you referring to the fact that the style string will become "--font-family: Hevetica; background: red;", rather than "background: red; --font-family: Hevetica;" when toggled? If so, that's the way the style interface works, I'm not sure we can reasonably guarantee ordering there.

const input = document.createElement('input');
input.style.color = 'red';
input.style.background = 'blue';

console.log(input.getAttribute('style')); // "color: red; background: blue;"

input.style.color = '';
console.log(input.getAttribute('style')); // "background: blue;"

input.style.color = 'red';
console.log(input.getAttribute('style')); // "background: blue; color: red;" 

[JoviDeCroock]

Also the order has no effect on functionality. Not sure what the exact problem is here, hence why reproductions make it easier for us to understand.