Incorrect rules order

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!

[marsjosephine]

@fabercancio – totally understand, thanks for responding!