Function scheduleWriteRules

src/js/WinJS/_Accents.ts:110–168

()

//

function scheduleWriteRules() {
    if (rules.length === 0 || writeRulesTOHandle !== -1) {
        return;
    }
    writeRulesTOHandle = _BaseUtils._setImmediate(() => {
        writeRulesTOHandle = -1;
        cleanup();

        var inverseThemeSelector = isDarkTheme ? Constants.lightThemeSelector : Constants.darkThemeSelector;
        var inverseThemeHoverSelector = Constants.hoverSelector + " " + inverseThemeSelector;

        var style = _Global.document.createElement("style");
        style.id = Constants.accentStyleId;
        style.textContent = rules.map(rule => {
            // example rule: { selector: "  .foo,   html.win-hoverable   .bar:hover ,  div:hover  ", props: [{ name: "color", value: 0 }, { name: "background-color", value: 1 } }

            var body = "  " + rule.props.map(prop => prop.name + ": " + colors[prop.value] + ";").join("\n  ");
            // body = color: *accent*; background-color: *listSelectHover*

            var selectorSplit = rule.selector.split(",").map(str => sanitizeSpaces(str)); // [".foo", ".bar:hover", "div"]
            var selector = selectorSplit.join(",\n"); // ".foo, html.win-hoverable .bar:hover, div:hover"
            var css = selector + " {\n" + body + "\n}";
            // css = .foo, html.win-hoverable .bar:hover, div:hover { *body* }

            // Inverse Theme Selectors
            var isThemedColor = rule.props.some(prop => prop.value !== ColorTypes.accent)
            if (isThemedColor) {
                var inverseBody = "  " + rule.props.map(prop => prop.name + ": " + colors[(prop.value ? (prop.value + 3) : prop.value)] + ";").join("\n  ");
                // inverseBody = "color: *accent*; background-color: *listSelectHoverInverse"

                var themedSelectors: string[] = [];
                selectorSplit.forEach(sel => {
                    if (sel.indexOf(Constants.hoverSelector) !== -1 && sel.indexOf(inverseThemeHoverSelector) === -1) {
                        themedSelectors.push(sel.replace(Constants.hoverSelector, inverseThemeHoverSelector));
                        var selWithoutHover = sel.replace(Constants.hoverSelector, "").trim();
                        if (CSSSelectorTokens.indexOf(selWithoutHover[0]) !== -1) {
                            themedSelectors.push(sel.replace(Constants.hoverSelector + " ", inverseThemeHoverSelector));
                        }
                    } else {
                        themedSelectors.push(inverseThemeSelector + " " + sel);
                        if (CSSSelectorTokens.indexOf(sel[0]) !== -1) {
                            themedSelectors.push(inverseThemeSelector + sel);
                        }
                    }
                    css += "\n" + themedSelectors.join(",\n") + " {\n" + inverseBody + "\n}";
                });
                // css
                //.foo, html.win-hoverable .bar:hover, div:hover, { *body* } 
                //.win-ui-light .foo,
                //.win-ui-light.foo,
                //html.win-hoverable .win-ui-light .bar:hover,
                //html.win-hoverable .win-ui-light.bar:hover,
                //.win-ui-light div:hover { *inverseBody* }
            }
            return css;
        }).join("\n");
        _Global.document.head.appendChild(style);
    });