Ported from rework-plugin-at2x
$ npm install postcss postcss-at2x --save-devconst fs = require('fs');
const postcss = require('postcss');
const at2x = require('postcss-at2x');
const input = fs.readFileSync('input.css', 'utf8');
const output = postcss()
.use(at2x())
.process(input)
.then(result => console.log(result.css));Adds at-2x keyword to background and background-image declarations to add retina support for images.
Input
.multi {
background: url(http://example.com/image.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
green,
url(/public/images/cool.png) at-2x;
}Output
.multi {
background: url(http://example.com/image.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
green,
url(/public/images/cool.png);
}
@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.multi {
background-image: url(http://example.com/image.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
none,
url(/public/images/[email protected]);
}
}Change the identifier added to retina images, for example [email protected] can be file-retina.png.
Obtains the image dimensions of the non-retina image automatically and applies them to the
background-size property of the retina image.
If the retina image cannot be found on the file system it will be skipped and not output into the result CSS.
Get resolved image path for detecting image size. By default, original url value is resolved from current working directory (process.cwd()).
Function receives two arguments: original url value and PostCSS declaration source.
Output
.element {
background: url(img.jpg) no-repeat;
}
@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.element {
background: url([email protected]) no-repeat;
background-size: 540px 675px; /* Dimensions of img.jpg */
}
}See PostCSS docs for examples for your environment.
