gulp-image-to-rule
v1.2.0
Published
Generate CSS rules from your images.
Downloads
10
Maintainers
Readme
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