77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import Styletron from 'styletron';
|
|
import { injectStyle as _injectStyle } from 'styletron-utils';
|
|
import { defineElement } from '../utils/domvm.js';
|
|
import { isObject, isString } from '../utils/comparators.js';
|
|
import { streamConfig } from '../utils/event.js';
|
|
|
|
const styletronSingleton = new Styletron();
|
|
|
|
export function injectStyle(...styles) {
|
|
return _injectStyle(styletronSingleton, Object.assign({}, ...styles));
|
|
}
|
|
|
|
export function el(sig, ...attrsOrChildren) {
|
|
let attrs = {};
|
|
let children = attrsOrChildren;
|
|
if (
|
|
attrsOrChildren.length &&
|
|
isObject(attrsOrChildren[0]) &&
|
|
!streamConfig.is(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;
|
|
}
|
|
if (isObject(attrs.class)) {
|
|
const oldClassObj = attrs.class;
|
|
attrs.class = Object.entries(oldClassObj)
|
|
.reduce((acc, [key, value]) => {
|
|
if (value) {
|
|
acc.push(key);
|
|
}
|
|
return acc;
|
|
}, [])
|
|
.join(' ');
|
|
}
|
|
}
|
|
if (children.length === 1 && streamConfig.is(children[0])) {
|
|
children = children[0];
|
|
}
|
|
return defineElement(sig, attrs, children);
|
|
}
|
|
|
|
export function styled(...styles) {
|
|
let className;
|
|
let tagName = 'div';
|
|
if (styles.length > 1 && isString(styles[0])) {
|
|
tagName = styles[0];
|
|
className = injectStyle(...styles.slice(1));
|
|
} else {
|
|
className = injectStyle(...styles);
|
|
}
|
|
|
|
return (...props) => {
|
|
const attrIndex = props.length && isObject(props[0]) ? 0 : -1;
|
|
const attrs =
|
|
attrIndex === -1
|
|
? { class: className }
|
|
: Object.assign({}, props[0], { class: `${className} ${props[0].class || ''}`.trim() });
|
|
|
|
if (isObject(attrs.css)) {
|
|
attrs.class += ' ' + injectStyle(attrs.css);
|
|
}
|
|
|
|
let children = props.slice(attrIndex + 1);
|
|
|
|
if (children.length === 1 && streamConfig.is(children[0])) {
|
|
children = children[0];
|
|
}
|
|
|
|
return el(tagName, attrs, children);
|
|
};
|
|
}
|