imageinliner
Advanced tools
Comparing version 0.2.1 to 0.2.2
{ | ||
"name": "imageinliner", | ||
"version": "0.2.1", | ||
"version": "0.2.2", | ||
"main": "./index.js", | ||
@@ -21,3 +21,3 @@ "description": "Tool for inlining images into css files", | ||
"mkdirp": "~0.3.5", | ||
"underscore": "~1.5.2" | ||
"underscore": ">=1.5.2" | ||
}, | ||
@@ -24,0 +24,0 @@ "devDependencies": { |
@@ -34,3 +34,3 @@ ## imageinliner | ||
Size of embedded code is somewhat larger than size of image by itself. Best performance can be achieved for smaller files, where the http setup accounts for a large portion of the transfer. Inlining files above 10k is not recommended. | ||
Base64 images is somewhat larger than size of image by itself. Inlining files above 10k is not recommended. Best performance can be achieved for smaller files, where the http setup accounts for a large portion of the transfer. | ||
@@ -43,4 +43,9 @@ Pass a limiter (in byte) using the `--sizeLimit` parameter to exclude images above the sizeLimit. | ||
The imageinliner module can also be used within node. | ||
Multiple parameters can be combined | ||
```bash | ||
imageinliner -i style.css -o outputStyle.css --rootPath /some/images --sizeLimit 10240 --compress | ||
``` | ||
The imageinliner module can also be used from node. | ||
with file path | ||
@@ -47,0 +52,0 @@ ```javascript |
@@ -40,2 +40,3 @@ #!/usr/bin/env node | ||
var res = exec('mocha'); | ||
echo(); | ||
done(res); | ||
@@ -42,0 +43,0 @@ }; |
@@ -10,6 +10,6 @@ var path = require("path"); | ||
it("should return string", function() { | ||
var cssBackgroundsPng = cssImage([ 'fixtures/image1.png',], "test"); | ||
var cssBackgroundsPng = cssImage([ 'fixtures/image1.png'], "test"); | ||
assert.equal(typeof cssBackgroundsPng, "string"); | ||
var cssBackgroundsSvg = cssImage([ 'fixtures/image4.svg',], "test"); | ||
var cssBackgroundsSvg = cssImage([ 'fixtures/image4.svg'], "test"); | ||
assert.equal(typeof cssBackgroundsSvg, "string"); | ||
@@ -19,6 +19,6 @@ }); | ||
it("should return string on one line", function() { | ||
var cssBackgroundsPng = cssImage([ 'fixtures/image1.png',], "test"); | ||
var cssBackgroundsPng = cssImage([ 'fixtures/image1.png'], "test"); | ||
assert.equal(cssBackgroundsPng.match(/\n/g), null); | ||
var cssBackgroundsSvg = cssImage([ 'fixtures/image4.svg',], "test"); | ||
var cssBackgroundsSvg = cssImage([ 'fixtures/image4.svg'], "test"); | ||
assert.equal(cssBackgroundsSvg.match(/\n/g), null); | ||
@@ -28,70 +28,95 @@ }); | ||
it("should return css inlined background from filepath", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png',], "test"); | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test"); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should replace \' with \" in svg files", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png',], "test"); | ||
// inlined uri contains two ' by default url('data:image/svg+xml;utf-8,<?xml>'); | ||
assert.equal(cssBackgrounds.match(/\'/g).length, 2); | ||
}); | ||
describe('svg', function() { | ||
it("should return css inlined background from svg", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image4.svg',], "test"); | ||
assert.equal(cssBackgrounds, 'url(\'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="32px" viewBox="0 0 20 32" style="enable-background:new 0 0 20 32;" xml:space="preserve"><g id="Layer_1"></g><g id="lightbulb"></g></svg>\')'); | ||
}); | ||
it("should return css inlined background from svg", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image4.svg'], "test"); | ||
assert.equal(cssBackgrounds, 'url(\'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="32px" viewBox="0 0 20 32" style="enable-background:new 0 0 20 32;" xml:space="preserve"><g id="Layer_1"></g><g id="lightbulb"></g></svg>\')'); | ||
}); | ||
it("should return css inlined background from root filepath", function() { | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png',], "test", {rootImagePath: "test"}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should escape # in svg images", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image5.svg'], "test"); | ||
assert.equal(cssBackgrounds.indexOf("#"), -1); | ||
}); | ||
it("should return css inlined background from root filepath with filesystemRoot", function() { | ||
var filesystemRoot = path.dirname(fs.realpathSync(__filename)); | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png',], "test", {rootImagePath: filesystemRoot}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should not contain xml comments", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image5.svg'], "test"); | ||
assert.ok(cssBackgrounds.match(/<!--[^>]*-->/g) === null, "string contains xml comments") | ||
}); | ||
it("should return multiple inlined background from filepath", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png', 'fixtures/image2.png', 'fixtures/image3.png' ], "test"); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should replace \' with \" in svg files", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test"); | ||
// inlined uri contains two ' by default url('data:image/svg+xml;utf-8,<?xml>'); | ||
assert.equal(cssBackgrounds.match(/\'/g).length, 2); | ||
}); | ||
it("should return multiple inlined background from root filepath", function() { | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png', '/fixtures/image2.png', '/fixtures/image3.png' ], "test", {rootImagePath: "test"}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should return multiple inlined background from root filepath", function() { | ||
var filesystemRoot = path.dirname(fs.realpathSync(__filename)); | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png', '/fixtures/image2.png', '/fixtures/image3.png' ], "test", {rootImagePath: filesystemRoot}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
describe('locate file', function() { | ||
it("should return undefined if image files are bigger than maxImageFileSize", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: 1200 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
it("should return css inlined background from root filepath", function() { | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png'], "test", {rootImagePath: "test"}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg==')"); | ||
}); | ||
cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: 12 }); | ||
assert.equal(typeof cssBackgrounds, "undefined"); | ||
it("should return css inlined background from root filepath with filesystemRoot", function() { | ||
var filesystemRoot = path.dirname(fs.realpathSync(__filename)); | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png'], "test", {rootImagePath: filesystemRoot}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg==')"); | ||
}); | ||
}); | ||
it("should return undefined if one of the image files are bigger than maxImageFileSize", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png', 'fixtures/image2.png','fixtures/image3.png'], "test", {maxImageFileSize: 1200 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
cssBackgrounds = cssImage([ 'fixtures/image2.png', 'fixtures/image3.png','fixtures/image1.png'], "test", {maxImageFileSize: 120 }); | ||
assert.equal(typeof cssBackgrounds, "undefined"); | ||
}); | ||
describe('multiple backgrounds', function() { | ||
it("should not check image file size if maxImageFileSize is 0", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png',], "test", {maxImageFileSize: 0 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
it("should return multiple inlined background from filepath", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png', 'fixtures/image2.png', 'fixtures/image3.png' ], "test"); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should return multiple inlined background from root filepath", function() { | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png', '/fixtures/image2.png', '/fixtures/image3.png' ], "test", {rootImagePath: "test"}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
it("should return multiple inlined background from root filepath", function() { | ||
var filesystemRoot = path.dirname(fs.realpathSync(__filename)); | ||
var cssBackgrounds = cssImage([ '/fixtures/image1.png', '/fixtures/image2.png', '/fixtures/image3.png' ], "test", {rootImagePath: filesystemRoot}); | ||
assert.equal(cssBackgrounds, "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAE1pY3Jvc29mdCBPZmZpY2V/7TVxAAAADUlEQVQoz2NgGAXIAAABEAAB4vyuKAAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiYGBgMP7//z8DCAMEGAAfugYuMnsrdQAAAABJRU5ErkJggg==')"); | ||
}); | ||
}); | ||
it("should not check image file size if maxImageFileSize is false", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png',], "test", {maxImageFileSize: false }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
describe('maxImageFileSizex', function() { | ||
it("should return undefined if image files are bigger than maxImageFileSize", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: 1200 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: 12 }); | ||
assert.equal(typeof cssBackgrounds, "undefined"); | ||
}); | ||
it("should return undefined if one of the image files are bigger than maxImageFileSize", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png', 'fixtures/image2.png','fixtures/image3.png'], "test", {maxImageFileSize: 1200 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
cssBackgrounds = cssImage([ 'fixtures/image2.png', 'fixtures/image3.png','fixtures/image1.png'], "test", {maxImageFileSize: 120 }); | ||
assert.equal(typeof cssBackgrounds, "undefined"); | ||
}); | ||
it("should not check image file size if maxImageFileSize is 0", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: 0 }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
}); | ||
it("should not check image file size if maxImageFileSize is false", function() { | ||
var cssBackgrounds = cssImage([ 'fixtures/image1.png'], "test", {maxImageFileSize: false }); | ||
assert.equal(typeof cssBackgrounds, "string"); | ||
}); | ||
}); | ||
}); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
543
98
32055
22
+ Addedunderscore@1.13.7(transitive)
- Removedunderscore@1.5.2(transitive)
Updatedunderscore@>=1.5.2