enyo.kind({ name:"extras.Style", kind:"Control", //nodeTag:"style", // enyo v1 tag:"style", // enyo v2 published:{ css:0, }, create:function() { this.inherited(arguments); this.cssChanged(); }, cssChanged:function() { var s = [], l = "{", r = "}", c = ":", n = ";"; for(var k in this.css) { s.push(k,l); for(var j in this.css[k]) { s.push(j,c,this.css[k][j],n); } s.push(r); } this._css = s.join(""); }, getInnerHtml:function() { return this._css; }, generateInnerHtml:function() { return this._css; }, set:function(selector, css) { var c; if(this.css === 0) { this.css = {}; } if(!this.css[selector]) this.css[selector] = {}; var c = this.css[selector]; // custom mixin that delete when value === null for(var k in css) { if(css[k] === null && c[k]) { delete c[k]; } else { c[k] = css[k]; } } this.cssChanged(); this.render(); } }); enyo.kind({ name:"ex.App", kind:"Control", classes:"app", components:[ {content:"a div"}, {content:"another div"}, {content:"a third div"}, {kind:"Button", onclick:"changeStyle", content:"Change Style!"}, {name:"style", kind:"extras.Style", css:{ ".app > *":{ "border":"1px solid black", "margin":"5px", "-webkit-transition":"all 1s ease-out" } }}, ], changeStyle:function() { this.$.style.set(".app > *", { height:"200px", border:null }); } }); new ex.App().renderInto(document.body);