1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import { unroll } from './iss_utils'
const getCanonicState = (state) => {
if (state) {
return ['normal', ...state.filter(x => x !== 'normal')]
} else {
return ['normal']
}
}
const getCanonicRuleHeader = ({
component,
variant = 'normal',
parent,
state
}) => ({
component,
variant,
parent,
state: getCanonicState(state)
})
const prepareRule = (rule) => {
const { parent } = rule
const chain = [...unroll(parent), rule].map(getCanonicRuleHeader)
const header = chain.map(({ component, variant, state }) => [
component,
variant === 'normal' ? '' : ('.' + variant),
state.filter(s => s !== 'normal').map(s => ':' + s).join('')
].join('')).join(' ')
console.log(header, rule.directives)
const content = Object.entries(rule.directives).map(([key, value]) => {
let realValue = value
switch (key) {
case 'shadow':
realValue = realValue.map(v => `${v.inset ? 'inset ' : ''}${v.x} ${v.y} ${v.blur} ${v.spread} ${v.color} / ${v.alpha}`)
}
if (Array.isArray(realValue)) {
realValue = realValue.join(', ')
}
return ` ${key}: ${realValue};`
}).sort().join('\n')
return [
header,
content
]
}
export const serialize = (ruleset) => {
// Scrapped idea: automatically combine same-set directives
// problem: might violate the order rules
return ruleset.filter(r => Object.keys(r.directives).length > 0).map(r => {
const [header, content] = prepareRule(r)
return `${header} {\n${content}\n}\n\n`
})
}
|
