Fallback values as array instead of string?

[rtsao]

Is there a reason fallbacks are returned as a string?

For example:

var prefix = require('inline-style-prefix-all')

prefix({left: 'calc(50%)'});
// => {left: "-webkit-calc(50%);left:-moz-calc(50%);left:calc(50%)"}

Note, this string is not usable with actual inline styles. In my testing, the code below will not work (i.e. no styles are applied).

var div = document.createElement('div');
div.style.left = "-webkit-calc(50%);left:-moz-calc(50%);left:calc(50%)";

Since the string doesn't work as-is, shouldn't inline-style-prefixer return an array like so:

  {left: ['calc(50%)', '-moz-calc(50%)', '-webkit-calc(50%)']}

It seems to me this would be the preferred form when integrating with CSS-in-JS tools. But maybe I'm missing something important.

[robinweser]

Actually this might have been better done as an issue of inline-style-prefix-all itself, but I am sure you just mixed both repos as it sometime is unclear which actually does what. You're right saying that the string actually does not work (anymore). It was totally working with React <= 0.14.x, but won't work with React 15 anymore. I agree that it might (now) perhaps be better to actually return an array to let the user choose how to render those values.
Multiple alternative values will not be a solution anymore at all.

[rtsao]

Oh, very interesting. Thank you for pointing out that this does not work with React 15.0.

I was very confused as I could reproduce it sometimes, but not other times -- the issue was I was using different versions of React.

Do you have any context into why support for functionality was dropped in React 15.0? Was that intentionally removed? It was a nice feature to have fallbacks work automatically. I actually didn't even know this feature with React existed until now (I assume it was undocumented?).

[rtsao]

Looks like an issue was created: facebook/react#6467

So there was never any support for this.

[robinweser]

Yeah it was never "officially" supported and now as they moved from innerHTML to createElement is is not possible anymore. In my eyes this actually "kills" inline styles basically because you can not support browser compatibility issues any longer (at least not without a lot of pretesting the environment).

By returning an array we would still offer the option to do sth. else with those alternative values e.g. either test each directly or just generate valid CSS and use all values. Thanks for the idea!

[rtsao]

Cool, returning arrays would be super awesome!

I've been working on a library for "enhanced" inline style object literals, which takes a Radium-style object literal, and creates scoped CSS for things that can't be valid inline styles:

https://github.com/rtsao/epistyle

I haven't yet implemented fallbacks, but the way I would do it is take an array of values (just like Radium style object syntax).