Do we handle multiple backgrounds? about cssobj HOT 9 CLOSED

Assume below css:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

converted as:

{
'.myclass': {
  background: 'background1, background 2, ..., backgroundN'
}
}

So the link you provide can be converted using online-converter as:

{
  '.multi_bg_example': {
    width: '100%',
    height: '400px',
    backgroundImage: 'url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))',
    backgroundRepeat: 'no-repeat, no-repeat, no-repeat',
    backgroundPosition: 'bottom right, left, right',
    background: '-moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))'
  }
}

Am I understandarding right about your question?

from cssobj.

Yup.

So for example normally I may have to do all the conversion to string first the pass to cssobj, but it would be very nice if say I can pass in an array and cssobj automatically knows what to do?

from cssobj.

Please see the wiki for Property-with-multiple-values, that how array is parsed by cssobj.

Also, the Input-Object-Format may help.

from cssobj.

Maybe I'm mis-understanding how it should work, but:

1. I tested with backgroundImage and set an array to it and it seems to work correctly
2. I tested with backgroundSize and backgroundRepeat but they don't see to handle array correctly and seem to take only the last element of the array?

from cssobj.

@yellow1912 yes only the last element of array with valid css value will be applied, it's not cssobj, it's CSS rules.

{ p: { backgroundRepeat: ['no-repeat', 'repeat-x']  } }

will result as:

p { background-repeat: no-repeat; background-repeat: repeat-x;  }

Please read above CSS rules, and found your poblem from that.

cssobj will only do the conversion to CSS, and please check your CSS result with this tool:

https://github.com/cssobj/cssobj-plugin-csstext

from cssobj.

Huhm, I have tried this

backgroundRepeat: ["no-repeat", "repeat-x"]

However, when I inspect the element (in Chrome), I get only the repeat-x :(

Here is my object

http://imgur.com/a/cZUg1

BackgroundImage works with the array I passed in but backgroundSize and backgroundRepeat only take the last element of the array,

from cssobj.

After using the csstext plugin it seems like actually backgroundImage also being applied incorrectly

This is what I get with csstext:

#nl-widget-container, .nl-widget-container { background-image: url("/assets/images/sleeveless-romantic-chiffon-asian-fashion-dress-with-pleats-pink-04_1234567890_medium.jpg"); background-repeat: repeat-x; background-size: 60px 60px; }

As you can see with the imgur image above, each of the property is an array of 2 elements but what I get is a a single value instead of multiple?

Edit:

I played with the demo on your site:

http://imgur.com/a/bH88A

from cssobj.

@yellow1912 what's your point of usage? array as value lead to Cascading of Style Sheet, which mean,

What's CSS (Cascading of Style Sheet) ?:

p {color: red; color: blue; }

If you have 2 value of color, the style cascaded, only the last one: red will win and be applied.

https://drafts.csswg.org/css2/cascade.html#cascade

if two declarations have the same weight, origin and specificity, the latter specified wins

This is how CSS worked, it's the W3C standard.

But, what's your expectation of code color: ['red', 'blue'] result in? Please tell me to discuss this.

from cssobj.

I think I was confused by how the array should work. You are right, I should just join them by myself then pass to cssobj instead.

from cssobj.