Adding a `Mend(0):l` class breaks `Mend(0):lc` and `Mx(0)`

[maheshbansod]

Describe the bug A clear and concise description of what the bug is.

Adding the classes Mend(0):l on something and Mend(0):lc on something else causes the Mend(0):lc to stop working. If you put Mx(0) instead of Mend(0):lc , then Mx(0) doesn't get margin-right 0.

This happens because the style generated is something like this:

.Mend(0px):l:left, .Mx(0), .Mend(0):lc:last-child {
   margin-right: 0
}

Anything that is grouped with :left doesn't work. See this code pen: https://codepen.io/pranavjindal999/pen/OJwzNpX

I understand that this is probably not the correct use of :l - we encountered this only by mistake: used :l instead of :lc. It makes sense that they're grouped together (since margin-right: 0 is the common property) but, in this case, this breaks any classes that is grouped with it.

To Reproduce Steps to reproduce the behavior:

1. Create different divs with the classes mentioned above (Mx(0), Mend(0):lc , Mend(0):l )
2. Notice that the styles for Mx(0) & Mend(0):lc aren't getting applied on the respective element.

Expected behavior A clear and concise description of what you expected to happen.

Anything with :left shouldn't be grouped with anything else.

Additional context Add any other context about the problem here.

• OS: [e.g. iOS8.1]
• Package [e.g. atomizer]
• Version [e.g. 3.0.0]

[redonkulus]

Thank you for the report. I noticed your codepen didn't have any atomizer classes in it. I tried the following out in our REPL:

<div class="Mx(0)"></div>
<div class="Mend(0):lc"></div>
<div class="Mend(0):l"></div>

Which produced:

.Mx\(0\) {
  margin-left: 0;
}
.Mx\(0\), .Mend\(0\)\:l:left, .Mend\(0\)\:lc:last-child {
  margin-right: 0;
}

I see Mx(0) getting both margin's applied. Which issue were you seeing again?

[maheshbansod]

Yes, those are the classes produced, but that style(margin-right: 0) isn't getting applied to the elements for me. I took those atomizer classes and tried to showcase the issue better in this codepen: https://codepen.io/maheshbansod/pen/xxJYRbj Pasting the same code here too: CSS:

div {
  margin: 30px;
  color: white;
}
.Mx\(0\) {
  margin-left: 0;
}
.Mx\(0\), .Mend\(0\)\:l:left, .Mend\(0\)\:lc:last-child {
  margin-right: 0;
}

HTML:

<div style="background-color: blue;">
  <div style="background-color: red;" class="Mx(0)">
    Expected margin 0 on both sides but observed margin 0 only on left
  </div>
</div>
<div style="background-color: blue;">
  <div style="background-color: red" class="Mend(0):lc">Expected margin zero on both sides(because this div is the last child), but observed 30px on both sides</div>
</div>

If we look in Chrome devtools, you'll notice that the margin-right:0 style isn't even getting overridden, it's just not applied at all to the divs. Removing the class .Mend\(0\)\:l:left from there fixes it and the observations will match the expectations. I can see this on Chrome on Mac. Let me know if any other information is required if this isn't getting reproduced at your end.