Responsive styles get overridden

[tdhooper]

Given this css:

.foo {
    background: url(some_image.png) 0 0 no-repeat at-2x;
}

@media (min-width: 768px) {
    .foo {
        background-position: -6px;
    }
}

postcss-at2x will output:

.foo {
    background: url(some_image.png) 0 0 no-repeat;
}

@media (min-width: 768px) {
    .foo {
        background-position: -6px;
    }
}

@media not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
    .foo {
        background: url(some_image@2x.png) 0 0 no-repeat;
        background-size: 36px 36px;
    }
}

The resolution media query is after the min-width query, so background-position gets overridden.

I see two potential fixes:

1. Put the resolution query immediately after the initial declaration blocks, so order specificity is maintained
2. Only set the background-image

2 looks like the easiest option, I'm going to take a look at that now.

[andreyvolokitin]

In your example, if we set background-size instead of background-position we will get the same issue, I got this in my project... Is this too hard to place resolution query immediately after the initial declaration block?