Item numbering doesn't always work

[FireSBurnsmuP]

I love Web essentials, generally, but I have a few problems with this implementation of Emmet.
First is this, and I'm not the first to notice it.

I'm currently using the 2013 implementation; I'm not sure if 2015 is also affected.

So, when multiplying something, like .panel.panel-$*3 one should get the following when expanded:

<div class="panel panel-1"></div>
<div class="panel panel-2"></div>
<div class="panel panel-3"></div>

Sometimes this works, sometimes it doesn't. The above example would work, as would a few others I could come up with.

Let me walk you through how to break it, at least one way.

div#loading.loading-screen[style="display:none;"]>h1#loadingTitle{Please wait}+p#loadingDescription{while we load this for you}+.spinner.spinner-lg>.spinner-container.spin-container$*3

expands to this:

    <div id="loading" class="loading-screen" style="display:none;">
        <h1 id="loadingTitle">Please wait</h1>
        <p id="loadingDescription">while we load this for you</p>
        <div class="spinner spinner-lg">
            <div class="spinner-container spin-container1"></div>
            <div class="spinner-container spin-container2"></div>
            <div class="spinner-container spin-container3"></div>
        </div>
    </div>

That works just fine. Now, I actually need 4 <div>s in each of those .spin-containers to make my CSS-based loader work, so if I modify it to this:

div#loading.loading-screen[style="display:none;"]>h1#loadingTitle{Please wait}+p#loadingDescription{while we load this for you}+.spinner.spinner-lg>(.spinner-container.spin-container$>(.circle$*4))*3

expands to this:

    <div id="loading" class="loading-screen" style="display:none;">
        <h1 id="loadingTitle">Please wait</h1>
        <p id="loadingDescription">while we load this for you</p>
        <div class="spinner spinner-lg">
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container spin-container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>
    </div>

And there's the strange bit: now the inner-most item numbering works, but the outermost doesn't.

If anyone else has another example of how to break this, it'd be good to list them here, although I'm sure a lot of people have trouble finding this repo, considering the low watch count and such on a project being used by so many people.

Anyway, thanks for your time, and I really love the project.

[am11]

I can reproduce this issue too. Currently, the group nesting implementation is bit hacky, i.e. we add an artificial span_{number} around each group and replace it after the parse. This results in bugs like: a[type="(a=c)"] expands to <a href="" type="span.__group0"></a> instead of <a href="" type="(a=c)"></a> (in accord with Emmet std http://docs.emmet.io/). Seemingly off topic, but this is where we dispatch the counter resolution.

IMO, we first need to come up with a better approach to mark groups (perhaps using fragments?), enumerate their ranks (nesting index) intuitively and then improve counters handling. Directly fixing this issue may yield unintended negative side effects (since test is not covering many similar corner cases).