Arrays create multiple properties, not multiple values
mostafah opened this issue · comments
It seems like passing in { background: ['linear-gradient(to right, red 0%, blue 100%)', 'url(image.png)'] } creates this:
background-color: linear-gradient(to right, red 0%, blue 100%);
background-color: url(image.png);
Doesn’t that just ignore the first one? I guess it should be like this:
background-color: linear-gradient(to right, red 0%, blue 100%), url(image.png);
This is happening in styleToString. I have not worked with TS before, but I guess I can send a PR if you agree with the change.
No, the first behaviour is correct. It's designed to support the common use-case of CSS overloads. E.g. vendor prefix property overloads, feature overloads (where browsers use the first understood value), etc. This is documented in the README - see https://github.com/blakeembrey/free-style#multiple-css-values. I can see how the title may be confusing - does "Overload CSS Properties" sound better?
I see the point of this behavior now. You are right: “multiple values” reminds me of my second example, and that’s why I thought this is bug. “Overloading properties” sounds like the correct term to me.