How to make JavaScript compile nested css rules

Question

1.00/5 (1 vote)

See more:

Hello,

I am trying to make a javascript code that can compile something like this:

html{
    background: #2E2E2E;
    body{
        height: 200px;
        width: 100%;
        background: #fff;
        a{
            color: rgb(0, 0, 255);
            &:hover{
                color: rgb(200, 0, 255);
            }
        }
    }
}

Into generic CSS:

html{
    background: #2E2E2E;
}
html body{
    height: 200px;
    width: 100%;
    background: #fff;
}
html body a{
    color: rgb(0, 0, 255);
}
html body a:hover{
    color: rgb(200, 0, 255);
}

How can I do this?

Thanks for any help.

Posted 10-Mar-14 16:05pm

Member 10305199

Add a Solution

Comments

Sergey Alexandrovich Kryukov 10-Mar-14 22:15pm

What does it mean, "compile CSS rules"? :-)
—SA

Member 10305199 10-Mar-14 22:20pm

I am basically making my own css compiler, like sass, less, compass, etc.

Sergey Alexandrovich Kryukov 10-Mar-14 22:25pm

1) Why doing that? 2) compile to what?
—SA

Member 10305199 11-Mar-14 8:29am

Compile my version of CSS, the one with nested rules, to plain CSS

Sergey Alexandrovich Kryukov 11-Mar-14 10:24am

Thank you for confirmation, now: why?
—SA

Member 10305199 11-Mar-14 20:31pm

Because I want to. This is kind of a project I am making just for fun.

Sergey Alexandrovich Kryukov 11-Mar-14 21:16pm

I just don't understand why would you need some expert advice. Create a parser, parse your nested styles into some tree structure. Develop transformation rules and transformation of the tree, generator of the text based on it. From the standpoint of algorithm, there is absolutely nothing special, pretty usual work. If you have some concerns about any of these parts, please ask some particular questions.

Perhaps this is a good time to ask you: What have you tried so far?

—SA

Sergey Alexandrovich Kryukov 10-Mar-14 22:17pm

1) Javascript does not compile anything; this is an interpretive language; 2) nothing "compiles" CSS rules; 3) therefore, Javascript does not compile CSS.

What do you mean? Just data processing, one CSS into another? If so, by what criteria? what's the problem? and so on...

—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2014-03-11T15:54:00

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