src/services/theme_data/iss_serializer.js


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

import { unroll } from './iss_utils.js'

const serializeShadow = s => `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`

export const serialize = (ruleset) => {
  return ruleset.map((rule) => {
    if (Object.keys(rule.directives || {}).length === 0) return false

    const header = unroll(rule).reverse().map(rule => {
      const { component } = rule
      const newVariant = rule.variant === 'normal' ? '' : ('.' + rule.variant)
      const newState = rule.state.filter(st => st !== 'normal')

      return `${component}${newVariant}${newState.map(st => ':' + st).join('')}`
    }).join(' ')

    const content = Object.entries(rule.directives).map(([directive, value]) => {
      if (directive.startsWith('--')) {
        const [valType, newValue] = value.split('|') // only first one! intentional!
        switch (valType) {
          case 'shadow':
            return `  ${directive}: ${newValue.map(serializeShadow).join(', ')}`
          default:
            return `  ${directive}: ${newValue}`
        }
      } else {
        switch (directive) {
          case 'shadow':
            return `  ${directive}: ${value.map(serializeShadow).join(', ')}`
          default:
            return `  ${directive}: ${value}`
        }
      }
    })

    return `${header} {\n${content.join(';\n')}\n}`
  }).filter(x => x).join('\n\n')
}