Yeah so many of us work with web technologies so you perhaps this may help somebody if they cross the same path.
point in case :
hsl from eg :
background-color: hsl(from var(--data-table-1) calc(h + 4) calc(s - 8) calc(l - 16));
So worked unitless in chrome , did not check apple for a while , then discovered it doesnt work without units in webkit ( chrome or safari ) , So I added in the units .. then it didnt work on windows anymore .. sigh.
So decided to use CSS.supports(…) , thinking I can detect when it doesnt support using units , just to find out chrome desktop returns true for this .. while failing to render it. A false positive.
Long story short , I eventually found that I can use CSS.supports , but not check for using from var but using from hsl , eg :
const SUPPORTS_UNITS = CSS.supports( 'color', 'hsl(from hsl(210 50% 50%) h s calc(l - 10%))')
What an ugly hack but it worked. now I could get around the false possitive from chrome desktop because this line actually returns false , and returns true in webkit. So I test for from hsl but I still use from var
So now i could keep my new fancy table styling using a single color value passed into the component
