{"id":13493845,"url":"https://github.com/simonsmith/postcss-at2x","last_synced_at":"2025-06-19T04:08:28.508Z","repository":{"id":29233878,"uuid":"32765745","full_name":"simonsmith/postcss-at2x","owner":"simonsmith","description":"Simplify handling of retina images in CSS","archived":false,"fork":false,"pushed_at":"2022-02-14T10:59:28.000Z","size":506,"stargazers_count":45,"open_issues_count":8,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-19T04:08:19.877Z","etag":null,"topics":["at2x","javascript","postcss","retina-images"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-24T00:02:07.000Z","updated_at":"2025-02-10T15:09:25.000Z","dependencies_parsed_at":"2022-09-17T11:11:49.913Z","dependency_job_id":null,"html_url":"https://github.com/simonsmith/postcss-at2x","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/simonsmith/postcss-at2x","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fpostcss-at2x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fpostcss-at2x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fpostcss-at2x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fpostcss-at2x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsmith","download_url":"https://codeload.github.com/simonsmith/postcss-at2x/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fpostcss-at2x/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260684179,"owners_count":23046103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["at2x","javascript","postcss","retina-images"],"created_at":"2024-07-31T19:01:19.345Z","updated_at":"2025-06-19T04:08:23.494Z","avatar_url":"https://github.com/simonsmith.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# postcss-at2x [![Build Status](https://travis-ci.org/simonsmith/postcss-at2x.svg)](https://travis-ci.org/simonsmith/postcss-at2x)\n\nPorted from [rework-plugin-at2x](https://github.com/reworkcss/rework-plugin-at2x)\n\n## Installation\n\n```console\n$ npm install postcss postcss-at2x --save-dev\n```\n\n## Usage\n\n```js\nconst fs = require('fs');\nconst postcss = require('postcss');\nconst at2x = require('postcss-at2x');\n\nconst input = fs.readFileSync('input.css', 'utf8');\n\nconst output = postcss()\n  .use(at2x())\n  .process(input)\n  .then(result =\u003e console.log(result.css));\n```\n\n### .at2x()\n\nAdds `at-2x` keyword to `background` and `background-image` declarations to add retina support for images.\n\n**Input**\n\n```css\n.multi {\n  background: url(http://example.com/image.png),\n              linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),\n              green,\n              url(/public/images/cool.png) at-2x;\n}\n```\n\n**Output**\n\n```css\n.multi {\n  background: url(http://example.com/image.png),\n              linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),\n              green,\n              url(/public/images/cool.png);\n}\n\n@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {\n  .multi {\n    background-image: url(http://example.com/image.png), \n                      linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)), \n                      none,\n                      url(/public/images/cool@2x.png);\n  }\n}\n```\n\n### Options\n\n##### `identifier` (default: `\"@2x\"`) _string_\n\nChange the identifier added to retina images, for example `file@2x.png` can be `file-retina.png`.\n\n##### `detectImageSize` (default: `false`) _boolean_\n\nObtains the image dimensions of the non-retina image automatically and applies them to the\n`background-size` property of the retina image.\n\n##### `skipMissingRetina` (default: `false`) _boolean_\n\nIf the retina image cannot be found on the file system it will be skipped and\nnot output into the result CSS.\n\n##### `resolveImagePath` _function_\n\nGet resolved image path for detecting image size. By default, original `url` value is resolved from current working directory (`process.cwd()`).\n\nFunction receives two arguments: original `url` value and [PostCSS declaration source](http://api.postcss.org/Declaration.html#source).\n\n**Output**\n\n```css\n.element {\n  background: url(img.jpg) no-repeat;\n}\n\n@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {\n  .element {\n    background: url(img@2x.jpg) no-repeat;\n    background-size: 540px 675px; /* Dimensions of img.jpg */\n  }\n}\n```\n\nSee [PostCSS](https://github.com/postcss/postcss/) docs for examples for your environment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fpostcss-at2x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsmith%2Fpostcss-at2x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fpostcss-at2x/lists"}