Adding values to shorthand properties. about jss

[kof]

Give me a use case in jss ....

[kof]

+= is just string concatenation in your case, it can be done already ...

[trusktr]

@kof += on el.style won't actually modify the string if the appended string would override a previous part of the property or is invalid for that property. f.e., if you do

el.style.background = "url(one.png)";
el.style.background += " url(two.png)";
console.log(el.style.background); // logs "url(one.png)"

but if you do

el.style.background = "url(one.png)";
el.style.background += " fixed";
console.log(el.style.background); // logs "url(one.png) fixed"

Basically it only modifies the string if the result is valid and makes sense. There can only be a single url() in the background property, so when you try to add a second one, it ignores the new value and leaves it at the old value. f.e.

el.style.background = "red";
el.style.background = "urrl(one.png)"; // urrl is invalid, leaves the previous value intact.
console.log(el.style.background); // logs "red"

[kof]

yes it ignores strings if the resulted rule will be invalid.

[kof]

I still don't see a concrete use case ...

[trusktr]

Yeah, it's more practical to just modify non-shorthand properties, e.g. background-image, -position, etc, and code is more readable that way.

[trusktr]

Something more useful would be a method like rule.unShorthand that splits shorthand properties into the longhand properties.

[kof]

I don't see any value, just overhead.