Skip to content

2createStudio/postcss-lazy-rules

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-lazy-rules

Usage

var fs = require('fs');
var path = require('path');
var postcss = require('postcss');
var rules = require('postcss-lazy-rules');

var css = fs.readFileSync('./css/sprite.css', 'utf8');
var opts = {
	images: path.resolve(__dirname, './images/*.png'),
	stylesheet: path.resolve(__dirname, './css/sprite.css')
};

postcss([rules(opts)])
	.process(css, {
		from: './css/style.css',
		to: './dist/style.css'
	})
	.then(function(result) {
		fs.writeFileSync('./dist/style.css', result.css);
	});

Result

/* Input */

/* ---------------- */

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

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

About

Generates CSS rules for your images

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published