Enyo Style Kind

b3.Style.js

enyo.kind({
    name: "b3.Style",
    tag: "style",
    styles:[],
    create: function(){
        //create style strings from each inner components style objects
        enyo.forEach(this.components, function(style){
            var innerStyles = [];
            for (var property in style.style) {
                if (style.style.hasOwnProperty(property)) {
                    console.log(property);
                    innerStyles.push(property + ":" + style.style[property]);
                }
            }
            //push inner styles to a full array of styles
            this.styles.push(style.selector + " {" + innerStyles.join(';')  + "}");
        }, this)

        //finish creating control
        this.inherited(arguments);
    },
    rendered: function(){
        this.inherited(arguments);
        
        //after rendered before inserting styles, check to see if CSS should
        //be targeted to a parent
        //todo: using a class here would be nice, no?
        if(this.parent && this.parent.id){
            var i = this.styles.length;
            while (--i > -1) this.styles[i] = "#" + this.parent.id + " " + this.styles[i];
        }
        
        //replace the inner content of this control, with raw style CSS
        document.getElementById(this.id).innerHTML = this.styles.join(" \n");  
    },
});

enyo.create({
    components: [
        {kind:"b3.Style", components:[
            {selector:".test::after", style:{
                content: "''",
                background: "url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg)",
                opacity: 0.5,
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
                position: "absolute",
                "z-index": -1
            }},
            {selector:".test", style:{
                width: "200px",
                height: "200px",
                display: "block",
                position: "relative"
            }},
        ]},
        {
            classes:"test", 
            content: "Some Content"
        }
    ]
}).renderInto(document.body);