search

blakeembrey / free-style

Make CSS easier and more maintainable by using JavaScript
MIT License
707 stars 29 forks source link

Arrays create multiple properties, not multiple values #33

Closed mostafah closed 8 years ago

mostafah commented 8 years ago

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.

blakeembrey commented 8 years ago

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?

mostafah commented 8 years ago

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.