a css-like syntax parser using peg.js

css-like-pegjs-parser.txt

/*
 * CSS like attribute parsing.
 * 
 * Parses strings like 
 
 `comp[name=myComp] > layer[name=myLayer light=true selected]` to objects.
 
 `.cl #id>[name=123]`
 */

{
  function mergeProps(array){
    var merged = {};
    
    for (var i = 0; i < array.length; i++) {
      var pair = array[i]
      for (var key in pair) {
        merged[key] = pair[key]
      }
    }
    
    return merged;
  }
}

Start
  = Selectors
  
Properties
  = [\[]? props:Property+ [\]]? { return mergeProps(props) }
  
Property
  = ValuePair
  / ValueSingle
  
ValueSingle
  = name:[a-zA-Z.#0-9_]+ _? { var o = {}; var key = name.join(''); o[key] = true; return o; }
  
ValuePair
  = name:[a-zA-Z0_9_]+ "=" value:Value _? { var o = {}; var key = name.join(''); o[key] = value; return o; }

Selector
  = type:[a-zA-Z]* props:Properties c:ChildrenSelectors? _? { return { type: type.join(''), props, ...c||{} } }
  
Selectors
  = Selector+
  
Value
  = BooleanLiteral
  / NumberLiteral
  / StringLiteral
   
BooleanLiteral
  = TrueToken  { return true }
  / FalseToken { return false }

StringLiteral
  = chars:[a-zA-Z0-9]+ { return chars.join('') }
NumberLiteral
  = chars:[0-9]+ { return chars.join('') }
  
ChildrenSelectors
  = _ ">" _ children:Selectors { return {children} }  
  / _ " " _ descendants:Selectors { return {descendants} }
  
TrueToken       = "true"           _?
FalseToken      = "false"          _?

_ "whitespace"
  = [\t\n\r]*