Ported from rework-plugin-at2x
$ npm install postcss-at2x --save-devvar fs = require('fs');
var postcss = require('postcss');
var at2x = require('postcss-at2x');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
.use(at2x())
.process(css)
.css;Adds at-2x keyword to background and background-image declarations to add retina support for images.
Input
.logo {
background: red url('/public/images/logo.png') no-repeat 0 0 at-2x;
}
.banner {
background: url(/public/images/cool.png) at-2x,
url(http://example.com/flowers-pattern.jpg) at-2x;
}Output
.logo {
background: red url('/public/images/logo.png') no-repeat 0 0;
}
.banner {
background: url(/public/images/cool.png),
url(http://example.com/flowers-pattern.jpg);
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.logo {
background: red url('/public/images/[email protected]') no-repeat 0 0;
}
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.banner {
background: url(/public/images/[email protected]),
url(http://example.com/[email protected]);
}
}Change the identifier added to retina images, for example [email protected] can be file-retina.png.
- Supports multiple background images and
backgroundshorthand with properties. Seetest/fixtures/for examples.
See PostCSS docs for examples for your environment.