@maskedeng-tom/ssrsx/src/hooks/styleToString/styleToString.js

server side renderer with tsx

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styleToString = void 0;
const cssTypes_1 = require("./cssTypes");
const changeCase_1 = require("./changeCase");
////////////////////////////////////////////////////////////////////////////////
const convertToCssValue = (selector, value) => {
    if (typeof value === 'number') {
        const enableAppendPx = (cssTypes_1.ignorePixelStyle.indexOf((0, changeCase_1.kebabu2Camel)(selector)) < 0) && (cssTypes_1.ignorePixelStyle.indexOf(selector) < 0);
        return enableAppendPx ? `${value}px` : String(value);
    }
    return value;
};
////////////////////////////////////////////////////////////////////////////////
const convertToCss = (selector, value) => {
    if (typeof value === 'string' || typeof value === 'number') {
        return `${(0, changeCase_1.camel2Kebabu)(selector)}:${convertToCssValue(selector, value)};`;
    }
    const styleValue = value.map(v => convertToCssValue(selector, v)).join((' '));
    return `${(0, changeCase_1.camel2Kebabu)(selector)}:${styleValue};`;
};
////////////////////////////////////////////////////////////////////////////////
const appendScopeName = (selectorString, scopeName) => {
    if (!scopeName || !selectorString.trim()) {
        return selectorString;
    }
    //
    const selector = selectorString.trim().split(' ');
    let deep = selector.indexOf('::v-scope');
    if (deep < 0) {
        deep = selector.indexOf('::v-deep');
    }
    //
    if (deep === 0) {
        if (selector.length === 1) {
            selector.push(`[${scopeName}]`);
        }
        else {
            selector[1] = `[${scopeName}] ${selector[1]}`;
        }
    }
    else {
        // no v-deep
        let targetSelector = selector.length - 1;
        if (deep > 0) {
            // v-deep
            targetSelector = deep - 1;
        }
        if (selector[targetSelector].indexOf('::') >= 0) {
            // selector[scope]::hover
            const ss = selector[targetSelector].split('::');
            selector[targetSelector] = `${ss[0]}[${scopeName}]::${ss[1]}`;
        }
        else if (selector[targetSelector].indexOf(':') >= 0) {
            // selector[scope]:abc
            const ss = selector[targetSelector].split(':');
            selector[targetSelector] = `${ss[0]}[${scopeName}]:${ss[1]}`;
        }
        else {
            // selector[scope]
            selector[targetSelector] = `${selector[targetSelector]}[${scopeName}]`;
        }
        //
    }
    // remove v-deep
    if (deep >= 0) {
        selector.splice(deep, 1);
    }
    return selector.join(' ');
};
////////////////////////////////////////////////////////////////////////////////
const CR = '\n';
const TAB = '  ';
////////////////////////////////////////////////////////////////////////////////
const styleToStringParser = (sass, parentSelector, store, indent, scopeName, pretty) => {
    var _a, _b;
    const sassObject = sass;
    for (const key in sassObject) {
        const value = sassObject[key];
        // rules
        if (key.slice(0, 1) === '@') {
            const ruleCss = styleToStringCore(value, {}, 2, scopeName, pretty);
            store[''] = (_a = store['']) !== null && _a !== void 0 ? _a : [];
            const cr = pretty ? CR : '';
            store[''].push(`${key}${ruleCss ? `{${cr}${ruleCss}}` : ';'}`);
            continue;
        }
        // css
        if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) {
            store[parentSelector] = (_b = store[parentSelector]) !== null && _b !== void 0 ? _b : [];
            store[parentSelector].push(convertToCss(key, value));
            continue;
        }
        // any selectors
        const selectors = key.split(',').map(v => v.trim());
        for (const selector of selectors) {
            const newParentKey = (selector.indexOf('&') >= 0) ?
                selector.replace(/&/g, parentSelector.trim())
                :
                    `${parentSelector ? `${parentSelector} ` : ''}${selector}`;
            styleToStringParser(value, newParentKey, store, indent, scopeName, pretty);
        }
        continue;
    }
};
////////////////////////////////////////////////////////////////////////////////
const styleToStringCore = (sass, store, indent, scopeName, pretty) => {
    styleToStringParser(sass, '', store, indent, scopeName, pretty);
    // for pretty
    const cr = pretty ? CR : '';
    const selectorTab = pretty ? TAB.repeat(indent - 1) : '';
    const tab = pretty ? TAB.repeat(indent) : '';
    const result = [];
    for (const selector in store) {
        if (selector) {
            // with selector
            result.push(`${selectorTab}${appendScopeName(selector, scopeName)}{${cr}`);
            for (const css of store[selector]) {
                result.push(`${tab}${css}${cr}`);
            }
            result.push(`${selectorTab}}${cr}`);
        }
        else {
            // no selector
            for (const css of store['']) {
                result.push(`${css}${cr}`);
            }
        }
    }
    return result.join('');
};
////////////////////////////////////////////////////////////////////////////////
const styleToString = (sass, scopeName, pretty) => {
    return styleToStringCore(sass, {}, 1, scopeName, pretty);
};
exports.styleToString = styleToString;
//# sourceMappingURL=styleToString.js.map