BEM hierarchy in stylus-lang and namespace - namespaces

Question

Consider this html (written with BEM aproach):
<div class="app app--light">
<div class="longblockname longblockname--modifier">
<div class="longblockname__element">
...
</div>
</div>
</div>
I'm trying to find convenient and short stylus stylesheet for this and avoid repeating longblockname everywhere. I'll replace the real styles with simple color: #111, but in real case there're a lot of code:
I start with:
.longblockname
&__element
color #111
Then I want the block modifier to affect on the element:
.longblockname
&__element
color #111
&--modifier
// How to refer to &__element here?
// If I use &__element, it will compile to `.longblockname--modifier__element`
// But I need `.longblockname--modifier .longblockname__element`
I see 2 ways to achieve this:
Do not use line break:
.longblockname
&__element
color #111
&--modifier &__element
color #222
This will work, but if we want to use nested feature of stylus, is there any way to avoid ugly ^[-1] syntax like that:
.longblockname
&__element
color #111
&--modifier
& ^[-1]
&__element
color #222
Well, ok, probably that's just syntax preference, but for me it would be much nicer to have something like && to refer to the nested parent.
Then, there's the real question. Is there any way to declare css namespace in stylus? The whole application wrapped with the container that has app app--light style. I want this style to affect on everything within the container. I start with putting everything inside the .app-light:
.app--light
.longblockname
&__element
color #333
&--modifier
& ^[-1]__element
color #444
But this will not work because & ^[-1]__element compiles into .app-light .longblockname--modifier .app--light .longblockname__element while the correct syntax should be .app--light .longblockname--modifier .longblockname__element. I want .app--light to prepend any style declaration, but only the first time. Is there any way to do that?

Answer 1

You can do with Ranges in partial references to get only the selectors in the tree you want:
Stylus
.app--light
& .longblockname
&__element
color #333
&--modifier
& ^[1..1]__element
color #444
Output
.app--light .longblockname__element {
color: #333;
}
.app--light .longblockname--modifier .longblockname__element {
color: #444;
}