Patterns incorrectly inheriting styleModifier when it has not been set

[theorise]

I have one atom with three variants. I created them as three atoms like the following:

00-atoms/00-price.mustache:

<span class="price {{styleModifier}}">
    {{price.old}}
</span>

00-atoms/01-price-old.mustache:

{{> atoms-price:old }}

00-atoms/02-price-new.mustache:

{{> atoms-price:new(price.old: "{{price.new}}" ) }}

---

I would expect them to be rendered as follows:

<span class="price ">price.old</span>
<span class="price old">price.old</span>
<span class="price new">price.new</span>

---

However this is what I see (on view all and individual atomic view):

<span class="price new">price.old</span>
<span class="price old">price.old</span>
<span class="price new">price.new</span>

---

The first atom is inheriting the new class from somewhere.

[bmuenzenmeyer]

I have some research to do - but I don't think this syntax is supported (yet). Specifically, having price.old as the key for a pattern parameter. I suspect doing so is causing a lot of the issues you've reported. I understand why one would do this, however, as it's directly related to using deeper data objects inside mustache syntax, as you mention here #189.

I might try to consolidate all of these issues into one, as I think these are all symptoms of the same issue.

[bmuenzenmeyer]

I am marking this a "duplicate" since I think' it's a symptom. I will make sure to test this scenario when #189 is addressed.

[bmuenzenmeyer]

Ah I see now what's happening. Note to self, cannot assume first instance is the instance you are operating on.

[bmuenzenmeyer]

TESTING NOTE

In addition to unit test coverage, I tested against actual builds of patternlab.

00-atoms\03-images\04-avatar.mustache

{{message}}
<img src="{{img.avatar.src}}" alt="Avatar" class="{{styleModifier}}" />

being called by:
01-molecules-06-components-02-single-comment.mustache

<li class="comment-container">
    <div class="comment-meta">
        {{> atoms-avatar }}
        {{> atoms-avatar:foo }}
        {{> atoms-avatar:bar(message: "Test") }}
        {{> atoms-avatar }}
        <h4 class="comment-name"><a href="#">{{name.first}} {{name.last}}</a></h4>
    </div>
    <div class="comment-text">
        <p>{{description}}</p>
    </div>
</li>

[bmuenzenmeyer]

Somehow I regressed on this or missed a case with the following:

01-molecules-06-components-02-single-comment.mustache

<li class="comment-container {{styleModifier}}">
    <div class="comment-meta">
        {{> atoms-avatar }}
        <h4 class="comment-name"><a href="#">{{name.first}} {{name.last}}</a></h4>
    </div>
    <div class="comment-text">
        <p>{{description}}</p>
    </div>
</li>

and
02-organisms-02-comments-00-comment-thread.mustache

<section class="comments section">
    <div class="comments-container" id="comments-container">
        <h2 class="section-title">59 Comments</h2>
        {{> molecules-comment-form }}
        <ul class="comment-list">
            {{#listItems.five}}
                {{> molecules-single-comment }}
                {{> molecules-single-comment:foo }}
                {{> molecules-single-comment }}
            {{/listItems.five}}
        </ul>
    </div>
    {{> molecules-pagination }}
</section>

Looking into this now

UPDATE
A unit test was created to cover this, but is not currently failing.

[bmuenzenmeyer]

Refixed this and it's live in dev.
Will close when it reaches master