50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import Styletron from 'styletron';
|
|
import { injectStyle as _injectStyle } from 'styletron-utils';
|
|
import { defineElement } from 'domvm';
|
|
|
|
const styletronSingleton = new Styletron();
|
|
|
|
export function injectStyle(...styles) {
|
|
return _injectStyle(styletronSingleton, Object.assign({}, ...styles));
|
|
}
|
|
|
|
function isObject(obj) {
|
|
return typeof obj === 'object' && !Array.isArray(obj);
|
|
}
|
|
|
|
export function el(sig, ...attrsOrChildren) {
|
|
let attrs = {};
|
|
let children = attrsOrChildren;
|
|
if (attrsOrChildren.length && isObject(attrsOrChildren[0])) {
|
|
attrs = attrsOrChildren[0];
|
|
children = attrsOrChildren.slice(1);
|
|
if (isObject(attrs.css)) {
|
|
const className = injectStyle(Object.assign(attrs.css, attrs.styles || {}));
|
|
attrs.class = `${className} ${attrs.class || ''}`.trim();
|
|
delete attrs.css;
|
|
delete attrs.styles;
|
|
}
|
|
}
|
|
return defineElement(sig, attrs, ...children);
|
|
}
|
|
|
|
export function styled(styles, tagName = 'div') {
|
|
const className = injectStyle(styles);
|
|
|
|
return (...props) => {
|
|
const attrIndex = props.length && isObject(props[0]) ? 0 : -1;
|
|
const attrs =
|
|
attrIndex === -1
|
|
? { class: className }
|
|
: Object.assign({}, props[0], { className: `${className} ${props[0].className || ''}`.trim() });
|
|
|
|
if (isObject(attrs.css)) {
|
|
attrs.styles = styles;
|
|
attrs.class = props[0].class || '';
|
|
}
|
|
|
|
const children = props.slice(attrIndex + 1);
|
|
return el(tagName, attrs, children);
|
|
};
|
|
}
|