Fix multiple declarations of the same property

[straker]

This simple fix merges properties already declared in the style into a single property as a semicolon-delimited list.
For example:

.background-gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background: -o-linear-gradient(top, #2F2727, #1a82f7)
}

would result in:

cssRules: [
    {
        selectorText: '.background-gradient',
        parentRule: null,
        style: {
            0: 'background',
            background: '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); background: -webkit-linear-gradient(top, #2F2727, #1a82f7); background: -moz-linear-gradient(top, #2F2727, #1a82f7); background: -ms-linear-gradient(top, #2F2727, #1a82f7); background: -o-linear-gradient(top, #2F2727, #1a82f7)',
            length: 1
        }
    }
]

This allows the declarations to be preserved as well as correctly parsed, and it will be overwritten if a more specific selector redefines the property. A downside to this implementation is that it does not give individual access to each rule. But since this didn't work to begin with I don't see it as a problem.

[zakdances]

This is great. There should also be an option to preserve the overridden duplicates in a separate key/value. It'd be very useful for saving and versioning property values.

[elfreyshira]

👍

[NickHeiner]

👍

[NV]

CSSOM.js will always keep only the last property. That’s what browsers do and CSSOM.js does the same.

However, I added a link to this fork to the README: https://github.com/NV/CSSOM#dont-use-it-if

[domenic]

Yay for matching browsers <3