Proof of concept of styleMap extension

map-update.js

// ================================================================
// enable to update a set of properties with a single call
// ================================================================
StylePropertyMapReadOnly.prototype.update = function(updaters) {

    var oldValues = Object.create(null);
    for(var key in updaters) { oldValues[key] = this.get(key); }
    for(var key in updaters) { let newValue = updaters[key](oldValues); if (newValue) this.set(key, newValue); }

}

// ================================================================
// demo of the above
// ================================================================
document.body.style.width = '10px';
document.body.style.height = '15px';
document.body.style.zoom = '2';

// swap width and height, and apply the zoom on those values only
document.body.attributeStyleMap.update({
    zoom   : old => 1,
    width  : old => old.height.mul(old.zoom),
    height : old => old.width.mul(old.zoom)
});

proxy-and-units.js

// ================================================================
// enable fast usage of properties directly out of a styleMap
// ================================================================
Object.defineProperty(StylePropertyMapReadOnly.prototype, 'p', { get: function() {
    var styleMap = this;
    return new Proxy(Object.create(null), {
        get(o,k) { return styleMap.get(k); },
        set(o,k,v) { return styleMap.set(k,v); }
    })
} });

// ================================================================
// enable to use css units on any number
// ================================================================
Object.defineProperty(Number.prototype, 'px', { get: function() {
    return CSS.px(this);
} });


// ================================================================
// demo of the above
// ================================================================
document.body.style.width = document.body.style.width || "10px";

var styleMap = document.body.attributeStyleMap.p;
styleMap.width = styleMap.width.add(5..px);