Skip to content

Commit 1fa2d8c

Browse files
author
André König
committed
Written README file.
1 parent 02eb772 commit 1fa2d8c

File tree

5 files changed

+135
-7
lines changed

5 files changed

+135
-7
lines changed

.travis.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
language: node_js
2+
node_js:
3+
- '0.10'

README.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# imacss
2+
3+
An application and library that transforms image files to [data URIs (rfc2397)](https://www.ietf.org/rfc/rfc2397.txt) and embeds them into a single CSS file as background images.
4+
5+
Let's say you have a web-based frontend which embeds a lot of images (e.g. icons). This referencing produces HTTP requests for every single image. What if you would like to minimize it to just one request? That is something `imacss` can do for you.
6+
7+
## What?
8+
9+
Okay, enough words. Let's dive straight into a transformation example. If we assume that you have two SVGs, like `github.svg` and `quitter.svg`, `imacss` would generate this CSS code for you.
10+
11+
.imacss.imacss-github {
12+
background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEBg...);
13+
}
14+
15+
.imacss.imacss-quitter {
16+
background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhADA...);
17+
}
18+
19+
20+
## CLI
21+
22+
`imacss` comes with a command-line interface which pipes the output to stdout by default (yeah, plain old text streams FTW!).
23+
24+
### Installation
25+
26+
Install with [npm](https://npmjs.org/package/imacss) globally.
27+
28+
npm install -g imacss
29+
30+
### Usage examples
31+
32+
Embed all SVGs in a particular directory and all its subdirectories (will pipe the output to stdout).
33+
34+
imacss "~/projects/webapp/images/**/*.svg"
35+
36+
Embed all SVGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
37+
38+
imacss "~/projects/webapp/images/*.svg" images.svg.css
39+
40+
Embed all SVGs _and_ PNGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
41+
42+
imacss "~/projects/webapp/images/*.{svg,png}" images.css
43+
44+
If you don't like the `imacss` selector namespace you are able to modify it as well.
45+
46+
imacss "~/projects/webapp/images/*.{svg,png}" images.css foobar
47+
48+
will produce this selector structure in the CSS file:
49+
50+
.foobar.foobar-github {...}
51+
52+
## API
53+
54+
If you would like to use the `imacss` functionality within your application, there is an API for that.
55+
56+
### Install
57+
58+
Install with [npm](https://npmjs.org/package/imacss)
59+
60+
npm install --save imacss
61+
62+
### Methods
63+
64+
#### convert(glob[, namespace]);
65+
66+
Converts the image files from the specified glob and returns a stream with the CSS selectors that can be piped to somewhere else.
67+
68+
**Arguments**
69+
70+
`glob`
71+
72+
The instruction to search for images.
73+
74+
`namespace` (optional; default=imacss)
75+
76+
The CSS selector namespace.
77+
78+
### Usage example
79+
80+
var imacss = require('imacss');
81+
82+
imacss
83+
.transform('/path/to/your/images/*.png')
84+
.on('error', function (err) {
85+
error('Transforming images failed: ' + err);
86+
})
87+
.pipe(process.stdout);
88+
89+
90+
## Changelog
91+
92+
### Version 0.1.0 (20140211)
93+
94+
- Initial Release. Implemented the core functionality (CLI and API).
95+
96+
## Author
97+
98+
Copyright 2014, [André König](http://iam.andrekoenig.info) (andre.koenig@posteo.de)

bin/imacss

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ var fs = require('fs'),
2828
*
2929
* @param {string} message The message that should be printed.
3030
*
31-
*
3231
*/
3332
function error (message) {
3433
console.error('\u001b[31m' + message + '\u001b[39m');
@@ -52,15 +51,37 @@ function normalizePath (normalizable) {
5251
return path.resolve(normalizable)
5352
}
5453

54+
/**
55+
* Simple function to determine if a given string
56+
* is a path.
57+
*
58+
* @param {string} str The path that should be checked.
59+
*
60+
* @return {Boolean}
61+
*
62+
*/
63+
function isPath (str) {
64+
return (~str.indexOf(path.sep) || ~str.indexOf('.css'));
65+
}
66+
5567
if (!args.glob) {
5668
return error('Please define the glob to your images.');
5769
}
5870

71+
//
72+
// Check if a css file has been defined.
73+
//
74+
if (args.cssfile && !isPath(args.cssfile)) {
75+
args.cssclass = args.cssfile;
76+
77+
delete args.cssfile;
78+
}
79+
5980
args.glob = normalizePath(args.glob);
6081

6182
imacss
6283
.transform(args.glob, args.cssclass)
6384
.on('error', function (err) {
6485
error('Converting images failed: ' + err);
6586
})
66-
.pipe(args.cssfile ? fs.createWriteStream(args.cssfile) : process.stdout)
87+
.pipe(args.cssfile ? fs.createWriteStream(args.cssfile) : process.stdout);

lib/purify.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Purify.prototype._transform = function _transform (vfile, enc, cb) {
4545
var image = {};
4646

4747
if (!vfile.contents) {
48-
return cb(new Error('There are no images at the given path.'));
48+
return cb(new Error('Please define a valid glob, which will find some image files.'));
4949
}
5050

5151
//

package.json

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
{
22
"name": "imacss",
33
"version": "0.1.0",
4-
"description": "Transforms image files to base64 encoded data URIs and embeds them into CSS files.",
4+
"description": "An application and library that transforms image files to data URIs and embeds these into a single CSS file.",
5+
"author": {
6+
"name": "André König",
7+
"email": "andre.koenig@posteo.de"
8+
},
9+
"license": "MIT",
510
"main": "index.js",
611
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
12+
"test": "gulp"
813
},
914
"bin": {
1015
"imacss": "./bin/imacss"
@@ -13,14 +18,15 @@
1318
"type": "git",
1419
"url": "git@github.com:akoenig/imacss.git"
1520
},
21+
"engines": {
22+
"node": ">=0.10.0"
23+
},
1624
"keywords": [
1725
"css",
1826
"images",
1927
"data uri",
2028
"base64"
2129
],
22-
"author": "André König <andre.koenig@posteo.de>",
23-
"license": "MIT",
2430
"bugs": {
2531
"url": "https://github.com/akoenig/imacss/issues"
2632
},

0 commit comments

Comments
 (0)