expansion of background contains errors

[mblakele]

var sc = require("shortcss")
sc.expand('background', 'no-repeat center/125% url(fubar.jpg)')

Expected:

background-image: url(fubar.jpg)
background-position: "center"
background-repeat: "no-repeat"
background-size: "125%"

Unexpected:

background-attachment: "no-repeat"
background-clip: "center/125%"
background-color: "center/125%"
background-image: "no-repeat"
background-origin: "no-repeat"
background-position: "center/125%"
background-repeat: "center/125%"
background-size: "url(fubar.jpg)"

Seems like the values are going into the wrong slots, and there's no handling of position and size.

[tyv]

expand('background', '#ffffff url('img_tree.png') no-repeat fixed right top')

returns

{
  "background-attachment": "#ffffff",
  "background-clip": "top",
  "background-color": "url('img_tree.png')",
  "background-image": "#ffffff",
  "background-origin": "right",
  "background-position": "url('img_tree.png')",
  "background-repeat": "fixed",
  "background-size": "no-repeat"
}

[tyv]

i can take this issue

[tyv]

it seems that background require map of possible values corresponded to the expanded property

[tyv]

@awinogradov there are 2 options to fix that correctly I see:

1. if you use library in browser runtime it is easy via getComputedStyle and with expandAsArray (which is okay for reasons I am here)
2. use library (almost the css parser) to parse compacted value correctly. For example background: it has / and between position and size and also it could contain clip and origin which values are border-box|padding-box and the order is important in that case, but order of other components aren't.. so many small issues. I suggest to use https://github.com/ben-eb/css-values for this and can create lib for expanding values if you agree to extend expand() function with it, it will bring an amount of bytes :)