Jison CSS

by paulftw

HTML

<script src="http://zaach.github.com/jison/assets/js/jison.js"></script>
<script src="http://zaach.github.com/jison/assets/js/json2.js"></script>
<div id="out"></div>

<textarea id="src" cols="80" rows="7">
    
a, b.x, d#e {
    color: ffc000;
    }
</textarea>

<textarea id="gmr" cols="80" rows="7">
/* description: parses CSS into tree */

/* lexical grammar */
%lex

hex               [0-9a-fA-F]
nonascii        [\200-\377]
nmstart         [_a-zA-Z]|{nonascii}
nmchar          [_a-zA-Z0-9-]|{nonascii}
string1         \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii})*\"
string2         \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii})*\'
num             [0-9]+|[0-9]*"."[0-9]+
intnum          [0-9]+
string          {string1}|{string2}
url             ([!#$%&*-~]|{nonascii})*
w               [ \t\r\n\f]*
nl              \n|\r\n|\r|\f
range           \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))
nth             [\+-]?{intnum}*n([\t\r\n ]*[\+-][\t\r\n ]*{intnum})?

%%
[ \t\r\n\f]+                    { return 'WHITESPACE'; }
[a-zA-Z0-9-_]+                { return 'IDENT'; }
\/\*[^*]*\*\/                { return 'COMMENT'; }
"{"                                 %{ return '{'; %}
"}"                                 %{ return '}'; %}
":"                                 { return ':'; }
";"                                 { return ';'; }
","                                 { return ','; }
"."                                 { return '.'; }
"#"                                 { return '#'; }
&lt;&lt;EOF>>                    { return 'EOF'; }

/lex

/* operator association and precedence */

%start stylesheet

%% /* language grammar */
stylesheet
  : maybe_space rule_list EOF
      {
        var stylesheet = {
            type: 'Stylesheet()',
            lines: $2
        };
        return stylesheet;
      }
  ;

maybe_space
  : /* empty */
  | maybe_space WHITESPACE
  ;

rule_list
  : /* empty */
  | rule_list rule maybe_space
      {
    var style = $1 || [];
   ...

JavaScript

$(function() {

var Jison = require('jison'),
    bnf = require('jison/bnf');
    
$('button').click(function() {
    var grammar = $('#gmr').val();
    var cfg = bnf.parse(grammar);
    
    var parser = new Jison.Generator(cfg, {type: 'lalr'})
        .createParser();    
    var res = parser.parse($('#src').val());
    console.log(res);
    $('#output').html(JSON.stringify(res));
});
    
});