wysiwyg:
p: para # single assigment tag:key
para: p, ul, ol, p.small # multiple assignment list key:selectors
const settingToParams = settings =>
Object.values(settings).map((k,v) => `$${k}: ${v}`).join(',')
const settingToVars = settings =>
Object.keys(settings).map(k => `$${k}`).join(',')
const writeMixinDefinition = ({ name, settings }) => `
@mixin ${name}(${settingsToParams(settings)}){
@include typebeast(settingsToVars(settings));
}
`
const writeCSSBlock = ({ breakpoint, mixin, selectors }) => `
${mixin.definition}
${selectors.join(', ')} {
@include ${ mixin.name };
}`
const styles = {
para: {
breakpoints: {
// pre-render
default: {
settings: { size: 14, line: 18, weight: 'bold' },
mixin: {
name: 'type-para-default',
definition: writeDefinition(...)
}
},
// post render
large: {
settings: { size: 18 },
mixin: {
name: 'type-para-default',
definition: `
@mixin type-para-large($size: 18){
@include typebeast($size);
}
`
}
},
selectors: ['.type-para', '.wysiwyg p', '.wysiwyg ol', '.wysiwyg ul']
},
caption: { etc },
}
// ignore for now, circle back later
const writeResponsiveBlock = (breakpoint, styles) =>
wrapInBreakpointIfNecessary(breakpoint,
getByBreakpointName(breakpoint, styles) // find nesting return whole obj
.filter(Boolean) // might not have settings for a given breakpoint
)
const wrapInBreakpointIfNecessary = (name, mediaQueries, blocks) =>
name === 'default'
? blocks.join('\n')
: `${mediaQueries[name]} { ${blocks.join('\n')} }`