postcss-at2x
Adds at-2x keyword to background and background-image declarations to add retina support for images.
Last updated a year ago by simonsmith .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-at2x 
SYNC missed versions from official npm registry.

postcss-at2x Build Status

Ported from rework-plugin-at2x

Installation

$ npm install postcss-at2x --save-dev

Usage

const 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));

.at2x()

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/cool@2x.png);
  }
}

Options

identifier (default: "@2x") string

Change the identifier added to retina images, for example file@2x.png can be file-retina.png.

detectImageSize (default: false) boolean

Obtains the image dimensions of the non-retina image automatically and applies them to the background-size property of the retina image.

skipMissingRetina (default: false) boolean

If the retina image cannot be found on the file system it will be skipped and not output into the result CSS.

resolveImagePath function

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(img@2x.jpg) no-repeat;
    background-size: 540px 675px; /* Dimensions of img.jpg */
  }
}

See PostCSS docs for examples for your environment.

Current Tags

  • 4.0.3                                ...           latest (a year ago)

21 Versions

  • 4.0.3                                ...           a year ago
  • 4.0.2                                ...           2 years ago
  • 4.0.1                                ...           2 years ago
  • 4.0.0                                ...           2 years ago
  • 3.2.0                                ...           3 years ago
  • 3.1.0                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.0.2                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           4 years ago
  • 1.4.0                                ...           4 years ago
  • 1.3.0                                ...           4 years ago
  • 1.2.3                                ...           5 years ago
  • 1.2.2                                ...           5 years ago
  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 8
Last Day 1
Last Week 5
Last Month 5
Dependencies (7)

Copyright 2014 - 2016 © taobao.org |