JSFiddle - React, Tailwind, and code Playground
JavaScript
(function () {
"use strict"
var element, style, cssppt = "";
function css(val) {
if (cssppt) {
if (arguments.length === 1) {
style[cssppt] = val;
cssppt = "";
return cssproxy;
} else {
val = style[cssppt];
element = style = null;
cssppt = "";
return val;
}
}
val = element;
element = style = null;
return val;
}
var cssproxy = new Proxy(css, {
get(target, name) {
cssppt = name;
return target;
},
set(target, name, val) {
style[name] = val;
}
});
Object.defineProperty(HTMLElement.prototype, "css", {
get() {
element = this;
style = this.style;
return cssproxy;
}
});
})();
document.body.css.color("red").backgroundColor = "blue";
document.body.appendChild(document.createElement("div").css.backgroundColor("white").border("5px solid green").width("500px").height("500px")()).textContent = "Hi";
//Reminder- dont make reference to element.css because it is a proxy and the "target" changes all the time.