reblendjs
Version:
This is build using react way of handling dom but with web components
47 lines • 1.63 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
import { cssObjectFromString, cssString, REBLEND_CHILDREN_WRAPPER_FOR_REACT_COMPONENT, REBLEND_COMPONENT, REBLEND_WRAPPER_FOR_REACT_COMPONENT } from '../common/utils';
class StyleUtil {
static instance;
elementStyles = {
[`[${REBLEND_COMPONENT}], [${REBLEND_WRAPPER_FOR_REACT_COMPONENT}], [${REBLEND_CHILDREN_WRAPPER_FOR_REACT_COMPONENT}]`]: {
display: 'contents !important'
}
};
styleElement;
constructor() {
if (StyleUtil.instance) {
return StyleUtil.instance;
} else {
this.init();
StyleUtil.instance = this;
}
}
init() {
this.styleElement = document.createElement('style');
document.head.appendChild(this.styleElement);
this.refresh();
}
update(elementQuerySelector, style) {
if (!elementQuerySelector) {
throw new Error('Invalid query selector or style');
}
const styleObject = typeof style === 'string' ? cssObjectFromString(style) : style;
this.elementStyles[elementQuerySelector] = {
...this.elementStyles[elementQuerySelector],
...styleObject
};
this.refresh();
}
remove(elementQuerySelector, styleKey) {
this.elementStyles[elementQuerySelector] && delete this.elementStyles[elementQuerySelector][styleKey];
this.refresh();
}
refresh() {
const textContent = [];
for (const [querySelector, elementStyle] of Object.entries(this.elementStyles)) {
textContent.push(`${querySelector} {${cssString(elementStyle)}}\n\n`);
}
this.styleElement.textContent = textContent.join('');
}
}
export default new StyleUtil();