PEG grammar for CSSDoc

cssdoc.grammar

start
  = yarr*

yarr
  = __ docComment:docComment __ {
    return docComment
  }

docComment
  = comment:comment lineTerminator styles:styles* __ orphanStyles* {
    comment.styles = styles
    return comment
  }

styles
 = selector:[a-zA-Z0-9.: ]* __ "{" __ ruleset:ruleset {
    return {
      selector: selector.join(""),
      ruleset: ruleset
    }
  }

orphanStyles
  = __ styles __

ruleset
  = rules:(whiteSpace / lineTerminator / lineComment / "#" / ";" / " " / GENERIC_VALUES)* "}" whiteSpace* lineTerminator {
    return rules.join("")
  }



comment
  = START space* description:description+ space* shortDescription:description* space* tags:tag* END {
    return {
      description: description.join(" "),
      shortDescription: shortDescription.join(" "),
      tags:tags
    }
  }

description
  = __ "*" !"/" __ desc:(" " / GENERIC_VALUES)+ __ [\n\f]* {
    return desc.join("")
  }

space
  = space:(!(START / END / description / tag) __ "*" __ )  {
    return space.join("")
  }

tag = (tagMarkup / tagGeneric)

tagMarkup
  = __ "*" __ id:("@markup") __ value:(" " / GENERIC_VALUES)+ __ [\n\f]* {
    return {
      id: "markup",
      value: value.join("")
    }
  }

tagGeneric
  = __ "*" !"/"  __ id:("@"[a-z]+) __ value:GENERIC_VALUES+ __ description:[ a-zA-Z0-9.]* [\n\f]* {
    var obj = {
      id: id[1].join(""),
      value: value.join("")
    }
    if (description != "") {
      obj.description = description.join("")
    }
    return obj
  }





START = __ '/**' {
    return "START"
  }

END = __ '*/' {
    return "END"
  }

GENERIC_VALUES = "=" / '.' / '\\' / '"' / '/' / [<>a-zA-Z0-9:]


/* white space and comments */ 
__ 
  = ( whiteSpace / lineTerminator / lineComment )* 
whiteSpace 
  = [\t\v\f \u00A0\uFEFF] 
lineTerminator 
  = [\n\r] 
enclosedComment 
  = "/*" test:(!"*/" anyCharacter)* "*/" {
  return "test " + test;
}
lineComment 
  = "//" (!lineTerminator anyCharacter)* 
anyCharacter 
  = .

output.json

[
   {
      "description": "Long description.",
      "shortDescription": "Short description.",
      "tags": [
         {
            "id": "section",
            "value": "2.1.3"
         },
         {
            "id": "pseudo",
            "value": ":hover",
            "description": "Highlights when hovering."
         },
         {
            "id": "pseudo",
            "value": ":disabled",
            "description": "Dims the button when disabled."
         },
         {
            "id": "modifier",
            "value": ".primary",
            "description": "Indicates the button is the primary action."
         },
         {
            "id": "modifier",
            "value": ".smaller",
            "description": "A smaller version of the button."
         },
         {
            "id": "author",
            "value": "Joony"
         },
         {
            "id": "version",
            "value": "1.2"
         },
         {
            "id": "since",
            "value": "1.0"
         },
         {
            "id": "markup",
            "value": "<button class=\"\">Default Button</button>"
         }
      ],
      "styles": [
         {
            "selector": "button ",
            "ruleset": "width: 100px;
  height: 50px;
"
         },
         {
            "selector": "button:hover ",
            "ruleset": ""
         },
         {
            "selector": "button:disabled ",
            "ruleset": ""
         },
         {
            "selector": "button .primary ",
            "ruleset": ""
         },
         {
            "selector": "button .smaller ",
            "ruleset": ""
         }
      ]
   },
   {
      "description": "2nd comment.",
      "shortDescription": "",
      "tags": [
         {
            "id": "section",
            "value": "2.1.3"
         },
         {
            "id": "pseudo",
            "value": ":hover",
            "description": "Highlights when hovering."
         },
         {
            "id": "author",
            "value": "Joony"
         },
         {
            "id": "version",
            "value": "1.2"
         },
         {
            "id": "since",
            "value": "1.0"
         },
         {
            "id": "markup",
            "value": "<div>Bacon ipsum</div>"
         }
      ],
      "styles": [
         {
            "selector": "div ",
            "ruleset": "width: 100px;
  height: 50px;
"
         }
      ]
   },
   {
      "description": "3rd comment.",
      "shortDescription": "",
      "tags": [
         {
            "id": "section",
            "value": "2.1.3"
         },
         {
            "id": "pseudo",
            "value": ":hover",
            "description": "Highlights when hovering."
         },
         {
            "id": "author",
            "value": "Joony"
         },
         {
            "id": "version",
            "value": "1.2"
         },
         {
            "id": "since",
            "value": "1.0"
         },
         {
            "id": "markup",
            "value": "<p>Bacon ipsum</p>"
         }
      ],
      "styles": [
         {
            "selector": "p ",
            "ruleset": "width: 100px;
  height: 50px;
"
         }
      ]
   }
]

test.css

/**
 * Long description.
 * 
 * Short description.
 *
 * @section                         2.1.3
 * @pseudo       :hover          Highlights when hovering.
 * @pseudo       :disabled       Dims the button when disabled.
 * @modifier     .primary        Indicates the button is the primary action.
 * @modifier     .smaller         A smaller version of the button.
 * @author                           Joony
 * @version                          1.2
 * @since                             1.0
 * @markup                          <button class="">Default Button</button>
*/
button {
  width: 100px;
  height: 50px;
}
button:hover {
  
}
button:disabled {
  
}
button .primary {
  
}
button .smaller {
	
}

.hello {
  
}

.orphanStyle {
  
}

.orphanStyle2 {
  
}

/**
 * 2nd comment.
 *
 * @section                         2.1.3
 * @pseudo       :hover          Highlights when hovering.
 * @author                           Joony
 * @version                          1.2
 * @since                             1.0
 * @markup                          <div>Bacon ipsum</div>
*/
div {
  width: 100px;
  height: 50px;
}

.yarr {
  color: #123456;
}

/**
 * 3rd comment.
 *
 * @section                         2.1.3
 * @pseudo       :hover          Highlights when hovering.
 * @author                           Joony
 * @version                          1.2
 * @since                             1.0
 * @markup                          <p>Bacon ipsum</p>
*/
p {
  width: 100px;
  height: 50px;
}