{"id":31128889,"url":"https://github.com/ilyoff/postcss-at-images","last_synced_at":"2026-05-01T12:32:41.929Z","repository":{"id":46926944,"uuid":"197482524","full_name":"ilyoff/postcss-at-images","owner":"ilyoff","description":"PostCSS plugin searches and adds high resolution background images.","archived":false,"fork":false,"pushed_at":"2023-01-04T04:47:57.000Z","size":579,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-18T01:26:06.427Z","etag":null,"topics":["background-image","css","high-resolution","postcss","postcss-plugin","retina"],"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/ilyoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-07-18T00:37:01.000Z","updated_at":"2019-07-18T23:40:29.000Z","dependencies_parsed_at":"2023-02-01T21:30:25.908Z","dependency_job_id":null,"html_url":"https://github.com/ilyoff/postcss-at-images","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ilyoff/postcss-at-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyoff%2Fpostcss-at-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyoff%2Fpostcss-at-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyoff%2Fpostcss-at-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyoff%2Fpostcss-at-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilyoff","download_url":"https://codeload.github.com/ilyoff/postcss-at-images/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyoff%2Fpostcss-at-images/sbom","scorecard":{"id":484605,"data":{"date":"2025-08-11","repo":{"name":"github.com/ilyoff/postcss-at-images","commit":"f12d05f2785e42527b068adb080a6219702d30aa"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"54 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T17:28:31.058Z","repository_id":46926944,"created_at":"2025-08-19T17:28:31.058Z","updated_at":"2025-08-19T17:28:31.058Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32497812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["background-image","css","high-resolution","postcss","postcss-plugin","retina"],"created_at":"2025-09-18T01:09:37.448Z","updated_at":"2026-05-01T12:32:41.912Z","avatar_url":"https://github.com/ilyoff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS At Images\n\n[PostCSS]: https://github.com/postcss/postcss\n[postcss-retina-bg-img]: https://github.com/alexlafroscia/postcss-retina-bg-img\n\n[PostCSS] plugin searches and adds high resolution background images.\n\nTotally based, inspired and extends functionality of [postcss-retina-bg-img] plugin \n\n## What does it do\nIt searches background images in your CSS code and, if a high resolution version of the same file is found, automatically adds that file within a appropriate media query. Differs from [postcss-retina-bg-img] in that you can use not only retina images, but also 3x and 4x images. \n                                               \n### Input\n\n```css\n.foo {\n  background: url('/assets/images/foo.png');\n}\n\n.bar {\n  background-image: url('/assets/images/bar.png');\n}\n```\n\n### Output \n\n```css\n\n.foo {\n  background: url('/assets/images/foo.png');\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .foo {\n    background-image: url('/assets/images/foo@2x.png');\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .foo {\n    background-image: url('/assets/images/foo@3x.png');\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 4), (min-resolution: 384dpi) {\n  .foo {\n    background-image: url('/assets/images/foo@2x.png');\n  }\n}\n\n.bar {\n  background-image: url('/assets/images/bar.png');\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .bar {\n    background-image: url('/assets/images/bar@2x.png');\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .bar {\n    background-image: url('/assets/images/bar@3x.png');\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 4), (min-resolution: 384dpi) {\n  .bar {\n    background-image: url('/assets/images/bar@4x.png');\n  }\n}\n```\n## Install\n#### NPM\n\n`npm install postcss-at-images --save`\n\n## Usage\n\n```js\nconst postcss = require('postcss');\nconst atImages = require('postcss-at-images')\n\nconst retinaBgImage = require('postcss-retina-bg-img');\n\nconst options = {\n    assetDirectory: null,\n    includeFileExtensions: ['.jpg', '.jpeg', '.png'],\n    resolutions: {\n        192: {\n            suffix: ['@2x'],\n            mediaQuery: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'\n        },\n\n        288: {\n            suffix: ['@3x'],\n            mediaQuery: '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi)'\n        },\n\n        384: {\n            suffix: ['@4x'],\n            mediaQuery: '(-webkit-min-device-pixel-ratio: 4), (min-resolution: 384dpi)'\n        }\n    }\n};\n\nreturn postcss([ atImages(options) ]).process(input);\n```\n\n#### Options\n\n##### assetDirectory* (required)\nType: `string`\n\nThe path to your asset directory. This should be the location on the filesystem that your files are served from.\n\nFor example, if your CSS links to an image like so:\n```css\n.foo {\n  background-image: url('/assets/images/foo.png');\n}\n```\n\nthen the assetDirectory should be the absolute path on the filesystem to wherever assets lives. This is necessary because this plugin will only add media queries for files that actually exist; to determine their existence, we must be able to actually find the file.\n\n##### includeFileExtensions (optional)\nType: `string[]` \nDefault `['png', 'jpg']`\n\nThe file extensions to act on. Without a whitelist of file types, you'll end up checking for retina versions of svg files and the like, which you may not actually want to act on. If you need to check anything other than png or jpg files, simply define an array of file extensions here.\n\n##### Resolutions (optional)\nType: `Object` \nDefault: `{192: {...}, 288: {...}, 384: {...}}`\n\nMap with 3 basic screen resolutions. Each item contains two fields: `suffix`es array and `mediaQuery` string. If you don't want to use any of the resolution, just set it to `null`:\n\n```js\nconst options = {\n  assetDirectory: null,\n      includeFileExtensions: ['.jpg', '.jpeg', '.png'],\n      resolutions: {\n          192: {\n              suffix: ['@2x'],\n              mediaQuery: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'\n          },\n  \n          288: null,\n  \n          384: {\n              suffix: ['@4x'],\n              mediaQuery: '(-webkit-min-device-pixel-ratio: 4), (min-resolution: 384dpi)'\n          }\n      }\n}\n\n```\n\n###### Suffix (optional)\nType: `string[] | string` Default `[@2x] | [@3x] | [@4x]`\n \nThe possible suffixes to find a retina image with. For example, if the background image is `foo.png`, and you've specified `@2x` as the `suffix`, then the file foo@2x.png would be used as the retina version. Note that the media query is only added if the file actually exists; if you don't have a foo@2x.png then this plugin won't change a thing.\n                                                                  \nIf an array of suffixes is provided, then any of the given strings will be matched against. If you have a situation where multiple files could satisfy the settings, such as `suffix: ['@2x', '_2x']` with the following files:\n```\nfoo.png\nfoo@2x.png\nfoo_2x.png\n```\nThen the first one in the `suffix` array will be used.\n\n###### mediaQuery (optional)\nType: `string`\nDefault: `(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) | (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) | (-webkit-min-device-pixel-ratio: 4), (min-resolution: 384dpi)`\n\nThe media query to use to target high resolution displays. The defaults should be sufficient, but if you need something custom, feel free to provide your own.\n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for examples for your environment.\n\n## Gotchas\n\nA few things to note when using this plugin:\n\n- Media queries are only added if the retina version of the file is found.  Make sure your retina images follow some kind of pattern so that they can be located based on the name of the non-retina file.\n- Selectors with a background image that are inside a media query already will create a new, combined media query to target both the existing one and retina displays.  For example, the following should happen:\n\n    ```css\n    /* Input */\n    .foo {\n      background: url('/assets/images/foo-mobile.png');\n    }\n\n    @media (min-width: 600px) {\n      .foo {\n        background: url('/assets/images/foo.png');\n      }\n    }\n    ```\n\n    ```css\n    /* Output */\n    .foo {\n      background: url('/assets/images/foo-mobile.png');\n    }\n\n    @media (min-width: 600px) {\n      .foo {\n        background: url('/assets/images/foo.png');\n      }\n    }\n\n    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n      .foo {\n        background-image: url('/assets/images/foo-mobile@2x.png');\n      }\n    }\n\n    @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px), (min-resolution: 192dpi) and (min-width: 600px) {\n      .foo {\n        background-image: url('/assets/images/foo@2x.png');\n      }\n    }\n    ```\n\n    If this does not seem to be working correctly, please [file a ticket][issues] so I can make the rule combination more robust.\n\n\n## Contributing\n\nPull requests are welcome. If you add functionality, then please add unit tests to cover it.\n\n## License\n\nMIT © [Ilya Ovsyanikov](https://github.com/ilyoff/postcss-at-images)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyoff%2Fpostcss-at-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filyoff%2Fpostcss-at-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyoff%2Fpostcss-at-images/lists"}