JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

JavaScript

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);