{"id":22519469,"url":"https://github.com/ahtohbi4/postcss-bgimage","last_synced_at":"2025-06-22T05:06:39.501Z","repository":{"id":57327880,"uuid":"44603294","full_name":"ahtohbi4/postcss-bgimage","owner":"ahtohbi4","description":"PostCSS plugin to optimization subjective site speed","archived":false,"fork":false,"pushed_at":"2020-02-21T22:34:33.000Z","size":1230,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T12:37:58.947Z","etag":null,"topics":["css","gulp","optimization","postcss"],"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/ahtohbi4.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":"2015-10-20T12:00:12.000Z","updated_at":"2023-05-02T18:07:24.000Z","dependencies_parsed_at":"2022-09-17T11:13:08.857Z","dependency_job_id":null,"html_url":"https://github.com/ahtohbi4/postcss-bgimage","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/ahtohbi4/postcss-bgimage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahtohbi4%2Fpostcss-bgimage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahtohbi4%2Fpostcss-bgimage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahtohbi4%2Fpostcss-bgimage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahtohbi4%2Fpostcss-bgimage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahtohbi4","download_url":"https://codeload.github.com/ahtohbi4/postcss-bgimage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahtohbi4%2Fpostcss-bgimage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261238910,"owners_count":23128882,"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":["css","gulp","optimization","postcss"],"created_at":"2024-12-07T04:20:29.135Z","updated_at":"2025-06-22T05:06:34.427Z","avatar_url":"https://github.com/ahtohbi4.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"postcss-bgimage\n==\n\n[![npm version][version-img]][version] [![Dependency Status][dependency-img]][dependency] [![Travis Build Status][travis-img]][travis] [![Appveyor Build Status][appveyor-img]][appveyor] [![Codacy Badge][codacy-img]][codacy]\n\n[dependency-img]: https://david-dm.org/ahtohbi4/postcss-bgimage.svg\n[dependency]: https://david-dm.org/ahtohbi4/postcss-bgimage\n[version-img]: https://badge.fury.io/js/postcss-bgimage.svg\n[version]: https://badge.fury.io/js/postcss-bgimage\n[travis-img]: https://travis-ci.org/ahtohbi4/postcss-bgimage.svg?branch=master\n[travis]: https://travis-ci.org/ahtohbi4/postcss-bgimage\n[appveyor-img]: https://ci.appveyor.com/api/projects/status/0xodj7np6jghyuik/branch/master?svg=true\n[appveyor]: https://ci.appveyor.com/project/ahtohbi4/postcss-bgimage/branch/master\n[codacy-img]: https://api.codacy.com/project/badge/grade/480c7aa1737046bfa6d475082847d513\n[codacy]: https://www.codacy.com/app/alexandr-post/postcss-bgimage\n\n\u003e [PostCSS](https://github.com/postcss/postcss) plugin which removes `background-image` properties with `url()` values\nor leaves only its. It allows to separate your layouts CSS from the images CSS to boost a speed of showing a page.\n\n:boom: **Note!** The plugin only removes CSS declarations. Do not expect cleaning empty rules after that. Use special plugins for it ([csso](https://github.com/css/csso), [cssnano](http://cssnano.co/) and other).\n\nInstallation\n--\n\n```bash\n$ npm install postcss-bgimage --save-dev\n```\n\nor\n\n```bash\n$ yarn add postcss-bgimage --dev\n```\n\nUsage\n--\n\nAny way of using [PostCSS](https://github.com/postcss/postcss#usage). For example, [Gulp PostCSS](https://github.com/w0rm/gulp-postcss):\n\n```javascript\nconst gulp = require('gulp');\nconst postcss = require('gulp-postcss');\nconst rename = require('gulp-rename');\nconst bgImage = require('postcss-bgimage');\n\nfunction noBackgrounds() {\n  return gulp.src('css/style.css')\n    .pipe(postcss([bgImage({ mode: 'cutter' })]))\n    .pipe(rename({ suffix: '.top' }))\n    .pipe(gulp.dest('compiled/css'));\n}\n\nfunction onlyBackgrounds() {\n  return gulp.src('css/style.css')\n    .pipe(postcss([bgImage({ mode: 'cutterInvertor' })]))\n    .pipe(rename({ suffix: '.bottom' }))\n    .pipe(gulp.dest('compiled/css'));\n}\n\nexports.compile = gulp.parallel(noBackgrounds, onlyBackgrounds);\n```\n\nResult\n--\n\n### Common usage\n\n**Input**\n\n```css\n/* style.css */\n\nbody {\n    background-image: url(/path/to/img.png);\n    font-family: Arial;\n    padding: 20px 10px;\n}\n```\n\n**Output**\n\n```css\n/* style.top.css */\n\nbody {\n    font-family: Arial;\n    padding: 20px 10px;\n}\n```\n\n```css\n/* style.bottom.css */\n\nbody {\n    background-image: url(/path/to/img.png);\n}\n```\n\n### Usage with shortcut `background`\n\n**Input**\n\n```css\n/* style.css */\n\n#some {\n    display: flex;\n    background: #f30 url(/path/to/img.png) 50% no-repeat;\n    color: #fff;\n}\n```\n\n**Output**\n\n```css\n/* style.top.css */\n\n#some {\n    display: inline-block;\n    background: #f30 50% no-repeat;\n    color: #fff;\n}\n```\n\n```css\n/* style.bottom.css */\n\n#some {\n    background-image: url(/path/to/img.png);\n}\n```\n\n### Using in nested at-rules\n\n**Input**\n\n```css\n/* style.css */\n\n@media (min-width: 320px) {\n    .title + .list \u003e li {\n        background: url(/path/to/img.png);\n    }\n\n    @supports (display: flex) {\n        .panel {\n            display: flex;\n            background: url(/path/to/img.png);\n        }\n    }\n\n    .panel {\n        display: block;\n    }\n}\n```\n\n**Output**\n\n```css\n/* style.top.css */\n\n@media (min-width: 320px) {\n    .title + .list \u003e li {\n    }\n\n    @supports (display: flex) {\n        .panel {\n            display: flex;\n        }\n    }\n\n    .panel {\n        display: block;\n    }\n}\n```\n\n```css\n/* style.bottom.css */\n\n@media (min-width: 320px) {\n    .title + .list \u003e li {\n        background: url(/path/to/img.png);\n    }\n\n    @supports (display: flex) {\n        .panel {\n            background: url(/path/to/img.png);\n        }\n    }\n\n    .panel {\n    }\n}\n```\n\n### Ignore rules\n\nTo ignore some CSS rules use comment `/* bgImage: ignore */`. For example:\n\n**Input**\n\n```css\n/* style.css */\n\n.some-rule {\n    display: inline-block;\n    /* bgImage: ignore */\n    background: url(/path/to/img2.png);\n}\n\n@media (min-width: 320px) {\n    /* bgImage: ignore */\n    @supports (--color: red) {\n        .some-rule {\n            background: url(/path/to/img2.png);\n            color: var(--color);\n        }\n    }\n\n    .some-rule {\n        display: inline-block;\n        background: url(/path/to/img2.png);\n    }\n}\n```\n\n**Output**\n\n```css\n/* style.top.css */\n\n.some-rule {\n    display: inline-block;\n    /* bgImage: ignore */\n    background: url(/path/to/img2.png);\n}\n\n@media (min-width: 320px) {\n    /* bgImage: ignore */\n    @supports (--color: red) {\n        .some-rule {\n            background: url(/path/to/img2.png);\n            color: var(--color);\n        }\n    }\n\n    .some-rule {\n        display: inline-block;\n        background: url(/path/to/img2.png);\n    }\n}\n```\n\n```css\n/* style.bottom.css */\n\n.some-rule {\n}\n\n@media (min-width: 320px) {\n    /* bgImage: ignore */\n    @supports (--color: red) {\n        .some-rule {\n        }\n    }\n\n    .some-rule {\n    }\n}\n```\n\n### Using of the resulting files in HTML\n\n```html\n\u003c!doctype html\u003e\n\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003epostcss-bgimage test\u003c/title\u003e\n        \u003clink rel=\"stylesheet\" href=\"/compiled/css/style.top.css\"\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003epostcss-bgimage test\u003c/h1\u003e\n        \u003cp\u003ePage content\u003c/p\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n\u003clink rel=\"stylesheet\" href=\"/compiled/css/style.bottom.css\"\u003e\n```\n\nOr (in a case of small size) you can inject top CSS in `\u003chead\u003e` with `\u003cstyle\u003e` to decrease the number of blocking HTTP requests.\n\n```html\n\u003c!doctype html\u003e\n\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003epostcss-bgimage test\u003c/title\u003e\n        \u003cstyle\u003e/* Content of your /compiled/css/style.top.css */\u003c/style\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003epostcss-bgimage test\u003c/h1\u003e\n        \u003cp\u003ePage content\u003c/p\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n\u003clink rel=\"stylesheet\" href=\"/compiled/css/style.bottom.css\"\u003e\n```\n\nOptions\n--\n\n#### mode\n*(required)* Mode of the plugin.\n\n- `cutter` - Removes `background-image:` properties with external references through `url()` from\nsource CSS.\n- `cutterInvertor` - Removes all CSS rules without `background-image` and leaves only this property for other ones.\n\nTest\n--\n\n```bash\n$ npm test\n```\n\nor\n\n```bash\n$ yarn test\n```\n\nLicense\n--\n\nMIT © Alexander Antonov \u003calexandr-post@yandex.ru\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahtohbi4%2Fpostcss-bgimage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahtohbi4%2Fpostcss-bgimage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahtohbi4%2Fpostcss-bgimage/lists"}