Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to use imported mixin in namespace when another import uses another mixin #1105

Closed
davidmdrayton opened this issue Jan 7, 2013 · 4 comments
Closed

Unable to use imported mixin in namespace when another import uses another mixin #1105

davidmdrayton opened this issue Jan 7, 2013 · 4 comments
Labels
bug medium priority

Comments

@davidmdrayton
Copy link

First of all, apologies for the confusing title, but you'll see what I mean below.

Say we want to use a mixin within a namespace:
test1.less:

#foo {
    .bar() {
        color: #FF0000;
    }
}

#test {
    #foo > .bar;
    background-color: #00FF00;
}

We compile test1.less and everything here is fine.

OK, so now we want to move our mixin to a separate less file:
test2.less:

#foo {
    @import "bar.less";
}

#test {
    #foo > .bar;
    background-color: #00FF00;
}

bar.less:

.bar {
    color: #FF0000;
}

We compile test2.less and, again, everything is fine.

Now let's say we want another import in our original file, and that import contains a mixin.
test3.less:

@import "anothermixin.less";

#foo {
    @import "bar.less";
}

#test {
    .anothermixin();
    #foo > .bar;
    background-color: #00FF00;
}

bar.less:

.bar {
    color: #FF0000;
}

anothermixin.less:

.anothermixin() {
    font-size: 14px;
}

We compile test3.less and yet again, everything is A-OK.

But say we want to add a class into anothermixin.less. And let's say we want that class to call our existing mixin called anothermixin().
test4.less:

@import "anothermixin.less";

#foo {
    @import "bar.less";
}

#test {
    .anothermixin();
    #foo > .bar;
    background-color: #00FF00;
}

bar.less:

.bar {
    color: #FF0000;
}

anothermixin.less:

.anothermixin() {
    font-size: 14px;
}

.showstopper {
    .anothermixin();
}

If we try to compile test4.less we now get a "NameError: #foo > .bar is undefined" error.

So it seems this error is caused by a combination of the following:

  • We have a less file (let's call it A) that contains a mixin and a call to said mixin
  • We have another less file (let's call it B) that contains just a mixin
  • We have a third less file (let's call it C) where:
    • less file A is imported
    • less file B is imported within a namespace
    • A call to the mixin within less file B (which is also within a namespace) is made

It looks like if any of these are NOT true then the error doesn't occur.
@lukeapage
Copy link
Member

I can reproduce in 1.3,1 but not 1.3.3 (latest version). what are you using?

@davidmdrayton
Copy link
Author

That's odd - I'm currently using 1.3.3, and I've tried both lessc and less.js

EDIT: Note that I'm using the non-minified version of less.js which is displaying the error.

I just tested with the minified version and got different results - no error message is appearing, but the styles aren't being output into the head, and the style for the error message (ie. "less-error-message") is being output into the body instead of the head.

My test rig is as follows:

<html>
    <head>
        <link rel="stylesheet/less" href="test4.less" type="text/css" media="all" />
    </head>
    <body>
        <p>test</p>
        <script type="text/javascript" src="less.js"></script>
    </body>
</html>

@lukeapage
Copy link
Member

I realised after sending that message that I was on the 1.4.0 branch.. will
try again on the master branch which is 1.3.3

@SomMeri SomMeri mentioned this issue Jan 8, 2013
Closed
@lukeapage
Copy link
Member

Indeed it is broken in 1.3.3 and fixed on our 1.4.0 branch, though I have little idea what fixed it and I didn't want to do a 1.3.4 release unless it was critical.. sorry.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug medium priority
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lukeapage @davidmdrayton