rimmel/dist/esm/sinks/style-sink.js

A Stream-Oriented UI library for the Rx.Observable Universe

import { asap } from '../lib/drain.js';

const STYLE_OBJECT_SINK_TAG = 'StyleObject';
const getCSSPropertySetter = (style, key) => /^--/.test(key)
    ? (value) => { value == null ? style.removeProperty(key) : style.setProperty(key, value); }
    : (value) => { style[key] = value; };
/**
 * Applies a given CSS value to a specified CSS property of an Element.
 *
 * @param Element node - The HTML element to which the CSS property will be applied.
 * @param CSSProperty key - The CSS property that will be set on the element.
 * @returns Function A function that takes a CSS value (specific to the CSS property)
 *                     and applies it to the element's style.
 * @example // Applies a background color to a div element
 * const divElement = document.getElementById('myDiv');
 * const setBackgroundColor = styleSink(divElement, 'backgroundColor');
 * setBackgroundColor('red'); // Sets the div's background color to red
**/
const StyleSink = (node, key) => getCSSPropertySetter(node.style, key);
const StylePreSink = (key) => (node) => StyleSink(node, key);
const StyleObjectSink = (node) => (kvp) => Object.entries(kvp ?? {})
    .forEach(([k, v]) => asap(getCSSPropertySetter(node.style, k), v));

export { STYLE_OBJECT_SINK_TAG, StyleObjectSink, StylePreSink, StyleSink };
//# sourceMappingURL=style-sink.js.map