Pitch: Escreva CSS em JS

Quero apresentar uma ferramenta que desenvolvi há alguns dias.

Escreva CSS utilizando todo o poder do JS.
Passe funções para propriedades CSS.

Exemplo de uso da ferramenta :

let css = {
    // Query selector. É executado sobre o elemento processado, afetando seus filhos
    selector: ".green",

    /*
    Variáveis que podem ser acessadas dentro de properties usando function 
    Caso seja informado uma function, o retorno dela é acessado
    */
    vars: {
        // As function recebem o próprio objeto vars no argumento, que já vem com o elemento HTML
        style: vars => vars.element.style,

        // Isso não funciona pois width é informado em properties, que executa depois de vars
        width: vars => vars.element.style.width
    },
    properties: {
        backgroundColor: "green",
        width: "200px",
        height: "150px"
    },

    // Os query selectors em childs são executados sobre os elementos HTML filhos, afetando os netos
    childs: [
        {
            selector: ".yellow", // A div yellow é filha de green e neta do body
            vars: {
                // A propriedade super acessa o vars do objeto pai
                parentH: vars => vars.super.style.height,

                // É possível acessar as variáveis do mesmo objeto (parentH), seguindo a sequencia de declaração
                size: vars => `calc(${vars.parentH} * 0.6)`,

                // Também é possível acessar o style do elemento pai dessa maneira
                parentStyle: vars => vars.element.parentElement.style
            },
            properties: {
                backgroundColor: "yellow",
                rotate: "45deg",
                width: vars => vars.size,
                height: vars => vars.size,
                position: "relative",
                top: "20%",
                left: "27%"
            }
        },
        {
            selector: ".blue",
            properties: {
                backgroundColor: "blue",
                width: "80%",
                height: "80%",
                borderRadius: "50%",
                position: "relative",
                top: "10%",
                left: "10%"
            }
        }
    ]
}