Thank you for all the clarifications.
There is nothing special in this work, but it needs time and effort, of course. First of all, note that both your "nested CSS" and required CSS are the examples of the
tree structure:
http://en.wikipedia.org/wiki/Tree_%28graph_theory%29[
^],
http://en.wikipedia.org/wiki/Tree_%28data_structure%29[
^].
This is one of the most trivial kinds of
graphs, widely used in programming. The method of operations on trees are also well known. You plan can be this:
- Develop a parser parsing the CSS text into some DOM tree structure.
- Define the mapping rules from your "nested CSS" structure into required target CSS structure.
- Implement the transformation of the tree structure using the mapping rules and the input structure.
- Develop code generator which uses your transformed CSS structure and generate appropriate text, target CSS code.
Most labor-taking item would be development of the parser. At the same time, you could use one of the available parsers. It turns out that parsing CSS is pretty popular activity. I would suggest to start here:
http://codetheory.in/parsing-css-in-javascript[
^].
This article contains short overview and a list of available parsers you can use. You can review all of then and choose the one which you find most convenient for your purpose. In worst case, you will have to modify the parser code to adopt your CSS structure.
—SA