Adding prefixes to resolution media queries

[yisibl]

This CSS feature is often used in adapting pages to different resolutions.

Autoprefixer already supports automatic prefixing.

Input

@media (min-resolution: 2dppx),
       (min-resolution: 192dpi) { }

Expected

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx),
       (min-resolution: 192dpi) { }

[devongovett]

Implemented with two caveats:

1. No opera support. Looks like opera has not needed a prefix since v12, which is very old. Their syntax is slightly different so I didn't feel it was worth implementing.
2. Prefixes are only added, not removed. Autoprefixer does remove prefixes as well, but it seems quite buggy. It does not check that the value is equivalent, e.g. removing the moz prefix from (min--moz-device-pixel-ratio: 10), (min-resolution: 2dppx) even though 10 and 2 aren't the same. It also completely ignores boolean logic, so if you have e.g. (color) and (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) the first query is totally removed. Perhaps we can implement this in the future but it's a bit more complex because we'd need to detect if the queries are "equivalent" in order to remove them correctly.