https://github.com/2createstudio/postcss-lazy-rules
Generates CSS rules for your images
https://github.com/2createstudio/postcss-lazy-rules
Last synced: about 1 year ago
JSON representation
Generates CSS rules for your images
- Host: GitHub
- URL: https://github.com/2createstudio/postcss-lazy-rules
- Owner: 2createStudio
- License: mit
- Created: 2017-04-20T13:27:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-01T09:05:35.000Z (over 7 years ago)
- Last Synced: 2025-01-09T16:35:16.434Z (about 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 8
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-lazy-rules
### Usage
```js
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**
```css
/* 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; }
}
```