some more stuff, generating CSS selectors from rules

src/components/button.style.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Button',
+  selector: '.btn',
   states: {
     hover: ':hover',
     disabled: ':disabled',

src/components/icon.style.js

@@ -1,3 +1,4 @@
 export default {
-  name: 'Icon'
+  name: 'Icon',
+  selector: '.icon'
 }

src/components/panel.style.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Panel',
+  selector: '.panel',
   validInnerComponents: [
     'Text',
     'Icon',

src/components/text.style.js

@@ -1,9 +1,7 @@
 export default {
   name: 'Text',
+  selector: '',
   states: {
     faint: '.faint'
-  },
-  variants: {
-    green: '/.greentext'
   }
 }

src/components/underlay.style.js

@@ -1,5 +1,6 @@
 export default {
-  name: 'Panel',
+  name: 'Underlay',
+  selector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]

src/services/theme_data/pleromafe.t3.js

@@ -0,0 +1,26 @@
+export const sampleRules = [
+  {
+    component: 'Underlay',
+    // variant: 'normal',
+    // state: 'normal'
+    directives: {
+      background: '#000',
+      opacity: 0.2
+    }
+  },
+  {
+    component: 'Panel',
+    directives: {
+      background: '#FFFFFF',
+      opacity: 0.9
+    }
+  },
+  {
+    component: 'Button',
+    directives: {
+      background: '#808080',
+      text: '#FFFFFF',
+      opacity: 0.5
+    }
+  }
+]

src/services/theme_data/theme_data_3.service.js

@@ -14,7 +14,7 @@ const components = {
 }
 
 // This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
-const getAllPossibleCombinations = (array) => {
+export const getAllPossibleCombinations = (array) => {
   const combos = [array.map(x => [x])]
   for (let comboSize = 2; comboSize <= array.length; comboSize++) {
     const previous = combos[combos.length - 1]
@@ -30,15 +30,52 @@ const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-export const init = () => {
+export const ruleToSelector = (rule) => {
+  const component = components[rule.component]
+  const { states, variants, selector } = component
+
+  const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
+
+  const applicableVariantName = (rule.variant || 'normal')
+  let applicableVariant = ''
+  if (applicableVariantName !== 'normal') {
+    applicableVariant = variants[applicableVariantName]
+  }
+
+  const selectors = [selector, applicableVariant, ...applicableStates]
+    .toSorted((a, b) => {
+      if (a.startsWith(':')) return 1
+      else return -1
+    })
+    .join('')
+
+  if (rule.parent) {
+    return ruleToSelector(rule.parent) + ' ' + selectors
+  }
+  return selectors
+}
+
+export const init = (ruleset) => {
   const rootName = root.name
   const rules = []
+  const rulesByComponent = {}
+
+  const addRule = (rule) => {
+    rules.push(rule)
+    rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
+    rulesByComponent.push(rule)
+  }
+
+  ruleset.forEach(rule => {
+
+  })
 
   const processInnerComponent = (component, parent) => {
     const {
-      validInnerComponents,
+      validInnerComponents = [],
       states: originalStates = {},
-      variants: originalVariants = {}
+      variants: originalVariants = {},
+      name
     } = component
 
     const states = { normal: '', ...originalStates }
@@ -51,16 +88,17 @@ export const init = () => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
-      rules.push(({
-        parent,
-        component: component.name,
-        state: combination.state,
-        variant: combination.variant
-      }))
+      // addRule(({
+      //   parent,
+      //   component: component.name,
+      //   state: combination.state,
+      //   variant: combination.variant
+      // }))
 
-      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
+      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
+  return rules
 }

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -0,0 +1,26 @@
+// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
+import {
+  getAllPossibleCombinations,
+  init,
+  ruleToSelector
+} from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  sampleRules
+} from 'src/services/theme_data/pleromafe.t3.js'
+
+describe.only('Theme Data 3', () => {
+  describe('getAllPossibleCombinations', () => {
+    it('test simple case', () => {
+      const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]])
+    })
+  })
+
+  describe('init', () => {
+    it('test simple case', () => {
+      const out = init(sampleRules)
+      console.log(JSON.stringify(out, null, 2))
+      out.forEach(r => console.log(ruleToSelector(r)))
+    })
+  })
+})