Incorrect rules order

[lastw]

For example,

div {
    background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x;
    background-size: 4.16667% 4px
}

transforms to

[dir] span {
    background-size: 4.16667% 4px
} 

[dir=ltr] span {
    background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x
} 

[dir=rtl] span {
    background: linear-gradient(to left, #c8c8c8 15.5%, transparent 15.5%) repeat-x
}

So, background property overrides background-size value.

Bug is similar to the csso problem with structural optimizations https://github.com/css/csso/issues/143

[vkalinichev]

I'll try to fix it in the next release.

For now you can use this workaround:

div {
    background: linear-gradient(to right, #c8c8c8 15.5%, transparent 15.5%) repeat-x;
}
[dir] div {
    background-size: 4.16667% 4px
}

Thanks for the report!

[henryruhs]

Could you please fix this asap? I have a similar issue with background-image... see: teaser.css

[marsjosephine]

I also encountered a similar issue today. I have some styles that result in the following styles declarations (we have duplicate declarations for background-image due to how we share and extend styles in our codebase):

.gradientBackground {
  background-image: linear-gradient(to right, black 0%, white 50%, black 100%);
  height: 100%;
  width: 100%;
  background-image: var(--brand-radial-gradient);
}

After going through Post CSS RTL, the following is output in our CSS files. The order of the style declarations that's being output is not what I would expect based on the input, and so the first background-image styling is being applied as opposed to the second. What I would expect here is that both declarations for background-image would end up in .dir-ltr.gradientBackground in the same order that they appear in the source CSS.

.dir.gradientBackground {
  height: 100%;
  width: 100%;
  background-image: var(--brand-radial-gradient);
}

.dir-ltr.gradientBackground {
  background-image: linear-gradient(to right, black 0%, white 50%, black 100%);
}

[fabercancio]

@marsjosephine,

Unfortunately, this library is no longer maintained. As a workaround, if you can modify manually the CSS rules, you can add the rtl:ignore directive to each declaration:

https://runkit.com/embed/7ywx6ed18q7j

[marsjosephine]

@fabercancio -- totally understand, thanks for responding!