Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahtohbi4/postcss-bgimage
PostCSS plugin to optimization subjective site speed
https://github.com/ahtohbi4/postcss-bgimage
css gulp optimization postcss
Last synced: about 2 months ago
JSON representation
PostCSS plugin to optimization subjective site speed
- Host: GitHub
- URL: https://github.com/ahtohbi4/postcss-bgimage
- Owner: ahtohbi4
- License: mit
- Created: 2015-10-20T12:00:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-02-21T22:34:33.000Z (almost 5 years ago)
- Last Synced: 2024-08-08T19:41:38.619Z (6 months ago)
- Topics: css, gulp, optimization, postcss
- Language: JavaScript
- Homepage:
- Size: 1.17 MB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
postcss-bgimage
==
[![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]
[dependency-img]: https://david-dm.org/ahtohbi4/postcss-bgimage.svg
[dependency]: https://david-dm.org/ahtohbi4/postcss-bgimage
[version-img]: https://badge.fury.io/js/postcss-bgimage.svg
[version]: https://badge.fury.io/js/postcss-bgimage
[travis-img]: https://travis-ci.org/ahtohbi4/postcss-bgimage.svg?branch=master
[travis]: https://travis-ci.org/ahtohbi4/postcss-bgimage
[appveyor-img]: https://ci.appveyor.com/api/projects/status/0xodj7np6jghyuik/branch/master?svg=true
[appveyor]: https://ci.appveyor.com/project/ahtohbi4/postcss-bgimage/branch/master
[codacy-img]: https://api.codacy.com/project/badge/grade/480c7aa1737046bfa6d475082847d513
[codacy]: https://www.codacy.com/app/alexandr-post/postcss-bgimage
> [PostCSS](https://github.com/postcss/postcss) plugin which removes `background-image` properties with `url()` values
or leaves only its. It allows to separate your layouts CSS from the images CSS to boost a speed of showing a page.
: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).
Installation
--
```bash
$ npm install postcss-bgimage --save-dev
```
or
```bash
$ yarn add postcss-bgimage --dev
```
Usage
--
Any way of using [PostCSS](https://github.com/postcss/postcss#usage). For example, [Gulp PostCSS](https://github.com/w0rm/gulp-postcss):
```javascript
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const bgImage = require('postcss-bgimage');
function noBackgrounds() {
return gulp.src('css/style.css')
.pipe(postcss([bgImage({ mode: 'cutter' })]))
.pipe(rename({ suffix: '.top' }))
.pipe(gulp.dest('compiled/css'));
}
function onlyBackgrounds() {
return gulp.src('css/style.css')
.pipe(postcss([bgImage({ mode: 'cutterInvertor' })]))
.pipe(rename({ suffix: '.bottom' }))
.pipe(gulp.dest('compiled/css'));
}
exports.compile = gulp.parallel(noBackgrounds, onlyBackgrounds);
```
Result
--
### Common usage
**Input**
```css
/* style.css */
body {
background-image: url(/path/to/img.png);
font-family: Arial;
padding: 20px 10px;
}
```
**Output**
```css
/* style.top.css */
body {
font-family: Arial;
padding: 20px 10px;
}
```
```css
/* style.bottom.css */
body {
background-image: url(/path/to/img.png);
}
```
### Usage with shortcut `background`
**Input**
```css
/* style.css */
#some {
display: flex;
background: #f30 url(/path/to/img.png) 50% no-repeat;
color: #fff;
}
```
**Output**
```css
/* style.top.css */
#some {
display: inline-block;
background: #f30 50% no-repeat;
color: #fff;
}
```
```css
/* style.bottom.css */
#some {
background-image: url(/path/to/img.png);
}
```
### Using in nested at-rules
**Input**
```css
/* style.css */
@media (min-width: 320px) {
.title + .list > li {
background: url(/path/to/img.png);
}
@supports (display: flex) {
.panel {
display: flex;
background: url(/path/to/img.png);
}
}
.panel {
display: block;
}
}
```
**Output**
```css
/* style.top.css */
@media (min-width: 320px) {
.title + .list > li {
}
@supports (display: flex) {
.panel {
display: flex;
}
}
.panel {
display: block;
}
}
```
```css
/* style.bottom.css */
@media (min-width: 320px) {
.title + .list > li {
background: url(/path/to/img.png);
}
@supports (display: flex) {
.panel {
background: url(/path/to/img.png);
}
}
.panel {
}
}
```
### Ignore rules
To ignore some CSS rules use comment `/* bgImage: ignore */`. For example:
**Input**
```css
/* style.css */
.some-rule {
display: inline-block;
/* bgImage: ignore */
background: url(/path/to/img2.png);
}
@media (min-width: 320px) {
/* bgImage: ignore */
@supports (--color: red) {
.some-rule {
background: url(/path/to/img2.png);
color: var(--color);
}
}
.some-rule {
display: inline-block;
background: url(/path/to/img2.png);
}
}
```
**Output**
```css
/* style.top.css */
.some-rule {
display: inline-block;
/* bgImage: ignore */
background: url(/path/to/img2.png);
}
@media (min-width: 320px) {
/* bgImage: ignore */
@supports (--color: red) {
.some-rule {
background: url(/path/to/img2.png);
color: var(--color);
}
}
.some-rule {
display: inline-block;
background: url(/path/to/img2.png);
}
}
```
```css
/* style.bottom.css */
.some-rule {
}
@media (min-width: 320px) {
/* bgImage: ignore */
@supports (--color: red) {
.some-rule {
}
}
.some-rule {
}
}
```
### Using of the resulting files in HTML
```html
postcss-bgimage test
postcss-bgimage test
Page content
```
Or (in a case of small size) you can inject top CSS in `` with `` to decrease the number of blocking HTTP requests.
```html
<!doctype html>
<html>
<head>
<title>postcss-bgimage test</title>
<style>/* Content of your /compiled/css/style.top.css */
postcss-bgimage test
Page content