Some rtl-ignores being ignored and others are not

Have a weird one here, we recently switched to using rtlcss-webpack-plugin@4.0.7 on our Ember projects with the move to Embroider (which provides a more-webpack focused build pipeline) which uses rtlcss@3.5.0 under the hood.

Now we've observed a curious case where it seems to ignore some /*!rtl:ignore*/ statements but not others. For example, here is our plain CSS output in our bundle for a specific item:

and here it is after being processed with rtlcss-webpack-plugin:

As you can see some of the /*!rtl:ignore*/ statements have been stripped and the values flipped which breaks our styling. But its weird to me that it happens to some but as you can see the second one is fine. Here is what the source Sass looks like:

[dir='rtl'] & {
        &:not(.is-reversed) {
            &:not(.is-toggle) {
                & > input[type='checkbox'],
                & > input[type='radio'] {
                    & + label {
                        &::before {
                            right: 0 #{'/*!rtl:ignore*/'};
                        }
                    }
                }

                & > input[type='checkbox'] {
                    & + label {
                        &::after {
                            right: 13px #{'/*!rtl:ignore*/'}; // This is the one that is not stripped but the other 2 are
                        }
                    }

                    &.mixed + label::after {
                        right: 13px #{'/*!rtl:ignore*/'};
                    }
                }
          }  
     }
}

Are we doing something wrong or is this a potential bug?

MohammadYounes / rtlcss

Some rtl-ignores being ignored and others are not #343