How to parse my own custom "programming language"?

Joshua Muheim
2008-01-24T17:29:52Z

Hi all

I''m brain storming on ways how to optimize the act of writing good
CSS... My plan is to create some sort of Meta-CSS-Language that is
parsed by a translation-processor which outputs the "normal" CSS code
(packed into a Ruby On Rails plugin).

I want to be able to write sort of the following quasi-CSS-code (the
$-sign is sort of a placeholder for the surrounding context, see
comments):

-----------

body {
  font-size: 12px;
}

div#content {
  font-size: 20px;
}

ul.links li {
  background-color: red;
  list-style-type: none;
  list-style-image: url("li.png");

  $:first { /* is the same like "ul.links li:first" */
    padding-top: 10px;
  }

  $:last { /* is the same like "ul.links li:last" */
    padding-bottom: 10px;
  }

  ul.links_external li {
    list-style-image: url("li_external.gif");
  }

  ul.links_download li {
    list-style-image: url("li_download.gif");
  }

  div#content $ { /* is the same like "div#content ul.links li" */
    font-weight: bold;
  }

  $ a { /* is the same like "ul.links li a" */
    color: red;
    text-decoration: none;
    padding-left: 20px;
    background-image: url("a.gif");
    background-position: center left;
    background-repeat: no-repeat;

    div#content $ { /* is the same like "div#content ul.links li a" */
      background-image: url("a_big.gif");
    }

    $:hover { /* is the same like "ul.links li a:hover" */
      text-decoration: underline;
      background-image: url("a_hover.gif");

      div#content $ { /* is the same like "div#content ul.links li
a:hover" */
        background-image: url("a_big_hover.gif");
      }
    }
  }
}

---------

This should be converted by the engine to the following:

---------

body {
  font-size: 12px;
}

div#content {
  font-size: 20px;
}

ul.links li,
ul.links_external li,
ul.links_download li {
  background-color: red;
  list-style-type: none;
  list-style-image: url("li.png");
}

ul.links li:first,
ul.links li.first, /* For browsers that don''t know :first... */
ul.links_external li:first,
ul.links_external li.first,
ul.links_download li:first,
ul.links_download li.first {
  padding-top: 10px;
}

ul.links li:last,
ul.links li.last, /* For browsers that don''t know :first... */
ul.links_external li:last,
ul.links_external li.last,
ul.links_download li:last,
ul.links_download li.last {
  padding-bottom: 10px;
}

ul.links_external li {
  list-style-image: url("li_external.gif");
}

ul.links_download li {
  list-style-image: url("li_download.gif");
}

div#content ul.links li {
  font-weight: bold;
}

ul.links li a {
  color: red;
  text-decoration: none;
  padding-left: 20px;
  background-image: url("a.gif");
  background-position: center left;
  background-repeat: no-repeat;
}

div#content ul.links li a {
  background-image: url("a_big.gif");
}

ul.links li a:hover {
  text-decoration: underline;
  background-image: url("a_hover.gif");
}

div#content ul.links li a:hover {
  background-image: url("a_big_hover.gif");
}

---------

I hope you''re getting the point... :-) I came to that idea because CSS2
does not allow anything like inheritance or "mix in" of code. So I
want
a translation-engine to fill this hole for me in my Rails projects:
write clean code (DRY) and expand it automatically so browsers get it.

But... I had never to do something like that, so I wonder what libraries
or stuff do already exist to help in such cases? I guess I heard the
word "Tokenizer" in this context already, but I''m not sure...
Or should I create my own Rails template system (I don''t really know
what they are capable of and if a task like this is really what they
have been created for)?

As a not very experienced Ruby programmer, I would just start using many
many regular expressions or something like that and try to hack
something together, but I guess there are better ways to do this...

Thanks a lot for help,
Josh
--
Posted via http://www.ruby-forum.com/.