commit: 0729b529d7da2002f25039e1dad2732302009cf3
parent 521d308a6c6777a45c94183751f3305ce23bdad3
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jan 2024 00:43:46 +0200
some more stuff, generating CSS selectors from rules
Diffstat:
8 files changed, 109 insertions(+), 17 deletions(-)
diff --git a/src/components/button.style.js b/src/components/button.style.js
@@ -1,5 +1,6 @@
export default {
name: 'Button',
+ selector: '.btn',
states: {
hover: ':hover',
disabled: ':disabled',
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
@@ -1,3 +1,4 @@
export default {
- name: 'Icon'
+ name: 'Icon',
+ selector: '.icon'
}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -1,5 +1,6 @@
export default {
name: 'Panel',
+ selector: '.panel',
validInnerComponents: [
'Text',
'Icon',
diff --git a/src/components/text.style.js b/src/components/text.style.js
@@ -1,9 +1,7 @@
export default {
name: 'Text',
+ selector: '',
states: {
faint: '.faint'
- },
- variants: {
- green: '/.greentext'
}
}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
@@ -1,5 +1,6 @@
export default {
- name: 'Panel',
+ name: 'Underlay',
+ selector: '.underlay',
validInnerComponents: [
'Panel'
]
diff --git a/src/services/theme_data/pleromafe.t3.js b/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
+ }
+ }
+]
diff --git a/src/services/theme_data/theme_data_3.service.js b/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
- }))
-
- innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
+ // addRule(({
+ // parent,
+ // component: component.name,
+ // state: combination.state,
+ // variant: combination.variant
+ // }))
+
+ innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
})
}
processInnerComponent(components[rootName])
+ return rules
}
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/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)))
+ })
+ })
+})
