parse-named-breakpoints.js

/*

<breakpoint-list> := <condition> <breakpoint-func> [ ',' <condition> <breakpoint-func> ]*

*/
function parseABreakpointList(string) { 
  return string.split(/,\s+/).reduce(
    (acc, part) => {
      const [full, condition, breakpoints] = part.trim().match(
        /^([a-zA-Z-]+)\s*(--breakpoints\(.*\))$/
      )
      acc[condition] = parseABreakpointFunction(breakpoints)
      return acc
    },
    {}
  )
}

/*

<breakpoint-func> := '--breakpoints(' <breakpoint-string> ')'

*/
function parseABreakpointFunction(string) {
  return parseABreakpointString(
    /^--breakpoints\(.*\)$/.test(string.trim())
    && string.trim().match(/^--breakpoints\((.*)\)$/)[1] || ''
  )
}

/*

<breakpoint-string> := <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident> ]*

*/
function parseABreakpointString(string) {
  let list = string.trim().split(/\s+/)
  let breakpoints = {}
  if (list.length % 2 !== 0) {
    list = ['0', ...list]
  }
  for (let i=0; i < list.length; i = i + 2) {
    breakpoints[list[i + 1]] = list[i]
  }
  return breakpoints
}

const test = {
  breakpointString: '0 small 100px medium 200px large',
  breakpointStringMissingInitial: 'small 100px medium 200px large',
  breakpointFunction: '--breakpoints(small 100px medium)',
  breakpointList: 'width --breakpoints(small 100px medium)',
  breakpointListMulti: `
    width --breakpoints(small 100px medium),
    height --breakpoints(small 100px medium)
  `
}

// Test parsing breakpoint strings
console.assert(
  JSON.stringify(
    parseABreakpointString(test.breakpointString)
  )
  === JSON.stringify(
    {small: '0', medium: '100px', large: '200px'}
  ),
  'Fails breakpoint string'
)

console.assert(
  JSON.stringify(
    parseABreakpointString(test.breakpointStringMissingInitial)
  )
  === JSON.stringify(
    {small: '0', medium: '100px', large: '200px'}
  ),
  'Fails breakpoint string with missing initial'
)

// Parse a breakpoint function
console.assert(
  JSON.stringify(
    parseABreakpointFunction(test.breakpointFunction)
  )
  === JSON.stringify(
    {small: '0', medium: '100px'}
  ),
  'Fails function parsing'
)

// Parse a breakpoint list
console.assert(
  JSON.stringify(
    parseABreakpointList(test.breakpointList)
  )
  === JSON.stringify(
    {width: {small: '0', medium:'100px'}}
  ),
  'Fails list parsing with single list'
)

console.assert(
  JSON.stringify(
    parseABreakpointList(test.breakpointListMulti)
  )
  === JSON.stringify(
    {
      width: {small: '0', medium: '100px'},
      height: {small: '0', medium: '100px'}
    }
  ),
  'Fails list parsing with multiple lists'
)