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>