JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div id="add-rule-test"></div>

CSS

#add-rule-test, #change-rule-test {
    background: #eee;
    border: 1px solid #000;
    display: inline-block;
    height: 100px;
    padding-left: 10px;
    position: relative;
    width: 100px;
}

JavaScript

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = "";
        // Если передана строка, оставляем, как есть
        if (typeof css === "string") {
            propText = css;
        } 
        // Если передан объект, обрабатываем каждый ключ
        else {
            propText = Object.keys(css).map(function (property) {
                var value = "";
                // Если попалось свойство "content",
                // заключаем значение в кавычки
                if (property === "content") {
                    value = "'" + css[property] + "'";
                // Иначе оставляем, как есть
                } else {
                    value = css[property];
                }
                // Склеиваем в строку пару "ключ" и "значение"
                return property + ":" + value;
            }).join(";"); // Склеиваем в строку все свойства
        }
        sheet.insertRule(selector + "{"+propText+"}", sheet.cssRules.length);
    };
})(document.createElement("style"));

// Пробуем передать css-свойства как объект
addRule("#add-rule-test::before", {
    "background": "#000",
    "content": "''",
    "display": "block",
    "height": "10px",
    "left": "5px",
    "position": "absolute",
    "top": "5px",
    "width": "10px"
});

// Пробуем передать css-свойства как строку
addRule("#add-rule-test::after", ""
        + "background:#f00;"
        + "bottom:5px;"
        + "content:'';"
        + "display:block;"
        + "height:10px;"
        + "position:absolute;"
        + "right:5px;"
        + "width:10px;"
);