reworkcss/rework-plugin-at2x — pull request #5 by michelle (2014-07-17 20:39:10+00:00)
Title: Composed media queries should use an 'and' between the existing media query and the 2x queries

For:

```css
@media only screen and (min-width: 48em) {
/** at-2x image here that's specific for larger screens. */
}
```

...we currently get something like:

```css
@media only screen and (min-width: 48em), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
...
}
```

...which messes up the image for smaller retina screens.

The output we want is actually:

```css
@media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 48em) and (min-resolution: 144dpi), only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
...
}
```

...or better visualized as:

```css
@media
only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-width: 48em) and (min-resolution: 144dpi),
only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
...
}
```

(Commas are like `OR` and `and` is like `AND`, which is what we want here.)