Less.js: @import inside a selector (feature request)

[jnewman]

Allowing imports inside of selectors would open up an awesome collection of possibilities for code reuse and style scoping. Something like:

.foo{
    @import "bar";
}

Would prove especially useful for creating less modules for CSS backed widgets. For example, if I author e.g., AutoRotator and a StackContainer and had the ability to nest imports inside selectors, then I could do:

# AutoRotator/pane.less
.pane{
    border: 1px solid gray;
    width: 300px;
    /* etc. ... */
}

# StackContainer/pane.less
.pane{
    border: 1px solid orange;
    width: 200px;
    /* etc. ... */
} 

And the user of either library would be able to decide the scope of the various styles like:

# main.less
.myRotator {
    @import "AutoRotator/pane";
}

# main.less
.myStack {
    @import "StackContainer/pane";
}

Notice how simple the selectors seem inside the files. I think this basically just simulates http://www.w3.org/TR/css3-namespace/

[souldreamer]

+1. Would definitely be helpful.

[marcboeker]

+1

[bkrembs]

+1

Please add this!

[marcboeker]

I've found a dirty hack to allow namespaced imports. Just comment the following lines:

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L20

and

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L27

to look like

// Evaluate imports
//if (ruleset.root || ruleset.allowImports) {
    for (var i = 0; i < ruleset.rules.length; i++) {
        if (ruleset.rules[i] instanceof tree.Import) {
            Array.prototype.splice
                 .apply(ruleset.rules, [i, 1].concat(ruleset.rules[i].eval(env)));
        }
    }
//}

But I have no clue what this also affects on compiling. I've done a small test with bootstrap from Twitter:

#test {
  @import "../../bootstrap/less/bootstrap";
}

Compiles down to:

#test article,
#test aside,
#test details,
#test figcaption,
#test figure,
#test footer,
#test header,
#test hgroup,
#test nav,
#test section {
  display: block;
}
...

And It has worked in my case. Can anyone confirm this on a larger project?

@cloudhead Why is importing only executed on the root level? And why is ruleset.allowImports always undefined and how can I overwrite it to be always true? :)

Thanks

[marcboeker]

Here's the patched fork:
https://github.com/marcboeker/less.js/commit/5a2bdbcdaa03b7ded032f7a484f7f9843416fe8d

Just checkout and do a npm install less.js

-Marc

[cloudhead]

gonna fix this

[marcboeker]

@cloudhead +1 & thanks

[cloudhead]

allowImports is used for @media blocks... but I guess there is no reason why it shouldn't be allowed in any block.

[cloudhead]

Ah yes, there was a reason, it's a performance issue. I'll see if I can add a cli flag.

[cloudhead]

Ok, done.. it's on by default, as performance hit was not that high.. option to disable is --strict-imports

[marcboeker]

Thanks! This is a great improvement.

[jnewman]

Thanks @marcboeker and @cloudhead Saved me a ton of work with this change. :)