Add CSS builder
This commit is contained in:
parent
326a17f4e1
commit
2aff89d173
1 changed files with 32 additions and 0 deletions
32
css.js
Normal file
32
css.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
const diversify = (prefix, now, ...rest) =>
|
||||
now
|
||||
? now.split(/, */g).map(current => diversify(prefix+' '+current, ...rest)).join(",")
|
||||
: prefix
|
||||
|
||||
const walkStyles = (styles, trail=[], buffer=[]) => {
|
||||
let inner
|
||||
const position = buffer.push(undefined)-1
|
||||
Object.entries(styles).forEach(([name, children]) => {
|
||||
if (children.constructor.name === "Object") {
|
||||
trail.push(name)
|
||||
walkStyles(children, trail, buffer)
|
||||
trail.pop()
|
||||
} else {
|
||||
inner ||= []
|
||||
const rules = Array.isArray(children)
|
||||
? children.map(e => Array.isArray(e) ? e.map(e => e.toString()).join(' ') : e.toString()).join(", ")
|
||||
: children.toString()
|
||||
inner.push(`${name}: ${children}`)
|
||||
}
|
||||
})
|
||||
if (inner) buffer[position] = (`${diversify("", ...trail)} {${inner.join("; ")}}`)
|
||||
return buffer
|
||||
}
|
||||
|
||||
export const css = (styles) => walkStyles(styles).filter(e=>e).join("\n")
|
||||
|
||||
export const style = styles => {
|
||||
const style = document.createElement("style")
|
||||
style.innerHTML = css(styles)
|
||||
return style
|
||||
}
|
Loading…
Reference in a new issue