some more stuff, generating CSS selectors from rules

This commit is contained in:
Henry Jameson 2024-01-23 00:43:46 +02:00
parent 521d308a6c
commit 0729b529d7
8 changed files with 108 additions and 16 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
}
}
]

View File

@ -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
}

View File

@ -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)))
})
})
})