Selector interpolation fails if selector is a pseudo-element

[BillyRayPreachersSon]

I'd like to be able to have a mixin which can take a string variable "before" or "after", and use that to determine which pseudo-element the properties are applied to.

This works well when selector interpolation is applied to a class selector... so this LESS:

.myMixin(@whichPseudo) {
    &.@{whichPseudo} {
        background: red;
    }

}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
    .myMixin(after);
}

gives this CSS:

#someEl1.before {
    background: red;
}
#someEl2.after {
    background: red;
}

However when I replace the class selector with a pseudo-element selector:

.myMixin(@whichPseudo) {
    &:@{whichPseudo} {
        background: red;
    }

}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
    .myMixin(after);
}

I get the following error:

ParseError: Unrecognised input in selectorInterpolationInPseudoEl.less on line 2, column 3:
1 .myMixin(@whichPseudo) {
2   &:@{whichPseudo} {
3       background: red;

when I'd expect to see:

#someEl1:before {
    background: red;
}
#someEl2:after {
    background: red;
}

I'm running this on the command line using "lessc input.less", and am using v1.4.0-b2 of LESS.

[BillyRayPreachersSon]

Incidentally, the error happens whether I use a single colon or double colons.

[lukeapage]

workaround

.myMixin(@whichPseudo) {
  @pseudo-selector: ~":@{whichPseudo}";
    &@{pseudo-selector} {
       background: red;
    }
}

#someEl1 {
    .myMixin(before);
}

#someEl2 {
   .myMixin(after);
}

[lukeapage]

less has to understand the selector and at the moment it doesn't understand : on its own. I special cased # and ., but not : or ::

[BillyRayPreachersSon]

Thanks for the workaround :-)

[iSimonWeb]

Thanks @lukeapage for the workaround but please fix this.

[pixelass]

basically the same thing I'm doing here: placeholder mixin

Anyways.. is it better to use ~'@{foo}' or e('@{foo}')?

[seven-phases-max]

is it better to use ~'@{foo}' or e('@{foo}')

There's no difference, currently e is just an alias for ~'...'.

[pixelass]

there is a difference:

in:

.test {
    @foo: ~"";
    @bar: e("");
    &:before{
        content: @foo;
    }
    &:after{
        content: @bar;
    }
}

out:

.test:before {
  content: ;
}
.test:after {
  content: [object Object];
}

I tend to use e(...) where possible since it is cleaner "syntax-wise" but was always unsure which is actually better.

[seven-phases-max]

content: [object Object];

This is just a bug.

[pixelass]

ok. thx..
I created an issue for this.
#1966