1 files changed, 37 insertions, 55 deletions
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 39151e41..959852b7 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,62 +1,44 @@
-import { unroll } from './iss_utils'
+import { unroll } from './iss_utils.js'
 
-const getCanonicState = (state) => {
-  if (state) {
-    return ['normal', ...state.filter(x => x !== 'normal')]
+const serializeShadow = s => {
+  if (typeof s === 'object') {
+    return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {
-    return ['normal']
+    return s
   }
 }
 
-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`
-  })
+  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 == null || 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}: ${valType.trim()} | ${newValue.map(serializeShadow).map(s => s.trim()).join(', ')}`
+          default:
+            return `  ${directive}: ${valType.trim()} | ${newValue.trim()}`
+        }
+      } 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')
 }