I can reproduce this issue. It looks like a bug in R2.
If the :rtl option is passed to the compiler, it runs the CSS through R2, and it does the magic RTL changes.
https://github.com/discourse/discourse/blob/5763309953c1c40bc2ecb05f3e73d502f1ea2c61/lib/stylesheet/compiler.rb#L50-L53
This works great, but for some reason, we seem to be hitting an edge case where it returns jumbled CSS. We use a pattern for creating a fade effect for mobile nav menus, and it looks like this.
https://github.com/discourse/discourse/blob/7539c2ed7fe7ae991c823bc958be12fa052eb830/app/assets/stylesheets/mobile/edit-category.scss#L13-L17
This is not the only place where we use it; it’s just an example.
It seems like this pattern is more than R2 can handle. We’re calling an RGBA function and passing a CSS variable to it, and then we also add a stop.
When this is passed through R2, it returns something like this.
with it off (even on an RTL local), we get this
The jumbled CSS throws the compiler off and causes it to squash any CSS that comes after that rule into useless code that never applies.
So, there’s several stylesheets after that one that never get loaded on mobile RTL. The user card stylesheet is one of them.
I tried to reduce that pattern’s complexity by removing the stops, and it seems to work. So we go from this.
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0) 0%,
rgba(var(--secondary-rgb), 1) 100%
);
to this
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
This will not cause any visual changes - since those are the default stops anyway - and it fixes the issue.
I sent a PR to update that pattern everywhere we use it here.
https://github.com/discourse/discourse/pull/11360
Thanks for reporting the issue @nildarar 
