How to extract less.js parser results as object instead compiled CSS with .toCSS()?

Question

i would like to know if there is a way to get the less parse results as object instead as compiled CSS? In the usage example we have:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

which is fine but I need to do some work withe the "raw" rules set in JavaScript. How one gets access to the rules set as an object. For instance:

var rules_set = {
selector:'xxxxxxx'
property1: 'xcv'
.
.
.
propertyX: ''
}

Thanks in advance!

EricP · Accepted Answer · 2015-06-01 03:15:17Z

5

The example above failed with a "cannot read property 'cntents' of undefined" error. Here is code that seems to work with LESS 2.5.0:

var parser = new(less.Parser)({}, {contents: {}}, {
    relativeUrls: true,
    rootpath: "/",
    filename: 'main.less'
});
parser.parse('x {y: url("../z.png")}', function (e, tree) {
   console.log(tree);
});

answered Jun 1, 2015 at 3:15

EricP

3,4393 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

seven-phases-max · Accepted Answer · 2013-12-02 20:40:16Z

0

The tree object actually is the object containing the parse results, it contains arrays/objects representing all parsed LESS entities, e.g. tree.rules etc. (You may look for what you need via some javascript debugger (browser's built-in one for example)).

Of course these "parsed entities" are represented in LESS's own internal format (usually it's a dedicated object for each language unit/structure i.e. tree.Value, tree.Rule, tree.Mixin, tree.Variable etc. etc.).

As for the documentation of all above, obviously there's no such thing as "LESS Compiler Internals Reference Guide", the only documentation of the LESS internals is the source code itself.

edited Dec 2, 2013 at 20:40

answered Dec 2, 2013 at 19:43

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

6 Comments

Kkart Over a year ago

Right i see that the tree.rules contains what i am looking for when I browse it (with dev tools) BUT the point is that the tree structure changes and want to build my extractor function consistent! That is why i ask for internals and the structure details to do it. If you have such info it will help!

seven-phases-max Over a year ago

@LiliputFX Tree structure is not changed after you get it in the function (err, tree) callback. I.e. you can modify all those things before the tree.toCSS() call (Or write your own toWhateverfunction using original toCSS as reference).

Kkart Over a year ago

:)Sure it does not change after i got it in the callback...I had in mind that tree structure is content dependant. Parsing different less will result in different tree structure. I look for a way to use the parser results! I want to store them in DB but not as a useless string...

seven-phases-max Over a year ago

"I want to store them in DB but not as a useless string..." - So you'll have to write your own function that converts the parsed tree structure to "not-so-useless" string. LESS does not have any function to convert parsed tree to anything beside CSS because it simply does not need such facility on its own. Though I wonder what can be a purpose of storing an intermediate parser results in a DB... (can't you just store the input LESS string itself? it's still strange but at least not so complicated).

Kkart Over a year ago

Thank You! Accepting the answer...The purpose is to also use less as "pure" CSS parser because it is loaded already and skip implementing my own(or use/load available external solution). The app cares about the final CSS so it needs it in an object form stored in the db to be reachable on property level not sheet level as a string. Again thanks!

|

Collectives™ on Stack Overflow

How to extract less.js parser results as object instead compiled CSS with .toCSS()?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related