Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add rework.inline to encode images to base64

  • Loading branch information...
commit f9eb4ddb2d0e17d99d8dffcd0492f53ad3197142 1 parent 2ddfdfe
@ai ai authored
View
28 Readme.md
@@ -629,6 +629,34 @@ yields:
}
```
+### .inline(dir)
+
+ Inline files from `dir` directly to CSS. Replace `inline(path)` to Data URI
+ with base64 encoding of file. It is useful for small images and fonts.
+
+ Of cource, you can use inline only with node. It is not available
+ in the browser with component.
+
+```js
+var css = rework(read(css))
+ .use(rework.inline('images/', 'fonts/'))
+ .toString()
+```
+
+```css
+.logo {
+ background: inline(icons/logo.png);
+}
+```
+
+yields:
+
+```css
+.logo {
+ background: url("data:image/png;base64,iVBORw0…");
+}
+```
+
## Example
example.js:
View
5 examples/inline.css
@@ -0,0 +1,5 @@
+.icon {
+ background: inline(component@2x.png) no-repeat;
+ width: 10px;
+ height: 10px
+}
View
9 examples/inline.js
@@ -0,0 +1,9 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/inline.css', 'utf8'))
+ .use(rework.inline('examples/'))
+ .toString()
+
+console.log(css);
View
51 lib/plugins/inline.js
@@ -0,0 +1,51 @@
+
+/**
+ * Module dependencies.
+ */
+var fs = require('fs');
+var path = require('path');
+var mime = require('mime');
+var visit = require('../visit');
+
+/**
+ * Inline images and fonts.
+ *
+ * .logo {
+ * background: inline(icons/logo.png);
+ * }
+ *
+ * yields:
+ *
+ * .logo {
+ * background: url("data:image/png;base64,iVBORw0…");
+ * }
+ *
+ */
+
+module.exports = function() {
+ if (Array.isArray(arguments[0])) {
+ var dirs = arguments[0];
+ } else {
+ var dirs = Array.prototype.slice.call(arguments);
+ }
+ return function(style, rework){
+ visit.declarations(style, function(declarations){
+ declarations.forEach(function(decl){
+ if (!~decl.value.indexOf('inline(')) return;
+ decl.value = decl.value.replace(/inline\(([^)]+)\)/g, function(_, name){
+
+ var file = dirs.map(function(dir) {
+ return path.join(dir, name);
+ }).filter(function(filePath){
+ return fs.existsSync(filePath)
+ })[0];
+ if (!file) throw new Error("Can't find `" + name + "` to inline");
+
+ var type = mime.lookup(file);
+ var base64 = new Buffer(fs.readFileSync(file)).toString('base64');
+ return 'url("data:' + type + ';base64,' + base64 + '")';
+ });
+ });
+ });
+ }
+};
View
1  lib/rework.js
@@ -104,3 +104,4 @@ exports.at2x = require('./plugins/at2x');
exports.url = require('./plugins/url');
exports.ease = require('./plugins/ease');
exports.vars = require('./plugins/vars');
+exports.inline = require('./plugins/inline');
View
1  package.json
@@ -11,6 +11,7 @@
"css": "1.0.7",
"commander": "1.0.4",
"color-parser": "0.1.0",
+ "mime": "1.2.9",
"debug": "*"
},
"devDependencies": {
View
BIN  test/fixtures/images/dot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
3  test/fixtures/inline.css
@@ -0,0 +1,3 @@
+.dot {
+ background: inline(images/dot.png) no-repeat
+}
View
3  test/fixtures/inline.out.css
@@ -0,0 +1,3 @@
+.dot {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==") no-repeat
+}
View
23 test/rework.js
@@ -230,6 +230,29 @@ describe('rework', function(){
})
})
+ describe('.inline(dir)', function(){
+ it('should inline images', function(){
+ rework(fixture('inline'))
+ .use(rework.inline('lib/', 'test/fixtures'))
+ .toString()
+ .should.equal(fixture('inline.out'));
+ })
+ it('should accept dirs in array', function(){
+ rework(fixture('inline'))
+ .use(rework.inline(['lib/', 'test/fixtures']))
+ .toString()
+ .should.equal(fixture('inline.out'));
+ })
+
+ it('should throw error on nonexistent file', function(){
+ (function(){
+ rework(fixture('inline'))
+ .use(rework.inline())
+ .toString()
+ }).should.throw(/dot.png/)
+ })
+ })
+
describe('.toString() compress option', function(){
it('should compress the output', function(){
rework('body { color: red; }')
Please sign in to comment.
Something went wrong with that request. Please try again.