Type config data structure

data-structure.md

Data structure notes

WYSIWYG config structure

wysiwyg:
  p: para # single assigment tag:key
  para: p, ul, ol, p.small # multiple assignment list key:selectors

Type style data object

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')} }`