gulp-image-to-rule

Gulp plugin that generate CSS rules from a folder with images.

Install

npm install gulp-image-to-rule

Example

var path = require('path');
var gulp = require('gulp');
var i2r  = require('gulp-image-to-rule');

gulp.task('lazy-rules', function() {
	return gulp.src('./src/*.png')
		.pipe(i2r(path.resolve('./dist/sprite.css')))
		.pipe(gulp.dest('.'));
});

Output

.circle { background: url(../src/circle.png) no-repeat 0 0; width: 25px; height: 25px; }
.square { background: url(../src/square.png) no-repeat 0 0; width: 25px; height: 25px; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.circle { background: url(../src/[email protected]) no-repeat 0 0; width: 25px; height: 25px; background-size: 25px 25px; }
	.square { background: url(../src/[email protected]) no-repeat 0 0; width: 25px; height: 25px; background-size: 25px 25px; }
}

Options

selectorWithPseudo

Type: String
Default: null
Example: .{base}-{pseudo}, a:{pseudo} .{base}, button:{pseudo} .{base}, .{base}, a.{pseudo} .{base}, button.{pseudo} .{base}, .{base}.{pseudo}
Required: false

Can define custom selector, when pseudo selector is detected. Pseudo selectors are separated from the selectors by '_' in the image name (e.g. git-icon_hover). Use keywords {base} and {pseudo}, that will be replaced in the output.

templates

Type: Object
Default: null
Example:

{
	REGULAR: '<% _.forEach(images, function(image) { %><%= image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width %>px; height: <%= image.dimensions.height %>px; display: inline-block; vertical-align: middle; font-size: 0; }<%= \'\\n\' %><% }); %>',
    
	RETINA: '@media (-webkit-min-device-pixel-ratio: <%= ratio %>), (min-resolution: <%= dpi %>dpi) {<% _.forEach(images, function(image) { %><%= \'\\n\\t\' + image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width / image.ratio %>px; height: <%= image.dimensions.height / image.ratio %>px; background-size: <%= image.dimensions.width / image.ratio %>px <%= image.dimensions.height / image.ratio %>px; display: inline-block; vertical-align: middle; font-size: 0; }<% }); %>}'
}

Required: false

Can define custom templates for regular and retina CSS output using lodash templates.

Notes

• The plugin has built-in support for retina images.
• The CSS selectors are based on name of file e.g ico-arrow.png => .ico-arrow.
• The purpose of this plugin is to be like a preprocessor for the postcss-sprites plugin.

Contributing

Pull requests are welcome.

License

MIT © 2createStudio