# postcss-at2x

> Adds at-2x keyword to background and background-image declarations to add retina support for images.

Latest version **5.0.1** (published 2022-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-at2x
pnpm add postcss-at2x
yarn add postcss-at2x
bun add postcss-at2x
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2022-02-14 |
| First published | 2015-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 45 |
| Author | Simon Smith |
| Maintainers | niksy, simonsmith |
| Keywords | postcss, css, postcssplugin, at2x, retina |

## Links

- npm: https://www.npmjs.com/package/postcss-at2x
- Repository: https://github.com/simonsmith/postcss-at2x
- Homepage: https://github.com/simonsmith/postcss-at2x#readme
- Issues: https://github.com/simonsmith/postcss-at2x/issues
- npm.io page: https://npm.io/package/postcss-at2x

## Dependencies (5)

- [pify](https://npm.io/package/pify.md) ^3.0.0
- [is-url](https://npm.io/package/is-url.md) ^1.2.2
- [image-size](https://npm.io/package/image-size.md) ^0.6.0
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.0
- [string.prototype.includes](https://npm.io/package/string.prototype.includes.md) ^1.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 5.0.1 (latest) — 2022-02-14
- 5.0.0 — 2020-10-24
- 4.0.3 — 2018-12-04
- 4.0.2 — 2017-07-13
- 4.0.1 — 2017-07-06
- 4.0.0 — 2017-07-06
- 3.2.0 — 2017-04-20
- 3.1.0 — 2017-04-03
- 3.0.0 — 2017-02-23
- 2.0.2 — 2017-02-05
- 2.0.1 — 2017-02-01
- 2.0.0 — 2015-09-08
- 1.4.0 — 2015-07-20
- 1.3.0 — 2015-07-03
- 1.2.3 — 2015-05-06
- … 8 more at https://npm.io/package/postcss-at2x/versions

## README

# postcss-at2x [![Build Status](https://travis-ci.org/simonsmith/postcss-at2x.svg)](https://travis-ci.org/simonsmith/postcss-at2x)

Ported from [rework-plugin-at2x](https://github.com/reworkcss/rework-plugin-at2x)

## Installation

```console
$ npm install postcss postcss-at2x --save-dev
```

## Usage

```js
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**

```css
.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**

```css
.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](http://api.postcss.org/Declaration.html#source).

**Output**

```css
.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](https://github.com/postcss/postcss/) docs for examples for your environment.

---
_Source: https://npm.io/package/postcss-at2x · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._