Function getModifiableCSSDeclaration

src/inject/dynamic-theme/modify-css.ts:67–123

(
    property: string,
    value: string,
    rule: CSSStyleRule,
    variablesStore: VariablesStore,
    ignoreImageSelectors: string[],
    isCancelled: () => boolean,
)

];

export function getModifiableCSSDeclaration(
    property: string,
    value: string,
    rule: CSSStyleRule,
    variablesStore: VariablesStore,
    ignoreImageSelectors: string[],
    isCancelled: () => boolean,
): ModifiableCSSDeclaration | null {
    let modifier: ModifiableCSSDeclaration['value'] | null = null;
    if (property.startsWith('--')) {
        modifier = getVariableModifier(variablesStore, property, value, rule, ignoreImageSelectors, isCancelled);
    } else if (value.includes('var(')) {
        modifier = getVariableDependantModifier(variablesStore, property, value, rule);
    } else if (property === 'color-scheme') {
        modifier = getColorSchemeModifier();
    } else if (property === 'scrollbar-color') {
        modifier = getScrollbarColorModifier(value);
    } else if (
        (
            property.includes('color') &&
            property !== '-webkit-print-color-adjust'
        ) ||
        property === 'fill' ||
        property === 'stroke' ||
        property === 'stop-color'
    ) {
        if (property.startsWith('border') && property !== 'border-color' && (value === 'initial' || value === 'currentcolor')) {
            const borderSideProp = property.substring(0, property.length - 6);
            const borderSideVal = rule.style.getPropertyValue(borderSideProp);
            const borderStyleVal = rule.style.getPropertyValue('border-style');
            if (borderSideVal.startsWith('0px') || borderSideVal === 'none' || borderStyleVal === 'none') {
                property = borderSideProp;
                modifier = borderSideVal;
            } else {
                modifier = value;
            }
        } else {
            modifier = getColorModifier(property, value, rule);
        }
    } else if (property === 'background-image' || property === 'list-style-image') {
        const selectorText = rule.selectorText;
        const pushFilter = selectorText
            ? (type: FilterType) => pushFilterSelector(selectorText, type)
            : null;
        modifier = getBgImageModifier(value, rule, ignoreImageSelectors, isCancelled, pushFilter);
    } else if (property.includes('shadow')) {
        modifier = getShadowModifier(value);
    } else if (bgPropsToCopy.includes(property) && value !== 'initial') {
        modifier = value;
    }

    if (!modifier) {
        return null;
    }

    return {property, value: modifier, important: getPriority(rule.style, property), sourceValue: value};
}